html div标签的简单运用-静态页面-花店

最新推荐文章于 2025-07-25 09:05:17 发布

原创最新推荐文章于 2025-07-25 09:05:17 发布 · 4.7k 阅读

28 ·

CC 4.0 BY-SA版权

本文展示了一个简单的静态花店网页布局实例，采用div标签进行页面划分，并通过内联样式实现基本的设计风格。页面包括顶部横幅、导航菜单、登录表单及商品分类等元素。

使用div标签写一个静态的花店网页，比较但简单。希望各位大佬勿喷！

下载地址 https://download.youkuaiyun.com/download/qq_29505841/10300819

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	body{
		background-color:#FFC3D5;
	}
	#mBody{
		width:700px;
		height:1010px;
		background-color:white;
		margin:0px auto;
	}
	#mTitle a{
		width:100px;
		text-decoration:none;
		line-height:28px;
		background:url(flower/button1.jpg) no-repeat;
		text-align:center;
		margin:0px auto;
		float:left;
	}
	#mMenu{
		width:175px;
		height:850px;
		float:left;
	}
	#mMain{
		width:525px;
		height:850px;
		float:left;
	}
	.mInput{
		width:100px;
		border:0px;
		border-bottom:1px solid;
	}
	#mMenu p{
		background-color:#FFD1D1;
		border:1px solid #F54F54;
		margin:0px 10px;
		width:150px;
	}
	ul{
		list-style:none;
		padding:0px;
		margin:5px 10px;
	}
	li{
		border-bottom:1px dashed;
		line-height:22px;
	}
	iframe{
		border:0px;
	}
  </style>
 </head>
 <body>
		<div id="mBody">
			<div><img src="flower/banner.jpg"></div>
			<div id="mTitle">
				<a href="flowerTwoMain.html" target="mFrame">鲜花礼品</a>
				<a href="flowerTwoTable.html" target="mFrame">自助鲜花</a>
				<a href="flowerTwoMain.html" target="mFrame">绿色植物</a>
				<a href="flowerTwoMain.html" target="mFrame">花之物语</a>
				<a href="flowerTwoMain.html" target="mFrame">会员中心</a>
				<a href="flowerTwoMain.html" target="mFrame">联系我们</a>
				<a href="flowerTwoMain.html" target="mFrame">支付方式</a>
			</div>
			<div id="mMenu">
				<img src="flower/login.jpg">
				  用户:  <input class="mInput" type="text"></br></br>
				  密码:  <input class="mInput" type="password"></br></br>
				<input type="button" value="登陆">
				<a href="flowerTwoLogin.html" target="mFrame"><input type="button" value="注册"></a>
				忘记密码</br>
				<img src="flower/category.jpg">
				<p>用途</p>
				<ul>
					<li><img src="flower/icon1.gif"> 爱情鲜花</li>
					<li><img src="flower/icon1.gif"> 生日鲜花</li>
					<li><img src="flower/icon1.gif"> 新年鲜花</li>
					<li><img src="flower/icon1.gif"> 家庭鲜花</li>
					<li><img src="flower/icon1.gif"> 亲情鲜花</li>
					<li><img src="flower/icon1.gif"> 道歉鲜花</li>
					<li><img src="flower/icon1.gif"> 开业鲜花</li>
					<li><img src="flower/icon1.gif"> 会议鲜花</li>
				</ul>
				<p>花材</p>
				<ul>
					<li><img src="flower/icon1.gif">  玫瑰花</li>
				<li><img src="flower/icon1.gif">  百合花</li>
				<li><img src="flower/icon1.gif">  郁金香</li>
				<li><img src="flower/icon1.gif">  太阳花</li>
				<li><img src="flower/icon1.gif">  康乃馨</li>
				<li><img src="flower/icon1.gif">  马蹄莲</li>
				<li><img src="flower/icon1.gif">  扶朗</li>
				<li><img src="flower/icon1.gif">  剑兰</li>
				</ul>
				<p>用途</p>
				<ul>
					<li><img src="flower/icon1.gif">  100~200元</li>
				<li><img src="flower/icon1.gif">  200~300元</li>
				<li><img src="flower/icon1.gif">  300~400元</li>
				<li><img src="flower/icon1.gif">  500~600元</li>
				<li><img src="flower/icon1.gif">  600~700元</li>
				<li><img src="flower/icon1.gif">  700~800元</li>
				<li><img src="flower/icon1.gif">  800元以上</li>
				</ul>
			</div>
			<div id="mMain">
				<iframe name="mFrame"
				width="100%" height="100%" src="flowerTwoMain.html" scrolling="no"></iframe>
			</div>
		</div>
 </body>
</html>