1、设计后的效果图：
?
2、设计模型
?
3、float、clear
盒子设置float。left、right浮动
clear是下面的内容设置clear，清楚左右浮动，而不是盒子设置
?
4、border?
?
- border-color:#666666;
- border-width:2px;
- border-style: none, hedden(隐藏，应用在表格中解决边框冲突), dotted(点线), dashed(虚线), solid(实线), double(双实线), groove(凹槽), ridge(突脊), outset(外凸)
border: 2px red solid;
border-left: 1px #9999ff double;
border-left-color:red;
border-right-width: 2px;
?
5、代码设计：
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Artech Biolohical Center </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#container {
background-color: red;
width: 765px;
margin: 10px auto 0px;
position: relative;
}
h1 {
background-image: url("images/logo.jpg");
background-repeat: no-repeat;
border-top: 6px #DDD solid;
border-bottom: 2px #DDD solid;
height: 60px;
margin: 10px 0px 5px 0px;
}
h2 {
clear: left;
background-color: yellow;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
float: right;
width: 370px;
height: 140px;
margin: 0px 0 0 0;
}
h1 span, h2 span {
display: none;
}
#container #topMenu {
position: absolute;
top: 20px;
right: 0px;
}
#container #topMenu li {
float: left;
padding: 5px;
border-left: 1px #ddd solid
}
#container #topMenu li.frist {
border: none;
}
#container #topMenu li a {
color: gray;
text-decoration: none;
}
#container #topMenu li a:hover {
text-decoration: underline overline;
}
#container #topMenu li a:visited {
color: gray;
}
#container #content-left {
float: left;
width: 395;
background-color: white;
padding:10px;
}
#container #content-left #mainMenu {
margin: 0px 40px 10px 20px;
font-size: 15px;
line-height: 20px;
}
#container #content-left #mainMenu li {
border-bottom: 1px #DDD solid;
padding-top: 2px;
}
#container #content-left #mainMenu li a {
text-decoration: none;
display: block;
color: #555;
font-weight: bold;
}
#container #content-left #mainMenu li.last {
border-bottom:1px white hidden;
}
#container #content-left #search {
padding: 0px 0px 0px 0px;
border-top: 1px #ddd dashed;
border-bottom: 1px #ddd dashed;
}
#container #content-left #news h3 {
font-size: 15px;
margin: 10px 0;
}
#container #content-left #news p {
margin: 0px;
}
#container #content-left #news h4.newsTitle {
color: #47c;
font-size: 12px;
font-weight: bold;
margin: 10px 0 0px -10px;
}
#news p.newsDate {
font-color: #777;
font-weight: bold;
}
#news p.newsContent {
font-color: #777;
font-size: 11px;
}
#container .contentBox {
float: right;
background-color: yellow;
width:370px;
padding: 5px 5px;
}
#container .contentBox h3 {
font-size: 15px;
color: white;
margin: 5px -2px 5px -5px;
line-height: 1.5;
padding-left: 5px;
}
#container .orange h3 {
background-color: orange;
}
#container .green h3 {
background-color: green;
}
#container .contentBox ul {
margin-left: 2em;
font-weight: bold;
color: #666;
list-style-type: circle;
}
#container .contentBox ul a {
text-decoration: none;
color: #999;
}
#container .contentBox ul a:hover {
text-decoration: underline;
color: red;
}
#footer {
clear: both;
}
#footer ul {
margin: 15px auto 0px;
float: left;
border-top: 10px #ddd solid;
border-bottom: 10px #ddd solid;
text-align: center;
background-color: blue;
}
#footer ul li {
float:left;
padding: 5px;
height: 12px;
line-height: 12px;
text-align: center;
border-left: 1px #ddd solid;
}
#footer ul li.frist {
border: none;
}
/*#clear {
clear: both;
}*/
</style>
</HEAD>
<BODY>
<div id="container">
<h1><span>Artech Biolohical Center</span></h1>
<h2><span>Life is miracle, Life is Beatiful, We find source of life.</span></h2>
<ul id="topMenu">
<li class="frist"><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Site map</a></li>
</ul>
<div id="content-left">
<div id="mainMenu">
<ul class="menu">
<li><a href="#">Home Page</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">News Room</a></li>
<li><a href="#">Action</a></li>
<li class="last"><a href="#">ReseProgram</a></li>
</ul>
</div>
<div id="search">
<form>
<input name="text" type="text" />
<input name="button" type="button" value="Search"/>
</form>
</div>
<div id="news">
<h3>News and Events 新闻动态</h3>
<h4 class="newsTitle"># Sometimes I have a reoccurring conversation with myself</h4>
<p class="newsDate">2012年5月4日 10:43:44</p>
<p class="newsContent">Sometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing date</p>
<h4 class="newsTitle"># This usually takes place after a particularly disturbing date</h4>
<p class="newsDate">2012年5月4日 10:44:50</p>
<p class="newsContent">Sometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing date</p>
</div>
</div>
<div class="contentBox orange">
<h3>Out Program 研究计划</h3>
<p>after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring</p>
<ul>
<li><a href="#">takes place after</a></li>
<li><a href="#">I have a reoccurring</a></li>
<li><a href="#">particularly</a></li>
<li><a href="#">newsContent</a></li>
<li><a href="#">Sometimes I have</a></li>
</ul>
</div>
<div id="clear">
</div>
<div class="contentBox green">
<h3>Our Works 工作项目</h3>
<p>after a particularly disturbing dateSometimes I have a reoccurring conversation with myself. This usually takes place after a particularly disturbing dateSometimes I have a reoccurring</p>
<ul>
<li><a href="#">takes place after</a></li>
<li><a href="#">I have a reoccurring</a></li>
<li><a href="#">particularly</a></li>
<li><a href="#">newsContent</a></li>
<li><a href="#">Sometimes I have</a></li>
</ul>
</div>
<div id="footer">
<ul>
<li class="frist">All Copyright Reserved 2012</li>
<li>Metarnet Beijng China</li>
<li><a href="mailto:616059480@qq.com">联系我们</a></li>
</ul>
</div>
</div>
</BODY>
</HTML>
?
?