Css概述例题

程序1.2 是一个典型的HTML文件，它包含多种HTML标签，同时使用<div>元素结合外部样式表实现页面布局。

程序 1.2 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派派电子商城</title>
		<link href="css/layout.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="header"><img alt="Here is a logo." src="images/logo.jpg" />
		</div>
		<div id="topmenu">
			<form action="LoginServlet" method="post" name="login" >
			<p>用户名<input type="text" name="username" size="13" />
			     密 码<input type="password" name="password" size="13" />
			     <input type="submit" name="Submit" value="登入" >
			     <input type="button" name="register" value="注册"
			     			onclick="check();">
			     <input type="button" name="myorder" value="我的订单" />
			     <input type="button" name="shopcart" value="查看购物车" />
			</form>
		</div>
		<div id="middle">
			<div id="leftmenu">
				<p align="center"><b>商品分类</b></p>
				<ul>
					<li><a href="goods.do?catalog = mobilephone">手机数码</a></li>
					<li><a href="goods.do?catalog = electrical">家用电器</a></li>
					<li><a href="goods.do?catalog = automobile">汽车用品</a></li>
					<li><a href="goods.do?catalog = clothes">服饰鞋帽</a></li>
					<li><a href="goods.do?catalog = health">运动健康</a></li>
				</ul>
			</div>
			<div id="content">
				<table>
					<tr><td><img src="images/phone.jpg"><td><p>
						三星S5830领取手机节优惠卷，立减100元！再送：200元移动手机卡！
						派派价：2068元</p></td>
					<td><img src="images/comp.jpg"></td><td><p>
						联想（Lenovo）G460AL-ITH 14.0英寸笔记本电脑（i3 - 370M 2G 500G 512
						独显DVD刻录 摄像头 Win7）特价：3199元！</p></td>
					</tr>
				</table>
			</div>
		<div/>
		<div id="footer">
			<hr size="1" color="blue" />
			Copyright &copy; 2013派派电子商城有限责任公司，8899123.
		</div>
	</body>
</html>

该页面运行结果如图所示：

我没图片。。凑合看吧

上述页面使用的样式表文件如下。

程序 1.3 layout.css

body{
	font-family:verdana; font-size: 14px; margin:10;}
#container{
	margin: 0 auto; width: 100%;
}
#header{
	height: 50px; background:#9c6; margin-bottom: 5px;
}
#topmenu{
	height: 30px; background: #c0c0c0; margin-bottom: 5px;
}
#middle{
	margin-bottom:5px;
}
#leftmenu{
	float: left; width: 180px;background: #cf9;
}
#content{
	float: left; background:  #ffa;		
}
#footer{
	height: 60px; background: #9c6;
	clear: both;
}

猜你喜欢