HTML5和CSS3開發第八章課後作業

suixinCaesar發表於2018-06-26
HTMLCSSS3

3.製作SHOP今日推薦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        li{
            list-style-type: none;
        }
        a{
            color: red;
        }
        ul{color: gray}
    </style>
</head>
<body>
    <div style="width: 350px;border: 1px solid #C1D9F3;border-radius: 15px;margin: 0px auto">
        <div style="position:relative;padding: 0px 10px">
            <p style="font-size: 18px;font-weight: bold"><span style="color:red;">SHOP </span>今日推薦</p>
            <img src="images/homework3/more.gif" style="position: absolute;right: 15px;bottom: 5px">
        </div>
        <dl>
            <dd style="position: relative;">
                <img src="images/homework3/shen.png" style="position: absolute;left: 60px;top: -20px">
                <img src="images/homework3/img9.gif" style="float: left">
                <ul style="display: inline-block">
                    <li><a href="#">漢來國際美食百貨</a> </li>
                    <li>口味：創意中餐</li>
                    <li>區域：朝陽/CBD</li>
                </ul>
            </dd>
            <dd>
                <img src="images/homework3/img7.gif" style="float: left">
                <ul style="display: inline-block">
                    <li><a href="#">漢來國際美食百貨</a> </li>
                    <li>口味：創意中餐</li>
                    <li>區域：朝陽/CBD</li>
                </ul>
            </dd>
            <dd>
                <img src="images/homework3/img8.gif" style="float: left">
                <ul style="display: inline-block">
                    <li><a href="#">漢來國際美食百貨</a> </li>
                    <li>口味：創意中餐</li>
                    <li>區域：朝陽/CBD</li>
                </ul>
            </dd>
            <dd>
                <img src="images/homework3/img7.gif" style="float: left">
                <ul style="display: inline-block">
                    <li><a href="#">漢來國際美食百貨</a> </li>
                    <li>口味：創意中餐</li>
                    <li>區域：朝陽/CBD</li>
                </ul>
            </dd>
        </dl>

    </div>
</body>
</html>

4.製作京東輪播頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東輪播圖</title>
    <style>
        a{
            text-decoration: none;
            color: white;
            width: 20px;
            height: 20px;
            background-color: gray;
            border-radius: 50%;
            display: inline-block;
            line-height: 20px;
            text-align: center;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div style="width: 730px;margin: 0px auto;position: relative;">
        <img src="images/focus.jpg">
        <nav style="position: absolute;left: 305px;bottom: 20px">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
        </nav>
    </div>
</body>
</html>

5.製作簡略版新東方頂部導航選單頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新東方頂部導航選單</title>
    <style>
        body{
            padding: 0px;margin: 0px;
            font-size: 14px;
        }
        .div{border: 1px solid gray;height: 30px;border-bottom: 0.5px dotted gray;background-color: #EFEFED;position: relative}
        .div a{
            text-decoration: none;
            color: gray;
        }
        a:hover{text-decoration: underline}
        li{
            display: inline-block;
            margin-top: 5px;
            padding-right: 15px;
            padding-left: 12px;
            border-right: 1px  gray solid;
        }
        .div ul{
            display: inline-block;
            position: absolute;
            top: -15px;
            right: 50px;
            height: 30px;
        }
        #pic{position: absolute;right: -10px;top: 10px}
        .div2{ width: 310px;font-size: 14px;color: gray;border: 1px solid;position: absolute;right: 0;top: 20px;z-index: 1;background-color: whitesmoke;}
        .div2 dd{
            display: inline-block;
            margin-right: -10px;
            margin-bottom:5px ;
        }
        .div2 dl{
            display: inline-block;
            margin: 0px auto;
            padding: 15px 0px;
            width: 280px;
            border-bottom: 1px solid gray;
            margin-left: 15px;
        }
        .div2{display: none}
        .a:hover div{
            display: block;
        }
    </style>
</head>
<body>
    <div class="div"  style="border-right: none;border-left: none">
        <img src="images/logo.gif" style="float: left;margin-left: 20px">
        <ul>
            <li><a href="images">購物車</a> </li>
            <li><a href="images">優惠券</a> </li>
            <li><a href="images">快速注卡</a> </li>
            <li><a href="images">各地購課</a> </li>
            <li><a href="images">手機報</a> </li>
            <li style="border-right: none;position: relative"><a href="images">網站導航</a> </li>
            <a href="#" class="a"><img  id="pic" src="images/open_icon.gif">
            <div style="border-left: 1px solid;" class="div2">
                <dl>
                    <dd>託福</dd>
                    <dd>雅思</dd>
                    <dd>考研</dd>
                    <dd>職稱英語</dd>
                    <dd>初中</dd>
                    <dd>日語</dd>
                </dl>
                <dl>
                    <dd>網路課堂</dd>
                    <dd>資訊中心</dd>
                    <dd>知識堂</dd>
                    <dd>大師講壇</dd>
                    <dd>學習論壇</dd>
                    <dd>學詞</dd>
                    <dd>考研搜校</dd>
                </dl>
                <dl style="border: none;margin-bottom: 5px">
                    <dd>M-Zone</dd>
                    <dd>手機報</dd>
                    <dd>時時英語</dd>
                </dl>
            </div>
            </a>
        </ul>
    </div>
</body>
</html>

相關文章