html + css 基础总结

文章目录

html + css 基础总结
- 模板介绍
- Demo01-写一篇博客
- Demo02-超链接和列表
- Demo03-图片使用
- Demo04-知识补充
- Demo05-百度云盘制作
- Demo06-简单表格制作
- Demo07-简历制作
- Demo08-登录表单（京东登陆界面上的账户、密码及隐私协议勾选）
- Demo09- get 请求和 post 请求的区别（表单和服务器通讯补充）
- Demo10-认识 CSS
- Demo11-容器 div 的作用
- Demo12-布局与选择器
- Demo13-样式表的层叠
- Demo14-选择器的权重
- Demo15-CSS文本属性
- Demo16-背景图的使用
- Demo17-元素浮动（上）
- Demo18-元素浮动（中）
- Demo19-元素浮动（下）
- Demo20-盒模型（上）
- Demo21-盒模型（下）
- Demo22-布局练习
- Demo23-CSS属性的缩写
- Demo24-鼠标划入效果

本文档根据【千锋教育_HTML+CSS新手快速入门全套教程-千锋前端-bilibili】整理，主要用于制作网页时能对相应属性进行快速查阅。

模板介绍

<!DOCTYPE html>声明，告诉浏览器，使用HTML5标准来解析该网页。
<head>表示网页的头部，这里的信息是对网页的整体说明。
<body>表示网页的身体，网页的内容写在这里。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页标题</title></head><body><p>P标签代表段落，因此这里的内容会独占一行</p><!--这里的内容不会显示在页面上，它通常来注释我们的程序代码--></body>
</html>

Demo01-写一篇博客

命令介绍：

<h1>...</h1> <!--1级标题-->
<h2>...</h2> <!--2级标题-->
<h3>...</h3> <!--3级标题-->
<h4>...</h4> <!--4级标题-->
<h5>...</h5> <!--5级标题-->
<h6>...</h6> <!--6级标题-->
<p>...</p> <!--段落标签，文字会独占一行-->
<i>...</i> <!--文字会出现斜体效果-->
<b>...</b> <!--文字会出现加粗效果-->
<br> <!--段内换行标记，单标签-->
<hr> <!--水平线，单标签-->
&nbsp; <!--网页上显示一个空格，对于html里手动敲空格多次对网页无效，只能识别一次-->

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><h1>论&nbsp;&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;&nbsp;学     的重要性</h1><i>2019.10.30</i><hr ><p>今天我打电话叫了一个12寸的外卖披萨</p><p>服务员告诉我</p><p>12寸的没有了，给我换两个6寸的行不行。</p><p>我想了想，说可以。</p><p>这个故事告诉我们一个道理，<br><b>数学是多么的重要啊！！！</b></p></body>
</html>

实际效果：

Demo02-超链接和列表

命令介绍：

<a href="http://bussniess.com/242321.html">全球首例3D打印眼角膜</a> <!--超链接-->
<a href="xxxx" target="_blank">点我</a>
<!--target表示目标，blank表示空白，这里表示在空白新窗口打开新页面-->
<!--无序列表-->
<ul> <!--默认实心圆--><li>无序列表项目</li>
</ul>
<ul type="disc"> <!--实心圆--><li>无序列表项目</li>
</ul>
<ul type="circle"> <!--空心圆--><li>无序列表项目</li>
</ul>
<ul type="square"> <!--实心方块--><li>无序列表项目</li>
</ul>
<!--有序列表-->
<ol> <!--默认数字--><li>有序列表项目</li>
</ol>
<ol type="1"> <!--数字--><li>有序列表项目</li>
</ol>
<ol type="a"> <!--小写字母--><li>有序列表项目</li>
</ol>
<ol type="i"> <!--大写罗马字母--><li>有序列表项目</li>
</ol>

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>百度新闻列表</title></head><body><h1>科技&nbsp;<img src="img/icon-mark.png" ></h1><hr ><ul><li><a href="http://scitech.people.com.cn/n1/2018/0925/c1057-30310849.html">中子星内“核面食”比钢硬100亿倍</a></li><li><a href="http://www.cnbeta.com/articles/tech/771233.html">蒂姆·库克分享新iPhone XS用户拍摄样张</a></li></ul><ol><li><a href="http://scitech.people.com.cn/n1/2018/0925/c1057-30310849.html">中子星内“核面食”比钢硬100亿倍</a></li><li><a href="http://www.cnbeta.com/articles/tech/771233.html">蒂姆·库克分享新iPhone XS用户拍摄样张</a></li></ol></body>
</html>
<!--无序列表-->
<ul> <!--默认实心圆--><li>无序列表项目</li>
</ul>
<ul type="disc"> <!--实心圆--><li>海底捞上市了！</li><li>我又吃上市了一个？！</li>
</ul>
<ul type="circle"> <!--空心圆--><li>海底捞上市了！</li><li>我又吃上市了一个？！</li>
</ul>
<ul type="square"> <!--实心方块--><li>海底捞上市了！</li><li>我又吃上市了一个？！</li>
</ul>
<!--有序列表-->
<ol> <!--默认数字--><li>有序列表项目</li>
</ol>
<ol type="1"> <!--数字--><li>北冥有鱼</li><li>其名为鲲</li>
</ol>
<ol type="a"> <!--小写字母--><li>北冥有鱼</li><li>其名为鲲</li>
</ol>
<ol type="A"> <!--大写字母--><li>北冥有鱼</li><li>其名为鲲</li>
</ol>
<ol type="i"> <!--小写罗马字母--><li>北冥有鱼</li><li>其名为鲲</li>
</ol>
<ol type="I"> <!--大写罗马字母--><li>北冥有鱼</li><li>其名为鲲</li>
</ol>

