系列文章目录

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 */