案例
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="huyiwei"><meta name="generator" content="HBuilder X"><title>中国环宇科技有限公司</title><link rel="stylesheet" href="综合实验9.css" type="text/css"/></head><body><div id="container" class=""><div id="header"><div id="logo"><img src="图片/logo.png"/></div><div id="select" class=""><select><option value="" vavaselected = "selected">简体中文</option><option value="">繁体中文</option><option value="">ENGLISH</option></select></div></div><div id="picture" class=""><img src="图片/huanyu.jpg" width="990px" height="345px" border = "0" alt="" /></div><div id="nav" class=""><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务项目</a></li><li><a href="#">合作伙伴</a></li><li><a href="#">联系我们</a></li></ul></div><div id="main" class=""><div id="left" class=""><h2>关于我们</h2><div id="left-up" class=""><img src="图片/xwjj.jpg" border = "0" alt=""/><p> 中国环宇科技有限公司是于1985年为了通过试验评价技术的支援以提高 产业技术而成立的试验评价机构，是和先进（发达）国家的试验、认证机构 进行交流和合作的某代表性机构。为了保护本国产业的各种认证制度日渐完善， 为保护消费者安全和环境的各种制度的重要性日趋增加，KTL 为适应形势的发展，从产品开发到获得认证的整个阶段提供支援，以帮助企业提高技术能力以及拥有 更强的竞争力。</p></div><div id="left-down" class=""><img src="图片/ico1.gif" border = "0" alt="" /><p id = "p1">我们的服务：权威性的认证，严谨规范、完善周到的服务，合理公平的费用， 解除您在认证方面的后顾之忧。</p></div></div><div id="right" class=""><h2>合作伙伴</h2><ul><li>XX代办服务公司</li><li>香港XX企业服务有限公司</li><li>上海XX专利代办机构</li><li>中国某某商业合作社</li><li>南京某某商业银行</li><li>日本XX会社</li><li>中国某某商业合作社</li></ul></div></div><div id="footer" class=""><p>COPY RIGHT © 中国环宇科技有限公司 科技事业部支持 京备XXXXX-342</p></div></div></body></html>
css
*{font-size: 12px;font-family: 'Times New Roman', Times, serif;}#container{margin: 0 auto;padding: 0 auto;}#header{width: 990px;height: 65px;margin: 0 auto;/* background-color: aquamarine; */}#logo{width: 263px;height: 65px;float: left;/* background-color: bisque; */}#select{width: 727px;height: 65px;float: left;text-align: right;/* background-color: lawngreen; */}#picture{width: 990px;height: 345px;clear: both;/* background-color: grey; */}#nav{width: 990px;height: 40px;/* background-color: aquamarine; */border: 0px;}#nav ul{list-style-type: none;}#nav li{display: inline;padding: 10px 45px;background: url("../第8章/图片/line.png") no-repeat right;text-align: center;}#main{width: 990px;height: 250px;/* background-color: goldenrod; */}#left{width: 660px;height: 250px;/* background-color: fuchsia; */float: left;line-height: 1.5em;}h1{color: #0099ff;font-size: 18px;height: 36px;border-bottom: 2px solid #0099ff;}#left img{float: left;width: 220px;height: 144px;}#left-down{margin: 0px auto;padding: 0px;clear: both;width: 100%;height: 70px;}#left-down img{vertical-align: text-bottom;width: 60px;height: 50px;vertical-align: bottom;}#p1{padding-top: 20px;height: 30px;}#right{width: 290px;height: 250px;background-color: blanchedalmond;float: right;border: 1px solid #00ff00;}/* ul{width: 200px;height: 100%;padding: 0px;margin: 0 auto;}li{padding: 0px;margin: 0px;line-height: 2em;list-style-type: none;text-align: left;} */#footer{width: 990px;height: 30px;/* background-color: rebeccapurple; */clear: both;border-top: 2px solid #0099ff;}#footer p{padding: 10px auto;text-align: center;color: #333333;}
