优酷顶部布局—2019年3月15日22时00分 - html/css

Home > List of blog posts > 优酷顶部布局—2019年3月15日22时00分
Blogger Information
Blog 19
fans 0
comment 0
visits 13320
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/favicon.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">
  <!-- css已写入css文件，用外部样式 -->
  <style type="text/css">
   *{margin: 0;padding: 0;}
   .clear{clear:both;}
   .main{width:1745px;margin:0 auto;}
   .main_1{width: 100%;margin-top: 20px;}
   .main_r{line-height:70px;}
   .m{margin-right: 9px;margin-bottom: 8px}
   .main_t img{width:240px;height:360px;}
   h2{font-weight: 200;font-size:26px;}
   li{list-style:none;float:left}
   a{text-decoration:none;color:#000;}
   p{color:#ccc;font-size:12px;margin-top:5px;}
/*   .main_2{width:100%;height:auto;margin-top:200px;}*/
   .main_j{line-height: 70px;}
   .main_j span{margin-right:15px;}
   .main_j h2{float:left;margin-right: 20px;}
   .main_t1 img{height: 140px;width: 240px;}
   .header{width:100%;margin:0 auto;height: 520px;background:#b3b7c2;position:relative;/*background: url(static/images/background.png);*/}
   .bg img{height:520px;margin-left: 250px}
 /*  .bg{position:relative;left:250px;top:0;}*/
   .logo{position:absolute;top:15px;left:100px;}
   .search{position:absolute;top:15px;left:700px;}
   .search input{width: 500px;height: 40px;border:none;border-radius:100px;background: rgba(234,234,234,0.4);}
   .search button{width: 90px;height: 40px;border:none;border-top-right-radius:100px;border-bottom-right-radius:100px;background:#B30702;color:white;position:absolute;left:410px;top:0;border:none;}
   .font{color:#E4B03F;position:absolute;top:15px;right:100px;font-size:20px;font-weight:600;}
   .font span{font-size:12px;position:relative;top:-8px;}
   .font li{margin-right: 30px;}
   .size{color:#F7EDED;font-weight:400;}
   .menu{width: 220px;height:335px;background: rgba(32,32,32,0.65);position:absolute;top:120px;right: 80px}
   .menu li{color:#ccc;margin:10px}
  </style>
</head>
<body>
<div class="header">
	<div class="backgroung"></div>
	<div class="bg">
		<img src="static/images/bg.jpg">	
	</div>
	<div class="logo">
	<a href="http://www.youku.com">
		<img src="static/images/logo.png">
	</a>
    </div>
    <div class="search">
    		<form action="" method="" class="l">
	  	 	   <input type="text" name="">
	  	 	   <button>全网搜</button>
    </div>
    <div class="font">
    	<ul>
    		<li>
    			<i class="fa fa-diamond"></i><br>
    			<span>VIP</span>
    	</li>
    	<li>
    			<i class="fa fa-diamond"></i><br>
    			<span class="size">订阅</span>
    	</li>
    	<li>
    			<i class="fa fa-diamond"></i><br>
    			<span class="size">记录</span>
    	</li>
    	<li>
    			<i class="fa fa-diamond"></i><br>
    			<span class="size">上传</span>
    	</li>
    	<li>
    			<i class="fa fa-diamond"></i><br>
    			<span class="size">客户端</span>
    	</li>
    	</ul>
    </div>
    <div class="menu">
    	<ul>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    		<li>
    			都挺好：明玉复仇超解气！
    		</li>
    	</ul>
    </div>
</div>
 <div class="main"><!-- 全局css -->
  <div class="main_1"><!-- 热播区域布局 -->
    <div class="main_r"><!-- 热播文字布局 -->
      <h2>正在热播</h2>
    </div>
      <ul class="main_t">
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
        <li class="m">
          <a href="" target="_blank">
            <img src="static/images/b.jpg"><br>
            <span>“大”人物</span>
          </a>
          <p>王千源深挖强拆案真相</p>
        </li>
      </ul>
      <div class="clear"></div>
</div>
<!-- 剧集开始 -->
     <div class="main_j"><!-- 剧集文字布局 -->
      <h2>剧集 > </h2>
      <span>最新</span>
      <span>大陆剧</span>
      <span>日韩剧</span>
      <span>港台剧</span>
      <span>英美剧</span>
       <div class="clear"></div>
    </div>
    <ul>
    	<li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
    </ul>
        <div class="main_t1">
        <ul>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
        <li class="m">
         <a href="" target="_blank">
          <img src="static/images/tv1.jpg"	><br>
          <span>神盾局特工 1-3季</span>
         </a><br>
          <p>漫威英雄筋肉集结</p>
        </li>
       </ul>
       </div>
         
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：Uncorrected

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年3月14日22时00分

2019-03-31 10:31:35