系列文章目录
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">
品质保障 | 免费退换 |
优质服务 | 帮助中心<br/><br/>
</div>
<div class="owner">
<img src="img/cc.png" alt="头像" align="left" width="80px"/>
<h3>店长：彭子杰 <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;
}
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了html5和css3的使用.
