完成优酷导航 - WEB前端（HTML）

Home > List of blog posts > 完成优酷导航
Blogger Information
Blog 21
fans 0
comment 0
visits 20141
Special Recommendation
More>
Related recommendations
总结：

理解：float、 position在实战中的应用
实例

*{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>优酷-这世界很酷</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>全网搜</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="">优酷片库</a></li>

  	 	  <li class="hoc"><i class="fa fa-bar-chart"></i><br><a href="">排行指数</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>

运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
网页中的文本\图片与链接

2019-03-12 16:56:35