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

HTML5前端开发实战 专栏收录该内容
8 篇文章 62 订阅

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义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;
}

©️2022 CSDN 皮肤主题:酷酷鲨 设计师:CSDN官方博客 返回首页

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值