寒假作业13

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>当当图书榜</title>
    <style>
        body {
            padding: 5px;
            margin: 0 auto;
            width: 960px;
            position: relative;
        }
        header img:nth-of-type(2){
            position: absolute;
            top: 15px;
            right: 190px;
        }
        header > ul {
            padding: 5px 8px;
            position: absolute;
            top: 15px;
            right: 5px;
            border-top: solid 1px #b5ffe3;
            border-left: solid 1px #b5ffe3;
            border-right: solid 1px #b5ffe3;
            background: #e6fff1;
            font-size: 12px;
        }
        header > ul > li {
            float: left;
            list-style: none;
        }
        header > ul > li a{
            color: #6c6c6c;
            text-decoration: none;
        }
        header > ul > li a:hover{
              color: #f03c3d;
          }
        nav ul{
            position: absolute;
            top: 45px;
            right: 5px;
            border: solid 1px #ff7133;
            width: 958px;
            height: 40px;
            padding: 0;
            background: #ff6c1d;
        }
        nav li{
            float: left;
            list-style: none;
            line-height: 40px;
            width: 40px;
            padding-left: 15px;
            font-size: 15px;
        }
        nav a{
            color: white;
            text-decoration: none;
        }
        nav a:hover{
            text-decoration: underline;
        }
        section>img:nth-of-type(1){
            position: absolute;
            top: 112px;
        }
        section div{
            position: absolute;
            top: 250px;
            border: solid 2px #4bff9c;
            width: 956px;
            height: 370px;
        }
        section>img:nth-of-type(2){
            position: absolute;
            top: 266px;
            left: -6px;
        }
        div img:nth-of-type(1) {
            position: absolute;
            top: 90px;
        }
        div img:nth-of-type(2) {
            position: absolute;
            top: 90px;
            left: 560px;
        }
        div img:nth-of-type(3) {
            position: absolute;
            top: 230px;
            left: 560px;
        }
        div img:nth-of-type(4) {
            position: absolute;
            top: 85px;
            left: 20px;
        }
        div img:nth-of-type(5) {
            position: absolute;
            top: 85px;
            left: 560px;
        }
        div img:nth-of-type(6) {
            position: absolute;
            top: 230px;
            left: 560px;
        }
        p{
            font-family:Verdana,"宋体";
            font-size: 12px;
            line-height: 26px;
        }
        #p1{
            position: absolute;
            top: 90px;
            left: 260px;
            width: 280px;
            height: 250px;
        }
        #p2{
            position: absolute;
            top: 80px;
            left: 660px;
            width: 280px;
            height: 250px;
        }
        section a{
              color: #3e78ed;
              font-size: 15px;
              text-decoration: none;
        }
        section a:hover{
            color: green;
        }
        .s1{
             color: #cf150a;
             font-weight: bold;
         }
        .s2{
            color: #979993;
        }
        footer{
            position: absolute;
            top: 612px;
            width: 960px;
            height: 90px;
            text-align: center;
        }
        footer p{
            color: #979993;
            vertical-align: middle;
        }
        footer img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<header>
    <img src="image/logo.jpg"/>
    <ul>
        <li><a href="">尾品汇</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
        <li><a href="">当当优品</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
        <li><a href="">数字馆</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
        <li><a href="">都看阅器</a></li>
    </ul>
    <img src="image/icon_count.png"/>
    <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>
            <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>
            <li><a href="">家电</a></li>
        </ul>
    </nav>
</header>
<section>
    <img src="image/banner.png"/>
    <div>
        <img src="image/book-01.jpg"/>
        <img src="image/book-02.jpg"/>
        <img src="image/book-03.jpg"/>
        <img src="image/bookNo1.gif"/>
        <img src="image/bookNo2.gif"/>
        <img src="image/bookNo3.gif"/>
        <p id="p1">
            <a href="">偷影子的人</a><br/>
            作 者:[法] 马克·李维(Marc Levy)著,段韵灵 译<br/>
            出版社:湖南文艺出版社<br/>
            当当价:<span class="s1">¥ 17.90</span><br/>
            不知道姓氏的克蕾儿。这就是你在我生命里的角色,我童年时的小女孩,今日蜕变成了女人,一段青梅竹马的回忆,一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊能力而强大:他能“偷别人的影子”,因而能看见他
        </p>
        <p id="p2">
            <a href="">看见(央视知名记者、主持人柴静:十年个人成长的告白,中国社会变迁的备忘</a><br/>
            作 者:柴静 著<br/>
            出版社:广西师范大学出版社<br/>
            <span class="s1">¥ 29.40</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="s2">7.4折</span><br/>
            <a href="">改变孩子先改变自己</a><br/>
            作 者:贾容韬 贾毅 著<br/>
            出版社:作家出版社<br/>
            <span class="s1">¥ 22.20</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="s2">7.4折</span>
        </p>
    </div>
    <img src="image/bg_bang.gif"/>
</section>
<footer>
    <p>Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
</footer>
</body>
</html>
复制代码
 

课后3

复制代码
<!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>
复制代码
 

课后4

复制代码
<!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>
复制代码
 

课后5

复制代码
<!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、付费专栏及课程。

余额充值