本人自己编写的类Cnbeta的css模版（兼容浏览器）

网页布局与CSS样式实战

最新推荐文章于 2019-06-11 16:16:24 发布

相太阳

最新推荐文章于 2019-06-11 16:16:24 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kissgxd/archive/2010/01/06/1640202.html

本文详细介绍了一个具体的网页布局案例，包括HTML结构设计与CSS样式实现。通过具体代码展示了导航栏、文章列表及侧边栏等元素的设计思路与实现方法。

原文来自http://www.imustgxd.cn/post/2009/11/16/e69cace4babae887aae5b7b1e7bc96e58699e79a84e7b1bbCnbetae79a84e6a8a1e78988.aspx

以下是html源文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>界面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="main_content">

    <div id="main">
    <div id="left">
        <div id="left_top"></div>
            <div id="left_menu">
                <div id="navcontainer">
                     <ul id="navlist">
                        <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="left_important">
             <div id="important_pic"></div>
                <div id="important_text"></div>
                <div class="clear"></div>
            </div>
            <div id="left_ad">AD</div>
            <div id="left_sortmenu">
                       </div>

            <div class="listnews">
            <div class="newstitle"><span>list news title here</span></div>

                <div class="newsinfo">this is the info for the whole article .To enter these word just for test the effct. If you have seen this with no mistakes , it means that I have done this job well!</div>
            </div>
            <div class="listnews">listnews2</div>
            <div class="listnews">listnews3</div>

            <div id="left_pagelist">上一页下一页</div>
       </div>
        <div id="right">
        <div id="right_topmenu">加入收藏设为首页</div>

            <div id="right_search">
              <label>
              <input type="text" name="textfield" id="textfield" />
              </label>
              <label>
              <input type="submit" name="button" id="button" value="搜索" />
              </label>
            </div>

            <div id="right_topnewslist">
            <div id="topnewslist_top">TOP NEWS</div>
                <div id="topnewslist">top news list here</div>
            </div>

            <div id="right_recommend">
            <div id="recommend_top">RECOMMEND</div>
                <div id="recommend">recommend list here</div>
            </div>

            <div id="right_commit">
            <div id="commit_top">COMMMIT</div>
                <div id="commit">commit list here</div>
            </div>

            <div class="right_box">
            <div class="box_top">RIGHT BOX</div>
                <div class="box">right_box1</div>
            </div>
            <div class="right_box">
            <div class="box_top">RIGHT BOX</div>
                <div class="box">right_box2</div>
            </div>
            <div class="right_box">
            <div class="box_top">RIGHT BOX</div>
                <div class="box">right_box3</div>
            </div>
        </div>
        <div class="clear"></div>
        <div id="footer">copyright © 2009</div>
    </div>
</div>
</body>
</html>

以下是CSS源代码（兼容IE FIREFOX CHROME OPERA等浏览器）

/* page style */
body
{
background-image:url(images/bodybg.gif);
background-repeat:repeat;
}
#main_content
{
width:970px;
margin-left:auto;
margin-right:auto;
font-size:12px;
line-height:1.5em;
}
.clear
{
clear:both;
}
#top
{
height:0px;
}
#main
{
width:970px;
margin-left:auto;
margin-right:auto;
}
#left
{
width:600px;
float:left;
}
#left #left_top
{
width:600px;
height:70px;
background-color:#CCCCFF;
}
#left #left_menu
{
width:600px;
height:25px;
margin-top:5px;
background-color:#0066CC;
}

#navcontainer {
height: 25px;
}

#navcontainer ul {
        border: 0;
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: center;
}

#navcontainer ul li {
        display: block;
        float: left;
        text-align: center;
        padding: 0;
        margin: 0;
}

#navcontainer ul li a {
        background: #fff;
        width: 78px;
        height: 20px;
        border-top: 1px solid #f5d7b4;
        border-left: 1px solid #f5d7b4;
        border-bottom: 1px solid #f5d7b4;
        border-right: none;
        padding: 3px 0 0 0;
        margin: 0;
        color: #f5d7b4;
        text-decoration: none;
        display: block;
        text-align: center;
        font: bold 12px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}

