寒假作业14

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>美食今日推荐</title>
    <style>
        *{
            margin: 0;
        }
        div{
            margin: 50px auto;
            height: 373px;
            width: 280px;
            border: 1px solid #04e7ff;
            border-radius: 10px;
            position: relative;
        }
        h4{
            color: red;
            margin-top: 22px;
            margin-left: 32px;
        }
        h4 span {
            color: black
        }
        div>a{
            position: absolute;
            right: 10px;
            top: 22px;
        }
        #first{
            float: left;
            padding-left: 20px;
            margin-top: 10px;
        }
        #second{
            float: right;
            padding-left: 0;
            margin-top: 10px;
            margin-right: 30px;
        }
        h5 a{
            color: #b80613;
            line-height: 28px;
            font-size: 8px;
        }
        p{
            line-height: 17px;
            font-size:10px;
            color: #525050;
        }
        span{
            color: #989595;
        }
        li{
            list-style: none;
            height: 77px;
            text-align: left;
        }
        div>img{
            position: absolute;
            left: 80px;
            top: 43px;
        }
    </style>
</head>
<body>
<div>
    <h4>SHOP<span> 今日推荐</span></h4>
    <a href=""><img src="image/more.gif"></a>
    <ul id="first">
        <li><img src="image/img9.gif"/></li>
        <li><img src="image/img7.gif"/></li>
        <li><img src="image/img8.gif"/></li>
        <li><img src="image/img7.gif"/></li>
    </ul>
    <ul id="second">
        <li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
        <li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
        <li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
        <li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
    </ul>
    <img src="image/shen.png"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <style>
        #background{
            position: relative;
            height: 454px;
            width: 1200px;
            text-align: center;
            margin-top: 40px;
        }
        #number{
            position: absolute;
            left: 545px;
            bottom: 10px;
        }
        a{
            float: left;
            margin-right: 5px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px #666 solid;
            line-height: 14px;
            font-size: 12px;
            list-style: none;
            background: #666;
            text-decoration: none;
            color: white;
        }
        a:hover{
            background: orange;
            border: 1px orange solid;
        }
    </style>
</head>
<body>
<div id="background"><img src="image/focus.jpg"/>
    <div id="number">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <style>
        *{
            margin: 0;
        }
        #first{
            background: url("image/logo.gif") no-repeat 10px,url("image/open_icon.gif") no-repeat 558px,url("image/top_bg.gif");
            border-bottom: dotted 1px #c3c3b8;
            height: 26px;
            width: 600px;
            position: relative;
        }
        p{
            position: absolute;
            left: 140px;
            float: left;
            list-style: none;
            height: 26px;
            text-align: center;
            font-size: 12px;
            line-height: 26px;
            color: #818181;
        }
        span{
            color: #d1d1d1;
        }
        #second{
            border: 1px solid #b9b9b9;
            position: absolute;
            left: 343px;
            top: 20px;
            width: 200px;
            padding: 0 10px;
            background: white;
        }
        ul{
            padding: 10px 6px ;
            float: left;
            width: 185px;
        }
        li{
            list-style: none;
            font-size: 12px;
            line-height: 22px;
            color: #989898;
            float: left;
            margin-right: 14px;
        }
        ul:nth-of-type(1),ul:nth-of-type(2){
            border-bottom: solid 1px #dbdbdb;
        }
    </style>
</head>
<body>
<div id="first">
    <p>
        购物车&nbsp;&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;
        优惠券&nbsp;&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;
        快速注卡&nbsp;&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;
        各地购课&nbsp;&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;
        手机报&nbsp;&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;
        网站导航
    </p>
</div>
<div id="second">
    <ul>
        <li>托福</li>
        <li>雅思</li>
        <li>考研</li>
        <li>职称英语</li>
        <li>初中</li>
        <li>日语</li>
    </ul>
    <ul>
        <li>网络课堂</li>
        <li>资讯中心</li>
        <li>知识堂</li>
        <li>大师讲坛</li>
        <li>学习论坛</li>
        <li>学词</li>
        <li>考研搜校</li>
    </ul>
    <ul>
        <li>M-Zone</li>
        <li>手机报</li>
        <li>时时英语</li>
    </ul>
</div>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值