实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="icon/x-img" href="images/1.ico">
<style type="text/css">
*{margin:0;padding: 0px;}
.clear{clear:both;}
li{list-style: none;}
a{color: #333;text-decoration: none;font-size: 16px;}
span{color: #ccc;font-size: 12px;}
h2{line-height: 26px;font-size: 25px;margin:0 auto;}
.contents{width: 100%;margin-bottom: 20px;}
.content{width: 1200px;margin:0 auto; }
.text{margin:0 0 20px 0;height: 26px;line-height: 26px;}
.text li{float: left;}
.text li a{margin:0 10px;}
.show{width: 1200px;height: 340px;margin:0 auto;}
.show li{float: left;}
.img1{width: 192px;height: 288px;margin-right: 8px;}
.img2{width: 192px;height: 108px;}
.img_l{margin-left: 8px;}
.img_t{margin-top: 8px;}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="text">
<h2 style="margin-top: 100px;">正在热播</h2>
</div>
<div class="show">
<ul>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">闯堂兔3</a></li><br>
<li><span>闯堂兔的穿越之旅</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">黑色四叶草</a></li><br>
<li><span>黑色暴牛骑士团</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">闯堂兔3</a></li><br>
<li><span>闯堂兔的穿越之旅</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">闯堂兔3</a></li><br>
<li><span>闯堂兔的穿越之旅</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">遇见你真好 第一季</a></li><br>
<li><span>单身青年的相识相知</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">闯堂兔3</a></li><br>
<li><span>闯堂兔的穿越之旅</span></li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div class="contents">
<div class="content">
<div class="text">
<a href=""><h2 style="float: left;">剧集 ></h2></a>
<ul>
<li><a href="">最新</a></li>
<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="show">
<div style="float: left;">
<img src="https://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg" width="394px" height="280px">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</div>
<div>
<ul>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css层叠样式表:内部\外部\内联:
外联样式表是共享的,可以多个页面调用
内部样式表 针对单个文档
内联样式针对单个元素
常用css选择器:
id选择器,以"#"来定义 特殊性:唯一
类选择器, 以"."来定义 用于描述一组元素的样式
(类选择有单类和多类之分,即一个元素可以用一个class或者多个class)
标签选择器,标签
*号是css中的通配符，意思是所有的标签都有的属性，
表示所有的标签都遵循的统一样式。
如何选择选择器:
选择器的分组：选择器就可以分享相同的声明 写法:用逗号将分组中的选择器分开
派生选择器:(通过元素文档中位置的上下文关系来定义样式 优点:使标记更加简洁)
子元素选择器 子选择器使用了大于号（子结合符）
块级,行内,行内块等元素:
块级元素:能够识别宽高，独占一行，多个块状元素标签写在一起，默认排列方式为从上至下
行内元素:设置宽高无效,对margin仅设置左右方向有效，上下无效,不会自动进行换行
行内块:行内块状元素综合了行内元素和块状元素的特性，但是各有取舍、不自动换行 能够识别宽高(img input)
块级、行内、行内块元素之间的相互转换
display 属性规定元素应该生成的框的类型
display:inline;转换为行内元素
display:inline-block;转换为行内块状元素
display:block;转换为块状元素
内边距 padding
元素的内边距在边框和内容区之间;
特点:设置内边距会撑开元素框;
设置单边内边距:
padding-left
padding-right
padding-bottom
padding-top
复合写法:padding:上 右 下 左 padding:上下 左右 padding:上 左右 下;
外边距:margin
围绕在元素边框的空白区域是外边距
设置单边外边距:
margin-top
margin-right
margin-bottom
margin-left
复合写法:margin:上 右 下 左 margin:上下 左右 margin:上 左右 下; margin:0 auto;(auto意思是设置等宽空白)
浮动:
float 属性实现元素的浮动, 属性值:left right;
浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止;
注意:浮动使元素的位置与文档流无关，因此不占据空间。
