zoukankan      html  css  js  c++  java

  • 常见的网页布局一

    效果图：

    网页的具体换分为：

    先使用一个大的DIV，让其居中，再往大的DIV里面添加其他的东西,简化如下：

    <body>

        <div id="container">

            <div id="header">
                导航图片
            </div>

            <div id="nav">
                导航栏目
            </div>

            <div id="content">
                <div id="con_left">
                    左边内容
                </div>
                <div id="con_right">
                    右边内容
                </div>
            </div>
            <div id="bottom">
                CopyRight&copy; 2012-2013
            </div>
        </div>

    </body>

    具体的html代码:

        <body>
        <div id="container">
            <div id="header">导航图片</div>
            <div id="nav">
                <ul>
                    <li class="nav_li"><a href="#" class="nav_href">返回首页</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">摇滚音乐</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">另类电影</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">联系我们</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
                    <!--一个css中可以加载多个类，用空格来隔开-->
                    <li class="nav_li nav_last">
                    <a href="#" class="nav_href">网站帮助</a>
                    </li>
                </ul>
            </div>
            <div id="content">
                <div id="con_left">
                    <dl class="article_list index_l_article">
                        <dt><span>通知信息</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>

                    <dl class="article_list index_l_article">
                        <dt><span>意见建议</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        
                    </dl>

                    <dl class="article_list index_l_article">
                        <dt><span>交流互动</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    
                    </dl>
                </div>
                <div id="con_right">
                    <dl class="article_list index_r_article">
                        <dt><span>通知信息</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>

                    <dl class="article_list index_r_article">
                        <dt><span>意见建议</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>

                    <dl class="article_list index_r_article">
                        <dt><span>交流互动</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_r_article">
                        <dt><span>通知信息</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息坎坎坷</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                </div>
            </div>
            <div id="bottom">
                CopyRight&copy; 2012-2013
            </div>
        </div>
    </body>

    css代码:

    <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
            }/*
             仅仅只有IE可以居中
             body {
             text-align:center;
             }*/
            #container {
                width: 1100px;
                /*仅仅只有IE之外的浏览器可以居中
                 margin:auto;
                 */
                /*以下三个操作才是推荐使用的居中方式*/
                position: absolute;
                left: 50%;
                margin-left: -550px;
            }
            /**
             *     设置头部图片的背景
             */
            #header {
                height: 50px;
                background: #33F;
            }
            /**
             *     设置导航栏的信息
             */
            #nav {
                border-bottom: 1px solid #88A;
                height: 30px;
                border: 1px solid #229;
            }
            /**
             *     利用float：将导航栏水平显示
             */
            #nav ul {
                list-style: none;
            }
            li.nav_li {
                float: left;
                width: 100px;
                font-size: 12px;
                color: #621;
                text-align: center;
                border-right: 1px solid #339;
                height: 30px;
            }
            /*当使用了包含的操作符之后，
             它的加载时间比使用class的加载时间要低，所以如果此时
             再来定义一个class的样式，不会把使用包含的样式覆盖掉*/
            #nav ul li a {
                position: relative;
                top: 8px;
                /*此时如果设置了该颜色的之后，nav中的a的所有的颜色都是f00
                 color:#f00;
                 */
            }
            li.nav_last {
                border: none;
            }
            a.nav_href:link, a.nav_href:visited {
                text-decoration: none;
                color: #125;
            }
            a.nav_href:hover {
                text-decoration: underline;
                color: #a43;
            }
            #content {
                /*将两端的float清除，否则对于IE以外的浏览器而言，
                 设置了float的元素会不再占用空间，下面的元素会飘上去*/
                clear: both;
                float: left;
                margin-top: 4px;
            }
            /*************************主页内容中的文章列表样式*******************************/
            dl.article_list {
                border: 1px solid #999;
                margin-top: 4px;
            }
            dl.article_list dt {
                height: 30px;
                background: #228;
                color: #ff0;
                font-weight: bold;
            }
            dl.article_list dt span {
                position: relative;
                font-size: 14px;
                top: 5px;
                left: 5px;
            }
            dl.article_list dd {
                height: 30px;
                background: url("point.jpg") no-repeat;
                background-position: 12px 12px;
                border-bottom: 1px dotted #aaa;
            }
            dl.article_list dd a {
                position: relative;
                left: 25px;
                top: 8px;
            }

            a.article_href:link, a.article_href:visited {
                text-decoration: none;
                color: #555;
            }
            a.article_href:hover {
                text-decoration: underline;
                color: #a33;
            }

            #con_left {
                float: left;
                width: 250px;
            }

            #con_right {
                float: left;
                width: 845px;
            }

            dl.index_l_article {
                width: 240px;
            }

            dl.index_r_article {
                float: left;
                width: 393px;
                margin-left: 20px;
                *margin-left: 10px;
            }

            #bottom {
                height: 30px;
                width: 1100px;
                border-top: 1px solid #999;
                float: left;
                margin-top: 10px;
                clear: both;
                text-align: center;
            }
        </style>
  • 相关阅读:
    转:我们是否应该把后端构建为API
    转:浅谈命令查询职责分离(CQRS)模式
    转:如何在Linux上提高文本的搜索效率
    结对编程???该歇歇了
    码农语录•「程序代码的可信度，不会比写的人还可信。」
    七个错误可能引发网页布局灾难
    为什么我不再和别人比较了？
    顶级程序员的10条最佳实践
    程序员淡定的姿态和操蛋的心...
    【好文翻译】码农们：效率与质量，你选择哪个？
  • 原文地址：https://www.cnblogs.com/zhangbaowei/p/4750180.html
Copyright © 2011-2022 走看看