Blogger Information
Blog 20
fans 0
comment 0
visits 25270
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿优酷首页(20190311-0315)作业与心得01
左手Leon的博客
Original
640 people have browsed it
代码的目标是按照优酷首页,制作静态页面。仅使用html与css代码
需要用到一些知识点为以下:
1、网页在浏览器标签中调用自定义的LOGO图片
2、调用自定义与外部下载的css样式文件
    1)style的三种类型:外部、内部、内联
    2)选择器类型
    3)浮动与定位
3、网页的内容布局
    1)使用div分区块
    2)html标签的class、id、name的区别
    3)无序列表的使用
    4)块元素、行内块元素、行内元素的转换
    5)版面的排布与调整

实例-HTML

<!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/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/style.css" type="text/css">

</head>
<body>
  <!-- 页面头部 -->
  <div class="header">
    <!-- pic_show主要视频推荐 -->
  	 <div class="pic_show">
       <!-- bg:pic_show视频推荐遮罩效果 -->
       <div class="bg"></div>
        <!-- 右侧小导航 -->
       <div class="head_r">
         <!-- 右侧小导航 -->
         <div class="head_r_menu">
           <a href=""><span>两会闭幕仪式:</span>全程回顾解读热点全程回顾解读热点</a>
           <a href=""><span>王牌对王牌4</span>全程回顾解读热点</a>
           <a href=""><span>123:</span>456</a>
           <a href=""><span>789:</span>321读热点</a>
           <a href=""><span>234幕仪式:</span>432432读热点</a>
           <a href=""><span>5435仪式:</span>345解读热点</a>
           <a href=""><span>7657式:</span>全76575解读热点</a>
          </div>
       </div>
     </div>
     <div class="contents header_ul">
       <div class="logo fl mt">
         <a href=""><img src="static/images/logo.png" alt=""></a>
         <form action="">
           <input type="text" name="">
            <button>搜全网</button>
         </form>
       </div>
       <ul class="menu_li fr mt">
          <li><i class="fa fa-bank"></i><br><a href="">VIP</a></li>
          <li><i class="fa fa-clock-o"></i><br><a href="">记录</a>
            <div class="box boxH1">
              <span class="arrow"></span>
              <p>使用记录</p>
              <button>登录/注册</button>
            </div>
          </li>
            
          <li><i class="fa fa-arrow-up"></i><br><a href="">上传</a>
             <div class="box boxH2">
                <span class="arrow"></span>
                <p>上传视频</p>
                <button>登录/注册</button>
            </div>
          </li>
            
          <li><i class="fa fa-television"></i><br><a href="">客户端</a>
            <div class="box boxH3">
                <span class="arrow"></span>
                <p>登录客户端</p>
                <button>登录/注册</button>
              </div>
            </li>
            
          <li><a href=""><img src="static/images/80.png" width="40" style="margin-top:-5px;" alt=""></a>
            <div class="box boxH4">
              <span class="arrow"></span>
              <p>登录使用更多功能</p>
              <button>登录/注册</button>
            </div>
          </li>

        </ul>
     </div>
  	 
  	
  	  
  </div>



  <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><a href="">剧集</a><a href="">电影</li>
         <span class="b_r"></span>  
         <li class="hoc"><i class="fa fa-bank"></i><br><a href="">VIP</a></li>
        <li class="hoc"><i class="fa fa-feed"></i><br><a href="">订阅</a></li>
         <li class="hoc"><i class="fa fa-clock-o"></i><br><a href="">记录</a></li>
         <li class="hoc"><i class="fa fa-arrow-up"></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 class="mr">
            <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>
            <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">
      <div class="contentUL">
         <h2 class="l mr">剧集 ></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>
		            <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>
          </ul>
           <div class="clear"></div>
       </div>
    </div>
  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

html仿优酷首页_调整大小.png

