Book05-No.6 汽车服务公司网站格局
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>