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

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

總結(jié)

定位：position:   fixed（固定）、relative（相對(duì)） 、 absolute（絕對(duì)）;   top:x   right: x; 
          

實(shí)例

<!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="">臺(tái)劇</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

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

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

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

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)