<!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=utf-8" />
<title>商务网站</title>
<link href="css/style.css" rel="stylesheet" />
<link href="img/100du.ico" rel="shortcut icon" />
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="header" class="gradient"></div>
<div id="nav"></div>
<div id="search" class="gradient">
<div class="bar"></div>
</div>
<div class="content clear">
<div class="main fl">
<div class="clear">
<div class="section fl"></div>
<div class="options fr"></div>
</div>
<div class="main_ad">
<a href="#"><img src="img/ad/ad1.jpg" /></a>
</div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
<div class="clear">
<div class="options fl"></div>
<div class="section fr"></div>
</div>
<div class="main_ad">
<a href="#"><img src="img/ad/ad1.jpg" /></a>
</div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
</div>
<div class="side fr">
<div class="side_section"></div>
<div class="ad_border"><a href="#"><img src="img/ad/ad2.jpg" /></a></div>
<div class="side_ad"><a href="#"><img src="img/ad/ad3.jpg" /></a></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*样式重置*/
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select{margin:0;padding:0;}
em{ font-style:normal;}
li{ list-style:none;}
a{ text-decoration:none;}
img{border:none; vertical-align:top;}
table{ border-collapse:collapse;}
input,textarea{outline:none;}
textarea{ resize:none; overflow:auto;}
body{ font-size:12px; font-family:"微软雅黑";}
/* public*/
.clear{ zoom:1;}
.clear{ content:''; display:block; clear:both;}
.fl{ float:left;}
.fr{ float:right;}
.gradient{
background:-moz-linear-gradient(top,#ffffff,#f8f8f8);
background:-webkit-linear-gradient(top,#ffffff,#f8f8f8);
background:-ms-linear-gradient(top,#ffffff,#f8f8f8);
background:linear-gradient(top,#ffffff,#f8f8f8);
+background:#f9f9f9;
}
/* layout*/
body{ margin-bottom:30px;}
#header{ height:30px; width:960px; margin:0 auto; border-radius:0 0 6px 6px; }
#nav{ width:960px; height:100px; margin:0 auto; background:#FF6;}
#search{ width:958px; height:114px; border:1px solid #dbdbdb; border-radius:6px; margin:0 auto 10px;}
#search .bar{}
.content{ width:960px; margin:0 auto; }
.main{ width:710px;}
.section{ width:318px; height:200px; padding:0 15px; border:1px solid #dbdbdb; border-radius:6px; margin-bottom:10px;}
.options{ width:350px; height:200px; background:#09F;margin-bottom:10px;}
.main_ad{ border-radius:6px;overflow:hidden; margin-bottom:10px; width:709px; height:79px;}
.side{ width:240px;}
.side_section{ height:60px; border:1px solid #dbdbdb;border-radius:6px; margin-bottom:10px; width:240px;}
.side_ad{border-radius:6px;overflow:hidden; margin-bottom:10px;}
#footer{ width:958px; height:78px;border:1px solid #dbdbdb;border-radius:6px; margin:0 auto; background:#f9f9f9; }
.ad_border{border:1px solid #dbdbdb;border-radius:6px;overflow:hidden; margin-bottom:10px;}
一杯2块的奶茶