#navcontainer a:active {
background: #c60;
color: #fff;
}

#navcontainer li#active a {
        background: #c60;
        border: 1px solid #c60;
        color: #fff;
}

#left #left_important
{
width:598px;
height:240px;
margin-top:3px;
border-style:solid;
border-width:1px;
}
#left #left_important #important_pic
{
width:280px;
height:240px;
float:left;
background-color:#99FFFF;
}
#left #left_important #important_text
{
width:317px;
height:240px;
border-left-style:solid;
border-left-width:1px;
float:left;
background-color:#FFCCFF;
}
#left #left_ad
{
width:600px;
height:70px;
margin-top:3px;
background-color:#CCCCFF;
}
#left #left_sortmenu
{
width:600px;
height:25px;
margin-top:5px;
background-color:#CC6666;
}
#sortmenuc img
{
border: none;
}
#sortmenuc
{
float:left;
width:100%;
font-size:14px;;
font-weight:bold;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#sortmenuc ul
{
margin:0;
padding:3px 10px 0 5px;
list-style:none;
}
#sortmenuc li
{
display:inline;
margin:0;
padding:0;
}
#sortmenuc a
{
float:left;
background:url("images/tableft10.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#sortmenuc a span
{
float:left;
display:block;
background:url("images/tabright10.gif") no-repeat right top;
padding:5px 15px 0px 6px;
color:#FFF;
}
#sortmenuc a span
{
float:none;
}
#left .listnews
{
width:588px;
min-height:200px; /*IE不兼容此属性*/
height:auto !important; /*使大家互相兼容*/
height:200px;
margin-bottom:10px;
border-style:solid;
border-width:1px;
padding:5px;
background-color:#CCCCCC;
}
.listnews .newstitle span
{
font-size:18px;
padding:3px 10px 5px 10px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
background-color:#00CCFF;
}
.listnews .newsinfo
{
text-indent:2em;
font-size:12px;
margin-top:10px;
}
#left #left_pagelist
{
width:600px;
height:25px;
background-color:#9999FF;
}
#right
{
width:370px;
float:left;
}
#right #right_topmenu
{
width:355px;
height:25px;
margin-left:5px;
padding:0 5px 0 5px;
background-color:#CCCCCC;
}
#right #right_search
{
width:355px;
height:30px;
margin-top:10px;
margin-left:5px;
padding:0 5px 0 5px;
background-color:#CCCCCC;
}
#right #right_topnewslist
{
width:363px;
height:200px;
margin-top:10px;
margin-left:5px;
border-style:solid;
border-width:1px;
background-color:#99CCFF;
}
#right_topnewslist #topnewslist_top,#right_recommend #recommend_top,#right_commit #commit_top,.right_box .box_top
{
height:23px;
font-size:14px;
font-weight:bold;
text-indent:1em;
padding-left:5px;
padding-right:5px;
background-color:#999999;
}
#right_topnewslist #topnewslist,#right_recommend #recommend,#right_commit #commit,.right_box .box
{
padding-left:5px;
padding-right:5px;
}
#right #right_recommend
{
width:363px;
height:500px;
margin-top:10px;
margin-left:5px;
border-style:solid;
border-width:1px;
background-color:#996699;
}

#right #right_commit
{
width:363px;
height:200px;
margin-top:10px;
margin-left:5px;
border-style:solid;
border-width:1px;
background-color:#99FFCC;
}
#right .right_box
{
width:363px;
height:200px;
margin-top:10px;
margin-left:5px;
border-style:solid;
border-width:1px;
background-color:#FF99FF;
}
#footer
{
width:968px;
height:180px;
margin-top:20px;
margin-bottom:10px;
padding:10px 0 10px 0;
font-size:14px;
font-weight:bold;
text-align:center;
border-style:solid;
border-width:1px;
background-color:#006699;
}