CSS

网页布局实战

最新推荐文章于 2025-01-17 23:19:46 发布

原创最新推荐文章于 2025-01-17 23:19:46 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

CSS样式专栏收录该内容

5 篇文章

订阅专栏

今天做了一个网页，下面是具体的代码，还有待改进；

<html>
    <head>
        <title>oooo</title>
        <style type="text/css">
            #head,#foot{
                width:600px; height:100px; margin:0 auto;
                background-color:#FFCC99}
            #top{ margin:0; padding:0; border:0; width:auto; height:auto;}
            #topmenu {
                margin:0px;
                padding-top: 9px;
                border:0px;
                color: #FFF;
                height:25px;
                background-color:#000000;
            }
            #topmenu ul{margin:0; padding:0; list-style:none;}
            #topmenu li {
                float: left;
                display: block;
                margin: 0px;
                padding:0px;
                text-align: center;
                border-left:#fff 1px solid;
                line-height:25px;
            }
            #topmenu li a {
                display: block;
                margin:0px;
                padding:0px;
                width: 100%;
                color: #FFF;
                text-decoration: none;
            }
            #topmenu li a:hover {
                font-weight: bold;
                color: #fff;
                background-color: #60A179;
            }
            a {margin: 0px;padding:0px;border:0px;}
            a:link {color:#60A179; text-decoration:none;}
            a:visited{color:#666;text-decoration:none;}
            a:hover{color:#3AAD7E;text-decoration: underline;}
            #conter{
                width:600px; height:110px;margin:0 auto;}
            #conter ul{margin:0px; padding:10px; list-style:none;
                width:150px; height:380px;background-color:#CCC;}
            #con{float:left; width:600px; height:400px; background-color:#FFFF00;}
            #left{ float:left;}
            #right{background-color:#C0F; float:right; width:25%; height:400px; text-align:center;}
            #foot{ background-color:#CCFFFF;clear:both; text-align:center; vertical-align:middle;}
        </style>
    </head>
    <body>
        <div id="head">
            <div id="top"><img height="73"; alt="http://w3cn.org" src="200[8].jpg" width="180" border="0" /></div>
            <div id="topmenu"
                <ul><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>
            </div>
        </div>
        <div id="conter">
            <div id="con">
                <div id="left"><ul><li><a href="#">◎什么是web标准</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>
                </div>
                <div id="right"><p>好消息</p>
                    <p>                        Alan(李超)写的新书《CSS布局实录---基于Web标准的网站设计指南》已经上市。本书以实例为主，一步步的告诉大家如何开始新的、符合Web标准的CSS布局设计。本书重        点放在如何转变思路和实际操作，适合初、中级web标准网页设计师。
                    </p>
                </div>
            </div>
        </div>
        <div id="foot">
            <p>本站所有内容（特别说明除外）都是自由的，只要保留本站或作者链接，无论是否涉及商业，您可以任意转载和引用。</p>
            <p><a href="http://www.w3cn.org/article/rss.xml"></a> 感谢<a href="http://www.blueidea.com">《蓝色理想》</a>
            提供网站空间     <a href="http://www.miibeian.gov.cn" target="new">本站京ICP备05003592号</a>
            </p>
        </div>
    </body>
</html>

知识点小结：1.li标签前面的圆点怎么去掉，list-style：none就可以了；2.text-align：conter是将文本居中；3.当float：left时，下面的块就可以紧贴上面的块，而不被压着；4.了解了三行两列，在id=conter的地方，再加上一个div，然后float:left，就可以使中间大块的背景色全覆盖，而不会覆盖不全。