效果图：
代码：
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>我等的花儿都谢了</title>
<style type="text/css">
*{
padding:0
margin:0
}
li{
list-style:none
}
body{
background:#999
font-size:14px
}
.top{
height:100px
line-height:100px
font-size:30px
text-align:center
color:#090
}
.nav{
border-bottom:1px solid #666
}
.nav ul{
width:80%
overflow:hidden
margin:20px auto
}
.nav li{
width:16%
float:left
text-align:center
}
.nav li a{
color:#C3C
text-decoration:none
font-size:16px
}
.main{
background:#333
box-sizing:border-box
padding:15px 10px
margin-top:10px
}
.main h2{
font-size:20px
line-height:40px
color:#ffffff
}
.main img{
width:150px
height:180px
float:left
border:1px solid #00ff00
padding:3px
margin:0 10px 10px 0
background:#FFF
border-radius:3px
box-shadow:3px 3px 3px rgba(0,0,0,.5)
}
.main p{
color:#ffffff
line-height:24px
margin-bottom:10px
}
.main .special{
color:#093
font-style:italic
text-decoration:underline
}
.subnav{
margin-left:20px
}
.subnav li{
padding-left:20px
line-height:24px
margin-bottom:5px
background:url(http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg) no-repeat left center
background-size:15px 15px
}
.subnav li a{
color:#F0F
text-decoration:none
}
h3{
margin:10px 0
}
</style>
</head>
<body>
<div class="top"><h1>花之语</h1></div>
<div class="nav">
<ul>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">鲜花礼品</a></li>
</ul>
</div>
<div class="main">
<h2>花的语言</h2>
<img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg" />
<p>这里是内容区这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域域</p>
<p>这里是内容区这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域域</p>
<p class="special">这里是内容区这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域域</p>
<p>这里是内容区这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域域</p>
<p class="special">这里是内容区这里是内容区域这里区域这里是内容区域这里是内容区域域</p>
</div>
<h3>鲜花导购</h3>
<ul class="subnav">
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
</ul>
</body>
</html>
自适应手机屏幕，满意请采纳。
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。定义内部样式块对象 你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下： <html><head><title>文档标题</title><style type="text/css"><!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon} h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue} p {font: 10pt/12pt "Arial"color: black} --></style></head><body>请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： <p style="color: siennamargin-left: 20px">This is a paragraph</p>导入样式（Import Styles） 与链入外部样式的功能基本相同，只是语法和实现方式上有差别 <head><title>文档标题</title><style>@import url(css.css)@import url("csss.css") //单引号也可以 @import css,css@import "css.css"//单引号也可以 </style></head>以上几种形式都可以。网页模板素材下载：http://sc.chinaz.com/moban/cssmoban.html
www.dedecms.com/template/
找个合适的随便修改下就可以了。都是免费的~~亲
