<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>满屋狗</title>
<link rel="icon" href="../favicon.ico">
<style>
body{
margin-left: auto;
margin-right: auto;
border: 1px solid #ff47ba;
width: 710px;
height:900px;
}
*{margin: 0;padding: 0px}
.title h1{
border: 1px solid red;
height: 60px;
width: 100%;
text-align:center;
padding-top: 35px;
background: url("../img/123.jpg");
}
.dkhh ul {
width: 100%;
height:30px;
list-style: none;
margin: 0;
padding: 0;
background-color: #c4b59d;
color: azure;
}
.dkhh ul li{
float: left;
font-size: 15px;
}
.dkhh ul li a{
width: 100px;
height: 30px;
background-color: #c4b59d;
display: inline-block;
border-left:1px solid #00BFFF;
text-align: center;
vertical-align: bottom;
text-decoration: none;
}
.dkhh ul li :hover{
background-color: yellow;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
}
li{
list-style-type: none;
border-bottom: 1px dashed rgba(201, 69, 148, 0.94);
}
.left{
float: left;
padding-left: 20px;
width: 220px;
}
.right{
border: 1px dashed #ff47ba;
width: 468px;
float: left;
}
h3{
width: 100px;
border-bottom: 1px solid red;
}
.kx img{
width:150px;
height: 100px;
}
.tj{
border: 1px dashed #ff47ba;
height: 280px;
text-align: center;
}
.tj img{
width: 112px;
height: 100px;
}
.tj .tp{
width: 112px;
height: 100px;
text-align: center;
float: left;
}
.tj #tp2 .tp{
margin-top: 30px;
}
.xp{
border: 1px dashed #ff47ba;
height: 150px;
text-align: center;
}
.xp .tp{
width: 112px;
height: 100px;
text-align: center;
float: left;
}
.xp img{
width: 112px;
height: 100px;
}
</style>
</head>
<body>
<div class="title">
<h1>满屋狗</h1>
</div>
<div class="dkhh">
<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 class="left">
<form name="denglu">
<h3>用户登录</h3>
<table>
<tr>
<td>用户:</td>
<td colspan="2"><input style="border:0;border-bottom:1px solid black" type="text" name="uname"></td>
</tr>
<tr>
<td>密码:</td>
<td colspan="2"><input style="border:0;border-bottom:1px solid black" type="text" name="upwd"></td>
</tr>
<tr>
<td><input type="button" name="login" value="登录"></td>
<td><input type="button" name="redegit" value="注册"></td>
<td colspan="1"><a href="#">忘了密码</a> </td>
</tr>
</table>
</form>
<h3>鲜狗分类</h3>
<ul>
<li ><a href="#"><b>用途</b></a> <ol>
<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>
<li><a href=""> 婚礼婚庆</a></li>
</ol></li>
</ul>
<ul>
<li><a href="#"><b>狗材</b></a> <ol>
<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>
</ol></li>
</ul>
<ul>
<li><a href="#"><b>价格</b></a> <ol>
<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>
</ol></li>
</ul>
</div>
<div class="right">
<div class="kx">
<h3>本站快讯</h3>
<img src="../img/123.jpg">
<img src="../img/123.jpg">
<img src="../img/123.jpg">
</div>
<div class="tj">
<h3>鲜狗推荐</h3>
<div id="tp1">
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>幸福的狗狗</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>阳光守护狗</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>添狗之殇</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>天狗之翼</b></a></div>
</div>
<div id="tp2">
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>狗蛋儿最幸福</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>哮天犬</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>追风狗</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>双标狗之痕</b></a></div>
</div>
</div>
<div class="xp">
<h3>新狗上市</h3>
<div id="tp3">
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>幸福的狗狗</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>阳光守护狗</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>添狗之殇</b></a></div>
<div class="tp"><img src="../img/123.jpg"><a href="#"><b>天狗之翼</b></a></div>
</div>
</div>
<div class="dg">
<h3>鲜狗导购</h3>
<ol>
<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>
</ol>
</div>
</div>
</body>
</html>
Web前端满屋花案例框架
最新推荐文章于 2021-06-24 11:47:34 发布