![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
今天的课程主要内容
css样式表，常用选择器
css层叠样式表:内联>内部>外部
css常用选择器：标签选择器，id,class等。
类选择器；单类，多类（类之间用空格隔开）；class="one two"
选择器分组：之间用“逗号”隔开； h1, .class,#id ;
派生选择器：后代选择器- div span ; div下面的所有span , 子元素选择器 div>span div的子集中的span
内外边距，元素之间的转化
padding: 两个值-上下：左右 三个值 上/左右/下 四个值：上右下左 ；magin同上
单边距：padding-left 等 ; magin同上
块级、行内、行内块元素相互转换： 块级-display:block 行内：display:inline 行内块：display:inline-block
浮动
float : left / right
浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动使元素的位置与文档流无关，因此不占据空间。
使用完浮动后要注意 清除浮动 clear : both
优酷模块练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0}
li{list-style: none;float: left}
a{text-decoration: none;color: #000;}
.clear{clear: both} /**/
.mr{margin-right: 10px;}
.l{float: left} /* 左浮动 */
a span{margin-top: 5px}
li small{margin-top: 2px;}
.conts{
width: 1740px;
margin: 0 auto;
}
.cont{width: 100%;
margin-top: 20px;
}
.cont-ul{line-height: 70px;}
.hot-tv img{width: 240px;height: 360px;}
.tab li{margin-right: 20px;}
.tv-tab img{width: 240px;height: 135px;}
.tv-tab img:hover{box-shadow: 0px 2px 20px skyblue}
.tv-show .tv-tab{margin-bottom: 15px;}
</style>
</head>
<body>
<div class="conts">
<div class="cont">
<div class="cont-ul">
<h2>正在热播</h2>
</div>
<ul class="hot-tv">
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C774CC7859B5D335803D155?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li >
<a href="">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="cont">
<div class="cont-ul">
<h2 class="l mr">聚集 ></h2>
<ul class="tab l">
<li><a href="">最新</a></li>
<li><a href="">大陆</a></li>
<li><a href="">日韩</a></li>
<li><a href="">热播</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="tv-show">
<div class="big-show l mr">
<a href="">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-13/ed026566424880372286e5d5bafbf28c.jpg"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</div>
<ul class="tv-tab l">
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li>
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
</ul>
<ul class="tv-tab l">
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
<li >
<a href="">
<img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>看中国：宁夏</span>
</a><br>
<small>低调的宁夏 没了四级</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
在布局中会用到很多重复的，我们可以一次搞个可以复用的布局，这样会很省事。
用了浮动过后要清除浮动
一些常用的样式可以定个类，例如左浮动 .l{ float:left }
