第8章课后作业

最新推荐文章于 2023-03-30 00:20:50 发布

华少666

最新推荐文章于 2023-03-30 00:20:50 发布

阅读量272

点赞数

分类专栏：第8章定位网页元素

本文链接：https://blog.csdn.net/weixin_41880408/article/details/80801828

版权

第8章定位网页元素专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第3题制作SHOP今日推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SHOP今日推荐</title>
    <style>
        #div{
            width: 260px;
            border: 1px solid #AACBEE;
            margin: auto;
            border-radius: 5px;
        }
        span{
            color: #D80000;
        }
        p{
            line-height: 10px;
            color: #999999;
        }
        h1{
            text-indent: 1em;
            font-size: 20px;
        }
        .more{
            position: relative;
            float: right;
            bottom: 30px;
            right: 10px;
        }
        li{
            list-style-type: none;
            font-size: 12px;
            padding-top: 10px;
            height: 80px;
        }
        ul{
            padding-left: 20px;
        }
        .div{
            position: relative;
            left: 120px;
            bottom: 65px;
        }
        a{
            color: #B80000;
        }

    </style>
</head>
<body>
<div id="div">
    <h1><span>SHOP</span>今日推荐</h1>
    <img class="more" src="image/more.gif" alt="更多"/>
    <ul>
        <li>
            <img src="image/img9.gif" alt="鸡腿"/>
            <div class="div"><a href="#">汉来国际美食百货</a>
                <p>口味：创意中餐</p>
                <p>区域：朝阳/CBD</p>
            </div>
        </li>
        <li><img src="image/img7.gif" alt="鸡腿"/>
            <div class="div"><a href="#">汉来国际美食百货</a>
                <p>口味：创意中餐</p>
                <p>区域：朝阳/CBD</p>
            </div></li>
        <li><img src="image/img8.gif" alt="鸡腿"/>
            <div class="div"><a href="#">汉来国际美食百货</a>
                <p>口味：创意中餐</p>
                <p>区域：朝阳/CBD</p>
            </div></li>
        <li><img src="image/img7.gif" alt="鸡腿"/>
            <div class="div"><a href="#">汉来国际美食百货</a>
                <p>口味：创意中餐</p>
                <p>区域：朝阳/CBD</p>
            </div></li>
    </ul>
</div>
</body>
</html>

第4题制作京东轮播页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东首页轮播</title>
    <style>
        div{
            width: 740px;
            margin: auto;
        }
        li{
            background: #3E3E3E;
            color: white;
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            list-style-type: none;
            float: left;
            margin-left: 10px;
        }
        ul{
            position: relative;
            left: 250px;
            bottom: 50px;
        }
        li:hover{
            background: #F27B05;
        }
    </style>
</head>
<body>
    <div>
        <img src="image/focus.jpg"/>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>

第5题新东方顶部导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <style>
        .div1,.div2,.div3,.div4,.div5,.div6{
            width: 100px;
            border-right: #D3D3D3 solid 1px;
            height: 20px;
            margin-top: 10px;
            text-align: center;
            padding-top: 5px;
            float: left;
        }
        .div1{
            margin-left: 250px;
        }
        .div6{
            border: none;
        }
        .img{
            padding-left: 20px;
            padding-top: 5px;
            float: left;
        }
        header{
            background: #EEEEEE;
            font-size: 14px;
            width: 1024px;
            height: 40px;
        }
        .img1{
            padding-top: 20px;
            position: relative;
            right: 15px;
        }
        li{
            list-style-type: none;
            padding: 10px;
            border-bottom: 1px solid #E8E8E8;
            width: 170px;
            line-height: 20px;
            color: #878787;
        }
        .li{
            border: none;
        }
        ul{
            padding: 0px;
            position: relative;
            left: 700px;
            bottom: 10px;
            background: white;
            display: none;
        }
        a{
            text-decoration: none;
        }
        a:hover ul{
            width: 190px;
            height: 180px;
            border: #BFBFBF 1px solid;
            display: block;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <img src="image/logo.gif" class="img">
        <div class="div1">购物车</div>
        <div class="div2">优惠券</div>
        <div class="div3">快速注卡</div>
        <div class="div4">各地购课</div>
        <div class="div5">手机报</div>
        <div class="div6">网站导航</div>
        <div>
            <a href="#"><img src="image/open_icon.gif" class="img1">
            <ul>
                <li>托福 雅思 考研 职称英语 初中 日语 </li>
                <li>网络课堂  资讯中心  知识堂  大师讲坛  学习论坛  学词 考研搜校</li>
                <li class="li">M-Zone 手机报 时时英语</li>
            </ul>
            </a>
        </div>
    </header>
</body>
</html>

华少666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第8章课后作业

第3题制作SHOP今日推荐&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;SHOP今日推荐&lt;/title&gt; &lt;style&gt; #div{
复制链接

扫一扫