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


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

Android多分辨率适配框架

HTML5前端开发实战系列教程

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

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

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

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


版权声明

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

页面效果

HTML5前端开发实战03-网上花店网页制作_第1张图片

页面源码

HTML源码


<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>
	
		
		<div class="header">
			<h1><strong>蝶恋花strong> <em>花开荼蘼 恋恋不忘em>h1>
			<hr size="2" color="#d1d1d1"/>
		div>
		
		
		
		<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>
		
		
		
		<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>
		
		
		
		<div class="service">
			品质保障  |  免费退换  |  优质服务 | 帮助中心
			<br /><br />
		div>
		<div class="owner">
			<img src="img/icon.gif" alt="头像" align="left" />
			<h3>店主:盛夏h3>
			<p>飞舞的花儿像一首诗 ,写着秋天的心事 ,带着相思 ,轻轻地飘向大地p>
			<p>秋已至、夏未尽p>
			<br /><br /><br />
		div>
		
	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;
}

你可能感兴趣的:(HTML5前端开发实战)