博客列表 >浮动的应用

浮动的应用

电动机的博客
电动机的博客原创
2019年03月16日 18:12:12677浏览


课程总结

层叠样式:内联>内部>外部

常用CSS选择器:块:div p ul li  行内:b del  行内块:img input

元素内外框:marring-right..... padding-right......

浮动:float

实例

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

		}
		.contentul{line-height: 70px;}
		small{color: #ccc;}
		.hot-tv img{
			width: 210px;
			height: 320px;
		}
		.tab li{margin-left: 25px;}
		.bigshow img{
			width: 420px;
			height: 320px;
		}
		.tv-tab img{
			width: 210px;
			height: 120px;
		}
        .tv-tab{
            width: 1100px
        }
        .tv-tab li{margin:0 4px 20px;}
	</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>
 			<li class="mr">
 				<a href="">
 					<img src="static/images/g.jpg"><br>
 					<span>雪地娘子军</span>
 				</a><br>
 				<small>邱胜翊王笛演革命虐恋</small>
 			</li>

 		</ul>
 		<div class="clear"></div>
 	</div>
 	<div class="content">
 		<h2 class="l">剧集 ></h2>
 		<ul class="tab">
 			<li class="l" style="margin-top: 5px; "><a href="">最新</a></LI>
 			<li class="l" style="margin-top: 5px; "><a href="">大陆剧</a></LI>
 			<li class="l" style="margin-top: 5px; "><a href="">台剧</a></LI>
 			<li class="l" style="margin-top: 5px; "><a href="">日剧</a></LI>
 		</ul>
 		<div class="clear"></div>
        <div class="tv_show">
        	<div class="bigshow l ">
        	 <a href="">
        	 	<img src="static/images/tv.jpg"> <br>
        	 	<span>娘子军</span>
        	 </a><br>
        	 <small>邱胜翊王笛演革命虐恋</small>
        	</div>
        	<ul class="tv-tab l">
        		<li>
        		   <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/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>
        	</ul>
        </div>
 	</div>
  </div>
</body>
</html>

运行实例 »

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


 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议