第八 - 代码天地

1.position属性有哪些属性值？他们在定位元素时，分别有哪些特点？
(1)absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位。
(2)fixed 固定定位:相对于浏览器窗口进行定位。
(3)relative相对定位:相对于其正常（默认布局）位置进行定位。
(4)static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
2.z-index属性在网定位中有什么作用？
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。
3.制作美食今日推荐页面。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>index.html</title>
  <style>
   
   .text1{
    border: 1px solid gray;
    border-radius:10px ;
    width: 330px;
    height: 410px;
    margin: 0 auto;
    position: relative;
   }
   img{
    margin: 10px;
    margin-right: 40px;
    margin-left: 0px;
   }
   img,p{
    vertical-align: middle;
   }
   
   ul li{
    list-style-type: none;
    float: left;
   }
  </style>
 </head>
 <body>
  <div class="text1">
   <ul>
    <li style="font-size: 20px;font-weight: bold;margin-top: 10px;margin-left: 15px;">SHOP 今日推荐</li>
    <li style="float: right;"><img  src="img/more.gif"/></li>
    <li><img src="img/img9.gif"/>
    <p style="float: right;"><a href="#">汉来国际美食百货</a><br />
     口味：创意中餐<br />
     区域：朝阳/CBD
    </p>
    </li>
    <li><img src="img/img7.gif"/>
    <p style="float: right;"><a href="#">汉来国际美食百货</a><br />
     口味：创意中餐<br />
     区域：朝阳/CBD
    </p>
    </li>
    <li><img src="img/img8.gif"/>
    <p style="float: right;"><a href="#">汉来国际美食百货</a><br />
     口味：创意中餐<br />
     区域：朝阳/CBD
    </p>
    </li>
    <li><img src="img/img7.gif"/>
    <p style="float: right;"><a href="#">汉来国际美食百货</a><br />
     口味：创意中餐<br />
     区域：朝阳/CBD
    </p>
    </li>
    <li style="position: absolute;top: 40px;left: 100px;"><img src="img/shen.png"/></li>
   </ul>
  </div>
  
 </body>
</html>

在这里插入图片描述

4.制作京东轮播图页面。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>京东轮播图</title>
  <style>
   .text1{
    width: 600px;
    margin: 0px auto;
    position: relative;
   }
   ul li{
    list-style-type: none;
   }
    li a{
    text-decoration: none;
    color: white;
   }
   .text2{
    color:white;
    font-weight:bold;
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    line-height: 20px;
    text-align: center;
    float: left;
   }
   ul li:nth-of-type(1){
    position: absolute;
    left:300px ;
    bottom: 15px;
   }
   ul li:nth-of-type(2){
    position: absolute;
    left:330px ;
    bottom: 15px;
   }
   ul li:nth-of-type(3){
    position: absolute;
    left:360px ;
    bottom: 15px;
   }
   ul li:nth-of-type(4){
    position: absolute;
    left:390px ;
    bottom: 15px;
   }
   ul li:nth-of-type(5){
    position: absolute;
    left:420px ;
    bottom: 15px;
   }
  </style>
 </head>
 <body>
  <div class="text1">
   <a href="#"><img src="img/focus.jpg"/></a>
   <ul>
    <li class="text2"><a href="#">1</a></li>
    <li class="text2"><a href="#" >2</a></li>
    <li class="text2"><a href="#">3</a></li>
    <li class="text2"><a href="#">4</a></li>
    <li class="text2"><a href="#">5</a></li>
   </ul>
  </div>
 </body>
</html>

在这里插入图片描述

5.制作新东方顶部导航菜单页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>新东方顶部导航菜单</title>
  <style>
   .text1{
    background-image: url(img/top_bg.gif);
    width: 850px;
    height: 27px;
    z-index: 0;
    
   }
   a{
    text-decoration: none;
   }
   a:hover{
    color: blue;
   }
   img,a{
    vertical-align: middle;
   }
   
   ul li{
    list-style-type: none;
    display:inline;
    margin: 10px ;
    
   }
   li img{
    margin-left: 0px;
    margin-right: 40px;
   }
   .text2{
    border: 1px solid darkgray;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    left: 200px;
    bottom: 15px;
    z-index: 5;
   }
   .text3 {
    border-bottom: 1px solid darkgray;
    margin-top: 25px;
    margin-bottom: 10px;
    margin-right: 7px;
   } 
   
  </style>
 </head>
 <body>
  <div>
   <div class="text1">
   <ul>
    <li><img src="img/logo.gif"/></li>
    <li><a href="">购物车</a></li>
    <li style="color: darkgray">|</li>
    <li><a href="">优惠券</a></li>
    <li style="color: darkgray;">|</li>
    <li><a href="">快速注卡</a></li>
    <li style="color: darkgray;">|</li>
    <li><a href="">各地购课</a></li>
    <li style="color: darkgray;">|</li>
    <li><a href="">手机报</a></li>
    <li style="color: darkgray;">|</li>
    <li><a href="">网站导航</a></li>
    <li><img style="position: relative;right: 20px;bottom: 5px;" src="img/open_icon.gif"/></li>
   </ul>
   <div class="text2">
    <div>
     <ul class="text3">
     <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>
     <li><a href="">日语</a></li>
     </ul>
     <ul class="text3">
     <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>
     <li><a href="">学词</a></li>
     <li><a href="">考研搜校</a></li>
     </ul>
     <ul >
     <li><a href="">M-Zone</a></li>
     <li><a href="">手机报</a></li>
     <li><a href="">时时英语</a></li>
     </ul>
    </div>
   </div>
   </div>
  </div>
 </body>
