Book05-No.6 汽车服务公司网站布局
1、行内元素和块状元素：
div：块状，每个div分别占用一行
span: 行内，多个span占用一行
?
可以通过设置display:block/inline来改变元素是块状还是行内
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css">a {width: 200px;line-height: 40px;border: 1px solid yellow;background-color: red;text-decoration: none;display: block;}span {display: block;}div {display: inline;} </style> </HEAD> <BODY> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div> <span><img src="images/car-1.png" border=1></span> <span><img src="images/car-1.png" border=1></span> <span><img src="images/car-1.png" border=1></span> <span> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div> <div><img src="images/car-1.png" border=1> </div></span> <div><span><img src="images/car-1.png" border=1></span><span><img src="images/car-1.png" border=1></span><span><img src="images/car-1.png" border=1></span> </div> <a href="#">链接文字</a> </BODY></HTML>?
?2、网站设计
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HTML> <HEAD> <TITLE> 汽车租赁公司 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""><style type="text/css">body {margin: 0px;padding: 0px;font: 12px/18px Arial;background: white url(images/background.png) repeat-x;}#header {margin: 0px auto;width: 760px;height: 240px;}#header #menu {background: transparent url('images/top-menu-background.png') no-repeat;height: 39px;}#header #menu ul {list-style-type: none;margin: 0px;padding: 0px;}#header #menu ul li {float: left;color: white;}#header #menu ul li a {text-decoration: none;color: white;}#header #menu ul li a .number {display: block;float: left;font-size: 35px;font-weight: bold;padding-left: 20px;margin-left: 20px;margin-right: 2px;color: #CCC;line-height: 39px;border-left: 1px solid #ccc;}#header #menu ul li.frist a .number {border-left:none;margin-left: 0px;}#header #menu ul li a:hover .number {color: red;}#header #menu ul li a .item {}#header h1 {clear: both;background: transparent url("images/h1.png") no-repeat;height: 201px;margin: 0px;}#header h1 span {display: none;}#container {margin: 0px auto;width: 760px;}#container #content {width: 566px;float: left;padding: 0px 0px;margin: 0px;}#container #content #module {margin: 0px;}#container #content #module h2 {display: block;color:#666;font-family:黑体, Arial, Helvetica, sans-serif;font-weight:normal;background:#EEE;font-size:18px;line-height:40px;margin:5px 0 5px 0;padding-left:10px;clear:both;}#container #content #module h2 span.english {font-family:Arial, Helvetica, sans-serif}#container #content ul {list-style-type: none;margin: 0px;padding: 0px;}#container #content ul li {float: left;width: 200px;margin:10px 40px 10px 30px;display: inline;}#container #content ul li img {float: left;}#container #content ul li p {margin: 0px;padding-left: 104px;}#container #content ul li p span.price {color:#CC6600;font-weight:bold;}#container #content ul li p a {background-color: #c60;text-decoration: none;color: white;display: block;padding:2px 5px 0px;;}#content #clear{clear:both;}#sidrBar {width: 193px;float: right;margin: 0px;border-right:1px #ccc solid;position:relative;margin-top:-20px;background-color: white;}#sidrBar ul {padding:0 10px;list-style-type:none;color:gray;margin: 0px;}#sidrBar ul li {border-bottom: 1px #ccc dotted;padding-left:30px;background:transparent url('images/arror.png') no-repeat 15px center;}#sidrBar ul li a {text-decoration: none;color: gray;}#sidrBar ul li a:hover {background-color: gray;color: white;text-align: right;display: block;padding-right: 5px;}#sidrBar img {text-align: right;}#footer {clear: both;width: 760px;margin: 0px auto;height: 118px;background: transparent url(images/footer-background.png) repeat-x;}#footer #bottomMenu {margin:0px;padding:20px;list-style-type:none;}#footer #bottomMenu li {float: left;padding: 0px 10px;border-left: 1px solid #ccc;}#footer #bottomMenu li.frist {border-left: none;}#footer #bottomMenu li a {text-decoration: none;color: white;}#footer #hotline {float:right;background:transparent url('images/call.png') no-repeat left 3px;padding-left:30px;margin:20px 50px 0 0;color:white;line-height:30px;}#footer #hotline span {font-weight: bold;color: #ccc;}#copyright {clear:both;padding-left:30px;color:white;}#copyright span {color:#FFCC00;}</style> </HEAD> <BODY><div id="header"><div id="menu"><ul><li class="frist"><a href="#"><span class="number">01</span><span class="item">首页 <br />Home</span></a></li><li><a href="#"><span class="number">02</span><span class="item">汽车租赁<br />Rental</span></a></li><li><a href="#"><span class="number">03</span><span class="item">汽车配件<br />Parts</span></a></li><li><a href="#"><span class="number">04</span><span class="item">汽车销售<br />Sale</span></a></li><li><a href="#"><span class="number">05</span><span class="item">汽车维修<br />Repare</span></a></li><li><a href="#"><span class="number">06</span><span class="item">汽车咨询<br />Consult</span></a></li></ul><h1><span> Car Renting - Best automobile for you </span></h1></div></div><div id="container"><div id="content"><div id="module"><h2>推荐车型<span class="english">::Recommended</span></h2><ul><li><img src="images/car-2.png"><p><strong>高尔夫</strong><br />Golf 1.6<br />price<br /><span class="price">$139.00/天</span><br /><a href="#">预 订</a></p></li><li><img src="images/car-3.png"><p><strong>波罗</strong><br />Polo 1.4<br />price<br /><span class="price">$239.00/天</span><br /><a href="#">预 订</a></p></li><li><img src="images/car-4.png"><p><strong>永久</strong><br />Yonjiu 2.4<br />price<br /><span class="price">$349.00/天</span><br /><a href="#">预 订</a></p></li><li><img src="images/car-5.png"><p><strong>菲格</strong><br />Feige 3.0<br />price<br /><span class="price">$559.00/天</span><br /><a href="#">预 订</a></p></li></ul></div><div id="clear"></div><div id="module"><h2>备用零件<span class="english">::Spare Parts</span></h2><ul><li><img src="images/car-6.png"><p><strong>维修扳手</strong><br />HansFree-230<br />price<br /><span class="price">$1339.00</span><br /><a href="#">购 买</a></p></li><li><img src="images/car-7.png"><p><strong>BFR轮毂</strong><br />MDF-658<br />price<br /><span class="price">$2839.00</span><br /><a href="#">购 买</a></p></li></ul></div></div><div id="sidrBar"><ul><li><a href="#">Audi</a></li><li><a href="#">Alfa Romeo</a></li><li><a href="#">Chevrolet</a></li><li><a href="#">Citroen</a></li><li><a href="#">Daewoo</a></li><li><a href="#">Fiat</a></li><li><a href="#">Ford</a></li><li><a href="#">Honda</a></li><li><a href="#">Jeep</a></li><li><a href="#">Land Rover</a></li><li><a href="#">Mazda</a></li><li><a href="#">Mercedes</a></li><li><a href="#">Mitsubishi</a></li><li><a href="#">Nissan</a></li><li><a href="#">Opel</a></li><li><a href="#">Peugeot</a></li><li><a href="#">Renault</a></li><li><a href="#">Rover</a></li><li><a href="#">Saab</a></li><li><a href="#">Toyota</a></li><li><a href="#">Volkswagen</a></li><li><a href="#">other</a></li></ul><img src="images/car-1.png"/></div></div><div id="footer"><p id="hotline">Hot Line: <span>86-10-88888888</span></p><ul id="bottomMenu"><li class="frist"><a href="#">首页</a></li><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><p id="copyright">Copyright Reseverd Artech.cn <span>Term of service</span></p></div> </BODY></HTML>??
?