Book05-No.3 前沿生物技术研究中心网站
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 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>??