web基础第五课：仿优酷首页布局实战 - 前端学习笔记

Home > List of blog posts > web基础第五课：仿优酷首页布局实战
Blogger Information
Blog 16
fans 2
comment 2
visits 13179
Special Recommendation
More>
Related recommendations
实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<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">
   <style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none; float: left;}
a{color: #000;text-decoration: none;}
.clear{clear: both;}
.contents{
        width: 1740px;
        margin: 0 auto;
        /*border: 2px solid red;*/
}
.content{
        width: 100%;
        margin-top: 15px;
}
.hot_tv img{
        width: 240px;
        height: 360px;
}
.contentUL{line-height: 70px;}
.mr{
  margin-right: 10px;
}
.l{float: left;}
.tab li{margin-left: 25px;}
.tv_tab img{
            width: 240px;
            height: 135px;
}
.big_show img{
             width: 490px;
             height: 335px;
}
.tv_tab{width: 1240px;}
.tv_tab li{margin:0 4px 19px;}
small{font-size: 12px;color: #999;}
span{font-size: 14px;color: #333;}
/*轮播图模块+头部导航*/
.header{
       position: relative;
       width: 100%;
       height: 520px;
       background: #072439;

}
/*轮播模块背景图*/
.pic_show{
          margin: 0 auto;
          width: 1740px;
          height: 520px;
          background: url(../images/y1.jpg) no-repeat;
          position: relative;
}
.bg{
    width: 100%;    
    height: 100%;
    background: url(../images/y.png);
    position: absolute;top: 0;left: 0;z-index: 99;
}
.menu_ul{
     position: fixed;top: 20px;z-index: 100;
}
.menu_ul form{
            width: 500px;
            height: 40px;
            position: relative;margin-left: 500px;
            display: inline-block;

}
.menu_ul input{
              width: 480px;
              height: 40px;
              border-radius: 100px;
              border: none;
              background: rgba(234,234,234,0.5);
              outline: none;/*去掉表单元素自动获取焦点效果*/
              padding-left: 20px;
              color: #fff;
}
.menu_ul button{
             width: 90px;
             height: 40px;
             border-top-right-radius:30px;
             border-bottom-right-radius: 30px;
             border: none;
             color: #fff;
             background: #B30702;
             position: absolute;top: 0;right: 0;
             outline: none;/*去掉表单元素自动获取焦点效果*/

}
.menu_li{float: right;}
.menu_li li{
            padding: 0 10px;
            text-align: center;
            font-size: 14px;

}
.menu_li i{font-size: 18px;}

 </style>
</head>
<body>
    <div class="header">  <!-- 轮播图模块-->
       <div class="pic_show">
       <div class="bg"></div>
       <div class="contents head_r"></div>

       <div class="contents menu_ul"><!-- 搜索导航条 -->
           <div class="logo">
           <a href=""><img src="static/images/logo.png" class="l"></a>
           <form action="" method="" class="l">
               <input type="" name="">
               <button>全网搜</button>
           </form>
                <ul class="menu_li">
                <li><i class="fa fa-bank"></i><br><a href="">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="40"></a></li>
             </ul> 
           </div>

       </div>

       </div>

     <div class="contents">
         <div class="content">
             <div class="contentUL">
                <h2>正在热播</h2>
             </div>
             <ul class="hot_tv">
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/a.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/b.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/c.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/d.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/e.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li class="mr">
                 	<a href="http://youku.com/">
                    <img src="static/images/f.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
                 <li>
                 	<a href="http://youku.com/">
                    <img src="static/images/g.jpg"><br>
                    <span>瞰中国：宁夏</span>
                 	</a><br>
                    <small>低调的宁夏 美了四季</small>
                 </li>
             </ul>
             <div class="clear"></div>
         </div>
         <div class="content">
         	<div class="contentUL">
         	    <h2 class="l">剧集 ></h2>
                <ul class="tab l">
                    <li><a href="">最新</a></li>
                    <li><a href="">大陆</a></li>
                    <li><a href="">美剧</a></li>
                    <li><a href="">日剧</a></li>
                    <li><a href="">韩剧</a></li>
                </ul>
                <div class="clear"></div>
         	</div>
            <div class="tv_show">
                <div class="big_show l mr">
                   <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/tv1.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/tv1.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>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>

                   </ul>
            </div>
         </div>    
         <!-- 剧集   -->
         <div class="content">
            <div class="contentUL">
                <h2 class="l">剧集 ></h2>
                <ul class="tab l">
                    <li><a href="">最新</a></li>
                    <li><a href="">大陆</a></li>
                    <li><a href="">美剧</a></li>
                    <li><a href="">日剧</a></li>
                    <li><a href="">韩剧</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="tv_show">
                <div class="big_show l mr">
                   <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/tv1.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/tv1.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>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.jpg"><br>
                         <span>瞰中国：宁夏</span>
                         </a><br>
                         <small>低调的宁夏 美了四季</small>
                      </li>
                      </li>
                         <li>
                         <a href="">
                         <img src="static/images/tv1.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
web基础第一课：html文档结构及常用标签讲解--2019.3.11

2019-03-13 14:25:55