HTML+CSS满屋花制作
ps:logo上面还有,只不过屏幕小而已。
HTML代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>满屋花</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="qb">
<div class="top">
<div class="logo">
<img src="img/banner.jpg" alt="logo">
</div>
<div class="dbdhl">
<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>
</div>
</div>
<div class="left">
<div class="dl">
<form>
<p class="dlym">
用户:<input type="text" class="text"><br>
密码:<input type="password" class="text"><br>
</p>
<p class="dlan">
<input type="button" value="登录" class="an"/>
<input type="button" value="注册" class="an"/>
<a href="#">忘记密码</a>
</p>
</form>
</div>
<div class="xhfl">
<div class="yt">
<h4><span>用途</span></h4>
<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>
<li><a href="#">会议用花</a></li>
</ul>
</div>
<div class="hc">
<h4><span>花材</span></h4>
<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>
<li><a href="#">剑兰</a></li>
</ul>
</div>
<div class="jg">
<h4><span>价格</span></h4>
<ul>
<li><a href="#">100~200元</a></li>
<li><a href="#">200~300元</a></li>
<li><a href="#">300~400元</a></li>
<li><a href="#">400~500元</a></li>
<li><a href="#">500~600元</a></li>
<li><a href="#">600~800元</a></li>
<li><a href="#">800元以上</a></li>
</ul>
</div>
<div class="kg"><img src="img/leftbottom.jpg"></div>
</div>
</div>
<div class="right">
<div class="bzkx"></div>
<div class="bzkx_tp">
<ul>
<li><a href="#"><img src="img/new1.jpg" alt="新品上市"></a></li>
<li><a href="#"><img src="img/new2.jpg" alt="大酬宾"></a></li>
<li><a href="#"><img src="img/new3.jpg" alt="超值优惠"></a></li>
</ul>
</div>
<div class="xhtj">
<ul>
<li><img src="img/flower1.jpg" alt="幸福的味道"><br /><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/flower2.jpg" alt="阳光守护你"><br /><a href="#">阳光守护你</a>¥ 300元</li>
<li><img src="img/flower3.jpg" alt="温情永远"><br /><a href="#">温情永远</a>¥ 268元</li>
<li><img src="img/flower4.jpg" alt="爱无界"><br /><a href="#">爱无界</a>¥ 318元</li>
<li><img src="img/flower5.jpg" alt="亲亲宝贝"><br /><a href="#">亲亲宝贝</a>¥ 368元</li>
<li><img src="img/flower6.jpg" alt="相信是绿"><br /><a href="#">相信是绿</a>¥ 188元</li>
<li><img src="img/flower7.jpg" alt="水晶童话"><br /><a href="#">水晶童话</a>¥ 198元</li>
<li><img src="img/flower8.jpg" alt="天使之爱"><br /><a href="#">天使之爱</a>¥ 268元</li>
</ul>
</div>
<div class="xpss">
<ul>
<li><img src="img/flower9.jpg" alt="粉色迷情"><br /><a href="#">粉色迷情</a></li>
<li><img src="img/flower10.jpg" alt="海岸的优雅"><br /><a href="#">海岸的优雅</a></li>
<li><img src="img/flower11.jpg" alt="百年地中海"><br /><a href="#">百年地中海</a></li>
<li><img src="img/flower12.jpg" alt="爱要说出口"><br /><a href="#">爱要说出口</a></li>
</ul>
</div>
<div class="xhdg">
<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>
<li><a href="#">手捧一束鲜花的等待</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS代码
/***********************************
QuKin
提示:
.dbdhl:顶部导航栏
.left:左边导航栏
.right:右边导航栏
.dl:用户登录
.xhfl:鲜花分类
.bzkx:本站快讯
.xpss:新品上市
.xhdg:鲜花导购
***********************************/
/*全局变量*/
*{
margin:0px;
padding:0px;
}
body{
margin:0 auto;
width:700px;
background-color:#ffd8d9;
}
ul{
list-style:none;
}
a{
display:block;
text-decoration:none;
color:#000;
}
h4{
background-color:pink;
padding:3px 0px 1px 5px;
margin:0px 18px;
font-size:12px;
}
.clear{
clear:both;
}
/*顶部导航栏*/
.dbdhl li{
display:inline-block;
font-size:15px;
width:75px;
padding-right:20px;
}
.dbdhl a{
background:url(../img/button1.jpg) no-repeat;
width:100px;
height:30px;
text-align:center;
padding-top:7px;
font-size:12px;
}
.dbdhl a:hover{
color:#FFF;
background:url(../img/button1_bg.jpg) no-repeat;
text-decoration:underline;
}
/*左边导航栏*/
.left{
background-color:#fff;
width:180px;
float:left;
margin-top:0px;
}
.zbdhl ul{
margin:0px;
padding:5px 0px 0px 25px;
}
/*登录*/
.dl{
padding:40px 0px 10px 0px;
background:url(../img/login.jpg) no-repeat;
}
.dl a{
font-size:10px;
display:inline-block;
}
.dlym{ /*登录用户名和密码*/
margin:1px;
text-align:left;
padding:20px 0px 0px 25px;
font-size:13px;
}
.dlan{ /*登录按钮一排*/
text-align:left;
font-size:13px;
padding:5px 0px 0px 25px;
}
.dl form input.text{
border:1px solid black;
border-left:none;
border-top:none;
border-right:none;
padding:0px;
width:90px;
}
.dl form input.an{
border:1px solid black;
height:18px;
padding:0px;
background-color:#fff1f1;
}
.dl a:hover{
color:#666;
text-decoration:underline;
}
/*鲜花分类*/
.xhfl{
background:url(../img/category.jpg) no-repeat;
padding-top:50px;
font-size:13px;
}
.xhfl ul{
padding:5px 22px 15px 22px;
}
.xhfl ul li{
padding:1px 0px 1px 15px;
border-bottom:1px dashed black;
background:url(../img/icon1.gif) no-repeat 5px 10px;
}
.xhfl a:hover{
color:#666;
text-decoration:underline;
}
.kg{
margin-top:16px;
margin-bottom:-3px;
}
/*右边导航栏*/
.right{
float:left;
width:518px;
margin-left:1px;
font-size:12px;
}
/*本站快讯*/
.bzkx{
background:url(../img/latest.jpg) no-repeat;
padding-top:33px;
margin:1px 0px 1px 0px;
}
.bzkx_tp ul li{
display:inline-block;
}
.bzkx_tp img{
border:none;
padding-left:0px;
width:170px;
}
/*鲜花推荐*/
.xhtj{
background:url(../img/recommend.jpg) no-repeat;
padding-top:33px;
margin:5px 0px 3px 0px;
background-color:#FFF;
}
.xhtj ul,.xpss ul{
margin:0px;
padding:6px 5px 5px 8px;
}
.xhtj ul li,.xpss ul li{
text-align:center;
display:inline-block;
width:115px;
}
.xhtj ul li img,.xpss ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
.xhtj a,.xpss a{
color:#999;
}
.xhtj a:hover{
color:red;
text-decoration:underline;
}
/*新品上市*/
.xpss{
background:url(../img/new.jpg) no-repeat;
padding-top:33px;
margin:6px 0px 0px 0px;
background-color:#FFF;
}
.xpss a:hover{
color:red;
text-decoration:underline;
}
/*鲜花导购*/
.xhdg{
background:url(../img/tips.jpg) no-repeat;
padding-top:33px;
margin:5px 0px 10px 0px;
background-color:#FFF;
}
.xhdg ul{
margin:0px;
padding:5px 5px 5px 30px;
}
.xhdg ul li{
padding:1px 0px 1px 12px;
display:inline-block;
width:200px;
background:url(../img/icon2.gif) no-repeat 5px 5px;
}
.xhdg a:hover{
color:red;
text-decoration:underline;
}
地址
链接: 百度网盘.
提取码:dggi
ps:可能有一些代码与大神,如果侵犯,请联系我。