HTML5前端开发实战03-网上花店网页制作

大概两年前我写了《讲给Android程序员看的前端和后台教程》；在这个专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。然而由于它的定位就是基础理论知识，所以在项目开发这方面就略显不足了。为了弥补欠缺，我打算新开一个专栏《HTML5前端开发实战》讲解前端项目；恳请各位斧正，多谢。

谷哥的小弟

28692人浏览 · 2019-08-25 22:25:09

谷哥的小弟 · 2019-08-25 22:25:09 发布

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

在这里插入图片描述

页面源码

HTML源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<title>网上花店</title>
	</head>
	<body>
	
		<!-- 头部模块 begin-->
		<div class="header">
			<h1><strong>蝶恋花</strong> <em>花开荼蘼 恋恋不忘</em></h1>
			<hr size="2" color="#d1d1d1"/>
		</div>
		<!-- 头部模块 end-->
		
		<!-- 分类模块 begin-->
		<div class="category">
			<h2>商品分类 ></h2>
			<img src="img/banner.jpg" alt="网上花店" />
			<br /><br />
			<p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着清新的芬芳...</p>
			<p>I love flowers, quietly open, never quiet. Little flowers, with the ...</p>
			<br />
		</div>
		<!-- 分类模块 end-->
		
		<!-- 热卖模块 begin-->
		<div class="bestseller">
			<img src="img/bestseller1.png" alt="bestseller1" />
			<br /><br />
			<img src="img/bestseller2.jpg" alt="bestseller2" />
			<br /><br />
			<p class="description">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p>
			<p class="description"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p>
			<br />
		</div>
		<!-- 热卖模块 end-->
		
		<!-- 底部模块 begin-->
		<div class="service">
			品质保障&nbsp;&nbsp;|&nbsp;&nbsp;免费退换&nbsp;&nbsp;|&nbsp;&nbsp;优质服务&nbsp;|&nbsp;帮助中心
			<br /><br />
		</div>
		<div class="owner">
			<img src="img/icon.gif" alt="头像" align="left" />
			<h3>店主：盛夏</h3>
			<p>飞舞的花儿像一首诗 ，写着秋天的心事 ，带着相思 ，轻轻地飘向大地</p>
			<p>秋已至、夏未尽</p>
			<br /><br /><br />
		</div>
		<!--  底部模块 begin-->
	</body>
</html>

CSS源码

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #ededed;
	font-family: "楷体";
	font-size: 16px;
	color: #a5a5a5;
}

.header {
	width: 980px;
	margin: 0 auto 7px;
	height: 86px;
	line-height: 86px;
	text-align: center;
	font-family: "微软雅黑";
	color: #a5a5a5;
}

.header h1 {
	font-weight: normal;
}

.header strong {
	font-weight: normal;
	font-size: 30px;
}

.header em {
	font-style: normal;
	font-size: 14px;
}


.category {
	width: 980px;
	margin: 0 auto;
}

.category h2 {
	font-size: 14px;
	font-family: "微软雅黑";
	color: #a5a5a5;
	height: 42px;
	line-height: 42px;
}

.category p {
	line-height: 30px;
	text-align: center;
	font-size: 18px;
}

.bestseller {
	width: 602px;
	margin: 0 auto;
}

.bestseller .description {
	line-height: 30px;
	text-indent: 2em;
}

.bestseller .description em {
	font-style: normal;
	text-decoration: underline;
}

.service {
	width: 602px;
	margin: 0 auto;
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	font-weight: bold;
}

.owner {
	width: 602px;
	margin: 0 auto;
}

.owner p {
	text-indent: 2em;
}

.owner h3 {
	height: 30px;
	line-height: 30px;
	font-family: "微软雅黑";
	font-size: 18px;
	font-weight: normal;
	text-indent: 2em;
}

.owner p {
	font-style: italic;
	line-height: 26px;
	font-size: 14px;
}