HTML
Code<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
<meta />
</head>
<body>
<div id="container">
<div id="topbar">
<div id="topmenu">
<div class="col_left"><img src="images/top_b2c.gif" alt="infopro" /></div>
<div class="links">
<ul>
<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="top">
<div class="logo"><img src="images/logo.gif" alt="infopro" /></div>
<div class="topad">
<ul>
<li><a href="#">免费附送专属包装</a></li>
<li><a href="#">免费祝福贺卡</a></li>
<li><a href="#">220个城市货到付款</a></li>
<li><a href="#">北京地区免运费</a></li>
</ul>
</div>
<div class="contact">
<img src="images/top_400.jpg" alt="400-810-9988" width="219" height="81" />
<img src="images/top_service.jpg" alt="客户服务" width="152" height="81" border="0" />
</div>
</div>
</div>
<div id="navbar">
<div id="navbar_left">
<ul>
<li><img src="images/top_menu_bt12.gif" alt="首页" /></li>
<li><img src="images/top_menu_bt21.gif" alt="个人用品" /></li>
<li><img src="images/top_menu_bt31.gif" alt="箱包饰品" /></li>
<li><img src="images/top_menu_bt41.gif" alt="箱包饰品" /></li>
<li><img src="images/top_menu_bt51.gif" alt="家居饰品" /></li>
<li><img src="images/top_menu_bt61.gif" alt="礼物专享" /></li>
<li><img src="images/top_menu_bt71.gif" alt="Infopr家族" /></li>
</ul>
</div>
<div id="navbar_right">
<ul>
<li><img src="images/top_push_bt1.gif" alt="星座频道" />
<img src="images/top_push_bt2.gif" alt="本月推荐" />
<img src="images/top_push_bt3.gif" alt="特价优惠" />
<img src="images/top_push_bt4.gif" alt="热门活动" />
</li>
</ul>
</div>
</div>
<div id="main">
<div id="column_left">
<h1>Title</h1>
<h2>Hello</h2>
<p>Heeeeoleeefdsfdsfasfdsafdsf</p>
</div>
<div id="column_right">
<h3>Right</h3>
</div>
<div id="column_right_ad">
<h3>Adsense</h3>
<p>Adsense 120 X 600</p>
</div>
<div class="spacer">spacer</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS定义：
Code/* ------------------------------
HTML Redefine Tags
------------------------------ */
body
{
margin:20px;font-size:12px;color:#71585e;line-height:16px;
}
ul{margin:0px}
li{list-style-type:none;}
a {font-size:12px;color:#71575D;text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (1005 pixel)
*/
#container { margin:0 auto; width:1005px;}
#topbar { width:auto; display:block; border:1px solid #ccc;}
#topmenu {width:auto; display:block;}
.col_left {width:450px; float:left; }
.links {float:right;width:550px;}
#topmenu ul{margin:8px;width:500px;text-align: right;}
#topmenu li{margin:3px 10px;display:inline;padding-left:12px; background: url(../images/index_dot2.gif) no-repeat left;}
#top {width:auto; display:block;}
.logo {float:left;width:430px;padding:8px 0px;text-align: center;vertical-align: middle;}
.topad {float:left;width:190px;}
.topad ul{margin:0px;}
.topad li{margin:3px 0px;padding-left:10px; background: url(../images/index_dot2.gif) no-repeat left;}
#navbar {width:auto; float:left;margin:0px auto;background-image: url(../images/top_menu_bg.jpg);background-repeat: repeat-x; border:1px solid #ccc;}
#navbar_left {float:left;width:650px;height:40px;}
#navbar_left ul {margin:0px 5px;width:640px}
#navbar_left li {float:left;margin:0px 2px;display:inline;}
#navbar_right {float:right;width:355px;}
#navbar_right ul {margin:5px 0px;padding:0px;}
#navbar_right li {margin:0px;padding:0px;display:inline;}
#main {width:auto; display:block; padding:10px 0;}
#column_left { width:360px; padding-right:20px; float:left}
#column_right { width:260px; padding-right:20px; float:left}
#column_right_ad { width:120px; float:left}
div.spacer { clear:both; display:block; height:10px;border:1px solid #ccc;}
#footer { width:auto; padding:10px 0; display:block; font:11px; color:#666666;border:1px solid #ccc; }
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/*
Add here your custom classes
*/
