简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >优酷热播页面布局-3.13

优酷热播页面布局-3.13

太早的博客
太早的博客原创
2019年03月14日 19:57:43717浏览

总结：

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

运行实例 »

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


上一条：模仿优酷布局的练习下一条：第2天作业
html
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多