实例-style.css

   *{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;}

    .fl{float: left;} /*左浮动*/
    .fr{float:right;}
    /* contents头部大容器 */
    .contents{
      width: 1740px;
      margin: 0 auto;
    }
    /* 头部容器内内容 */
    .content{
      width: 100%;
      margin-top: 20px;
    }
    /* 头部容器内内容无序列表 */
    .contentUL{line-height: 70px;}
    /* 正在热播视频简要图片 */
    .hot_tv img{
      width:240px;
      height: 360px; 
    }
    /* 剧集分类索引栏 */
    .tab li{margin-left: 25px;}
    /* 剧集视频小简介图片 */
    .tv_tab img{
      width: 240px;
      height: 135px;
    }
    /* 剧集视频小简介容器 */
    .tv_tab{width:1240px; }
    /* 剧集视频下小块容器 */
    .tv_tab li{margin:0 4px 18px;}

    /* 头部大容器样式 */
    .header{
    	position: relative;
    	width: 100%;
    	height: 520px;
    	background:#08253A;
    }    
    /* 头部主要视频推荐图片 */
    .pic_show{
    	margin: 0 auto;
    	width: 1664px;
    	height: 520px;
    	background: url(../images/bg.jpg) no-repeat;
    }
    /* 头部主要图片遮罩 */
    .bg{margin: 0 auto;background: url(../images/y.png) no-repeat;width: 100%;height:100%;position: absolute;top: 0;;z-index: 99; }
     /* 定义头部右侧导航栏容器位置层级 */
    .head_r{
        position: absolute;top:100px;z-index: 99;right: 80px;
    }
    /* 定义头部右侧导航栏容器大小与背景 */
    .head_r_menu{
        width: 180px;
        padding:0 15px;
        background: rgba(00,0,0,0.5);
        
    }
    /* 把a链接转换成块级元素,让其自动换行 */
    .head_r_menu a{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        padding: 10px 0;
        color: rgba(254,254,254,0.6);
        font-size: 15px;
        line-height:25px;
        border-bottom: 1px solid rgba(147,147,147,0.6);
    }
    .head_r_menu a:hover span{
        font-size: 20px;
        display: block;
        color: #fff;
    }
    .head_r_menu a:hover{
        font-size: 16px;
 
        color: #fff;
    }
    .header_ul{
        position: fixed;
        top: 0;left:90px;
        z-index: 99;
    }
   

    .logo form{width: 500px;height: 40px;position: relative;margin-left: 500px;display: inline-block;}
    .logo input{width: 480px;height: 40px;border-radius: 100px;
        border: none;background:rgba(234,234,234,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: 14px}
    .menu_li a,i{color:rgba(234,234,234,0.5);}
    .menu_li li:hover a{color:#48ADF2;}
    .menu_li li:hover i{color:#48ADF2;}
    .menu_li li:hover .box{display: block}
    .menu_li .box{
        position: absolute;
        width:240px;
        background: #fff;
        padding: 20px;
        top: 50px;right:10px;
        display: none;
        z-index: 999;
    }
    .boxH1{height: 198px;}
    .boxH2{height: 150;}
    .boxH3{height: 204px;}
    .boxH4{height: 120px;}
    .menu_li p{
        color: #ccc;font-size: 16px;
    }
    .menu_li button{
        margin-top: 20px;
        background: #2798ff;
        color:#fff;
        border:none;
        border-radius: 30px;
        height:36px;width:240px;
    }
    .arrow{
        width:0;height:7px;
        border:7px solid;
        border-color: transparent transparent #fff  transparent ;
        position: absolute;top: -20px;right:15px;
    }
    .voltage li{
        width: 230px;
        font-size: 15px;
        float:left;
    }
     .voltage a{
        padding-right: 45px;
        color:#6d7067;
     }
     .b_r{
        border-right: 2px solid red;
        display: inline-block;
        float: left;
        margin-top:5px;
        margin-right: 45px;
        
     }
     li.hoc{
        width: 80px;
        text-align: center;   
        padding: 0 20px;  
     }
     li.hoc a{
        padding: 0;
        width: 80px;
        text-align: center;     
     }
     li.hoc i{color: #666;}
     .hoc a{padding: 0}

运行实例 »

点击 "运行实例" 按钮查看在线实例


学习心得:

1、仿照版面的布局的分解与调整

使用div分块与浮动样式达到大致样式

需要有细致的耐心逐步调整到理想的状

2、重点在于css文件的处理

div的样式可以分几个块:一个调整在版面中的大小与位置;层级与定位的属性;颜色、边框、字体大小、行间距等值;

特别要注意浮动的添加与消除

选择器对于鼠标停留的处理

对于写好的常用的样式,要标注好其功能,方便自己与别人调用时方便了解功能

3、在chorme浏览器可以通过“检查”-》source中找到网站中的图片、css文件等资源


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