前端入门

web前端入门到实战：CSS实现8种炫酷按钮

今天给大家分享8种炫酷按钮的CSS实现。1.3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：3DButton1CSS:.button-3d-1{position:relative;background:orangered;bo

大前端世界·2025-07-20 15:02

前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比

从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指

·2025-07-12 05:03

Web前端入门：JavaScript 运算符 == 和 === 有什么区别？

运算符JavaScript运算符是真的多，尤其是ES6之后还在不停的加运算符，其他编程语言看JS就像怪物一样，各种骚操作不断~~运算符分类1、算术运算符算术运算符的作用就是用来基础计算，跟小学课本一样，包含：加+，减-，乘*，除/，取余（也叫做取模）%，指数**，自增++，自减--。只是需注意：乘号不再是x，除号也不再是÷！与我们学过的运算法则一样，乘法与除法优先级比加减法高，如果要改变优先级，需

液态不合群·2025-06-23 20:42

黑马前端入门学习笔记Day1

1.Web标准构成：主要包括结构（HTML，最重要）、表现（CSS）和行为（JS）。2.HTML语法规范：大部分双标签，单标签、3.VSCode工具①!+Tab快速生成页面骨架（英文下的!）②LiveServer插件实时预览页面③shift+alt+上箭头（下箭头）复制一行④ctrl+d选定多个相同数位单词⑤ctrl+alt+下箭头（上箭头）添加多个光标⑥ctrl+h查找替换⑦ctrl+g快速定位

zhenzhenlaile·2025-06-10 19:05

如何开始学习前后端？收藏这篇就够了。最适合新手学习的前后端开发学习路径。初学者入门指南，零基础入门到精通。

目录一、前端开发：构建用户界面的基石1.基础入门：HTML+CSS+JS（3小时前端入门教程）2.框架进阶：Bootstrap（优极限Bootstrap教程）3.核心深化：JavaScript高级（黑马程序员

2301_77640853·2025-05-26 06:03

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

无论是前端入门者还是资深开发者，FcDesigner都是一个理想的工具，帮助他们更高效地创建和部署复杂的表单应用。源码地址:Github|Git

低代码研究员·2025-05-23 09:18

html&css学习笔记——CSS2基础

学习视频：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频P57-147（以下笔记为作者学习并参考尚硅谷相关学习资料整理）目录二、CSS2基础1.CSS编写位置1.1行内样式

我睡觉时超困·2025-05-02 17:08

前端入门级项目——带你实现一个全栈博客项目(Ejs+Node.js+MongoDB)

博客项目做完有一段时间了，今天来回顾一下项目的完整流程及实现，顺便复习一下有关知识点。一、博客架构分析若想要实现一个能够满足客户要求的项目，不仅要注重细节的实现，更要在项目最初就设计好各模块以及各个接口，按照逻辑逐一实现其功能。对于博客项目我们可以分为两大部分：一、前台(展示给客户的)二、后台服务器（提供给管理者数据）。接口描述及定义前台：①get’/’提供首页②get‘/p’提供某篇文章的描述③

MonsterQy·2025-04-30 19:08

OpenAI SDK 前端入门探索

本文介绍了如何使用OpenAISDK在TypeScript或JavaScript中访问OpenAIRESTAPI。GitHub仓库：openai-node1.安装首先，你需要安装OpenAISDK。可以通过以下命令进行安装：npminstallopenai2.使用说明本库的完整API文档可以在api.md文件中找到，并且还提供了许多代码示例。以下代码演示了如何使用聊天完成API。示例代码新建一个i

liumenging·2025-03-28 20:02

HTML+CSS案例展示(CSS3D效果旋转相册)

参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate

hacalili·2025-03-23 18:28

【前端入门】应该了解和知道的几个国内外前端开发资源网站

与大家分享一下几个国内外前端开发资源网站国际资源MDNWebDocs(MozillaDeveloperNetwork)用途：MDN是Web技术领域最全面的文档库之一，涵盖了HTML、CSS、JavaScript以及浏览器API等。链接:https://developer.mozilla.orgW3Schools用途：适合初学者学习Web技术，提供从基础到进阶的教程，同时还有在线练习环境。链接:ht

爱上大树的小猪·2025-03-17 11:01

适合前端入门的Go语言开发框架fiber

适合web前端开发者入门的go框架(fiber)FIBER：高效、极速、极简的WEB框架Fiber是一个借鉴Express的Web框架，建立在Go语言写的最快的FasthttpHTTP引擎的基础上。皆在简化零内存分配和提高性能，以便快速开发。不想阅读下面的内容直接进入主题fiber官网fiber的特点强大的路由静态文件服务性能出众内存占用低与ExpressAPI高度相似中间件和Next支持快速的服

weixin_45969116·2025-03-13 04:54

前端入门HTML篇

前端学习HTML篇[W3school：https://www.w3school.com.cn/html/index.asp]HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。//src为属性名"photo.jpg"为属性值页面标题一级标题二级标题段落内容标签是什

JackHell.·2025-03-05 17:11

前端入门实践手册

文章目录最简单的node服务器最简单的node服务器参考视频教学链接：https://www.zhihu.com/zvideo/1323742450507354112consthttp=require('http');//1、创建一个httpserver服务http.createServer(function(request,response){//这是请求头response.writeHead(

千篇不一律·2025-03-05 13:31

2021中高级前端面试题合集，大厂内部资料

Google，FireFox，…）下载，安装前端开发工具vscode，下载、安装node、npm、webpack、webpack-cli、cnpm，配置前端开发环境下载、配置PHP和MySQL第二个阶段，前端入门

萌萌猫咪·2025-02-24 11:58

前端入门：JavaScript基础介绍

一、JavaScript介绍Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协

虞锦雯·2024-09-15 00:28

前端入门题目

第1题if(false){vara=1;letb=2;}console.log(a);console.log(b);解析：//输出undefinedReferenceError:bisnotdefinedvar不会产生块级作用域,let会产生块级作用域。第2题vara;if(false){a=1;letb=2;}console.log(a);console.log(b);解析：//输出Refere

kidding723·2024-09-06 01:51

【前端入门】HTML5全攻略

HTML概述HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是由国际最著名的标准化组织。Web标准的构成（重点）主要包括结构（structure）、表现（presebtation）、行为（Behavior）三个方面。结构：结构用于对网页元

isun1·2024-08-24 17:42

web前端入门到实战：7道简单的 JavaScript 面试题，三个月没招到一个前端开发工程师

你能做什么?遵循这个建议：“熟能生巧”。通过投入足够的时间，更好地定期深入了解JavaScript，将改善你的编码，并顺便提高你的面试技巧。在这篇文章中，你会发现7个乍一看很简单，但实际上很棘手的JavaScript面试题。虽然一开始这些问题看起来是随机的，但是它们试图与JavaScript的重要概念挂钩。所以你最好在下次面试前练习一下!1.意外的全局变量问题在以下代码中，typeofa和type

大前端世界·2024-02-20 14:51

跟着pink老师前端入门教程-day25

4、阿里百秀首页案例4.1技术选型方案：我们采取响应式页面开发方案技术：bootstrap框架设计图：本设计图采用1280px设计尺寸4.2屏幕划分分析①屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的②屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局③屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改

axiu呀·2024-02-15 05:08

跟着pink老师前端入门教程-day24

四、移动端WEB开发之响应式布局1、响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时响应式尺寸划分，也可以根据

axiu呀·2024-02-15 05:37

web前端入门到实战：CSS开发中的十大错误用法

自从接触前端软件开发以来，我发现开发猿一直在努力征服着CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。你也一定听到过开发人员的抱怨：“我们只需要向左边移动五个像素，但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”所以，这篇文章就和大家来聊一聊CSS中的十大错误的做法。1.不要滥用类

大前端世界·2024-02-13 04:53

跟着pink老师前端入门教程-day23

苏宁网首页案例制作设置视口标签以及引入初始化样式设置视口标签以及引入初始化样式设置公共common.less文件1.新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要2.关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px3.划分的份数我们定为

axiu呀·2024-02-11 07:55

前端入门：（五）JavaScript 续

10.浏览器存储10.1Cookie的概念和使用Cookie是一种存储在用户计算机上的小型文本文件，用于跟踪和识别用户。Cookie通常用于存储用户的偏好设置、会话信息等，可以通过JavaScript进行读取和设置。//示例：设置和读取Cookiedocument.cookie="username=JohnDoe;expires=Thu,18Dec202412:00:00UTC;path=/";v

星光闪闪k·2024-02-09 18:32

跟着pink老师前端入门教程-day21+22

5.4常见flex布局思路5.5背景线性渐变语法：background:linear-gradient(起始方向,颜色1,颜色2,...);background:-webkit-linear-gradient(left,red,blue);background:-webkit-linear-gradient(lefttop,red,blue);背景渐变必须添加浏览器私有前缀起始方向可以是：方位名词

axiu呀·2024-02-08 20:37

跟着pink老师前端入门教程-day20

二、移动WEB开发之flex布局1、flex布局体验1.1传统布局与flex布局传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持建议：1.如果是PC端页面布局，我们还是传统布局。2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.

axiu呀·2024-02-07 02:49

跟着pink老师前端入门教程-day19

一、移动WEB开发之流式布局1、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2常见移动屏幕尺寸注：以上

axiu呀·2024-02-07 02:13

给想学前端的小白整理了一下学习路线

第一阶段：前端入门1.Html52.Css3第二阶段：JavaScript①JavaScript基础语法②JavaScript高级（WebAPI/DomBom）③JavaScript框架（jQuery）

前端你鹏哥·2024-02-07 02:34

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景（Day 2）

来源：黑马程序员pink老师前端入门教程目录I.Emmet语法①快速生成HTML结构语法②快速生成CSS样式语法③快速格式化代码II.复合选择器①后代选择器※②子选择器※③并集选择器※④伪类选择器❀链接

进击的文文文·2024-02-06 08:39

【CSS】复合选择器、元素显示模式、背景、CSS的三大特性以及一些小工具

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。

君和-·2024-02-06 08:08

web前端入门开发，CSS复合选择器，知乎上转疯了！

前端的兴起前端真正兴起和开始频繁出现在大家的视线里，大概是在十年前。彼时的Web开发基本是由后端主导，前端能做的只是校验一下数据、操作一下DOM。（其中数据检验是JS产生的根本原因：当时网络太慢，在服务端检验数据并反馈给用户，让用户知晓输入错误，这个流程太长、反应太慢，因此通过脚本在用户端完成第一步校验，既方便了用户，又减轻了带宽的压力。）即使06年jQuery发布并风靡全球，以及XMLHttpR

高级Java面试题大全·2024-02-06 08:06

跟着pink老师前端入门教程-day18

3、CSS33D转换生活中的环境是3D的，照片就是3D物体在2D平面呈现的例子特点：近大远小，物体后面遮挡不可见3.1三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴：水平向右注意：x右边是正值，左边是负值y轴：垂直向下注意：y下面是正值，上面是负值z轴：垂直屏幕注意：往外面是正值，往里面是负值3.23D移动translate3d3D移动在2D移动的基础上多加了一个可以移动

axiu呀·2024-02-05 15:48

跟着pink老师前端入门教程-day16

二十七、CSS3进阶1、CSS32D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform）可以简单理解为变形移动：translate；旋转：rotate；缩放：scale1.1二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术1.22D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面

axiu呀·2024-02-05 15:47

跟着pink老师前端入门教程-day14+15

2.6main主体模块制作HTML：品优购快报更多[特惠】备战开学季全民半价购数码[公告】品优稳占家电网购六成份额[特惠】百元中秋全品类礼券限里领[公告】上品优生鲜享阳澄湖大闸蟹[特惠】每日享折扣品优品质游花费减飞机花费花费花费花费花费花费花费花费花费花费CSS/*声明字体图标*/@font-face{font-family:'icomoon';src:url('../fonts/icomoon.

axiu呀·2024-02-05 15:17

跟着pink老师前端入门教程-day17

2、CSS3动画动画（animation）是CSS3中就要有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果2.1动画的基本使用制作动画分为两步1.先定义动画2.再使用（调用）动画1.1用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{width:100px;}10

axiu呀·2024-02-05 15:13

前端入门第三天

目录一、CSS定义二、CSS引入方式三、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器5.画盒子四、文字控制属性1.字体大小2.字体粗细3.字体倾斜4.行高1.行高-垂直居中5.字体族6.font复合属性7.文本缩进8.文本对齐方式1.水平对齐方式-图片9.修饰线10.颜色五、调试工具六、综合案例一、CSS定义1.基础选择器找标签2.文字控制属性文字大小、颜色键值对：color

qingxi_ran·2024-02-05 13:16

若川视野·2024-02-04 16:33

前端入门第二天

目录一、列表、表格、表单二、列表（布局内容排列整齐的区域）1.无序列表（不规定顺序）2.有序列表（规定顺序）3.定义列表（一个标题多个分类）三、表格1.表格结构标签2.合并单元四、表单1.input标签基本使用（type）2.input标签占位文本（placeholder）3.radio单选框（namechecked）4.file多文件上传（multiple）5.下拉菜单（selectoption

qingxi_ran·2024-02-01 13:42

前端入门第一天

目录HTML超文本标记语言——HyperTextMarkupLanguage标签语法：双标签：单标签——只有开始标签，没有结束标签基本骨架：标签的关系:注释：标题标签：（新闻标题、文章标题、网页区域名称、产品名称）特点：强调：段落标签：文本格式化标签：编辑图像标签：路径：相对路径：绝对路径：超链接标签：强调：音频标签：视频标签：综合案例：HTML超文本标记语言——HyperTextMarkupLa

qingxi_ran·2024-02-01 13:11

web前端入门到实战：仅3行核心css代码的rate评分组件，秀到头皮发麻

用css实现一个rate评分❗核心代码也就三行效果图原理梳理如下：去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮；把5个radio单选框反向排列❗；代码这是我事先生成好的iconfont一个很简

大前端世界·2024-02-01 13:31

Web前端入门 - HTML JavaScript Vue

ps：刚开始学习web前端开发，有什么不正确、不标准的内容，欢迎大家指出~Web简介90年代初期，Web1.0，静态页面，不和服务器交互，网页三剑客指Dreamweaver、Fireworks、Flash2000年代中期，Web2.0，动态页面，HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。Ajax、jQuery等技术。2010年代，移动互联网，响应式设计、单页面应用

小小爱1990·2024-02-01 12:02

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端

橘子味红烧肉·2024-02-01 10:16

黑马pink老师Web前端入门笔记（二）

Web前端入门二、HTML标签（一）学习目标（二）HTML语法规范（三）HTML基本结构标签（四）开发工具（五）HTML常用标签1、语义标签：2、标题标签(重要)：3、段落和换行标签(重要)：4、文本格式标签

耿天霸·2024-02-01 10:13

web前端入门到实战：js函数与作用域,了解函数基本概念

通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制包含条件判断if，switch选择;循环forwhile；下面js的函数及作用域,学习掌握知识点:1.函数是什么?形参和实参2.函数里面的arguments3.作用域和预解析4.闭包和立即执行实例解析。什么是函数？简单来说是为了提高代码的复用性，写一遍可以多次使用，把特定的功能语句打包

大前端世界·2024-02-01 10:32

Web前端入门学习笔记 HTML、CSS、Javascript、Jquery

Web学习笔记文章目录一.前言参考资料二.HTML基础HTML概述img标签Div标签表单Web语义化三.CSS样式CSS概述CSS添加方法选择器CSS文本样式CSS背景样式CSS超链接列表，表格样式四.CSS布局与定位概述盒子模型CSS定位概述文档流定位浮动定位层定位弹性盒子布局网格布局精灵图五、CSS3盒子圆角边框阴影文字与文本2D转换过渡效果3D变换六、JavaScript加入JS代码的方法

love is sour·2024-01-31 21:28

0基础学习php、前端还是python?

先来看看这三种语言，php主要用于编写网页，前端对于网站来说，通常是指网站的前台部分，前端入门也很简单，不过近两年的被炒的很热，供求严重失衡。现在来说说Python，Python

老男孩Python·2024-01-30 15:26

跟着pink老师前端入门教程-day11

3、CSS三角网页中常见一些三角形，使用CSS直接画出来即可，不必做成图片或字体图标4、CSS用户界面样式4.1什么是界面样式界面样式：更改一些用户操作样式，以便提高更好的用户体验（更改用户的鼠标样式、表单轮廓、防止表单域拖拽）4.2鼠标样式cursor语法：li{cursor:pointer;}，设置或检索在对象上移动的鼠标指针采用合众系统预定义的光标形状4.3轮廓线outline给表单添加ou

axiu呀·2024-01-30 09:25

跟着pink老师前端入门教程-day09

二十二、定位22.1为什么需要定位1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子2.当我们滚动窗口时，盒子是固定屏幕某个位置的解决方法：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且介意压住其他盒子。22.2定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

axiu呀·2024-01-30 09:24

跟着pink老师前端入门教程-day10

22.10定位叠放次序z-index在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）语法：选择器{z-index:1;}注意：1.数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上2.如果属性值相同，则按照书写顺序，后来居上3.数字后面不能加单位4.只有定位的盒子才有z-index属性22.11定位拓展11.1绝对定位的盒子居中加