Web前端开发
关注
分享
扫一扫
OSurer
这个作者很懒，什么都没留下…
展开
-
HTML 吸顶灯效果实现
1.首先写好导航栏，这里以oppo官网的导航栏为例，html写导航栏时这里给它一个“nav”的id2.body内添加脚本 <script type="text/javascript"> window.onload = function () { // 吸顶灯效果 // 找到网页中的导航栏 ...原创 2020-02-15 19:07:46 · 1463 阅读 · 0 评论 -
HTML 返回顶部功能实现
1.首先设置一个返回顶部的标签<div id="totop"> <a href="javascript:;" id="btn">顶部</a></div>如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能，这里为了有效果的返回顶部，我们设置引入一个空脚本2.在body添加脚本 <scr...原创 2020-02-15 17:14:05 · 6253 阅读 · 6 评论 -
Web前端开发——CSS3之3D变换综合案例
1. 效果图鼠标未放在图片上时显示图片，鼠标悬停在任意一副图片上时图片翻转，显示文字2. 思路设置四个父层div标签，每个父层div包含图片和文字，舞台div表标签包含四个父层div标签。这里的主要问题是图片盒子和文字盒子的摆放问题，一开始显示的是图片，翻转后是文字，因此我们让图片盒子和文字盒子重叠在一起，图片盒子在上层，文字盒子在下一层，如何使两张图片重合在一起呢...原创 2020-02-08 16:42:58 · 628 阅读 · 0 评论 -
Web前端开发——div标签父层与子层大小关系
1. div标签未定义父层大小时父层自适应子层大小<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ ...原创 2020-02-07 20:05:14 · 1265 阅读 · 0 评论 -
Web前端开发——CSS3之3D变换
1. 内容2D变换仅是在电脑屏幕平面的变换，而3d变换则是空间三个方向的变换，可以是单个方向，也可以三个方向组合，3D变换用的也是transform属性，不同的是rotate（）要加上单个方向的轴系如rotateX（），同时在3D变换时需要使用transform-style属性声明使用的是3D变换，为了让视觉更好的看出是3D变换，增添了一个perspective属性，它的作用好比在舞台...原创 2020-02-07 16:27:42 · 434 阅读 · 0 评论 -
Web前端开发——CSS3之过渡与动画
目录1. 内容2.过渡transition2.1 基本用法2.2 案例3. animation动画3.1 内容3.2 案例3.2.1 案例13.2.2 案例21. 内容2.过渡transition2.1 基本用法prooerty的属性名如果只有一个直接写上该属性名即可，若是多个属性，则属性名之间用逗号隔开，如果是所有属性，则用...原创 2020-02-06 22:04:10 · 1011 阅读 · 0 评论 -
Web前端开发——CSS3之2D变换：transform属性
1. 内容这里主要介绍旋转和缩放属性2.旋转transform:rotate()用法为：transform:rotate( *deg)，其中*表示数字，数字为正顺时针旋转，为负逆时针旋转，webstorm可用trsf快速扩展；<!doctype html><html lang="en"><head> <meta c...原创 2020-02-06 20:44:11 · 414 阅读 · 0 评论 -
Web前端开发——CSS3之文字与文本
1. 内容2. text-shadow属性2.1 基本用法text-shadow用法与上一节的box-shadow类似2.1 文字描边水平和竖直位移为0，模糊的范围值根据经验来设定，这里设为3px，不同的字号大小取值时不一样的，这样就可以达到一个描边的效果。2.2 浮雕效果由效果图可见它非常类似于一个查起浮雕的效果，由代码可见是把文字颜色设为...原创 2020-02-06 18:38:35 · 369 阅读 · 0 评论 -
Web前端开发——CSS3之圆角边框与阴影
目录1. 内容2. CSS新特性3. 浏览器3.1 浏览器前缀3.2 浏览器支持度4.圆角边框border-radius4.1 基本用法4.2 案例14.2 案例24.3 案例35.阴影box-shadow1. 内容2. CSS新特性CSS3应用比较多的新特性：文本的阴影效果； 鼠标悬停动态效果。比如鼠标悬停在图片上可...原创 2020-02-06 17:20:07 · 1224 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之层定位
目录1. 内容2. 层定位概述3.固定定位position:fix3.1 案例13.2 案例24.相对定位position:relative4.1 保留文档流的原位置4.2 相对于直接父元素5. 绝对定位position:absolute5.1 不保留文档流的原位置5.2 相对static定位以外的第一个父元素5.2.1 一般情况5.2.2 ...原创 2020-02-06 15:07:53 · 1334 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之浮动定位
目录1. 内容2.float2.1 float用处2.2float属性特点3. clear3.1 clear属性3.2 应用3.2.1 单方向清除浮动的用法3.2.2 页脚清除浮动用法4. 案例1. 内容<!DOCTYPE html><html><head> <meta http-equ...原创 2020-02-05 19:48:08 · 1387 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之文档流定位
1. 内容2. block3. inline这里显示为lnline元素通常是指block元素display为inline元素值得注意的是，inline元素之间有一个间距的问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2020-02-05 12:18:51 · 305 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之定位机制概述
文档流定位时浏览器的默认定位机制，文档流定位就像书写时一样，从左到右，从上到下，只不过有的元素会单独的占用一行，比如div，连续两个div元素是它会自动换行；浮动定位就是让单独占据一行的元素在同一行能够排列，比如在同一行中显示两个div；层定位就是可以使元素像图层一样能够叠加或重合在一起，这是就需要用到层定位...原创 2020-02-05 11:17:59 · 264 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之盒子模型（Ⅱ）padding、margin属性
1. 对浏览器默认的设置清零默认的浏览器会给它一个默以值，这个默认值包括字体字号，还包括每个盒子它的margin属性值和padding属性值所以为了正确布局，首先我们就要对浏览器默认的属性值进行清零，我们通常采用一个全局的样式，*作为样式的名字进行设定： *{ margin: 0; padding: 0; ...原创 2020-02-04 21:44:32 · 675 阅读 · 0 评论 -
Web前端开发——CSS布局与定位之盒子模型（Ⅰ）
1. 盒子模型1.1 盒子概念页面当中所有元素都可以看成一个盒子，每个盒子都占据着定的页面空间。它可以指的是页面上的个区域，或者是图片，导航栏、列表、表格等等段落1.2 盒子组成盒子模型首先要有内容，也就是盒子里面装着的东西，这个内容我们用content来表示 ；内容占有一定的页面空间，我们通常用height它的高度，还有width他的宽度来表示，比如说当前的盒...原创 2020-02-04 15:39:37 · 945 阅读 · 0 评论 -
Web前端开发——CSS样式（Ⅲ）列表、表格样式
1. 列表这里的列表样式指的是无序列表u1、有序列表ol的共用样式1.1 list-style表示将列表的所有子样式，都放在一个属性当中声明出来1.2 list-style-image它可以规定这个列表的标号是一幅图片，起到美化界面的效果1.2.1 文件组织形式images内是一幅作为标号的图片1.2.2 测试代码<!doctyp...原创 2020-02-04 11:45:50 · 7006 阅读 · 0 评论 -
Web前端开发——CSS样式（Ⅱ）背景、超链接样式
目录1. CSS背景1.1 基本属性1.2 文件组织形式1.3 测试代码1.4 效果图2. CSS超链接2.1 链接的四种状态2.2 测试代码2.3 效果图1. CSS背景1.1 基本属性background-color 背景颜色可以那些颜色值，包括RGB函数来设置它background-image背景图片我们需要添加一个ur...原创 2020-02-03 17:39:24 · 2200 阅读 · 1 评论 -
Web前端开发——CSS样式（Ⅰ）文本与文字样式
目录1. 单位2. 颜色3. 文本3.1 字符间距letter-spacing3.2行高line-height3.2.1 基本概念3.2.2 行高的应用——居中垂直对齐效果3.3 对齐方式text-align3.4装饰线text-decoration3.4.1 基本用法3.4.2装饰线的应用——去掉超链接下划线4. 字体4.1 基本用法...原创 2020-02-03 16:33:44 · 2264 阅读 · 0 评论 -
Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型css选择器可分为标签选择器、类别选择器、ID选择器，这里的三种类型主要针对内嵌样式和单独文件样式而言1.1标签选择器1.1.1 测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style ty...原创 2020-02-03 14:12:39 · 495 阅读 · 0 评论 -
Web前端开发——CSS样式之CSS添加方法
目录1. 行内2.内嵌样式3.单独文件3.1 文件组织形式3.2 网页文件1.htm3.3 网页文件2.htm3.4 style.css文件3.5效果图4. 优先级4.1 内嵌样式4.2 外部样式表文件4.3 效果图4.4 完整代码4.4.1 style.css4.4.2 网页html文件CSS添加方法可分为行内添加、内嵌样式添...原创 2020-02-02 16:03:38 · 1712 阅读 · 0 评论 -
Web前端开发——CSS样式之CSS概述及语法
1. CSS概述CSS全称为Cascading Style Sheets层叠样式表，HTML规定网页的内容,CSS规定内容的样式，内容和样式相分离，便于修改样式2. CSS 语法上面为浏览器默认样式，下面为通过css设置的样式，设置的代码为：内容的样式设置通过选择器来实现的，p指的是选择器对p标签生效，因此想要设定不同标签的样式或同种标签不同样式涉及到css选择...原创 2020-02-02 13:55:50 · 452 阅读 · 0 评论 -
Web前端开发——HTML之HTML标签（Ⅵ）语义化 em、strong、dl、dt、dd、
目录1. Web语义化2. em和strong标签2.1 测试代码2.2 效果图3. 自定义列表dl、列表项dt、 描述dd3.1 测试代码3.2 效果图1. Web语义化让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容2. em和strong标签2.1 测试代码<!DOCTYPE html><html la...原创 2020-02-01 21:33:43 · 967 阅读 · 3 评论 -
Web前端开发——HTML之HTML标签（Ⅴ）form、input、select、textarea
1. 表单form表单：是一个区域，采集用户信息表单元素：文本框、按钮、单选、复选、下拉列表、文本域格式：<form action= "数据处理网页" >表单元素</form>表单元素是为了收集用户信息，form的action属性表示将收集来的信息交由那个页面处理，这个页面是web后端的一个页面2. 文本框、密码框input—...原创 2020-02-01 18:03:55 · 634 阅读 · 0 评论 -
Web前端开发——HTML之HTML标签（Ⅳ）div、ol、li、table
目录1. 区域div标签1.1 测试代码1.2 效果图2. 无序列表ul、li2.1 测试代码2.2 效果图3. 有序列表ol、li3.1 测试代码3.2 效果图4. 表格4.1 表格的两种应用4.2 table基本标签用法4.2.1测试代码及效果图4.3表头单元格th4.3.1 代码及其效果图5. 综合案例1. 区...原创 2020-02-01 15:05:54 · 3453 阅读 · 0 评论 -
Web前端开发——HTML之HTML标签（Ⅲ）img
目录1. img标签格式2. img图片路径3. 几种相对路径4. 案例4.1 效果图4.2 组织形式4.3 代码1. img标签格式插入图像时使用img标签，img标签是单个标签，格式为：<img src="路径+文件名" alt="路径无效时要显示的文字">2. img图片路径路径可分为相对图片路径和绝对路径绝对路径：以根目...原创 2020-01-31 23:40:45 · 441 阅读 · 0 评论 -
Web前端开发——HTML之HTML标签（Ⅰ）h1~h6、p、br、pre、span、hr
目录1 HTML标签1.1 标题 h1~h61.1.1 测试代码1.1.2 运行结果1.2 段落 p1.2.1 测试代码1.2.2 运行结果1.3段内换行 br1.3.1 测试代码1.3.2 运行结果1.4空格字符1.4.1 测试代码1.4.2 运行结果1.5预留格式 pre1.5.1 测试代码1.5.2 运行结果1....原创 2020-01-31 12:52:15 · 6313 阅读 · 0 评论 -
Web前端开发——HTML之乱码问题
1.几种编码格式ASCII：数字、英文字母、符号进行了编码，但没有中文编码GB2312：简体中文进行了编码，但没有其他编码Unicode：所有语言，但体积过大UTF-8：所有语言，占用空间更小因此UTF-8为主流的编码格式2.乱码原因源文件保存时的编码与源文件声明<meta charset="编码方式">不一致时，就会出现乱码问题3. 测试...原创 2020-01-30 16:32:45 · 1749 阅读 · 0 评论