实际效果：

Demo03-图片使用

总结：
图片在网页上的顺序是从左到右依次排放，底部对齐，右侧空间不足以摆放下一张图片的时候，图片会自动下一行排序。
命令介绍：

<img src="data:images/1.png"> <!--图片-->
<img src="data:images/1.png" title="鼠标划上去的提示" alt="图片加载失败后的文字">
<img src="data:images/1.png" width="100px"> <!--图片宽度设置为100个像素-->
<img src="data:images/1.png" width="100px" height="100px">
<!--图片宽高度都设置为100个像素，注意宽高比例防止图片变形-->
<img src="data:images/1.png" width="100%"> <!--图片宽度占满整个屏幕-->

案例实践：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片的使用</title>
</head><body><img src="data:images/1.png"> <!--图片--><img src="data:images/1.png" title="鼠标划上去的提示" alt="图片加载失败后的文字"><img src="data:images/1.png" width="100px"> <!--图片宽度设置为100个像素--><img src="data:images/1.png" width="100px" height="100px"> <!--图片宽高度都设置为100个像素，注意宽高比例防止图片变形--><img src="data:images/1.png" width="100%"> <!--图片宽度占满整个屏幕--></body>
</html>

实际效果：

Demo04-知识补充

命令总结：

<del>...</del> <!--给文字增加删除线-->
<sup>2</sup> <!--把文字变成上标-->
<u>...</u> <!--给文字加下划线-->
<center>...</center> <!--把文字剧中-->

案例实践：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>知识点补充</title>
</head><body><del>给文字增加删除线</del> <!--给文字增加删除线-->10<sup>2</sup> <!--把文字变成上标--><u>给文字加下划线</u> <!--给文字加下划线--><center>文字居中</center> <!--把文字剧中--></body>
</html>

实际效果：

Demo05-百度云盘制作

绝对地址： 任何情况下都可以找到的地址
相对地址： 而相对地址，必须知道当前所在，才能找到
代码命令：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> <!--绝对路径-->
<a href="pages/articles/xishuo.html">相对路径</a> <!--相对路径-->

案例实践：
百度网盘文件结构如下：

demo.html 内容:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><img src="img/baidu.jpg" width="100%"><p><a href="one/one.html"><img src="img/file.png" width="60px">one</a><a href="two/two.html"><img src="img/file.png" width="60px">two</a><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></p></body>
</html>

one.html 内容：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><img src="../img/baidu.jpg" ><p><a href="../demo.html"><img src="../img/return.jpg" height="25px"></a></p><p><img src="../img/ai.png" width="60px"><img src="../img/doc.png" width="60px"><img src="../img/ai.png" width="60px"><img src="../img/doc.png" width="60px"></p></body>
</html>

two.html 内容：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><img src="../img/baidu.jpg" ><p><a href="../demo.html"><img src="../img/return.jpg" height="25px"></a></p><p><a href="three/three.html"><img src="../img/file.png" width="60px">three</a><img src="../img/ai.png" width="60px"><img src="../img/doc.png" width="60px"><img src="../img/ai.png" width="60px"><img src="../img/doc.png" width="60px"></p></body>
</html>

three.html 内容：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><img src="../../img/baidu.jpg" ><p><a href="../two.html"><img src="../../img/return.jpg" height="25px"></a></p><p><img src="../../img/ai.png" width="60px"><img src="../../img/doc.png" width="60px"><img src="../../img/ai.png" width="60px"><img src="../../img/doc.png" width="60px"></p></body>
</html>

Demo06-简单表格制作

命令介绍：

<!--表格-->
<table><tbody><tr> <!--第一行--><td>...</td> <!--第一行第一列--><td>...</td> <!--第一行第二列--><td>...</td> <!--第一行第三列--></tr><tr> <!--第二行--><td>...</td> <!--第二行第一列--><td>...</td> <!--第二行第二列--><td>...</td> <!--第二行第三列--></tr></tbody>
</table> <tr>...</tr> <!--表示一行-->
<td>...</td> <!--表示一列-->
<col> <!--代表一列-->
border="1px" <!--表格边框属性，宽度-->
cellspacing="0" <!--单元格空隙，没有该命令框会变成空心，像四处连通的水渠-->
align="center" <!--对齐方式, align="right", align="left"-->
<table width="1000px" border="1px" cellspacing="0">...</table> <!--表格总宽度为1000px（每列宽度自适应调整），表格边框1个像素，单元格空隙为0-->
<tr align="center">...</tr> <!--单元格横向居中-->
<col width="200px"> <!--该列宽度为200px-->

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>前端技术阶段划分标准</title></head><body><h3>前端技术阶段划分标准</h3><table border="1px" cellspacing="0"><tbody><col width="200px"><col width="200px"><col width="200px"><col width="200px"><col width="200px"><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>被产品怼的说不出话</td><td>跟产品互怼不相上下</td><td>怼的产品没话说</td><td>直接将产品怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户C</td><td></td><td></td><td></td><td></td></tr></tbody></table></body>
</html>

