亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 21
粉絲 0
評論 0
訪問量 24456
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
定位的種類、在優(yōu)酷中的應用
電動機的博客
原創(chuàng)
878人瀏覽過

總結(jié)

定位:position:   fixed(固定)、relative(相對) 、 absolute(絕對);   top:x   right: x; 
          

實例

<!DOCTYPE html>
<html>
<head>
	<title>優(yōu)酷-這世界很酷</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 5px 30px;}
        .header{
        	position: relative;
        	width: 100%;
        	height: 420px;
        	background: #e7e7e7;
        }
        .pic-show{
        	margin: 0 auto;
        	width: 1540px;
        	height: 420px;
        	background: url(static/images/bg.jpg) no-repeat;
        }
        .bg{background: rgba(0,0,0,0.3); width: 100%;height:100%; position: absolute;top: 0;left: 0;z-index: 99;}
        .menu_ul{position: fixed;top: 1px;left: 100px;z-index: 999}
        .menu_ul form{width: 500px;height: 40px;position: relative;left: 400px;}
        .menu_ul input{width: 500px;height: 40px;border-radius: 100px; border: none;background:rgba(234,234,243,0.5);}
        .menu_ul button{width: 90px;height: 40px;
        	border-top-right-radius:30px;
        	border-bottom-right-radius:30px;
        	background:#b30702;
        	border: none;
        	color: #fff;
        	position: absolute;top:0;right: 0; 
        	 }
	</style>
</head>
<body>
  <div class="header">
  	 <div class="pic-show"></div>
  	 <div class="bg"></div>
  	 <div class="menu_ul">
  	 	<img src="static/images/logo.png" class="l">
  	 	<form action="" method="" class="l">
  	 	  <input type="text" name="">
  	 	  <button>全網(wǎng)搜</button>
  	    </form>
  	 </div>
  	 
  </div> 
  <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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

 

批改狀態(tài):未批改

老師批語:
本博文版權(quán)歸博主所有,轉(zhuǎn)載請注明地址!如有侵權(quán)、違法,請聯(lián)系admin@php.cn舉報處理!
全部評論 文明上網(wǎng)理性發(fā)言,請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學習!
    全站2000+教程免費學