• 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>

  • 相关阅读:
    vue路由
    vue-cli目录结构介绍
    andriodiphone视频禁止全屏播放
    JS判断Android、iOS或浏览器的多种方法(四种方法)
    vue中移动端自适应方案
    移动端视频不兼容
    vue之router-link
    移动端网页开发注意点
    AWS EC2服务器的HTTPS负载均衡器配置过程
    Kubernetes概念介绍和v1版本部署过程
  • 原文地址:https://www.cnblogs.com/benzhang/p/1458799.html
Copyright © 2020-2023  润新知