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

搜索
博主信息
博文 21
粉絲 0
評論 0
訪問量 24455
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
完成優(yōu)酷導航
電動機的博客
原創(chuàng)
957人瀏覽過

總結：

理解：float、 position在實戰(zhàn)中的應用


實例

*{margin: 0;padding: 0;}
		li{list-style: none; float: left;}
		a{color: #000;text-decoration: none;}
		.clear{clear: both;}
		.mr{margin-right: 10px;}
		.mt{margin-top: 20px;}
		.r{float: right;}
		.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: 520px;
        	background: #072439;
        }
        .pic-show{
        	margin: 0 auto;
        	width: 1540px;
        	height: 520px;
        	background: url(../images/y1.jpg) no-repeat;
        }
        .bg{
        	background: url(../images/y.png); 
        	width: 100%;
        	height:100%; 
        	position: absolute;top: 0;left:0;
        	z-index: 999;
            }
            .head_r{position: absolute;top: 100px;z-index: 1000;right: 60px;}
            .head_r_menu{
            	width: 190px;
            	padding: 0 15px;
            	background: rgba(0,0,0,0.5);
            	

            }
            .head_r_menu a{
            	display: block;
            	line-height: 25px;
            	font-size: 14px;     	
            	padding: 15px 0;
            	color:rgba(254,254,254,0.5);
                white-space: nowrap;
            	overflow: hidden;
                text-overflow: ellipsis;
                border-bottom: 1px solid rgba(174,147,147,0.4);

            }
            .head_r_menu a:hover{olor: #fff;}
            .head_r_menu a:hover span{
            	font-size: 20px;display: block;color: #fff;
            }
         /*頭部導航*/
         .header_ul{
         	position: fixed;top:0;left: 70px; z-index: 1000;
         }

        .logo form{width: 500px;height: 40px;position: relative;left: 400px; display: inline-block;}
        .logo input{width: 480px;height: 40px;border-radius: 100px; border: none;
        	background:rgba(234,234,243,0.5);
        	outline: none;
             padding-left: 20px;
             color:#fff;
         }
        .logo 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; 
        	 }
        .menu_li li{
        	 position: relative;
             padding: 0 10px;
             text-align: center;
             font-size: 12px;
             
        }	 
        .menu_li a,i{color: rgba(234,234,234,0.5);}
        .menu_li i{font-size:  18px;}
        .menu_li li:hover a{color: #48ADF2;}
        .menu_li li:hover I{color: #48ADF2;}
        .menu_li .box{
        	position: absolute; top:80px;right: -10px;
        	background: #fff;
        	padding: 20px;
        	display: none;
        }
        .menu_li p{color: #ccc;font-size: 16px; text-align: center;}
        .menu_li button{
        	background: #2798ff;
        	color: #fff;
        	border:none;
        	height: 36px;width: 240px;
        	border-radius: 30px;
        	margin-top:15px;
        }
        
        .menu_li li:hover .box{display: block;}

        .arrow{
        	width: 0;height: 7px;border: 7px solid;
        	border-color: transparent transparent #fff transparent;
        	position: absolute;top:-20px; right:30px;
        }

 .voltage li{width: 200px;font-size: 15px}
 .voltage a {padding-right: 35px;color: #6D7076;}
 .b_r{
 	border-right: 2px solid #f2f2f2;
 	height: 40px;
 	display: inline-block;
 	float:left;
 	margin-top: 2px;
 	margin-right: 35px; 
 }
 li.hoc{
 	width: 110px;
 	
 	padding: 0 10px;
 }
 li.hoc i{color: #666;font-size: 10px;}
 .hot a{padding: 0;color: #666;}實例
<!DOCTYPE html>

<html>

<head>

	<title>優(yōu)酷-這世界很酷</title>

	<link rel="icon" type="image/x-icon" href="static/images/1.ico">

	<link rel="stylesheet" type="text/css" href="static/css/style.css">

	 <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

</head>

<body>

  <div class="header">

  	<!-- 輪播模塊 -->

  	 <div class="pic-show">

  	 	<div class="bg"></div>

  	    <div class="contents head_r">

  	    	 <div class="head_r_menu r">

  	    	 	<a href=""><span>2019兩會閉幕 :</span>全程回顧解讀熱點</a>  

                <a href=""><span>以團之名 :</span>6進3公演神仙舞臺</a>  

                <a href=""><span>都挺好:</span>明玉報復抄解氣!</a>  

                <a href=""><span>以團之名 :</span>6進3公演神仙舞臺</a>  

                <a href=""><span>這!就是原則  :</span>全程回顧解讀熱點</a>  

                <a href=""><span>這!就是原則 :</span>全程回顧解讀熱點</a>  

                <a href="" style="border: none;"><span>重耳傳奇 : </span>王龍華王艷母子溫馨團聚</a>  

              </div> 

  	    	 </div>

  	    </div>

  	 </div>

      <!-- 頂部搜索導航 -->

  	 <div class="contents header_ul">

  	   <div class="logo l mt">

  	 	<a href=""><img src="static/images/logo.png" ></a>

  	 	<form action="" method="" >

  	 	 <input type="text" name="">

  	 	 <button>全網(wǎng)搜</button>

  	    </form>

  	   </div>

  	 	<ul class="menu_li r mt">

  	 	  

  	 	  <li><i class="fa fa-bank" style="color: #c4a25a"></i><br><a href="" style="color: #c4a25a">VIP</a></li>

          <li><i class="fa fa-feed"></i><br><a href="">訂閱</a></li>

  	 	  <li><i class="fa fa-clock-o"></i><br><a href="">記錄</a></li> 

  	 	  <li><i class="fa fa-arrow-up"></i><br><a href="">上傳</a></li> 

  	 	  <li><i class="fa fa-television"></i><br><a href="">客戶端</a></li> 

  	 	  <li><a href=""><img src="static/images/80.png" width="30px" ></a>

  	 	  <div class="box">

  	 	  	<span class="arrow"></span>

  	 	  	<p >登陸使用更多功能</p>

  	 	  	<button>登陸/注冊</button>

  	 	  </div>

  	 	  </li>

  	 	</ul>

  	 	

  	 </div>

  	 <div class="clear"></div>

  </div> 

<!-- header結束 -->

<div class="contents">

	<div class="content">

		<ul class="voltage">

		  <li><a href="">劇集</a><a href="">電影</a><a href="">綜藝</a><a href="">動漫</a><a href="">娛樂</a><a href="">生活</a></li>

            <span class="b_r"></span>

          <li><a href="">劇集</a><a href="">電影</a><a href="">綜藝</a><a href="">動漫</a><a href="">娛樂</a><a href="">生活</a></li>

            <span class="b_r"></span>

          <li><a href="">劇集</a><a href="">電影</a><a href="">綜藝</a><a href="">動漫</a><a href="">娛樂</a><a href="">生活</a></li>

            <span class="b_r"></span>

          <li><a href="">劇集</a><a href="">電影</a><a href="">綜藝</a><a href="">動漫</a><a href="">娛樂</a><a href="">生活</a></li>

            <span class="b_r"></span>

			<li style="width: 80px;"><a href="">娛樂</a><br><a href="">生活</a></li>

            <span class="b_r"></span>

          <li class="hoc"><i class="fa fa-feed"></i><br><a href="">優(yōu)酷片庫</a></li>

  	 	  <li class="hoc"><i class="fa fa-bar-chart"></i><br><a href="">排行指數(shù)</a></li> 

  	 	  <li class="hoc"><i class="fa fa-angellist"></i><br><a href="">大魚號精選</a></li> 

  	 	  <li class="hoc"><i class="fa fa-desktop"></i><br><a href="">下載應用</a></li> 

		</ul>

	</div>

	<div class="clear"></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)：合格

老師批語：
本博文版權歸博主所有，轉(zhuǎ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+教程免費學