CSS 基础教程-102 CSS创建无表格的首页

hrs 提交于 2020/03/17 - 20:18 , 周二

实例代码:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css" >
  *{margin:0;padding:0px;}
  div.box {
      width:960px;
      background-color:#C0C0C0;
      }
  div.home{
    float:left;
    width:960px;
    height:80px;
    background-color:#F5F5DC;
    color:blue;
    font-size:35px;
    }

  div.home p{
    margin-top:10px;
    margin-left:10px;
  }
    div.var{
    float:left;
    background-color:#eee8aa;
    width:960px;
    height:30px;
  }

    div.var a{
    float:left;
    text-decoration:none;
    background-color:#EEE8AA;
    width:80px;
    text-align:center;
    padding:5px;
  }
    div.var a:hover{
      background-color:red;
    }
    div.left{
      width:170px;
      float:left;
      background-color:#FFDAB9;
      height:500px;
      padding-top:20px;
      padding-left:30px;
      line-height:50px;
      }
    div.left a{
      color:yellow;
      width:80px;
      text-decoration:none;
    }
div.right{
float:right;
    width:740px;
    background-color:#DA70D6;
    text-indent:2em;
    padding:10px;
   height:500px;
}
  div.bottom{
    float:left;
    background-color:black;
    color:white;
    height:80px;
    width:960px;
  text-align:center;
}
    ul{
    list-style-type:none;

    }

    div.bottom a{
      float:right;
      width:100px;
    text-align:center;
    border-right-width:1px;
    border-right-style: solid ;
    margin-top:20px;
    color:white;
    text-decoration:none;
  }
    div.bottom a:hover{
      background-color:red;

    }

  </style>
</head>
  <div class="box">
    <div class="home">

    <p>你行网</p>

    </div>
    <div class="var">
         <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
        <li><a href="/javascipt">JavaScript</a></li>

      </ul>
    </div>
    <div class="left">
<ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>

      </ul>


    </div>
    <div class="right">
<p>苹果是蔷薇科苹果亚科苹果属植物,其树为落叶乔木。苹果营养价值很高,富含矿物质>和维生素,含钙量丰富,有助于代谢掉体内多余盐分,苹果酸可代谢热量,防止下半身肥胖
。</p>
<p>苹果是一种低热量的食物,每100克产生大约60千卡左右的热量。苹果中营养成分可溶性
大,容易被人体吸收,故有“活水”之称。它有利于溶解硫元素,使皮肤润滑柔嫩。</p>

    </div>
  <div class="bottom">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">招骋信息</a></li>
        <li><a href="#">广告服务</a></li>
        <li><a href="#">联系方式</a></li>

      </ul>

  </div>
  </div>

</html>

运行效果:

css_102_0.png

标签