admin管理员组文章数量:1547185
前端系列文章目录
第一部分：前端一，前端二—— HTML与CSS
第二部分：前端三，前端四—— JavaScript
第三部分：前端五—— Node.js
第四部分：前端六—— Vue
第五部分：前端七—— React
HTML、CSS目录
- 前端系列文章目录
- 一、HTML
- 常用标签
- 1、span标签和div标签
- 2、列表
- 有序列表
- 无序列表
- 自定义列表
- 3、图片标签
- 4、超链接标签
- 5、表格标签
- 6、表单标签
- 二、CSS样式
- 样式表
- 内部样式表
- 外部样式表
- 行内样式表
- 选择器
- 类选择器
- id选择器
- 通配符选择器（所有元素外边距清零）
- 群组选择器和包含选择器
- 伪类选择器
- CSS属性
- 1、文本属性
- 2、列表属性
- 3、背景属性
- 4、浮动属性
- 盒子模型
- PS操作
- 溢出属性
- 元素类型
- 二级菜单
- 定位
- 定位案例
- 三角形案例
- 定位里的层级
- 绝对定位的深入探讨
- 1、父子关系
- 2、兄弟关系
- 让一个行内元素转换成一个块元素
- 水平、垂直居中
- 定位与浮动的区别
- 锚点
- 精灵图案例
- 自适应
- 1、宽高自适应
- 2、⭐窗口自适应
- 两栏布局
- 三栏布局（左右固定，中间自适应）
- 表单进阶
- 单选框
- 复选框
- 上传文件和隐藏字段
- 下拉菜单和文本域
- 字段集
- 三、HTML5
- H5的基础语法
- H5的语义化标签
- H5新增标签
- 增强表单
- 增强表单-input
- 增强表单-数据列表
- 增强表单-属性
一、HTML
环境：VScode
用到的插件：
Live Server:保存代码后再浏览器自动刷新，显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<center>HELLO !!</center>
</body>
</html>
HTML的基本语法：
1、< 常规标记>也叫双标记
<标记> </标记>
<标记属性= "属性值”属性=“属性值”> </标记>
标记也可叫标签或叫元素
例如: < head> </head>
2.空标记也叫单标记
<标记/>
<标记属性=“属性值”/>
例如: <br />
常用标签
<body>
<h1>我的第一个网页</h1>
<!-- color颜色
width宽度
这些都是属性-->
<hr color="green" width="600px" align="right">
<hr color="yellow" height="40px">
<hr color="red" height="30px">
<!-- noshade设置无阴影 -->
<hr noshade="">
<p>balabala</p>
<center>HELLO !!</center>
</body>
<!-- 尖角号 -->
<p>
啦啦啦啦啦 <啦啦啦啦啦>
<!--<左尖角号 >右尖角号 -->
</p>
<!--空格: 会受字体大小的影响 -->
<p>
啦啦啦啦啦 啦啦啦啦啦
</p>
<p>
<!-- 一个 占一个中文 -->
啦啦啦啦啦   啦啦啦啦啦
</p>
<!--
版权：©
商标：®
-->
<p>
版权©
</p>
<p>
商标®
商标™
</p>
<p>😂</p>
1、span标签和div标签
div：没有具体含义，用来划分页面的区域，独占一行
span：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就
占用多宽的空间距离。（由内容撑开）
<!--
div和span标签
div：没有具体含义，用来划分页面的区域，独占一行
span：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就
占用多宽的空间距离。
-->
<div>11111</div>
<div>222222</div>
<div>33333</div>
<div>111111</div>
<!--
div{}：可以直接再div中填充内容
div*3：一次创建3个div
-->
<h2>体育 <span style="color: blueviolet;">sports</span></h2>
2、列表
有序列表
1. li里面可以随意放标签，但是ol里面只能防止li ,
2.数字是自动生成的。
3. type:1,a;A,i,I
4. start:取值只能是数字（从type开始，取几位）
<ol type="A" start="3">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
无序列表
ul>li{11111111}*3————>ul下三个li
1.ul里面只能放li,li里面可以放其他标签
2.默认的是黑色的实心圆
3.type:disc,cir ,squre,none(用得多)
<!-- ul>li{11111111}*3:ul下三个li -->
<ul type="1" start="3">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<!--
1.ul里面只能放li,li里面可以放其他标签
2.默认的是黑色的实心圆
3.type:disc,cir ,squre,none(用得多)
-->
<ul type="squre">
<li>小甜心</li>
<li>小甜心</li>
<li>小甜心</li>
</ul>
自定义列表
<p>自定义列表</p>
<dl>
<dt>小甜心。。。</dt>
<dd>小甜心111</dd>
<dd>小甜心111</dd>
<dt>小甜心。。。</dt>
<dd>小甜心222</dd>
<dd>小甜心222</dd>
<dt>小甜心。。。</dt>
<dd>小甜心333</dd>
<dd>小甜心333</dd>
</dl>
3、图片标签
路径分类:绝对路径、相对路径
1、绝对路径
绝对路径是指文件在硬盘.上真正存在的路径。例如"bg.jpg"这个图片是存放在硬盘的
“E:\book\网页布局代码\第2章”目录下，那么"bg.jpg"这个图片的绝对路径就是“E:\book\网页
布\代码\第2章\bg.jpg"。
注意:绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\
第2章\bg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传
到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录
的分隔字符
2、相对路径
相对路径，就是相对于自己的留标文件位置。
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名;
<img src=' pic4.gif" />
<!--
src：放地址
相对路径
绝对路径：硬盘中的存放地址
在同一目录下：直接写图片名称
-->
<!-- http://127.0.0.1:5500/hello.html 是http协议 -->
<img src="./001.webp" alt="" width="300px" height="200px">
<img src="001.webp" alt="" width="200px" height="100px">
<!--
文件路径（但是不显示，因为图片在本地，服务器上无法加载）
这个是file协议 file:///D:/WEB/code/hello.html
-->
<img src="D:\WEB\code\001.webp" alt=""width="400px" height="200px">
第三种方式在页面打开那张图片：
<p>图片属性</p>
<img src="D:\WEB\code\001.webp" alt="图片加载失败"width="400px" height="200px">
<!-- alt="" ：页面中的提醒语句。。。。 -->
<img src="./img/002.jpg" alt="" width="400px" height="300px">
<img src="../img/微信图片_20220304094140.jpg" alt=""width="400px" height="300px">
4、超链接标签
能够实现不同页面的跳转
<a href="路径”title=" 鼠标悬停上去之后的提示信息”target= “规定在何处打开文档">内容</a>
Target属性:规定在何处打开文档。
A. target=" self"默认值
B. target="_ blank"新窗口打开
<p>超链接</p>
<!--
能够实现不同页面的跳转
<a href="路径”title=" 鼠标悬停上去之后的提示信息”target= “规定在何处
打开文档">内容</a>
Target属性:规定在何处打开文档。
A. target=" self"默认值
B. target="_ blank"新窗口打开
-->
<a href="https://www.baidu/" title="上百度，来找我" target="_blank">百度1</a>
<a href="https://www.baidu/" title="上百度，来找我" target="_self">百度240</a>
<!-- 往自己的网页跳转 -->
<a href="code_test.html">成绩查询</a>
<!-- 图片跳转 -->
<a href="code_test.html">
<img src="./img/费曼.jpg" alt="费曼" width="">
</a>
5、表格标签
表格属性
1.宽度width
2.高度 height
3.边框 border
4.边框颜色 bordercolor
5.背景颜色 bgcolor
6.水平对齐 align=“left或right或center”
7. cellspacing=” 单元格与单元格之间的间距“
8. cellpadding=" 单元格与内容之间的空隙"
行tr属性
1.高度height
2.背景颜色 bgcolor
3.文字水平对齐 align= “left或right或center”
4.文字垂 直对齐valign=“top或middle或bottom”;
单元格td属性
1.宽度width
2.高度 height
3.背景颜色bgcolor
4.文字水 平对齐align= “left或right或center”
5.文字垂 直对齐valign=“top或middle或bottom”;
注：如果一个单元格设置了宽度，影响的时一整列的
<h1>--------------表格-----------------------</h1>
<!--
width还支持百分比的表现形式，相对于父元素的百分比
body的高度由内容撑开，建立表格时设置百分比的高度不会有变化
align取值:center left right
cellspacing：单元格之间的间距
cellpadding=" 单元格与内容之间的空隙"
-->
<table border="2px" height="200px" width="400px" cellpadding="15px" cellspacing="0px" align="center" style="color: black;background-color: beige;" >
<tr height="100px" bgcolor="pink" align="left" valign="bottom">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>15</td>
<td>男</td>
</tr>
<tr>
<td width="60px" height="60px" bgcolor="#808080" valign="top" align="right">里斯</td>
<td>女</td>
<td>23</td>
</tr>
</table>
表格合并：
6、表单标签
表单的作用：收集信息
<form method="get或者post" action="向何处发送表单数据">
<input/>
A.属性type定义输入框的类型
a) 文本框type="text"
密码框type="password"
b)提交框 type=" submit"和<button>提交按钮</button> 一样
c) 按钮框type= "button" 单纯的按钮
d) 重置框type= "reset" 清空的效果
B.属性placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性、name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D. 属性value
<form/>
Form当中method的post和get的区别?
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应， 在URL中可以看到。post
是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不
到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大, 一般被默认为不受限制。但理论上, IS4 (InternetInformation Service互联网信息服务)中最大量为80KB, IS5中为100KB
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
<h2>----------------表单标签----------------------</h2>
<form action="http://baidu" method="POST" >
<!--
action中放后端地址
method:(默认为get)post(浏览器地址中不可见)、dialog、get
-->
<!-- placeholder:提示信息 -->
用户信息：<input type="" placeholder="请输入用户名" name="username">
<br>
密码：<input type="password" placeholder="请输入密码" name="userpassword">
<!-- submit:提交按钮 -->
<br>
<input type="submit" value="登录">
<button type="submit">登录</button>
<input type="rest" value="重置">
<button type="reset">重置</button>
</form>
二、CSS样式
英文全名: cascading style sheets—— cascading style sheet层叠样式表WEB标准中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。目前推荐遵循的是W3C发布的CSS3.0.用来表现XHTML或者XML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0
1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;
2)属性必须放在花括号中，属性与属性值用冒号连接。
3)每条声明用分号结束。
4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
5)在书写样式过程中，空格、换行等操作
样式表
内部样式表
在head标签里面放style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: blue;
}
h2{
color: blueviolet;
}
</style>
</head>
<body>
<h1>11111111111111111111</h1>
<h2>22222222222222222222</h2>
<h3>33333333333333333333</h3>
</body>
</html>
外部样式表
外部新建css文件，里面存放样式
css文件内容：
h1{
color: red;
}
h2{
color: green;
font-size: medium;
}
html文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- link标签引入样式 -->
<!-- 引入样式方法一 -->
<link rel="stylesheet" href="10.12-css.css" type="text/css">
<!-- 引入样式方法二-->
<style>
@import url(10.12-css.css);
</style>
</head>
<body>
<h1>11111111111111111111</h1>
<h2>22222222222222222222</h2>
<h3>33333333333333333333</h3>
</body>
</html>
扩展知识点: link和import之间的区别?
①差别1:本质的差别: link属 于XHTML标签，而@import完全 是CSS提供的一种方式。
②差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同
时被加载，而@import引用的CSS会 等到页面全部被下载完再被加载。所以有时候浏览@import加载
CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
③差别3:兼容性的差别: @import是CSS2.1提出的， 所以老的浏览器不支持，@import只有 在IE5以上的
才能识别，而link标签 无此问题。
行内样式表
样式表的优先级：行内>内部>外部
注：优先级是针对同一个标签，同一个属性
!important加在谁身上就会提高谁的优先级
<style>
@import url(10.12-css.css);
div{
color: aquamarine!important;
}
</style>
选择器
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
元素选择符/类型选择符(element选择器 )如: div{width:100px; height:100px; background:red;}
语法:元素名称[属性:属性值; }如: div.h1.im.apan.i,.sfoyo.l.l.,l.,…等
说明:
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body. div. p.jmg.e.tro…s…等.
b)所有的页面元素都可以作为选择符;
用法:
1)如果想改变某个元素得默认样式时，可以使用类型选择符;
(如:改变一个div. p. h1样式)
2)当统一文档某 个元素的显示效果时，可以使用类型选择符
(如:改变文档所有p段落样式)
类选择器
class选择器/类选择器
语法: .class名{属性:属性值;}
说明:
当我们使用class选择符时，应先为每个元素定义一个class名称
用法: class选择符更适合定义一类样式;
<head>
<style>
.div001{
background-color: green;
}
.divred{
color: blueviolet;
}
</style>
</head>
<body>
<h1>11111111111111111111</h1>
<h2>22222222222222222222</h2>
<h3>33333333333333333333</h3>
<!-- <div style="color: goldenrod; width: 500px; height: 200px; border: 2px ;">div标签</div> -->
<div class="div001">00000000000000000</div>
<div class="div001 divred">00000000000000111</div>
<!-- 不管class的名字谁在前谁在后，样式都按style中的顺序执行 -->
<div class="div001">00000000000000888</div>
<div class="divred">00000000000000222</div>
<div>00000000000000333</div>
</body>
id选择器
id选择器
语法: #id名{属性:属性值}
说明:
A)当我们使用id选择符时，应该为每个元素定义一个id属性
B) id选择符的语法格式是"#" 加上自定义的id名
C)起名时要取英文名，不能用关键字: (所有的标记和属性都是关键字)
D)一个id名称只能对应文档中-一个具体的元素对象。(唯- -性)
通配符选择器（所有元素外边距清零）
通配符 / 通配选择器
语法: {属性:属性值; }
说明:通配选择符的写法是“*”,
其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;
<style>
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
</style>
群组选择器和包含选择器
群组选择器
语法:选择符1,选择符2,选择…属性:属性值;}例: #top1,#nav1, h1 {width:960px}
说明:当有多个选择符应用相同的声明时，可以将选择符用",”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
包含选择器/后代选择器
语法:选择符1选择符2 {属性:属性值;}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如:结构:
<ul class= "list">
<li> </i>
<li> </li>
<li> </li>
</ul>
样式: .list li{background:red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 群组选择武器 */
div,p,span{
background-color: rosybrown;
}
/* 后代选择器 */
div p{
/* 被div包含的p标签 */
color: blueviolet;
background-color: antiquewhite;
font-size: 40px;
}
div p h2{
color: chocolate;
background-color: aqua;
font-size: 20px;
}
</style>
</head>
<body>
<div>00000000000000888</div>
<div>00000000000000222</div>
<div>
<p>div的孩子标签p
<h2>div的孩子p的孩子h2</h2>
</p>
</div>
<p>111111111111111</p>
<span>111111111111111111</span>
</body>
</html>
伪类选择器
伪类选择器
语法:
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link--visited--hover--active。
说明:
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序,正常顺序为:
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样, 鼠标划过的状态和点击时的状态一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a{
color: blue;
} */
/* 未访问 */
a:link{
color: orange;
}
/* 访问后 */
a:visited{
color: forestgreen;
}
/* 鼠标悬停 */
a:hover{
color: palevioletred;
}
/* 激活 */
a:active{
color: black;
}
/* 四个顺序不能变 */
</style>
</head>
<body>
<a href="http://www.baidu11">百度</a>
</body>
</html>
注意:
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
!important > 行内 > id选择器 > class选择器 > 元素选择器(权重对比针对同一个标签)
CSS属性
1、文本属性
浏览器支持的字体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 20px;
color: blue;
/* rgb表示颜色（红，绿，蓝） */
color: rgb(212, 22, 198);
/* 十六进制 */
color: #da2200;
}
.p02{
/* 谷歌默认字体：微软雅黑 */
font-family: 楷体;
/* 字体加粗 */
font-weight: 700;
font-weight: bolder;
/* 字体倾斜 */
font-style: italic;
}
/* 水平垂直位置 */
.box1{
/* left right center justify*/
text-align:center;
background-color: rgb(171, 152, 117);
}
.divp{
/* justify两端对齐 */
text-align: justify;
color: cadetblue;
}
.box2{
/* 设置行高 */
/* 垂直居中 */
line-height: 100px;
/* 水平居中 */
text-align: center;
background-color: antiquewhite;
}
/* ---------------文本间距---------------------- */
.p1{
/* 词间距 */
letter-spacing: 20px;
}
.p2{
/* 字符间距 */
word-spacing: 30px;
/* 取负值会出现交叉现象 */
word-spacing: -10px;
}
/* ---------------首行缩进---------------------- */
.p3{
/* 首航缩进只对首行生效 */
/* 默认是微软雅黑，一个汉字占16bit,要实现首行缩进就是32px */
text-indent: 32px;
/* 2em不管是什么字体，有多大，都是首行缩进两字符 */
text-indent: 2em;
}
/* ----------------文本修饰----------------- */
.p4{
/*
underline:下划线
overline:上划线
line-through:删除线
*/
color: black;
text-decoration:line-through;
}
.p5{
/* 所有转小写 */
text-transform: lowercase;
/* 所有转大写 */
text-transform: uppercase;
/* 倾斜 加粗 20px的字体大小 行高 字体 */
/* 顺序不能换 字体不能省 */
font: italic bolder 20px/1em 楷体;
}
</style>
</head>
<body>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<p class="p02">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<div class="box1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
<p class="divp">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!</p>
</div>
<div class="box2 ">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
</div>
<!-- ---------------文本间距---------------------- -->
<p class="p1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<p class="p2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<!-- ---------------首行缩进---------------------- -->
<p class="p3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<!-- -----------------文本修饰----------------- -->
<p class="p4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<!-- ------------------------font---------------------- -->
<p class="p5">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
</body>
</html>
2、列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
/*
circle 空心圆
square 实心正方形
disc 实心圆
none 啥也没有
*/
list-style-type: circle;
}
li{
border: 1px solid red;
height: 50px;
line-height: 50px;
}
.li1{
/* 图片做列表的序号 url中存放图片地址*/
list-style-image: url(../img/1020.jpg);
list-style-position: inside;
}
.li2{
list-style-position: inside;
list-style-image: url(../img/102002.jpg);
}
.li3{
list-style-position: inside;
list-style-image: url(../img/102003.jpg);
}
.box{
/* 复合写法 */
list-style: none url(../img/1020.jpg) inside;
}
</style>
</head>
<body>
<ul>
<li class="li1">信息服务平台是高校图书馆知识产权线上服务的主要载体</li>
<li class="li2">其性能直接影响知识产权信息服务的效率和效果</li>
<li class="li3">文章在简要回顾知识产权信息服务平台研究的基础上</li>
</ul>
<ul class="box">
<li>信息服务平台是高校图书馆知识产权线上服务的主要载体</li>
<li>其性能直接影响知识产权信息服务的效率和效果</li>
<li>文章在简要回顾知识产权信息服务平台研究的基础上</li>
</ul>
</body>
</html>
代码效果：
3、背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div01{
background-color: aqua;
width: 700px;
height: 700px;
/* 背景图片自适应 */
background-size: 100%;
/*
cover :把背景图扩展到足够大，使其完全覆盖背景区域，也许无法显示在背景定位区域
auto :
contain :图片会完整的显示，有时候可能会有留白
*/
/* 不重复显示 */
background-repeat: no-repeat;
/* x轴方向平铺 */
/* background-repeat: repeat-x; */
/* y轴方向平铺 */
/* background-repeat: repeat-y; */
background-image: url(../img/002.jpg);
/*
1. 20px 20px
2. 10% 10%
3. left center right
left cneter：靠左 垂直方向居中
center center:水平方向和垂直方向都居中
4. top center bottom
*/
background-position: 10% 10%;
}
.div02{
width: 100px;
height: 100px;
background-color: bisque;
}
.div03{
background-color: blueviolet;
width: 300px;
height: 3000px;
background-image: url(../001.webp);
/*
相对于浏览器的窗口位置而言的位置
fixed : 固定图片位置，使其不随滚动条滚动，设置为fixed后，只受浏览器窗口位置的限制
scroll ：随滚动条滚动
*/
background-attachment: fixed;
/* 图片大小显示的百分比 */
background-size: 35%;
background-repeat: no-repeat;
/* 让盒子模型在浏览器的中间位置显示 */
/* margin: 0 auto; */
}
.box4{
width: 300px;
height: 300px;
background-size: 100%;
/* background-image: url(../img/费曼.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
/* 复合写法（位置可以随便换） */
/* 如果在background中写了一个值或者其中的几个值，则这里面的属性会覆盖之前写过的单个属性的样式 */
background: yellow url(../img/费曼.jpg) no-repeat center fixed;
}
</style>
</head>
<body>
<div class="div01">
111111111111111
<div class="div02">
22222
</div>
</div>
<div class="div03"></div>
<!-- -----------------背景属性的复合使用---------------------- -->
<div class="box4"></div>
</body>
</html>
视觉差案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视觉差案例</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 800px;
background-color: black;
background-attachment: fixed;
background-repeat: no-repeat;
/* 图片位置居中 */
background-position: center;
}
.box1{
background-image: url(../img/deer.jpg);
}
.box2{
background-image: url(../img/deer1.jpg);
}
.box3{
background-image: url(../img/deer3.jpg);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
4、浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
}
div{
float: left;
}
/* 浮动 */
/* 如果一行太多放不下，则会回行显示 */
.box1{
width: 150px;
height: 150px;
background-color: yellow;
}
.box2{
width: 150px;
height: 150px;
background-color: red;
}
.box3，.box4{
width: 250px;
height: 250px;
}
/* .box3{
background-color: pink;
}
.box4{
background-color: purple;
/* clear: left; */
/* } */
.div02{
width: 500px;
height: 250px;
background-color: blue;
/* 清浮动：
1、clear清除（clear加在浮动元素的后一个元素身上）
none
both 左右浮动都清掉
left 清除左浮动
right 清除右浮动
之前设置了向左浮动，清除浮动时就是清除左浮动，要一一对应
2、 <div class="box1"></div>
<div class="box2"></div>
这两句代码后面加一个div，里面设置style样式
如：<div style="clear: left;"></div>
即当前浮动元素后面补一个盒子，不设置宽高，再加clear
*/
clear: left;
/*
3、overflow: hidden;哪个元素浮动就给哪个元素加
4、写固定高度
*/
}
</style>
</head>
<body>
<div class="div01">
<div class="box1"></div>
<div class="box2"></div>
</div>
<!-- 方案2 -->
<!-- <div class="box1"></div>
<div class="box2"></div>
<div style="clear: left;"></div> -->
<div class="div02">
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
盒子模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子-样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
padding设置内边距：
1个值，4个方向一样
2个值，上下，左右
3个值，上左右下
4个值，上右下左
注意：
1..兄弟关系，两个盒子垂直外边距与水平外边距问题
垂直方向，外边距取最大值.
水平方向，外边距会进行合并处理
2.父子关系，给子加外边距，但作用于父身上了,怎么解决?
1.子margin-top——>父的padding-top, 注意高度计算.
2.给父盒子设置边框
3.加浮动（给子盒子加或者给父盒子加）
4. 给父盒子加overflow:hidden.
PS操作
ps图片处理软件(美工来做图，前端来测量吸取颜色切图)
拿到设计稿之后:使用ps打开
1、图片上面右键打开方式ps
2、ps里文件=>打开
图片放大和缩小
ctrl++
ctrl+-
alt+滚动
图片的移动:
按住空格，鼠标变为小手,拖动图片
如何调整出来标尺
ctrl+r
作用:拖动参考线方便测量
视图里面找到标尺，把对勾勾选上
测量图片大小:
使用矩形选框工具(左侧竖着第二个)
如何查看数据大小( 窗口-----信息面板wh)
如何修改测量单位:
在标尺上面右键取修改单位：像素
ctrl+d ： 取消选区
选完后，想调整大小，可以右键->变换选区
吸取颜色使用吸管工具:
吸取颜色完成后，点击左下角的背景色，会右弹窗，在弹窗里面右#十六进制的颜色值可以让你复制
截图:
1、使用快捷键截图
每次只能截取一个
使用选框工具框选尼亚截取的区域
ctrl+C ctrl+n 回车 ctrl+V ctrl+S 回车 回车
2、切片工具，(裁剪工具进行切换)
使用切片工具框选你要留住的区域，点击文件，存储为web所用格式，弹窗里面点击存储，弹窗
格式:仅限图像，切片:所有用户切片
溢出属性
1、溢出属性(容器的)
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，溢出内容会显示在元素之外;
hidden:溢出内容隐藏;
scroll:滚动，溢出内容以滚动方式显示;(有没有溢出都会存在滚动条)
auto:如果有溢出会添加滚动条，没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;
overflow-y:Y轴溢出.
2、空余空间
说明:
white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit该属性用来设置如何处理元素内的空白;
normal:默认值，空白会被浏览器忽略,
nowrap:文本不会换行，文本会在同一行上继续,直到遇到<br/>标签为止;
pre ： 文本原样显示
pre-line : 只显示回车、换行，不显示空格
pre-wrap ：显示空格、回车、换行
text-overflow:clip/ellipsis ;
clip:默认值，不显示省略号(....) ;
ellipsis:显示省略标记;
元素类型
二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box{
width: 300px;
margin: 0 auto;
background-color: cornflowerblue;
color: white;
}
.item:hover{
background-color: deepskyblue;
}
.item{
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
width: 144px;
line-height: 30px;
float: left;
text-align: center;
}
.item ul{
display: none;
background-color: white;
color: black
}
.item:hover ul{
display: block;
}
.item>ul>li:hover{
color: cornflowerblue;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">
视频教程
<ul>
<li>JAVA</li>
<li>Python</li>
<li>PHP</li>
<li>GO</li>
</ul>
</li>
<li class="item">
项目实战
<ul>
<li>JAVA</li>
<li>Python</li>
<li>PHP</li>
<li>GO</li>
</ul>
</li>
</ul>
</body>
</html>
定位
绝对定位会脱离文档流
1、相对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 90px;
height: 90px;
background-color: yellow;
}
.box2{
width: 90px;
height: 90px;
background-color: green;
/* 相对定位 */
position: relative;
top: 20px;
left: 20px;
}
.box3{
width: 90px;
height: 90px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果图：
2、绝对定位
父元素有定位（相对定位）：
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 300px;
background-color: yellow;
margin: 0 auto;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
<div class="box3"></div>
</body>
效果图：
父元素无定位，子元素位置还是相对于浏览器的位置显示：
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 300px;
background-color: yellow;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
<div class="box3"></div>
</body>
效果图：
注意：子绝父相
固定定位（会脱离文档流）：
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
}
.ad{
width: 100px;
height: 100px;
background-color: green;
text-align: center;
position: fixed;
right: 0;
bottom: 0;
}
/* 以上样式会让广告栏一直处于屏幕的固定位置 */
</style>
</head>
<body>
<div class="box1"> 新闻栏</div>
<div class="ad">广告栏</div>
</body>
粘性定位：
<style>
*{
margin: 0;
padding: 0;
}
.head{
width: 100%;
height: 100px;
background-color: rgb(239, 222, 200);
}
.nav{
width: 800px;
height: 30px;
background-color: brown;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: white;
/* 粘性定位(距离顶部0px) */
position: sticky;
top: 0px;
}
.body{
width: 100%;
height: 1000px;
background-color: rgb(236, 182, 112);
}
</style>
</head>
<body>
<div class="head"></div>
<div class="nav">我是粘性定位</div>
<div class="body"></div>
</body>
定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.bigBox{
width: 903px;
height: 598px;
background-color: azure;
margin: 0 auto;
}
.small{
width: 275px;
height: 275px;
border: 6px solid #cccccc;
/* 不会对原来的文档流产生影响 */
position: relative;
margin: 0 20px 20px 0;
float: left;
}
.content{
width: 100%;
height: 100%;
}
.xiao{
width: 19px;
height: 19px;
position: absolute;
bottom: 7px;
left: 7px;
}
.inner{
width: 281px;
height: 281px;
/* background-color: white; */
position: absolute;
bottom: -1px;
right: -1px;
display: none;
}
.hafter{
width: 30px;
height: 20px;
position: absolute;
top: 15px;
left: 15px;
}
.small:hover .inner{
display: block;
}
.small:hover .content{
/* 图片半透明 */
opacity: 0.7;
}
.inner p{
position: absolute;
left: 45px;
top: 17px;
color: blue;
}
.green{
width: 19px;
height: 19px;
position: absolute;
bottom: 7px;
left: 12px;
display: none;
}
.inner:hover .green{
display: block;
}
</style>
</head>
<body>
<div class="bigBox">
<div class="small">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
<div class="small">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
<div class="small" style="margin:0 0 20px 0;">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
<!-- --------------------------------------------------------------- -->
<div class="small">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
<div class="small">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
<div class="small" style="margin:0 0 20px 0;">
<img class="content" src="../img/定位案例01.png" alt="">
<img class="xiao" src="../img/定位案例02.png" alt="">
<div class="inner">
<img class="hafter" src="../img/定位案例03.png" alt="">
<img class="green" src="../img/定位案例04.png" alt="">
<p>好好敲代码</p>
</div>
</div>
</div>
</body>
</html>
三角形案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: aqua;
}
/* 上三角 */
.box1{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
/* border-right: 50px solid transparent; */
/* 或者如下rgb显示，最后一个为0 */
border-right: 50px solid rgb(0, 0, 0,0);
}
/* 下三角 */
.box1{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
/* border-right: 50px solid transparent; */
/* 或者如下rgb显示，最后一个为0 */
border-right: 50px solid rgb(0, 0, 0,0);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
定位里的层级
z-index:数值;
/*数值大的在上层，也可以设置负值，同样数值大的会在更上层显示*/
绝对定位的深入探讨
1、父子关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
top: 10px;
left: 10px;
/* 要想子盒子盖住父盒子：
注意：给父盒子加z-index是没有用的 */
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
2、兄弟关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
.box2{
width: 200px;
height: 200px;
background-color: brown;
position: absolute;
top: 100px;
left: 100px;
}
/*
绝对定位中，z-index哪个数值大，哪个就在上层显示
*/
</style>
</head>
<body>
<div class="box"> </div>
<div class="box2"></div>
</body>
</html>
让一个行内元素转换成一个块元素
让一个行内元素转换成一个块元素：
1、display:block;
2、position:absolute;
3、float:left;
水平、垂直居中
如图所示将盒子移动到正中心：
.box3{
width: 400px;
height: 400px;
background-color: rgb(207, 129, 129);
position: absolute;
top: 50%;
left: 50%;
/* 在向左上方移动盒子本身的一半高度和宽度 */
margin-top: -200px;
margin-left: -200px;
/* 此时盒子处于屏幕的正中心 */
}
父子关系：
<style>
.box4{
width: 400px;
height: 400px;
background-color: rgb(207, 129, 129);
margin: 0 auto;
position: relative;
}
/* --------------------------------------------------------------------------------------- */
.child{
width: 200px;
height: 200px;
background-color: rgb(93, 180, 113);
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*
margin-top和margin-left不呢呗设置成-50%，子盒子的位置是相对于父盒子而言的
*/
}
</style>
</head>
<body>
<div class="box"> </div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="child"></div>
</div>
</body>
定位与浮动的区别
float : 半脱离，形成文字环绕的效果
absolute : 全脱离文档流，不会形成文字环绕的效果
锚点
锚点的作用：页面不同区域的跳转，使用a链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
/* width: 200px; */
float: right;
list-style: none;
/* 固定定位 */
position: fixed;
right: 0;
top: 45%;
}
li{
width: 100px;
text-align: center;
height: 20px;
line-height: 20px;
border: 1px solid rgb(9, 9, 9);
}
div{
width: 95%;
height: 600px;
background-color: beige;
border-top: 1px solid blue;
font-size: larger;
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#a1">京东秒杀</a>
</li>
<li>
<a href="#a2">双11</a>
</li>
<li>
<a href="#a3">9.9特卖</a>
</li>
<li>
<a href="#a4">新品尝鲜</a>
</li>
<li>
<a href="#a5">特价专区</a>
</li>
</ul>
<div id="a1">京东秒杀</div>
<div id="a2">双11</div>
<div id="a3">9.9特卖</div>
<div id="a4">新品尝鲜</div>
<div id="a5">特价专区</div>
</body>
</html>
注意：<a href="#a1"京东秒杀</a> 中herf当中是锚点的名字
精灵图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 103px;
height: 32px;
margin: 10px;
background-color: aquamarine;
float: left;
background-image: url(../img/精灵图.png);
}
.div1{
background-position: -205px -111px;
}
div>a{
text-decoration: none;
}
.div2{
background-position: -205px -74px;
}
.div3{
background-position: -205px -37px;
}
.div4{
background-position: -205px 0px;
}
.div5{
background-position: 0px -155px;
}
.div6{
background-position: -205px -148px;
}
</style>
</head>
<body>
<div class="div1">
<a href="http://www.cyberpolice/"></a>
</div>
<div class="div2">
<a href="https://ss.knet/verifyseal.dll?sn=2008070300100000031&ct=df&pa=294005"></a>
</div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
</html>
自适应
1、宽高自适应
自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
宽度自适应高度自适应
(1)宽度自适应
元素宽度的默认值为auto
(2)高度自适应
元素高度的默认值{height:auto;}
浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)
方法2:在浮动元素下方添加空块元素,并给该元素添加声明: clear:both;height:0;overflow:hidden;
(缺点:在结构里增加了空的标签,不利于代码可读性，且降低了浏览器的性能)
方法3:万能清除浮动法
伪元素
1) :after(与content属性-起使用，定义在对象后的内容。)
如: div.after{content:rl(logo.jpg);}
div:after{content:"文本内容*;}
2) :before:与content属性一起使用，定义在对象前的内容。
如: div:before{content: 在其前放内容*;}
3) : first-letter:定义对象内第一个字符的样式。
4) : first-line:定义对象内第一行文本的样式
伪元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 第一个字符加样式 */
div::first-letter{
font-size: 30px;
color: red;
}
/* 第一行加样式 */
div::first-line{
background-color: bisque;
}
/* 最前面增加内容 */
div::before{
content: "头部增加";
}
/* 最后面增加内容 */
div::after{
content: "尾部增加";
}
</style>
</head>
<body>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</div>
</body>
</html>
解决高度塌陷问题的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left,.right{
width: 100px;
height: 100px;
float: left;
}
.left{
background-color: yellow;
}
.right{
background-color: red;
}
.content{
width: 200px;
height: 200px;
background-color: green;
}
/* 解决高度 塌陷的办法 */
/*
法一：
外层div的高度写死
缺点：如果浮动过多，换行，就会出现问题
*/
/* .box{
height: 100px;
} */
/*
法三：溢出隐藏
缺点：
*/
.box{
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<!-- 法二： -->
<!--
加一个空的div,清除浮动
缺点：可读性降低
-->
<!-- <div style="clear:both"></div> -->
</div>
<div class="content"></div>
</body>
</html>
高度塌陷的第四种解决方案（当然还要给相应的元素设置其他定位等属性才能实现）：
.content::after{
content: "";
clear: both;
display: block;
width: 0;
height: 0;
/* 不占位隐藏 */
/* display: none; */
/* 占位隐藏 */
visibility: hidden;
}
注意：.content是class中的名字
2、⭐窗口自适应
盒子根据窗口的大小进行改变
设置方法: html,body(height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100%;
background: yellow;
}
.child1{
width: 100%;
height: 50%;
background: green;
}
.child2{
width: 100%;
height: 50%;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
两栏布局
实现方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
html,body{
height: 100%;
}
.leftBox{
width: 200px;
height: 100%;
background-color: yellow;
float: left;
}
.rightBox{
/* 不能设置宽度，否则就不能宽度自适应了,还会出现滚动条 */
height: 100%;
background-color: greenyellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="leftBox"></div>
<div class="rightBox"></div>
</body>
</html>
实现方法二：
calc()函数的使用：
calc(函数:用于动态计算长度值。
需要注意的是+运算符前后都需要保留一个空格, 例如: width: cal(100% - 10px);
任何长度值都可以使用calc(函数进行计算;
calc()函数支持*+“,”-“,”*", "/"运算;
calc(函数使用标准的数学运算优先级规则;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
html,body{
height: 100%;
}
.leftBox{
width: 200px;
height: 100%;
background-color: yellow;
float: left;
}
.rightBox{
width: calc(100% - 200px);
height: 100%;
background-color: greenyellow;
float: right;
}
</style>
</head>
<body>
<div class="leftBox"></div>
<div class="rightBox"></div>
</body>
</html>
三栏布局（左右固定，中间自适应）
实现方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.left,.right{
width: 200px;
height: 100%;
}
.left{
background: rgb(164, 175, 222);
float: left;
}
.right{
background: rgb(164, 175, 222);
float: right;
}
.center{
height: 100%;
/* width: calc(100% - 400px); */
margin-left: 200px;
margin-right: 200px;
background-color: rgb(234, 242, 240);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
实现方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.left,.right{
width: 200px;
height: 100%;
}
.left{
background: rgb(164, 175, 222);
float: left;
}
.right{
background: rgb(164, 175, 222);
float: right;
}
.center{
height: 100%;
width: calc(100% - 400px);
background-color: rgb(234, 242, 240);
/* 不能忘了浮动 */
float: left;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.shang,.xia{
width: 100%;
height: 50px;
background-color: rgb(75, 75, 245);
}
.middle{
height: calc(100% - 100px);
width: 100%;
}
.left,.right{
width: 150px;
height: 100%;
background-color: rgb(107, 174, 223);
}
.left{
float: left;
}
.right{
float: right;
}
.center{
height: 100%;
width: calc(100% - 300px);
float: left;
background-color:rgb(237, 242, 245);
}
</style>
</head>
<body>
<div class="shang"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="xia"></div>
</body>
</html>
效果图如图所示：
表单进阶
单选框
<input type="radio">
<body>
<div>满意度调查</div>
<div>
<!--
name一样就可以只选一个
checked="checked"-----默认选项
-->
<input type="radio" name="aaa" checked="checked">非常满意
</div>
<div>
<input type="radio" name="aaa">满意
</div>
<div>
<input type="radio" name="aaa">一般
</div>
<div>
<input type="radio" name="aaa">不满意
</div>
<div>性别调查</div>
<div>
<input type="radio" name="bbb" id="man" checked="checked">
<!-- for=" " 点字也可以选中 -->
<label for="man">男</label>
</div>
<div>
<input type="radio" name="bbb" id="woman">
<label for="woman">女</label>
</div>
</body>
复选框
<input type="checkbox">
<body>
<div>(复选框)爱好</div>
<div>
<input type="checkbox" name="aaa" id="a1">
<label for="a1">篮球</label>
<input type="checkbox" name="aaa" id="a2">
<label for="a2">羽毛球</label>
<input type="checkbox" name="aaa" id="a3">
<label for="a3">排球</label>
</div>
</body>
上传文件和隐藏字段
<input type="text" value="text文本框" disabled>
<div>图片上传</div>
<div>
<input type="image" src="../img/102002.jpg">
</div>
<div>隐藏按钮</div>
<div>
<input type="hidden" value="带给后端的个人信息">
</div>
<div>禁用</div>
<div>
<button disabled>注册</button>
<br>
<input type="radio" disabled>不满意
<br>
<input type="text" value="text文本框" disabled>
<br>
<!-- 只读 -->
<input type="text" value="readonly:text文本框只读" readonly>
</div>
下拉菜单和文本域
select的属性：
size：可以显示的个数
multiple：可以多选
option的属性：
value：提供给后端要用到的数值
selected：默认选中
<body>
<div>收货地址</div>
<!--
select的属性：
size：可以显示的个数
multiple：可以多选
option的属性：
value：提供给后端要用到的数值
selected：默认选中
-->
<select size="1">
<option value="陕西">陕西</option>
<option value="辽宁">辽宁</option>
<option value="黑龙江" selected>黑龙江</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>
</body>
多行文本域：textarea
注意：textarea的默认值写在双标签外面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
width: 300px;
height: 300px;
/* resize: vertical ----->垂直方向放大
resize: horizontal;----->水平方向放大
resize : none ----->两个方向都不能放大
*/
/* resize: vertical; */
resize: horizontal;
}
</style>
</head>
<body>
<div>文本域</div>
<!--
textarea如果要控制宽高，可以用css设置他的width 和height
placeholder：文本内的提示内容
-->
<textarea name="" id="" placeholder="请输入文本内容"></textarea>
</body>
</html>
字段集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset{
border: 1px solid rgb(172, 172, 228);
}
legend{
color: rgb(172, 172, 228);
}
</style>
</head>
<body>
<fieldset>
<legend>性别</legend>
<input type="radio" name="aaa">男
<br>
<input type="radio" name="aaa">女
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="bbb">音乐
<br>
<input type="checkbox" name="bbb">绘画
</fieldset>
</body>
</html>
三、HTML5
H5的基础语法
一、HTML5 发展史
HTML5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳,并成立了新的HTML工作团队。
HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。
2012年12月17日，万维网联盟(W3C) 正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。
2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML) 。在这个版本中，新功能不断推出，以帮助Web应用程序的作者,努力提高新元素互操作性。0
本次草案的发布，从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等， 同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。
二、HTML5的浏览器兼容
支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本，Chrome (谷歌浏览器)，Safari, Opera等; 国内的遨游浏览器(Maxthon) ，以及基于IE或Chromium (Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
常用的五大浏览器有: lE,chrome,firefox,safari,opera
H5的语义化标签
案例：
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
header,footer{
height: 50px;
line-height: 50px;
background: orange;
color: white;
font-size: 40px;
text-align: center;
}
section{
height: calc(100% - 100px);
}
nav,aside{
height: 100%;
width: 200px;
background: rgb(177, 176, 176);
float: left;
}
main{
height: 100%;
width: calc(100% - 400px);
float: left;
background: rgb(177, 176, 176);
}
nav>figure,.ulcontent{
text-align: center;
}
article{
padding: 45px ;
height: 32%;
background: white;
margin-bottom: 20px;
}
article>header,article>footer{
height: 25px;
font-size: 20px;
line-height: 25px;
}
article{
margin-top: 10px;
}
</style>
</head>
<body>
<header>Header</header>
<section>
<nav>
<figure>nav</figure>
<ul class="ulcontent">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
</nav>
<main>
<article>
<header>article-header</header>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<footer>article-footer</footer>
</article>
<article>
<header>article-header</header>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!
</p>
<footer>article-footer</footer>
</article>
</main>
<aside>
<figure>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque nam debitis quos veritatis nemo et magnam
voluptas dolore eum totam asperiores
voluptatibus natus quisquam blanditiis molestias aspernatur, consectetur accusantium expedita!</figure>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
H5新增标签
音频标签:
video元素定义视频
<video src="movie.ogg" controls="controls">Video元素</video>
audio元素定义音频
<audio src="someaduio.wav" >Audio元素</audio>
controls属性:如果出现该属性，则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像，直到用户点击播放按钮。
<body>
<h1>音频</h1>
<audio src="../music_video/宝藏挖掘机 - 《余味》林俊呈：你走以后，我还记得你每一次皱眉.mp3" controls loop ></audio>
<!--
controls : 控制栏
loop : 循环属性
autoplay : 自动播放
muted : 静音
poster : 海报
-->
<h1>视频</h1>
<video src="../music_video/时代少年团-时代少年团《百忧戒》预告视频 (预告版)(标清).mp4" controls poster="../img/002.jpg" width="300px" height="200px"></video>
</body>
增强表单
增强表单-input
Type= "color” 生成一个颜色选择的表单
Type= "tel” 唤起拨号盘表单
Type= “search” 产生一个搜索意义的表单
Type= "range” 产生一个滑动条表单
Type= "number” 产生一个数值表单
Type= "email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type= “date” 限制用户必须输入日期
Type= "month” 限制用户必须输入月类型
Type= “week” 限制用户必须输入周类型
Type= "time” 限制用户必须输入时间类型
Type= “datetime-local” 选取本地时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 颜色选择 -->
<form action="">
<!-- 表单中默认的提交方式是get方式 -->
<div>
<input type="color" name="color">
<input type="submit">
<!-- name="color" 给定name属性，向后台提交数据 -->
</div>
<br>
<!-- 邮箱 -->
<div>
邮箱：
<input type="email" name="email">
<input type="submit">
</div>
<br>
<!-- 地址 -->
<div>
url地址(完整地址)：
<input type="url" name="url">
<input type="submit">
</div>
<br>
<!-- 电话 -->
<div>
电话：
<input type="tel" name="tel">
<!-- 只能在手机上使用 -->
<input type="submit">
</div>
<br>
<!-- 滑块效果 -->
<div>
滑块效果：
<input type="range" name="range" min="1" max="100" value="1" step="5">
<!-- 不写值默认是50
min="1" max="100" 最大最小值
value="1" : 设置最初显示的值
step="5" :步长（每滑动一次走多少）
-->
<input type="submit">
</div>
<br>
<!-- 数字类型 -->
<div>
数字类型：
<input type="number" name="number" min="1" max="100" value="1" step="5">
<!--
min="1" max="100" 最大最小值
value="1" : 设置最初显示的值
step="5" :步长（每滑动一次走多少）
-->
<input type="submit">
</div>
<br>
<!-- 搜索 -->
<div>
搜索：
<input type="search" name="search">
<!-- 比普通文本框多了一个一键清除的功能 -->
<input type="submit">
</div>
<br>
<!-- 日期 -->
<div>
日期：
<br>
天数选择：<input type="date" name="date">
<input type="submit">
月份选择：<input type="month" name="month">
<input type="submit">
周选择：<input type="week" name="week">
<input type="submit">
详细日期选择：<input type="datetime-local" name="datetime-local">
<input type="submit">
</div>
</form>
</body>
</html>
增强表单-数据列表
<body>
<input type="text" list="mylist">
<!-- list="mylist" : 用id名字关联list列表 -->
<datalist id="mylist">
<option value="手机"></option>
<option value="手机"></option>
<option value="手机"></option>
<option value="手机"></option>
</datalist>
</body>
增强表单-属性
<!-- 用户名 -->
<div>
用户名：
<input type="text" name="text" required pattern="[0-9][A-Z]{3}">
<!-- pattern="[0-9][A-Z]{3} : 第一个是0到9的数字，第二个、第三个、第四个是A到Z的字母 -->
<input type="submit">
</div>
<br>
<!-- 邮箱 -->
<div>
邮箱：
<input type="email" name="email" autofocus required multiple>
<!--
autofocus : 自动获取焦点（只有一个控件上有效）
required : 要求为必填项，不能为空
multiple : 可以填写多个地址，用逗号隔开
-->
<input type="submit">
</div>
如果有什么不合适的地方欢迎各位友友批评指正!!!!!!!
版权声明：本文标题：前端一（HTML、CSS） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727191330a1101458.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论