本人自己编写的类Cnbeta的css模版（兼容浏览器）
以下是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="top">
just leave it here for another use
</div>-->
<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;
}
posted on 2010-01-06 10:52 oliver.gxd 阅读(313) 评论(0) 编辑 收藏 举报