实际效果：

Demo07-简历制作

命令介绍：

<td colspan="7">...</td> <!--横向合并，列合并，把该参数添加到要合并的第一列-->
<td rowspan="4">...</td> <!--纵向合并，行合并，把该参数添加到要合并的第一行-->
<th>...</th> <!--加粗并水平居中的td-->
<colgroup span="6" width="100px">...</colgroup> <!--前纵向6列分为一组-->
<colgroup span="1" width="200px">...</colgroup> <!--后纵向1列分为一组-->

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><tbody><table border="1px" cellspacing="0"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40px" align="center"><td colspan="7">个人简历</td></tr><tr height="40px" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40px" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>电话</td><td></td><td>面貌</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px" align="center"><td>求职意向</td><td colspan="6"></td></tr></tbody></table><table border="1px" cellspacing="0"><tbody><colgroup span="6" width="100px"></colgroup><colgroup span="1" width="200px"></colgroup><tr height="40px" align="center"><th colspan="7">个人简历</th> <!--th=加粗并水平居中的td--></tr><tr height="40px" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40px" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>电话</td><td></td><td>面貌</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px" align="center"><td>求职意向</td><td colspan="6"></td></tr></tbody></table></body>
</html>

实际效果：

Demo08-登录表单（京东登陆界面上的账户、密码及隐私协议勾选）

命令总结：

<form action="https://www.baidu.com"> <!--form 必须有 action 属性，表示提交的地址--><table><tbody><tr><!--type是该按钮到底是文本，密码，单选还是提交等按钮--><!--所有需要提交的数据，input 必须有 name 属性--><td><input type="text" name="loginname"></td> <td><input type="password" name="pwd"></td></tr><tr><!--value是该按钮上显示的文字。或者说 input 按钮的文字，使用 value 属性表示--><td><input type="submit" value="提交"></td><td><input type="reset" value="重置"></td></tr></tbody></table>
</form><!--所有需要提交的数据，input 必须有 name 属性-->
<!--input 必须放在 form 标签内才能提交-->
<input type="text" name="loginname"> <!--input 是单标签-->
<input type="password" name="pwd">
<!--input 按钮文字，使用 value 属性设置其按钮上的显示文字-->
<!--
文本输入框；type="text"
密码输入框：type="password"
单选框：type="radio"
复选框：type="checkbox"
普通按钮：type="button"
提交按钮：type="submit"
重置按钮：type="reset"
文件选择框：type="file"
-->
<table width="400px">...</table> <!--表格总宽度为400px，每列宽度自适应-->

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="https://www.baidu.com"><!--整个表格总宽度600px，每列宽度自适应，表格线宽1px，表线无空隙--><table width="600px" border="1px" cellspacing="0"><tbody><tr height="40px"><td rowspan="4" align="center">总体信息</td> <!--由于表格位置中的(1,1)把第一列全合并了，所以之后的每一行都少了第一个，所以要少一个<td>...</td>--><td colspan="2"></td> <!--表格位置中的(1,2)把后面的两个都合并了--></tr><tr height="40px"><td align="right">用户名：</td><!--不加name="loginname"只是一个简单的跳转--><!--加上name="loginname"才能让用户名和密码提交到服务器--><td><input type="text" name="loginname"></td></tr><tr height="40px"><td align="right">密码：</td><td><input type="password" name="pwd"></td></tr><tr height="40px"><td colspan="2" align="center"><!--如果type="botton"，则点击没反应，因为button只是一个普通按钮--><!--value是按钮上显示的文字--><input type="submit"  value="提交"><input type="reset" value="重置"><!--类型为文件type="file"时，不需要设置value值--><input type="file">    </td></tr></tbody></table></form></body>
</html>

实际效果：

Demo09- get 请求和 post 请求的区别（表单和服务器通讯补充）

表单和服务器通讯的两种方式和差别
post：提交数据
get：获取数据
form表单在请求服务器时也提供了两种方式：

<form method="get">
<form method="post">
<!--get 请求通常表示获取数据-->
<!--post 请求通常表示提交数据-->
<!--get 请求发送的数据都写在地址栏，用户可见-->
<!--post 请求发送的数据用户不可见-->
<!--get 请求不能提交大量数据，但 post 可以，因此不要混用-->

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><form action="http://www.baidu.com" method="post"><p><input type="text" name="login"></p><p><input type="password" name="pass"></p><p><input type="submit"></p></form></body>
</html>

实际效果：
get 请求中地址栏包含提交的信息，如图所示，地址栏中显示了提交的账号和密码：

post 请求中地址栏中没有提交的信息（可以是账户和密码，也可以是搜索内容）：
既然 get 和 post 只是在传递数据的方式上不同，那是否意味着，无论获取数据还是提交数据两种方式可以混用呢？答：可以混用，但不建议混用。

Demo10-认识 CSS

用来修饰网页样式的语法叫做层叠样式表（CSS，Cascading Style Sheet）
案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><form action="https://www.miaodongketang.cn"><table width="600px" border="1px" cellspacing="0"><tbody><tr height="40px"><td rowspan="4" align="center" style="color:red;">总体信息</td><td colspan="2"></td></tr><tr height="40px"><td align="right">用户名：</td><td><input type="text" name="loginname"></td></tr><tr height="40px"><td align="right">密码：</td><td><input type="password" name="pwd"></td></tr><tr height="40px"><td colspan="2" align="center"><input type="submit" value="提交" style="width: 80px; height:30px; background-color: #41A863;">                                    <input type="reset" value="重置" style="width: 80px; height:30px; background-color: #41A863;"></td></tr></tbody></table></form></body>
</html>

