Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 优酷热播页面布局-3.13
Blogger Information
Blog 18
fans 0
comment 0
visits 13496
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
优酷热播页面布局-3.13
太早的博客
Original
719 people have browsed it

总结：

行内元素:设置宽高无效,对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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post