1. 设计上中下版式的样式
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
body{font-family: "宋体";font-size: 12px;}
.big{width: 800px;margin: 0 auto 0 auto;}
.up{width: 800px;height: 100px;background-image: url(3.jpg);background-repeat: no-repeat;}
.middle{background-color: #66CCFF;margin-top: 10px;}
.bottom{background-color: #CCCCCC;height: 80px;text-align: center;}
</style>
</head>
<body>
<div class="big">
<div class="up">
<p><a href="#">首页</a><a href="#">市场动态</a><a href="#">最新产品</a><a href="#">关于我们</a><a href="#">联系我们</a></p>
</div>
<div class="middle">
<br><h1>凯美瑞最低16.78万 中高级车价战再升级</h1>
<p>16.75万元！即使回到年初，广汽凯美瑞（图库 论坛）这一最低售价仍难以想象，不过近日，它却成为现实。杭州5家广汽丰田经销商目前正大张旗鼓进行联合促销，凯美瑞全系车型在厂方指导价18.28-28.38万元的基础上优惠1.5万元，且附送购车礼包。</p>
<p>这是凯美瑞自2006年6月上市以来，价格首次跌破17万元，也是继马自达6（图库 论坛）宣布降价至14.98万元后，杭州中高级轿车又一次价格公开探底。</p>
</div>
<div class="bottom">
<br><p><a href="#">首页</a><a href="#">市场动态</a><a href="#">最新产品</a><a href="#">关于我们</a><a href="#">联系我们</a></p>
<p>2010©上海润飞信息科技有限公司 技术支持</p>
</div>
</div>
</body>
</html>2.设计固定宽度且居中的样式
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.big{width: 1000px;margin: 0 eauto 0 auto;}
.nav{background-color: #C2E3E9;width: 1000px;height: 25px;}
.main{width: 1000px;height: 600px;}
.left{width: 220px;float: left;height: 600px;text-align: center;}
.right{width: 550px;float: left;height: 600px;border-left: #CCCC00 solid;}
.right .wen{width: 600px;margin: 0 auto 0 auto;}
.foot{height: 15px;background-color: #CCCCCC;text-align: center;}
.logo{width: 1000px;height: 160px;background-image: url(4.jpg);text-align: center;}
</style>
</head>
<body>
<div class="big">
<div class="logo"><h1>饮茶网站</h1></div>
<div class="nav">
<p> <a href="#">首页</a> <a href="#">绿茶知识</a> <a href="#">红茶知识</a> <a href="#">茶具知识</a>
</p></div>
<div class="main">
<div class="left"><img src="5.jpg">
<p>预防疾病方面：红茶的抗菌力强，用红茶吐水可防滤过性病毒引起的感冒，并预防蛀牙与食物中毒，降低血糖值与高血压。</p>
<img src="8.jpg">
<p>春天万物复苏，宜喝花茶，以驱寒邪，促阳气升发；夏季高温潮湿。人体消耗较大，适宜喝绿茶，有消暑解热之功效</p>
</div>
<div class="right"><div class="wen"><h1>降脂减肥，防止心脑血管疾病</h1>
<p>降脂减肥，防止心脑血管疾病。饮茶与减肥的关系是非常密切的，《神农本草》一书早在二千多年前已提及茶的减肥作用：“久服安心益气.....轻身不老”。现代科学研究及临床试验证实，饮茶能够降低血液中的血脂及胆固醇，令身体变得轻盈，这是因为茶里的酚类衍生物、芳香类物质、氨基酸类物质、维生素类物质综合协调的结果，特别是茶多酚与茶素和维生素C的综合作用，能够促进脂肪氧化，帮助消化、降脂减肥、此外，茶多酚能溶解脂肪、而维生素C则可促进胆固醇排出体外。绿茶本身含茶甘宁，茶甘宁是提高血管韧性的，使血管不容易破裂。</p>
<h1>防癌</h1>
<p>绿茶所含的成分——茶多酚及咖啡碱，两者所产生的综合作用，除了起到提神、养神之效，更具备提高人体免疫能力和抗癌的功效。近年，美国化学协会总会发现，茶叶不仅对消化系统癌症有抑制的功效，而且对皮肤及肺、肝脏癌也有抑制作用。经过科学研究确认，茶叶中的有机抗癌物质主要有茶多酚、茶碱、维生素C和维生素E；茶叶中的无机抗癌元素主要有X、X、X、X、X等。中、日科学家认为，茶多酚中的儿茶素抗癌效果最佳</p>
</div></div>
</div>
<div class="foot"><p>上海润飞网络信息科技版权 所有</p></div>
</div>
</body>
</html>3. 设计左中右版式的样式
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.left{width: 200px;float: left;height: 500px;}
.middle{width: 800px;height: 500px;float: left;background-color: #FDFBCA;}
.right{width: 200px;float: left;height: 500px;text-align: center;background-color: #F4FAFB;}
.big{width: 1200px;margin: 0 eauto 0 auto;}
.middle .wen{width: 600px;margin: 0 auto 0 auto;}
.dh{font-size: 16px;font-style: solid;text-align: center;padding: 5;}
</style>
</head>
<body>
<div class="big">
<div class="left">
<div class="dh">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">绿茶知识</a></li>
<li><a href="#">红茶知识</a></li>
<li><a href="#">茶具知识</a></li>
</ul>
<h2 class="text-align: left;">友情链接</h2>
<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 class="middle">
<div class="wen">
<h1>降脂减肥，防止心脑血管疾病</h1>
<p>降脂减肥，防止心脑血管疾病。饮茶与减肥的关系是非常密切的，《神农本草》一书早在二千多年前已提及茶的减肥作用：“久服安心益气.....轻身不老”。现代科学研究及临床试验证实，饮茶能够降低血液中的血脂及胆固醇，令身体变得轻盈，这是因为茶里的酚类衍生物、芳香类物质、氨基酸类物质、维生素类物质综合协调的结果，特别是茶多酚与茶素和维生素C的综合作用，能够促进脂肪氧化，帮助消化、降脂减肥、此外，茶多酚能溶解脂肪、而维生素C则可促进胆固醇排出体外。绿茶本身含茶甘宁，茶甘宁是提高血管韧性的，使血管不容易破裂。</p>
</div>
</div>
<div class="right">
<p><img src="1.jpg"></p>
<p><img src="6.jpg"></p>
<p><img src="7.jpg"></p>
</div>
</div>
</body>
</html>4. 设计块的背景色及背景图片
5. 内容分类显示版式
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.big{width: 850px;margin: 0 auto 0 auto;}
img{width: 850px; height: 120px;}
.down{width: 850px;background-color: #FDEEFC;}
.one{width: 400px;float: left;border: #0066FF 1px solid;margin-top: 10px;}
.two{width: 400px;float: left;margin-left: 46px;margin-top: 10px;border: #CC3300 1px solid;}
</style>
</head>
<body>
<div class="big">
<img src="3.jpg">
<div class="down">
<div class="one"><h2>星尚资讯</h2>
<p>.贾静雯离婚丈夫索要百万 袁泉产子后首露面（图）</p>
<p>.郭富城称缘分到岁时结婚 任贤齐儿女精灵可爱（图）</p>
<p>.Selina欲结婚S.H.E恐面临解散 邓丽欣再陷艳照风波</p>
<p>.李嘉欣不抗拒生子（图）凯莉</p>
</div>
<div class="two"><h2>影视资讯</h2>
<p>.影院看3D世界杯方案或将夭折 《驯龙高手》儿童节大赚</p>
<p>.电影版《将爱》低调开机 阿娇“鲨鱼衣”大秀S身形（图）</p>
<p>.权相护变身F4推限制级电影 《刹马镇》海报玩挖宝游戏</p>
<p>.黄晓明想邀请郭敬明韩寒对戏 格罗夫毛遂自荐饰演蜘蛛侠</p>
</div>
<div class="one"><h2>国际星闻</h2>
<p>.布兰妮和男友爆发激烈争吵 疑感情再次出现危机</p>
<p>.布洛克离婚仍肩负继母责任 陪前夫孩子外出游玩</p>
<p>.席琳.狄翁怀上双胞胎 计划下月确认胎儿性别</p>
<p>.日星瑛太与歌手木村将奉子成婚 官网公布喜讯</p>
</div>
<div class="two"><h2>港台星闻</h2>
<p>.S.H.E恐将解散 Selina爸爸看好婚事望其退出组合</p>
<p>.Selina向父母请婚 任爸爸一脸满意给女婿打满分</p>
<p>.李嘉欣透露对生育无渴求 否认帮姐姐搭路嫁豪门</p>
<p>.刘心悠憧憬白色婚礼 坦言闪电嫁人婚后不设防</p>
</div>
</div>
</div>
</body>
</html>
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
