一、标签知识点整理
1.块属性标签
1.1块标签的种类
1.div标签，最常用标签，常用来划分区域和布局。
2.p标签，段落标签，放置文字，有语意。
3.标题标签（h1-h6，h1标签只写一个)。
4.列表标签：无序列表：<ul><li>......</li></ul>
有序列表：<ol><li>......</li><ol>(其中的li标签一般不独自使用)等。
1.2块标签的特点
1.独占一行（上下排列）；
2.支持设置宽高（不设置的宽高的时候，高度是内容撑开，宽度撑满父级容器）；
2.行属性标签
2.1行属性标签的种类
1.span标签，最好不嵌套其他标签。
2.a标签：（1）href属性中写目标页面的地址（服务器地址，本地文件的相对路径（../是返回上一级目录））；
（2）herf当其中什么也不写得时候会刷新页面，
（3）不写的话一般用###代替，此时不会刷新页面。
（4）herf中一个#的话有返回顶部作用。
（5）锚点作用。
2.2行属性标签特点
1.不支持设置宽高，宽高由内容撑开；
2.排成一行（左右排列）；
3.行块属性标签
3.1行块属性标签的种类
1.img：src是图片的路径，既可以是服务器地址，也可以是相对路径。
alt是图片加载失败时对图片的提示信息。
title所有标签都可以使用，鼠标悬停时显示的内容。
2.input：输入框。
3.2行块属性标签的特点
1.既可以设置宽高，又排在一行（作用排列）。
3.3标签属性转化
display：block把标签转化为块属性；
inline-block把标签转化为行块属性；
inline把标签转换为行属性；
none把标签隐藏，一般不会再css中使用，会在js中使用。
二、三种常用的选择器
2.1三种常用选择器的种类
1.标签选择器：选中页面中的所有此类标签。
缺点：不可以差别化使用样式。
2.id选择器：使用方式：#加标签名，具有唯一性（类似于身份证号），一个标签只能由一i个id，不同id标签也不相同。
缺点：当多个标签需要相同的样式的时候，需要设置多个id选择器。
3.class选择器：使用方式：.加class；使用最多的，不同标签可以使用相同的class。可以有多个，例如class=“red big”中间用空格隔开。
2.2三种常用选择器的权重
标签选择器：1；id选择器100；class选择器10。
三、浮动以及样式
1.浮动的使用
1.浮动的属性：float:right or float:left;
2.浮动的作用：让块元素排成一行的时候使用浮动，碰到父元素的时候会停止；
浮动会让行属性元素支持宽高，浮动会改变布局。（display：inline-block：不改变布局，行属性支持宽高。）
2.清除浮动的影响
1.当父元素不设置高度，高度由子元素撑开的时候，一旦子元素浮动，就会脱离父元素，父元素就会失去高度，进而影响后面的布局。
2.解决办法：（1）给父元素设置overflow：hidden。
（2）给父元素最后设置clear：both；块属性元素，也可以用尾元素进行清除，标签名：before/after{content：“内容”；或者其他css样式属性}
3.设置颜色
1.十六进制#00FFFF。
2.英文单词（red，blue等）。
3.rgb（三原色）：每个值都在0-255之间。
4.opacity：0-1（默认值时1），可以继承给子元素。不想继承给子元素的时候可以设置透明色：background-color：rgba（255，0，0，.5).
4.背景图的设置
1.背景图片：background-image：url（图片路径）
2.背景图片大小：一个值：横向固定，纵向自适应
两个值：横向和纵向大小
cover：等比例平铺，会切点小部分
contain：宽度或者高度等比例自适应，可能撑不满，可以设置background-repeat：no-repeat（背景是否重复）。
3.背景图片位置：两个值：x（left，right，center）值方向偏移量（右正方向），y（top，bottom，center）方向偏移量（下正方向）；左上角时0，0点。
5.雪碧图使用
为了性能考虑，把大的图片截取小的图片进行使用。
四、案例的实现
案例一：
1.代码展示：
css样式设置
主题内容：
2.样品展示：
案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例二</title>
<style type="text/css">
.one{
width: 600px;
}
img{
width: 150px;
height: 180px;
float: left;
margin-top: 10px;
margin-left: 10px;
}
p{
display: inline-block;
margin-top: 40px;
margin-left: 10px;
}
.first{
margin-top: 10px;
}
.one_1{
background-color: gainsboro;
font-size: 10px;
color: white;
}
.font{
color: #DCDCDC;
font-size: 14px;
}
.glod{
color: gold;
}
</style>
</head>
<body>
<div class="main">
<div class="one">
<hr />
<img src="img/img02-01.jpg"/>
<p>白蛇2：青蛇劫起</p>
<p class="one_1">3D</p><br />
<p class="font">主演：黄家康 唐小喜 张福正 魏超 赵铭洲</p><br />
<p class="first font">中国大陆 | 0分钟</p>
</div>
<div class="one">
<hr />
<img src="img/img02-02.jpg"/>
<p>燃野少年的天空</p>
<p class="one_1">2D</p><br />
<p class="font">观众评分</p>
<span class="glod">7.8</span><br />
<span class="font">主演：张一白 韩琰 彭昱畅 许恩怡 张宥浩</span><br />
<span class="font">中国大陆 | 0分钟</span>
</div>
<div class="one">
<hr />
<img src="img/img2-03.jpg"/>
<p>1921</p>
<p class="one_1">2D</p><br />
<p class="font">观众评分</p>
<span class="glod">7.2</span><br />
<span class="font">主演：黄建新 郑大圣 黄轩 倪妮 王仁君</span><br />
<span class="font">中国大陆 | 0分钟</span>
<hr />
</div>
</div>
</body>
</html>样品展示：
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
