CSS+DIV实例——鲜花店

最新推荐文章于 2023-04-01 12:49:04 发布

黎明的蜗牛

最新推荐文章于 2023-04-01 12:49:04 发布

阅读量1.5w

点赞数 18

分类专栏： BS 文章标签： CSS

本文链接：https://blog.csdn.net/XUJIAOlf/article/details/24888209

版权

该博客介绍了如何利用CSS+DIV布局技术来设计一个鲜花店的网页。通过这个实例，展示了如何将内容与表现分离，实现更灵活的网页布局。

摘要由CSDN通过智能技术生成

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

在之前介绍过理论的基础上，做如下鲜花店的实例：

页面截图：

html代码：

<html>
	<head>
		<title>鲜花满屋</title>
		<link href="鲜花.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="container">
			<div id="banner"><img src="banner.jpg"></div>
			<div id="globallink">
				<ul>
					<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>
					<li><a href="#">百合花</a></li>	
					<li><a href="#">康乃馨</a></li>						
				</ul>			
			</div>
			<div id="left">
				<div id="login">
					<form>
						<p>用户：<input type="text" class="text"></p>
						<p>密码：<input type="text" class="text"></input></p>
						<p><input type="button" class="btn" value="登录"></input><input type="button" class="btn" value="注册"> </input></p>
					</form>
				</div>
				<div id="category">
					<h4><span>用途</span></h4>
					<ul>
						<li><a href="#">爱情鲜花<