VC经典布局

2008-7-30 chenmo 网站建设

<body>

<div id="header">     .......</div>

中间的关键代码

<div id="contain">
     <div id="mainbg">

          <div id="right">

                         <div class="right_box">         <h3>贴图世界<span class="more2"><a href="pic">more</a></span></h3>
                                  <div class="white_bg">。。。。。。</div>

                         </div>
                         重复上面的

           </div>

           <div id="left">

                    <div class="left_box"><h3>公告<span class="more"><a href="notice.php" target="_blank">more</a></span></h3>
                                        <div class="white_bg">    。。。。,</div>

                         </div>
                         重复上面的
           </div>
      </div>
</div>

 

 

 

<div id="footer">。。。。。。。。。</div>

</body>

 
头部代码:

     <DIV id="header"><IMG class=logo alt="Asbbs.cn"
src="images/logo.png">
<DIV class="r_nav_box">
<DIV class="nav_dh"><A href="http://asbbs.cn/bbs/login.php">登陆</A> | <A style="color:#FF0000"
href="http://asbbs.cn/bbs/register.php">注册</A> | <A
href="http://asbbs.cn/bbs/serach.php">搜索</A></DIV>
  <div class="nav_box">
       <ul class="nav">
    <li><a href="$very[url]">首页</a></li>
    <li><a href="$val[url]">$val[cname]</a></li>
     <li><a href="rss.php?cid=$cid">RSS</a></li>
     <li><a href="http://asbbs.cn/bbs"><div class="red">论坛</div></a>
    </ul></div></DIV>
</DIV><br>

 

 

CSS完整代码:

body{
background:#fff;
text-align:center;
color: #02418a;
font-family:"宋体", Arial, Helvetica, sans-serif;
margin:0px;
font-size:12px;

}
A:link {
 COLOR: #2f468f; TEXT-DECORATION: none
}
A:visited {
 COLOR: #2f468f; TEXT-DECORATION: none
}
A:hover {
 COLOR: #bf0303
}
UL {
 LIST-STYLE-TYPE: none
}
#header{
width:950px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #FFF;
height:109px;
text-align:left;
border:#a3bfe8 2px solid;

} #contain{
margin-right: auto;
margin-left: auto;
width: 950px;
} #mainbg{
width:950px;
padding: 0px;
background: #FFF;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 640px;
background: #FFF;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #FFF;
width: 300px;
text-align:left;
}
#footer{
clear:both;
width:938px;

margin-right: auto;
margin-left: auto;
padding: 6px;
background: #f3f9fe;
border:#cadef1 2px solid;
text-align:center;
}
.white_bg{
background:#FFF;border:#d8e4ef 2px solid;
}
.left_box{
 border:#a3bfe8 1px solid;padding:2px;margin:2px 4px 2px 0px;width:290px;background:#e9f1f8;
}
.left_box h3{
 font-size: 14px; margin: 0px 0px 0px 10px; line-height: 24px
}
.right_box{
 border:#a3bfe8 1px solid;padding:4px;margin:2px 0px 10px 4px;width:630px;background:#e9f1f8;
}
.right_box h3{
 font-size: 14px; margin: 0px 0px 0px 10px; line-height: 24px
}
.right_box h1{
 font-size: 24px; margin: 4px 0px 4px 0px; line-height: 24px;background:#fff;
 text-align:center;
}
.r{
 float:right;
}
#footlink{
text-align:center;margin:0px; padding:0px; background:#E9F1F8; border:#E9F1F8 1px solid}
#footlink li{ display:inline; padding:.2em 1em}
.logo{
padding-left:20px;float:left;margin:10px;
}
.r_nav_box{
float:right;width:685px;
}
.nav_box{
border:#a7cde5 1px solid;font-size:14px;float:right;margin:0px 12px 2px 0px;width:650px;line-height:30px;height:30px;
}
ul.nav{
padding:0px;margin:0px;
}
ul.nav li{
padding:0px 5px 0px 5px;font-weight:bold;float:left;height:30px;
}
.nav_dh{
background:#f1f7fb;float:right;margin:5px 12px 35px 0px;width:200px;line-height:18px;text-align:center;
}

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助