总结:浮动:在一个div里面有用到浮动,那么在div结束前(/div)之前加一组div来清除浮动; margin-right;向左靠齐,右边依次隔开; margin:0 auto; 上面边距为0,其他三面为自动,可以理解为其他三面居中;
<!DOCTYPE html>
<html>
<head>
<title>优酷-这个世界很酷</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="\phpstudy/demo3/1.ico">
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;
float:left;
}
.mr{margin-right: 10px;} /*margin-right;向左靠齐,右边依次隔开;*/
.l{float:left;} /*左浮动*/
.tab li{margin-right:30px;} /*margin-right;向左靠齐,右边依次隔开;*/
a{color:#000;text-decoration:none;} /*将a标签改为黑色,并消除下划线*/
.clear{ clear:both;} /*清除浮动*/
small{color:red;}
.contents{
border:1px solid red;
margin:0 auto; /*上面边距为0,其他三面为自动,可以理解为其他三面居中;*/
width:1400px; /* 定义宽度*/
}
.content{
width:100%;
margin-top:20px;
}
.contentul{line-height: 70px;} /*设置div里面的行高,*/
.hot_tv img{ /*设置class为hot_tv下面的img标签->设置大小*/
width:223px;
height:360px;
}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentul">
<h2>正在热播</h2>
</div>
<ul class="hot_tv l">
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/a.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li >
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/b.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/c.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/d.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/e.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/f.jpg"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>是的,很冷!</small>
</li>
</ul>
</div>
<div class="contentul">
<h2 class="l">剧集></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 mr">
<a href="">
<img src="\phpstudy/demo3/tv.jpg" height="295px" width="456px;"><br>
<span>呵呵:夏天吗?</span>
</a><br>
<small>***:是的,很冷!</small>
</div>
<ul >
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="\phpstudy/demo3/tv3.jpg" width="223px"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!-- 在一个div里面有用到浮动,那么在div结束前(/div)之前加一组div来清除浮动 -->
<!-- /*margin-right;向左靠齐,右边依次隔开;*/ -->
<!-- margin:0 auto; /*上面边距为0,其他三面为自动,可以理解为其他三面居中;*/ -->
