Web前端满屋花案例框架

<!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="">&nbsp; &nbsp;&nbsp;爱情鲜狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;生日送狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;新年鲜狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;家庭用狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;亲情用狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;道歉鲜狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;探望祝福</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;开业商务</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;婚礼婚庆</a></li>
        </ol></li>
    </ul>
    <ul>
        <li><a href="#"><b>狗材</b></a> <ol>
            <li><a href="">&nbsp; &nbsp;&nbsp;玫瑰狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;百合狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;郁金香</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;太阳狗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;康乃馨</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;马蹄兰</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;扶朗</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;剑兰</a></li>
        </ol></li>
    </ul>
    <ul>
        <li><a href="#"><b>价格</b></a> <ol>
            <li><a href="">&nbsp; &nbsp;&nbsp;100~200元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;200~300元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;300~400元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;400~500元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;500~600元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;600~800元</a></li>
            <li><a href="">&nbsp; &nbsp;&nbsp;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>
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值