简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css的层叠样式，常用的css选择器，元素的显示和内外边距，及浮动的运用-第五期php培训-3.13
Blogger Information
Blog 4
fans 0
comment 0
visits 2802
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
css的层叠样式，常用的css选择器，元素的显示和内外边距，及浮动的运用-第五期php培训-3.13
Yzw的博客
Original
585 people have browsed it


1.优酷的模块布局，运用浮动，及内外边距大量运用。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优酷-这世界很酷</title>
	<link rel="icon" type="image/x-icon" href="static/images/1.ico">
	<style type="text/css">
		*{margin: 0;padding: 0;}
        .mr{margin-left: 10px;}
		li{list-style: none; float: left;}
		a{color: #000;text-decoration: none;}
		.clear{clear: both;}/*清除浮动*/
		.contents{
			width: 1200px;
			margin: 0 auto;
		}
		.content{
			width: 100%;
			margin-top: 20px;

		}
		.contentul{line-height: 60px;}
		.hot_tv img{
			width: 190px;
			height: 290px;
		}
		.small-tv li{margin:0px 5px 18px;}
		/*定义图片尺寸，*/
        .tab li{margin-left: 20px;}
        .o{float: left;}
        .big-show img{
        	width: 390px;
        	height:282px;
        	margin-right: 5px;
        }
        
        .small-tv img{
        	width: 190px;
        	height: 110px;
        }
	</style>
</head>
<body>
<div class="contents">
	<div class="content">
		<div class="contentul">
			<h2>正在热播</h2>
		</div>
		<ul class="hot_tv">
			<li>
				<a href="">
					<img src="static/images/a.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li class="mr">
				<a href="">
					<img src="static/images/b.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li class="mr">
				<a href="">
					<img src="static/images/c.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li class="mr">
				<a href="">
					<img src="static/images/d.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li class="mr">
				<a href="">
					<img src="static/images/e.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li class="mr">
				<a href="">
					<img src="static/images/f.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
		</ul>
		<div class="clera"></div>
	</div><!-- 正在热播 -->
	<div class="content">
		<div class="contentul">
			<h2 class="o ">剧集  ></h2>
			<ul class="tab o">
				<li>最新</li>
				<li>大陆剧</li>
				<li>英美剧</li>
				<li>日韩剧</li>
				<li>港台剧</li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="tv-show">
			<div class="big-show o ">
				<a href="">
					<img src="static/images/tv.jpg"><br>
					<span>都挺好</span>
				</a><br>
				<small>大幅度发到付</small>
			</div>
			<ul class="small-tv">
				<li class="mr">
				<a href="">
					<img src="static/images/tv1.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv2.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv3.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv4.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv5.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv5.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv3.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			<li>
				<a href="">
					<img src="static/images/tv4.jpg"><br>
					<span>宁夏多少度</span>
		        </a><br>
				    <small>风景传单车队</small>
			</li>
			</ul>
		</div>
		<div class="clear"></div>
	</div><!-- 剧集 -->
</div>
</body>
</html>

运行实例 »

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

总结：浮动的运用，也要清除浮动。

Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！