zoukankan      html  css  js  c++  java
  • CSS+DIV(盒子)

    以下是引用片段:
    <style type="text/css">
    <!--
    * {
    margin: 0px;
    padding: 0px;
    }
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    760px;
    border: 1px solid #006633;
    }
    #header {
    height: 100px;
    760px;
    background-image: url(headPic.gif);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    }
    #nav {
    height: 25px;
    760px;
    font-size: 14px;
    list-style-type: none;
    }
    #nav li {
    float:left;
    }
    #nav li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    #nav li a:hover{
    background-color:#006633;
    color:#FFFFFF;
    }
    #content {
    height:auto;
    740px;
    line-height: 1.5em;
    padding: 10px;
    }
    #content p {
    text-indent: 2em;
    }
    #content h5 {
    font-size: 16px;
    margin: 10px;
    }
    #footer {
    height: 50px;
    740px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    padding: 10px;
    }
    -->
    </style>


      结构代码是这样的:

    以下是引用片段:
    <body>
    <div id="header"></div>
    <ul id="nav">
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </ul>
    <div id="content">
    <h5>前言</h5>
    <p>第一段内容</p>
    <h5>理解CSS盒子模式</h5> css
    <p>第二段内容</p>
    </div>
    <div id="footer">
    <p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ?2006 - 2008 Tang Guohui. All Rights Reserved</p>
    </div>
    </body>

  • 相关阅读:
    避开unity的坑(转摘)
    独立游戏开发者创建工作室必看建议(转摘)
    程序员常去的网站
    使用Unity3D的50个技巧
    day 51 html 学习 js 学习
    day 50 Java Script 学习
    day 49 html 学习 css 学习
    day 47 html 学习 css 学习
    day 46 html 学习 列 表格,
    day45 html 初识,常见命令
  • 原文地址:https://www.cnblogs.com/benzhang/p/1458799.html
Copyright © 2011-2022 走看看