Book05-No.6 汽车服务公司网站格局 _Web前端

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">首页&nbsp;&nbsp;&nbsp;&nbsp;<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:&nbsp;<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>