Demo11-容器 div 的作用

命令总结：

<!--align 和 text-align 的区别是 text-align 要用在CSS的stytle属性中-->
<p align="center">...</p>
<p style="text-align: center;">...</p>
span，一个容器标签，不具备任何特殊功能，仅当作容器来使用。``用于包裹一段文字``，便于给文本增加样式。
div，一个通用的容器标签，不具备任何特殊功能，仅当作容器来使用。可以包裹任何内容，也可以容器直接互相包裹。
text-align:center; 让容器内部元素水平居中（让内部元素水平居中）
margin:auto; 让容器本身水平居中（让元素本身水平居中）
background-color:gray; 设定背景颜色
font-size:24px; 设定字体大小
color:white; 设定文字颜色

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!--div style="color:#555; margin: auto; width: 500px;"--><div style="color:#555; margin: auto; width: 500px;"><p style="text-align: center;"><span style="background-color: gray; color:white; font-size:24px;">千锋简介</span></p><p><b>北京千锋互联科技有限公司（简称千锋）</b>成立于2011年1月。公司总部位于北京，目前已在<span style="color:#41A863;">深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>建立分公司。</p><p>千锋旗下现有<b>教育培训、人才服务、项目研发、创业孵化等业务。</b>教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才；项目研发业务主要为企业提供APP解决方案及APP项目研发；创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。</p><p>千锋秉承着<span style="color: #F40;">“用良心做教育”</span>的理念踏踏实实的做事，<span style="color: #F40;">创办7年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</span>目前累计与国内<b>超过8200多家</b>IT相关企业建立人才输送合作，与<b>562所大学</b>建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。</p></div></body>
</html>

实际效果：

Demo12-布局与选择器

命令介绍：

#box：ID选择器，id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素，所以用来写banner，navigation和bottom等大的框架。
div：标签选择器，根据标签名称，选择对应的所有标签。
.nav：类别选择器，选择拥有该类别的多个元素。
*：通用选择器，针对页面上所有的标签都生效。

案例实践：

<!DOCTYPE html>
<!--整个网页的背景设置为灰色-->
<html style="background=#ddd;"><head><meta charset="utf-8" /><title></title></head><!--body标签在默认情况下距离页面左右两端有一定的空隙，margin:0; 可以去掉这个空隙--><body style="margin:0;"><!--整个页面分三部分，上边的banner，中部的navigation和下部的bottom--><!----><div id="banner"><!--width:100%; 让banner中的图片左右两端撑满整个屏幕。--><img src="data:images/banner.jpg" style="width:100%;"></div><!--height:80px; 容器高度设置为80px；line-height:80px; 设置字体的行高也是80px，即可保持上下居中；text-align:center; 设置容器内文字水平居中；background-color:white; 设置容器的背景颜色为白色；--><div id="navigation" style="height:80px; line-height:80px; text-align:center; background-color:white;"><!--herf="#" 表示该文字上的超链接连接到当前页面，其实无意义。text-decoration:none; text-decoration表示文本修饰，none表示无修饰，如果不加none会有下划线。color:black; 表示文字为黑色。text-decoration作为文本修饰只针对当前元素生效，不能放在父元素div中。margin:0 15px; 表示改文字的上下边距为0，左右边距分别为15px。--><a href="#" style="text-decoration:none; color:black; margin:0 15px;">首页</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">关于王力</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">产品世界</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">新闻中心</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">网络事件</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">联系我们</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">关于我们</a><a href="#" style="text-decoration:none; color:black; margin:0 15px;">网络新闻</a></div><!--height:40px; 容器高度设置为40px；line-height:40px; 设置字体的行高也是40px，即可保持上下居中；text-align:center; 设置容器内文字水平居中；font-size:17px; 设置字体大小为17px；color:gray; 设置容器中字体的颜色为灰色；--><div id="bottom" style="height:40px; line-height:40px; text-align:center; font-size:17px; color:gray;">版权所有：浙江王力门业有限公司&nbsp;技术支持派桑网络</div></body>
</html>

