CSS制作简易花束网站首页（新手适用）

花束网站首页（新手适用）"/>

CSS制作简易花束网站首页（新手适用）

效果展示：

制作头部：

思路：在h1标题中加入颜色和不同字体大小等样式，在标题下加条下划线即可。

<header><h1><strong>浪漫の都</strong><em>___这一生只为与你相遇</em></h1><hr size="2" color="hotpink" width="980px">
</header>

 header{width: 980px;margin: 0 auto 8px;height: 86px;line-height: 86px;text-align: center;font-family: 楷体;color: hotpink;}header strong{font-weight: normal;font-size: 30px;}header em{font-weight: normal;font-size: 20px;}

内容部分：

思路：商品分类>是一个h2标签，下面插入一张美丽小姐姐图片，最后引用p标签写入相应文本。
h2改变字体大小样式颜色，并利用margin属性调整好在网页中位置，
图片调整大小以及在网页中的位置，p标签中文字居中显示并改变颜色。
具体代码如下：

<div class="fenlei"><h2>商品分类></h2><img src="images/1.jpg" alt="网上花店"><br><p>我喜欢一些花儿，静静的开放，从不声张。小小的花朵，有着异样的芬芳...</p><p>I love flowers ,quietly open , never quiet. Little flowers , with the same fragrance...</p>
</div>

.fenlei{height: 530px;margin: 0px auto;}.fenlei h2{font-size: 18px;font-family:"微软雅黑";color: darksalmon;height: 42px;line-height: 42px;margin: 10px 140px 0px;}.fenlei img{width: 980px;height: 400px;margin: 0px 140px;}.fenlei p{line-height: 30px;text-align: center;color: navajowhite;font-size: 17px;}

思路：左面插入一张图片并使用border-radius属性使其变为圆形，右面使用h2,p标签插入文字并改变其样式即可。
具体代码如下：

<div class="description"><img src="images/3.jpg"><h2>{爱情，就是要玫瑰}</h2><p><br><span>/</span><br><br><br>我想你的时候，你也在想我么？<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无论我们相距多远，无论前路漫漫<br><br>&nbsp;&nbsp;&nbsp;&nbsp;只想说：爱上你是我今生最大的幸福</p>
</div>

.description{width: 1000px;height: 420px;position: relative;}.description img{height: 400px;width: 400px;border-radius: 50%;margin: 0 140px;}.description h2{position: absolute;top: 50px;left: 700px;color: darksalmon;}.description p{position: absolute;top: 100px;left: 700px;color: deepskyblue;}

思路：插入图片设置图片大小，并加入边框即可。

<div class="container"><img src="images/a.png" alt=""><img src="images/b.png" alt=""><img src="images/c.png" alt=""><img src="images/d.png" alt=""><img src="images/e.jpg" alt=""><img src="images/f.jpg" alt=""><img src="images/g.jpg" alt=""><img src="images/h.jpg" alt=""><img src="images/i.jpg">
</div>

.container{width: 800px;margin: auto 210px;column-width: 250px;-webkit-column-width: 250px;column-gap:20px;-webkit-column-gap:20px;}.container img{width: 250px;height: 300px;margin: 5px;border: 4px solid darksalmon;}