简单的满屋花静态页面
效果图：
源码：
《Html部分》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>满屋花</title>
<link rel="stylesheet" href="css/满屋花.css">
</head>
<body>
<div id ="content">
<header id="header">
<div class="header-top">
<img src="imgs/banner.jpg" alt="满屋花背景图">
</div>
<nav class="header-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>
<li><a href="#">支付方式</a></li>
</ul>
</nav>
</header>
<div class="content-left">
<div class="login">
<h2><img src="imgs/login.jpg" alt="登录"></h2>
<form action="">
<label>用户:<input type="text"></label>
<label>密码:<input type="password"></label>
<input type="button" value="登录">
<input type="button" value="注册">
<a href="#">忘记密码</a>
</form>
</div>
<div class="classification">
<h2><img src="imgs/category.jpg" alt=""></h2>
<h3>用途</h3>
<ul>
<li><img src="imgs/icon1.gif" alt=""><a href="#">爱情鲜花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">生日礼物</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">新年鲜花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">家庭用花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">道歉鲜花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">开业花篮</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">会议用花</a></li>
</ul>
<h3>花材</h3>
<ul>
<li><img src="imgs/icon1.gif" alt=""><a href="#">玫瑰花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">百合花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">郁金香</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">太阳花</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">康乃馨</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">马蹄莲</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">扶朗</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">剑兰</a></li>
</ul>
<h3>价格</h3>
<ul>
<li><img src="imgs/icon1.gif" alt=""><a href="#">100~200元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">200~300元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">300~400元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">400~500元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">500~600元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">600~800元</a></li>
<li><img src="imgs/icon1.gif" alt=""><a href="#">800元以上</a></li>
</ul>
</div>
</div>
<div class="content-right">
<div class="content-information">
<h3><a href="#"><img src="imgs/latest.jpg" alt=""></a></h3>
<ul>
<li><a href="#"><img src="imgs//new1.jpg" alt=""></a></li>
<li class="center"><a href="#"><img src="imgs/new2.jpg" alt=""></a></li>
<li><a href="#"><img src="imgs//new3.jpg" alt=""></a></li>
</ul>
</div>
<div class="content-recommend">
<h3><a href="#"><img src="imgs/recommend.jpg" alt=""></a></h3>
<ul>
<li>
<a href="#">
<img src="imgs//flower1.jpg" alt=""><span class="price">幸福的味道<br/>￥288元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower2.jpg" alt=""><span class="price">阳光守护你<br/>￥300元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower3.jpg" alt=""><span class="price">温情永远<br/>￥268元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower4.jpg" alt=""><span class="price">爱无界<br/>￥318元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower5.jpg" alt=""><span class="price">亲亲抱抱<br/>￥368元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower6.jpg" alt=""><span class="price">相信是缘<br/>￥168元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower7.jpg" alt=""><span class="price">水晶童话<br/>￥198元</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower8.jpg" alt=""><span class="price">天使之爱<br/>￥268元</span>
</a>
</li>
</ul>
</div>
<div class="content-listed">
<h3><a href="#"><img src="imgs/recommend.jpg" alt=""></a></h3>
<ul>
<li>
<a href="#">
<img src="imgs//flower1.jpg" alt=""><span class="price">幸福的味道</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower2.jpg" alt=""><span class="price">阳光守护你</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower3.jpg" alt=""><span class="price">温情永远</span>
</a>
</li>
<li>
<a href="#">
<img src="imgs//flower3.jpg" alt=""><span class="price">温情永远</span>
</a>
</li>
</ul>
</div>
<div class="content-guide">
<h3><a href="#"><img src="imgs/recommend.jpg" alt=""></a></h3>
<ul class="ul1">
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
</ul>
<ul class="ul2">
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
<li><a href="#"><i><img src="imgs/icon2.gif" alt=""></i>Lorem ipsum dolor</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
《Css部分》
*{
margin: 0;
padding: 0;
}
body{
background-color:pink;
font-family: Arial, Helvetica, sans-serif;
height: 1000px;
}
a{
font-size: 12px;
text-decoration: none;
color: #000;
}
li{
list-style: none;
}
#content{
width: 700px;
height: 100%;
margin: 20px auto;
}
#content #header{
width: 700px;
height: 150px;
}
#content #header .header-top{
width: 700px;
height: 120px;
}
#content #header .header-nav{
width: 700px;
height: 30px;
}
#content #header .header-nav ul{
width: 700px;
height: 30px;
}
#content #header .header-nav ul li{
float: left;
background-image: url('../imgs/button1.jpg');
}
#content #header .header-nav ul li a{
display: block;
height: 30px;
line-height: 30px;
padding: 0 22px;
font-size: 14px;
color: #000;
}
#content #header .header-nav ul li:hover{
background-image: url('../imgs/button1_bg.jpg');
}
#content #header .header-nav ul li:hover a{
color: #fff;
}
/* ---------------Header-End */
#content .content-left{
width: 160px;
height: 830px;
font-size: 13px;
background-color: #fff;
padding: 0 10px;
float: left;
}
#content .content-left .login{
text-align: left;
}
#content .content-left h2{
width: 160px;
height: 45px;
position: relative;
left: -10px;
}
#content .content-left h2 img{
width: 160px;
height: 45px;
}
#content .content-left form{
padding: 0 10px;
line-height: 25px;
}
#content .content-left form input[type ='text'],
#content .content-left form input[type ='password']{
width: 105px;
border: none;
border-bottom: 1px solid #000;
background: transparent;
}
#content .content-left form input{
outline: none;
}
#content .content-left form input[type ='button']{
width: 35px;
height: 18px;
border-width: 1px;
border-color: #000;
background: transparent;
cursor: pointer;
}
#content .content-left form a{
color: black;
}
#content .content-left .classification h3{
background-color: pink;
color: #000;
font-weight: bold;
padding-left: 5px;
}
#content .content-left .classification li{
list-style-type: ethiopic-halehame-ti-er;
list-style-position: inside;
height: 25px;
line-height: 25px;
border-bottom: 1px dashed #cbcbcb;
padding-left: 10px;
}
/* 列表图片 */
#content .content-left .classification li img{
/* padding-right: 5px;
vertical-align: middle; */
width: 0;
height: 0;
}
/* left END */
#content .content-right{
width: 518px;
height: 830px;
float: left;
background-color: #fff;
}
#content .content-right h3{
width: 518px;
height: 33px;
}
#content .content-right h3 a{
height: 33px;
}
#content .content-right a{
display: block;
}
#content .content-right .content-information ul{
height: 107px;
}
#content .content-right .content-information li{
float: left;
}
#content .content-right .content-information a{
height: 107px;
}
#content .content-right .content-information li.center{
margin: 0 4px;
}
#content .content-right .content-information li:hover{
position: relative;
top: -1px;
left: -1px;
}
#content .content-right .content-recommend ul{
height: 290px;
}
#content .content-right .content-recommend li,
#content .content-right .content-listed li
{
width: 106px;
height: 145px;
float: left;
padding-left:19px;
text-align: center;
}
#content .content-right .content-listed ul{
overflow: hidden;
}
#content .content-right .content-listed li{
height: 140px;
}
#content .content-right .content-guide ul{
width: 258px;
overflow: hidden;
}
#content .content-right .content-guide .ul1{
float: left;
}
#content .content-right .content-guide .ul2{
float: left;
}
#content .content-right .content-guide ul li{
height: 25px;
line-height: 25px;
padding-left: 40px;
}
#content .content-right .content-guide ul li img{
width: 10px;
height: 10px;
margin-right: 8px;
}
素材源码地址：
https://pan.baidu.com/s/1CKiwGgjZ6ncyKbVvOw5b2A
提取码：cf7y