根据上边的代码可以看到，当页面内容越来越多时，页面难以阅读；且有很多重复样式，让工作量非常大，为此，采用样式和内容分离形式，具体如下：
我们管写在标签身上的的叫行内样式，写在style内部的叫内部样式。
接下来我们尝试把行内样式转化为内部样式：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--内部样式放在<head>...</head>中，如何确定哪个样式对应哪个标签？答：利用选择器--><!--1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。3，id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。4，在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。
————————————————
版权声明：本文为CSDN博主「隔壁郑同学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44517301/article/details/104316516--><style>/* 整个html网页的背景设置为灰色 */html {background-color: #ddd; } /* body本身和两侧有一条白色空隙，使用 margin:0; 使得body左右紧贴着网页两边 */body {margin: 0;}/* html和body都只有一个，但是div有很多个，所以不能用div作为选择器，而应该使用唯一的id，banner，navigation和botom，id */#navigation {height: 80px; line-height: 80px; text-align: center; background-color: white;}#bottom {height: 40px; line-height: 40px; text-align: center; font-size:14px; color: gray;}/* html和body都只有一个，但是a有很多个，所以也不能用a作为选择器否则针对所有超链接生效，因此此处在navigation中的a加上类别属性：class="nav"，此处针对nav这个类别设定样式 */.nav {text-decoration: none; color:black; margin: 0 15px;}/* 针对在banner下边的img设定样式，如果直接使用img {width:100%}，则针对所有img生效。*/#banner img {width: 100%;}</style></head><body><div id="banner"><img src="data:images/banner.jpg"></div><div id="navigation"><a href="#" class="nav">首页</a><a href="#" class="nav">关于王力</a><a href="#" class="nav">产品世界</a><a href="#" class="nav">新闻中心</a><a href="#" class="nav">网络事件</a><a href="#" class="nav">联系我们</a><a href="#" class="nav">关于我们</a><a href="#" class="nav">网络新闻</a></div><div id="bottom">版权所有：浙江王力门业有限公司&nbsp;技术支持派桑网络</div></body>
</html>

Demo13-样式表的层叠

命令介绍：

类别可以定义多个，比如下边给同一项定义了两个类别：
<a href="#" class="item last">秒杀活动</a>
不同类别组合出来不同的权重，样式生效优先顺序不一样。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#navigation {text-align: center;}/* 此处 #navigation 和 .last 是两个样式叠加，保证其权重优先生效。*/#navigation .last {border:none;}.item {text-decoration: none;color: black;border-right: solid 1px #808080;padding: 0 15px;}</style></head><body><div id="navigation"><a href="#" class="item">首页</a><a href="#" class="item">办公家居</a><a href="#" class="item">数码科技</a><a href="#" class="item">母婴</a><a href="#" class="item">团购</a><!--此处“秒杀活动”定义了两个类别，分别为 item 和 last，根据需要选用哪一个。--><a href="#" class="item last">秒杀活动</a></div></body>
</html>

实际效果：

Demo14-选择器的权重

命令介绍：

行内样式(1000)>ID选择器(100)>类选择器(10)>标签选择器(1)>通用选择器(0)
<...style="..."> > #box{...} > .con{...} > div{...} > *{...}
不同样式选择器的权重可叠加，当样式发生冲突时，谁的权重高，谁就生效。

案例实践：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/* #p1，这个ID选择器第2个生效，是蓝色。权重100 */#p1{color: blue;}/* 这个通用选择器第5个生效，是橘黄色。权重0 */*{color: orange;}/* .pp，这个类别选择器第3个生效，是绿色。权重10 */.pp{color: green;}/* p，这个标签选择器第4个生效，是红色。权重1 */p{color: red;}</style></head><body><!--style="color: slateblue;"这个行内样式第1个生效，是紫色。权重1000--><p class="pp" id="p1" style="color: slateblue;">猜猜我是什么颜色</p></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--下边的一堆样式选择器放一块，是为了叠加权重，确保某一项的样式优先生效：adiv a.demo a#demo adiv#demo a--><style type="text/css">a{color: yellow;} /* 1 */div a{color: green;} /* 1 + 1 */.demo a{color: black;} /* 10 + 1 */#demo a{color: orange;}  /* 100 + 1 */div#demo a{color: red;}  /* 1+100 + 1 */</style></head><body><a href="">应该是黄色</a> <div class="demo"><a href="">应该是黑色</a></div><div id="demo"><a href="">应该是红色</a></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">/* 权重100，第4生效 */#news {list-style: none;width: 370px;}/* 权重101，第3生效 */#news li {height: 40px; line-height: 40px;/* dashed：下边框是虚线，1px：宽度1px；grey：灰色； */border-bottom: dashed 1px grey;}/* 权重102，第2生效 */#news li a {color: gray;text-decoration: none;}/* 权重110，第1生效 */#news .last {border: none;}</style></head><body><ul id="news"><li><a href="">深圳欢乐谷“欢乐干线”架空单轨车追尾事件初步调</a></li><li><a href="">呼和浩特市公安局局长自杀身亡</a></li><li><a href="">参加完民企座谈会的这24位企业家怎么说？</a></li><li><a href="">吉林大学校长李元元调任华中科技大学校长</a></li><li><a href="">父亲在坠江公交遇难，儿子含泪救援80小时</a></li><li class="last"><a href="">结束15年旅美生涯 大熊猫“高高”回国养老</a></li></ul></body>
</html>

Demo15-CSS文本属性

命令介绍:

文字：颜色字体行高大小加粗倾斜首行缩进水平对齐文字修饰

案例实践：

<!DOCTYliE html>
<html><head><meta charset="utf-8" /><title></title></head><style tylie="text/css">.p1 { color:red } /* 文字颜色 */.p2 { font-family: "华文中宋" } /* 字体类型 */.p3 { font-size: 26px; } /* 文字大小 */.p4 { font-weight: bold; } /* 文字加粗 */.p5 { font-style: italic; } /* 文字倾斜 */.p6 { text-indent: 60px; } /* 首行缩进 */.p7 { text-align: center; } /* 水平对齐方式 */.p8 { line-height: 100px; } /* 行高 */.p9 { height: 100px; background-color: gray; line-height: 100px;}  /* 垂直居中 */.p10 { text-decoration: underline; } /* 文本修饰 */</style></head><body><body><ul><li class="p1">1 “双十一”过去将近一个月，各大电商、物流平台和物流企业纷纷晒出今年的成绩单，</li><li class="p1 p6">1 “双十一”过去将近一个月，各大电商、物流平台和物流企业纷纷晒出今年的成绩单，</li><li class="p2">2 其中物流平台和物流企业的成绩单直接关乎消费者享受的服务，因而更加引人注目。</li><li class="p3">3 国家邮政局监测信息显示，11月11日至16日业务高峰期间，全国邮政、快递企业共处理邮(快)件18.82亿件，</li><li class="p4">4 截至21日20时，除边远地区外，主要寄递企业揽收的邮(快)件已妥投18.3亿件，妥投率超过97%。</li><li class="p5">5 来自物流平台的统计数据同样具有说服力：今年天猫“双十一”当日物流订单量突破10亿。</li><li class="p6">6 2009年天猫“双十一”当日物流订单为26万，2010年这个数字达100万，2011年达2200万，2012年达到7200万时，</li><li class="p7">7 单点运行的传统物流体系已不堪重负，爆仓时有发生。</li><li class="p8">8 2013年5月，阿里巴巴联合“三通一达”等企业成立菜鸟网络，</li><li class="p9">9 着手打造智能物流骨干网，显著的改变和提升由此产生，</li><li class="p10">10 2013年天猫“双十一”当日物流订单达1.52亿，此后一路飙升，今年突破10亿大关，</li></ul></body>
</html>

Demo16-背景图的使用

html是最大的父元素，默认宽度撑满整个屏幕，默认高度为0。
元素的宽高占比，是相对于父元素而言的，若父元素高度为0，则子元素高度即使设置100%，大小也是0。
html元素大小是相对于浏览器窗口而言的。body是html的子元素。
body标签也是一个容器，也会独占一行，默认宽度撑满整个屏幕，默认高度为0。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">/* 可以对html和body同时设置共同属性，使html父元素和body子元素高度都铺满屏幕。 */html,body {margin: 0; /* 消除滚动条 */height: 100%; /* 高度占比100%，使html父元素和body子元素撑满整个屏幕 */}/* body标签也是一个容器，也会独占一行，默认宽度撑满整个屏幕 */body {background-image: url(imgs/dong.gif); /* 设置背景图片用url命令 *//* 设置背景图片时，图片默认以平铺方式展现，也就是一张图无限复制，铺满屏幕。若不希望图片平铺重复出现，则设置平铺方式为 no-repeat。 */background-repeat: no-repeat; /* 设置背景的位置，第一个参数是水平位置，第二个参数是垂直位置 */background-position: center top;}</style><body></body>
</html>

Demo17-元素浮动（上）

命令总结：

容器类元素，无论大小如何，都是独占一行的。正常情况排列由上至下。
浮动元素会脱离网页文档，与其他元素发生重叠如上图所示。
但是，浮动元素不会与文字内容发生重叠，文字自动环绕浮动元素。正常的div容器每个容器独占一行，即使宽度很小也会从上至下排版。
为实现三个div横向排列，则需要设置三个div浮动即可。

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">/* 设置类green的宽度、高度、背景颜色和左浮动，因此类green将浮动在类red之上 */.green {width: 100px; height: 100px;background-color: green;float: left;}/* 设置类red的宽度、高度和背景颜色 */.red {width: 200px; height: 150px;background-color: red;}/* 设置类a的宽度和背景颜色 */.a {width: 200px; background-color: green;}/* 设置类b的宽度和背景颜色 */.b {width: 700px; background-color: red;}/* 设置类c的宽度和背景颜色 */.c {width: 300px; background-color: blue;}/* 设置类a,b,c均为左浮动，高度均为200px，则会出现从网页左端开始横向排列效果。 */.a,.b,.c {float: left; height: 200px;}</style><body><p>文字环绕效果</p><div class="green"></div><div class="red">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div><p>横向排版布局</p><!--div容器无需设置其他内容，只要在样式类别中设置宽高和背景色就可以当成矩形呈现--><div class="a"></div><div class="b"></div><div class="c"></div></body>
</html>

实际效果：

Demo18-元素浮动（中）

前两种要有父元素包裹子元素。
clear: left/right/both 则不需要父元素，直接作用到当前元素使其不受浮动的影响。

命令总结:

第一种：
分别对父元素和子元素设定相同的高度:
<style>.a,.b,.c {float: left;height: 200px;}.outer {height: 200px;}
</style>
<div class="outer"><div class="a"></div><div class="b"></div><div class="c"></div></div>第二种：
overflow:auto 忽略子元素浮动的影响，父元素可以被子元素撑开:
<style>.outer {overflow:auto;}
</style>第三种：
clear: left/right/both
当前元素不受左/右/(左和右)浮动的影响。

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">/* 类a的宽度占屏幕的20%，背景颜色为橘红色。 */.a {width: 20%;/* 此处没有用backgroud-color是因为background-color限制死了只设置背景颜色。而background可以设置关于背景的所有属性，包括颜色，背景图是否重复等。如：background: orangered url(xxx.png) no-repeat.*/background: orangered;}/* 类b的宽度占屏幕的60%，背景颜色为绿色。 */.b {width: 60%;background: green;}/* 类c的宽度占屏幕的20%，背景颜色为蓝色。 */.c {width: 20%;background: blue;}/* 类a,b,c均设置为左浮动，高度为200px，此操作让a,b,c横向水平排列 */.a,.b,.c {float: left;height: 200px;}/* 类hh高度为360px，背景为灰色 */.hh {height: 360px; background: #222222;}/* 类a,b,c外部的父类设置为和a,b,c一样的高度，这样下边的类hh就不会被浮动的a,b,c遮挡。从而实现a,b,c和hh的上下排列。*/.outer {/* 正常来说子元素可以将父元素撑开，不需要设置父元素的高度了。但是由于子元素a,b,c是浮动的，不占据空间，所以无法撑开父元素的高度。因此必须要设定父元素的高度和子元素高度一致为200px。。*/height: 200px;}</style><body><!--类a,b,c被父类outer包裹，设置父类outer的高度和a,b,c一致即可和hh类上下排列不覆盖--><div class="outer"><div class="a"></div><div class="b"></div><div class="c"></div></div><!--类hh和outer类上下排列不覆盖。--><div class="hh"></div></body>
</html>

实际效果：

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>聊天对话框</title><style type="text/css">* {padding: 0;margin: 0; /*这行样式必须写，后面的章节会介绍*/}.content {list-style: none; /*将无序列表的默认样式去掉*/width: 260px;height: 380px;margin: auto; /*这个样式可以让对话框居中，不信删掉试试看？*/border: 1px dotted black; /*合并的写法，对border多个属性进行设置*/}.content .msg {clear: both;}/*此处写了两个类.content和.left，就比一个类.contentdd的样式优先级高*/.content .left {float: left;background: lightgrey;}.content .right {float: right;background: yellowgreen;}</style></head><body><ul class="content"><li class="msg left">你好?</li><li class="msg right">你好</li><li class="msg left">祝你幸福</li><li class="msg right">？？</li><li class="msg left">再见</li><li class="msg right">纳尼？</li><li class="msg right">。。。。。</li></ul></body>
</html>

Demo19-元素浮动（下）

命令总结：

浮动元素在排列时，只参考前一个元素位置即可。
右浮动的话第一个元素会在最右边，第二个挨着第一个在其左侧。浮动元素的重叠问题：
1. 浮动元素不会覆盖文字内容。
2. 浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以把图片看作时特殊的文字）。
3. 浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框等）。

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">* {padding: 0; margin: 0;}.item {width: 30%; float: left;font-size: 60px;}</style><body><div class="item" style="height: 300px; background: #008000;">1</div><div class="item" style="height: 150px; background: #0000FF;">2</div><div class="item" style="height: 100px; background: red;">3</div><div class="item" style="height: 150px; background: #4682B4;">4</div><div class="item" style="height: 250px; background: #9ACD32;">5</div><div class="item" style="height: 300px; background: sandybrown;">6</div><div class="item" style="height: 300px; background: lightcoral;">7</div></body>
</html>

实际效果：

Demo20-盒模型（上）

css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
盒模型的组成部分=content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
运行在浏览器按F12进入控制台我们会看到下图这样的区域：

content：就是元素的宽和高
border：就是盒子的边缘（边宽）
Padding：就是元素的内边距
margin：就是元素的外边距
什么是盒模型-wenqianqian1-CSDN

命令总结：

margin:0; 所有边距都为0
margin:auto; 自动设置边距，默认左右边距相等，即可达到居中效果，水平方向有效。
margin-top: 10px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 30px;

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {/*在浏览器当中，有一些元素，天生默认会自带边距，而这些边距我们大部分时候用不到。所以一开始要所有元素边距全设置为0*/margin: 0; /*将所有的元素边距都设置为0*/}#box {/*设置父元素的宽度使其恰好等于三个子元素的宽度和，否则父元素本身就是左右撑满，无法居中显示*/width: 750px;/*父元素box忽略浮动子元素的浮动，使得父元素高度可以被子元素撑开*/overflow: auto;/*margin:auto; 让父元素自动设置边距，默认左右边距相等，即可达到居中效果，水平方向有效。*/margin: auto; }.item {/*设置每张图片的宽度和高度*/width: 210px; height: 136px;/*三张图片设置左浮动，横向排列*/float:left;/*每个图的周围边距设置为20px*/margin: 20px;}</style></head><body><div id="box"><div class="item" style="background: url(imgs/01.png);"></div><div class="item" style="background: url(imgs/02.png);"></div><div class="item" style="background: url(imgs/03.png);"></div></div></body>
</html>

Demo21-盒模型（下）

命令总结：

padding: 0px; /*将所有的元素内边距都设置为0*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0; /*将所有的元素边距都设置为0*/}#box {/*宽度设置的和三个图片宽度和一致，是为了使三个图片的父元素能居中，即三张图片整体居中*/width: 870px;overflow: auto;/*由于本身box左右铺满，而margin:auto; 让父元素自动设置边距，左右边距相等，即可达到居中效果，水平方向有效。*/margin: auto; }.item {float:left;/*外边距设置为20px*/margin: 20px;border: 5px solid black;/*内边距设置为15px*/padding: 15px;}</style></head><body><div id="box"><div class="item"><img src="imgs/01.png"><br>测试文字内容</div><div class="item"><img src="imgs/02.png" ><br>测试文字内容</div><div class="item"><img src="imgs/03.png" ><br>测试文字内容</div></div></body>
</html>