</html>

在这里插入图片描述

当当网

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>当当图书榜</title>
  <style>
   
   .text2{
    border: 0px solid;
    width:1000px;
    height: 800px;
    margin: 0px auto;
   }
   a:hover{
    text-decoration: underline;
   }
   .text1{
    margin-top: 40px;
    border: 1px solid #c8ece3;
    background-color: #eafffa;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top:10px;
    display: inline-block;
    float: right;
    font-family: verdana "宋体";
    font-size: 12px;
    color: gray;
   }
   .text3{
    border: 2px solid lightgreen;
    width: 1000px;
    height: 400px;
    position: relative;
   }
   nav{
    background: url(img/menuBg.jpg);
    margin-top: -10px;
    margin-bottom: 10px;
    line-height: 35px;
    height: 39px;
    color: white;
   }
   nav li {
    padding: 0  10px 0 10px;
    display: inline-block;
   } 
   ul li{
    list-style-type: none;
   }
  </style>
 </head>
 <body>
  <div class="text2">
   <header>
           
   <ul>
    <li class="text1"style="border-style: solid solid none none; "><a>都看阅器</a></li>
    <li class="text1" style="border-style: solid none none none; "><a>数字馆</a></li>
    <li class="text1"style="border-style: solid none none none; "> <a>当当优品</a></li>
    <li class="text1"style="border-style: solid none none solid; "><a>尾品汇</a> </li>
   </ul>
   <img src="img/icon_count.png" style="position:relative; top: 32px; right: -775px;"/>
   </header>
   <img  src="img/logo.jpg"/>
   <nav>
    
   <ul>
    <li><a>首页</a></li>
    <li><a>图书</a></li>
    <li><a>音像 </a></li>
    <li><a>童装</a></li>
    <li><a>服装 </a></li>
    <li><a>鞋靴 </a></li>
    <li><a>运动</a></li>
    <li><a>箱包</a></li>
    <li><a>美妆</a></li>
    <li><a>珠宝</a></li>
    <li><a>家居</a></li>
    <li><a>食品</a></li>
    <li><a>酒</a></li>
    <li><a>手机</a></li>
    <li><a>数码 </a></li>
    <li><a>电脑</a></li>
    <li><a>家电</a></li> 
   </ul>
   </nav>
   <article>
    <img src="img/banner.png" width="1000px"style="margin-bottom: 15px;">
    <div class="text3">
     <div>
      <p>
      <img src="img/bg_bang.gif"style="position: relative;right: 15px;" /></p>
      <img src="img/book-01.jpg"style="float: left;margin-top: 30px;" />
      <img src="img/bookNo1.gif" style="position: relative;right: 240px;top: 25px;"/>
      <p style="line-height: 25px;font-size: 14px;margin-top: 0px;">
      <a style="color: lightblue;">偷影子的人</a><br />
      作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br />
      出版社：湖南文艺出版社<br />
      当当价：<span style="color: darkred;">￥ 17.90</span><br />
      不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br />
      我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br />
      马的回忆，一个时间之神没有应允的愿望。 一个老是<br />
      受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能<br />
      力而强大：他能“偷别人的影子”，因而能看见他<br />
      </p>
     </div>
     <div style="float: right;position: relative;bottom: 300px;">
      <img style="margin-top: 10px;" src="img/book-02.jpg" />
      <img style="position: relative;right: 100px;bottom: 80px;" src="img/bookNo2.gif" />
      <p style="line-height: 25px;font-size: 14px;display: inline-block;margin-right: 10px;">
      <a style="color: lightblue;">看见(央视知名记者、主持人柴静：十年<br/>个人
       成长的告白，中国社会变迁的备忘 </a><br />
       作 者：柴静 著<br />
       出版社：广西师范大学出版社<br />
       <span style="color: darkred;">￥ 29.40&nbsp;&nbsp;
        <span style="font-size: 12px;">7.4折</span> </span><br />
      </p>
     </div>
     <div style="float: right;position: relative;left: 275px;bottom: 140px;">
      <img src="img/book-03.jpg" />
      <img style="position: relative;right: 105px;bottom: 75px;" src="img/bookNo3.gif" />
      <p style="line-height: 25px;font-size: 14px;display: inline-block;">
       <a style="color: lightblue;">改变孩子先改变自己 </a><br />
        作 者：贾容韬 贾毅 著<br />
        出版社：作家出版社<br />
       <span style="color: darkred;">￥ 22.20&nbsp;&nbsp;
       <span style="font-size: 12px;">7.4折</span> </span><br />
      </p>
     </div>
    </div>
   </article>
   <footer style="position: relative;right: 120px;bottom: 120px;">
    <span style="float: right;font-family: verdana;font-size: 14px;color: grey;">Copyright (C) 当当网 2004-2017, All Rights Reserved
             <img  style="vertical-align: middle;" src="img/validate.gif"/>
    041189号出版物经营许可证 新出发京批字第直0673号</span>
   </footer>
  </div> 
 </body>
</html>

在这里插入图片描述

第八

猜你喜欢