收藏
批改状态：未批改
老师批语：
总结：
行内元素:设置宽高无效,对margin仅设置左右方向有效，上下无效,不会自动进行换行(span/b/..)
例：span b
行内块:行内块状元素综合了行内元素和块状元素的特性，但是各有取舍、不自动换行 能够识别宽高(img input)
块级、行内、行内块元素相互转换
display 属性规定元素应该生成的框的类型
display:inline;转换为行内元素
display:inline-block;转换为行内块状元素
display:block;转换为块状元素
内外边距:(margin\padding)
内边距 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
浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
注意:浮动使元素的位置与文档流无关，因此不占据空间
.clear{clear: both;} 清除浮动 很重要
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="http://img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg">
<style type="text/css">
*{margin: 0; padding: 0;}
li{float: left; list-style: none;}
a{color: black; text-decoration: none;}
h2{font-family: 微软雅黑 Light;}
.clear{clear: both;}
.mr{margin-right: 10px;}
.l{float: left;}
.contents{
width: 1740px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{
line-height: 70px;
}
.hot_tv img{
width: 240px;
height: 360px;
}
span{
font-size: 15px;
}
small{
font-size: 10px;
color: #999999;
}
.tab li{margin-left: 20px;}
.k img{
width: 240px;
height: 135px;
}
.i img{
margin-left: 10px;
}
.p span{
padding: 15px;
line-height: 30px;
}
.p small{
padding: 15px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<div class="hot_tv">
<ul>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XMzk1NjM1MjAw.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E000059C3713EADBC0904C106D601?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="https://v.youku.com/v_show/id_XNDA5MjAxMzcyNA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!2~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C3EC801ADBA6B484907E37A?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="https://v.youku.com/v_show/id_XNDA4MjM0OTUyOA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!3~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C662F3FADB185E088068403?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="https://v.youku.com/v_show/id_XNDA4OTMyMDQ0NA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!4~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C416719ADC311330B03413D?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="https://v.youku.com/v_show/id_XNDA2MDEzMjQ5Mg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!5~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C0A0869859B5E5CCA0ADF28?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="https://v.youku.com/v_show/id_XNDAwMjMwODcxMg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!6~5~5~A" target="_bank">
<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="https://v.youku.com/v_show/id_XNDA4OTE1MTE3Ng==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!7~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C77A8DAADA7B2AE4A0E2B7F?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 class="content">
<div class="contentUL">
<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>
<li><a href="">英美剧</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="tv_show">
<div class="big-show l">
<a href="https://v.youku.com/v_show/id_XNDA5MDAxMzk5Mg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5~5~5~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg"><br>
<span>只为遇见你·张嘴吃糖</span>
</a><br>
<small>行走的“撩妹宝典”！霸气帅总撩动你的少女心</small>
</div>
<ul class="k p">
<li class="mr i p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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="p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 i p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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 p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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="p">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