Demo22-布局练习

网页设计总结:

ID选择器 #box 定从上到下的大结构分几个主体部分，比如： #head，#body 和 #bottom 等。
类选择器 .con 定每个主体部分的小类别，比如：.body_item，.body_item_first 和 .body_item_last 等。

案例实践：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 通用设置，所有元素内外边距均设置为0 */* {margin: 0; padding: 0;}/* IDhead 高 50px，背景颜色设置为 #E83828 */#header {height: 50px;background: #E83828;}/* #header .head 两个放一块是为了让其权重大于一个 #header，样式优先生效。*/#header .head {width: 1005px; height: 50px;background: #D1D3D6;margin: auto; /*居中显示*/}#banner {/* ID banner 高度设置为500px，背景颜色设置为 slateblue */height: 500px;background: slateblue;}#category {/* ID category 宽度设置为1005px，高度设置为 200px，设置了宽度这样才能居中*/width: 1005px; height: 200px;margin: auto; /*居中显示*/background: #FF359A; /*背景颜色*/}/* #category .item 两个放一块是为了让其权重大于一个 #category，样式优先生效。*/#category .item {/* 宽度设置为 125px，高度设置为 165px */width: 125px; height: 165px; /*设置大小*/padding-left: 25px; /*左填充*/padding-right:25px; /*右填充*/padding-bottom: 25px; /*下填充*/padding-top: 10px; /*上填充*/border-right: 1px dashed black; /*右边框，1像素，虚线 ，黑色*/float: left; /*左浮动*/}#category .item.first {padding-left: 0; /*取消左填充*/}#category .item.last {padding-right: 0;  /*取消右填充*/border: 0;  /*取消边框*/}/* ID case 的高度设置为 490px，如果宽度不设置，实际上是默认的左右铺满，背景颜色设置为 #eeeeee*/#case { height: 490px; background: #eeeeee; }#case .title-text {/* title 设置宽度为 1005px，设置完宽度才可以设置左右居中 */width: 1005px;margin: auto; /*水平居中*/padding-top: 20px;  /*上填充*/padding-bottom: 10px; /*下填充*/font-size: 45px; /*字体大小*/}#case .item-wrapper {width: 1000px;margin: auto; /*水平居中*/overflow: auto;  /*自动设置高度，防止因子元素浮动而高度塌陷*/}#case .item-wrapper .item {width: 320px; height: 330px; background: #9ACD32;float: left; /*左浮动*/}#case .item-wrapper .item.mg { margin-left:20px; margin-right:20px; /*左右边距*/ }#case p {width: 1005px; height: 40px; margin-left: auto; margin-right: auto; /*水平居中*/margin-top: 15px; /*上边距*/line-height: 40px; /*行高和高度一致时，文字垂直居中*/text-align: center; /*文字水平居中*/font-size: 30px; /*字体大小*/color: dimgray; /*字体颜色*/}</style></head><body><div id="header"><div class="head"></div></div><div id="banner"></div><div id="category"><div class="item first"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item last"></div></div><div id="case"><div class="title-text">Case</div><div class="item-wrapper"><div class="item"></div><div class="item mg"></div><div class="item"></div></div><p>查看更多+</p></div></body>
</html>

