花店html

最新推荐文章于 2024-04-04 17:18:33 发布

小彭爱软件

最新推荐文章于 2024-04-04 17:18:33 发布

阅读量3.9k

点赞数 5

分类专栏： HTML5和CSS 文章标签： html5 css

本文链接：https://blog.csdn.net/m0_63929848/article/details/124801034

版权

HTML5和CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

系列文章目录

html练习例题

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

利用img图片插入以及惠特米勒段落排版练习

二、使用步骤

代码如下（示例）：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<link rel="stylesheet" href="css/1-1.css" type="text/css"/>
<title>网上花店</title>
	<link rel="shortcut icon" href="img/favicon.ico"/>
</head>

<body>
	<div class="header">
	<h1><strong>蝶恋花</strong><em>花开茶蘼 恋恋不忘</em></h1>
		<hr size="2" color00="#d1d1d1"/>
		</div>
<!--		头部模块-->
<!--		分类模块-->
	<div class="category">
		<h2>商品分类</h2>
		<img src="img/aa.png" 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/ff.png" alt="ff"/><br/><br/>
		<img src="img/bb.png" alt="bb"/>
		<br/><br/>
		<p class="description">多肉植物是指植物营养器官肥大的高等植物，通常具有根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花芬，但以多肉植物这个名称最为常用
		</p>
		<p class="description"><em>全世界公有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，各别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科</p>
		<br/>
	
	</div>
<!--	底部模块-->
	<div class="service">
	品质保障&nbsp;&nbsp;|&nbsp;&nbsp;免费退换&nbsp;&nbsp;|&nbsp;&nbsp;
	优质服务&nbsp;|&nbsp;帮助中心<br/><br/>
	</div>
	<div class="owner">
	<img src="img/cc.png" alt="头像" align="left" width="80px"/>
		<h3>店长：彭子杰&nbsp;&nbsp;&nbsp;&nbsp;<sub>电话：18807905942</sub></h3>
		<p>飞舞的花儿像写一首诗，写着秋天的心事，带着相思，轻轻地飘向大地</p>
		<p>秋以至、夏未尽</p>
		<br/><br/><br/>
<!--		底部，模块-->
	</div>
</body>
</html>

2.css3

代码如下（示例）：

*{
	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;
}

/* CSS Document */