Demo23-CSS属性的缩写

注意缩写顺序不能乱
(div) 背景缩写：

background-color /*背景色*/
background-image /*背景图片*/
background-repeat /*背景图平铺方式*/
background: gray url(xxx/xx.png) no-repeat;
background: 颜色 背景图片 平铺方式;

border 边框缩写

border-width /*边框宽度*/
border-style /*边框样式，solid实线，dashed虚线，dotted点线*/
border-color /*边框颜色*/
border: 1px solid #D3f402;
border: 边框宽度 边框样式 边框颜色;
border: 3px dashed; /*颜色默认为黑色，只有颜色可以省略*/

font 字体缩写：

font-style: italic; /*斜体*/
font-weight: bold; /*加粗*/
font-family: arial, sans-serif; /*字体种类*/
font-size: 20px; /*字号大小*/
line-height: 35px; /*行高*/
font: italic bold 20px/35px arial,sans-serif,"微软雅黑";
font: 斜体字 加粗 字号大小/行高 默认字体,备用字体,备用字体;
font: 20px "微软雅黑";

margin 外边距缩写：

margin-top
margin-right
margin-bottom
margin-left
margin: 10px 15px 10px 15px;
margin: 上 右 下 ;

关于颜色：

color: DarkGoldenRod;
color: rgb(184,134,11);
color: rgb(红,绿,蓝);
color: #B8860B /*十六进制表示*/

Demo24-鼠标划入效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">/* 类 test 是一个空的 div，设置长宽分别为 100px，背景为黑色 */.test{width: 100px; height: 100px;background: black;}/* 类 test 矩形的鼠标划入效果是：长宽分别变为 90px，背景为粉红色 */.test:hover{width: 90px; height: 90px;background: pink;}/* 鼠标划入前没有下划线。*/.info{color: steelblue;text-decoration: none;}.info:hover{/* 鼠标划入后出现下划线。*/text-decoration: underline;}</style><body><div class="test"></div><a href="http://www.baidu.com" class="info">百度官网</a></body>
</html>