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

suixinCaesar發表於2018-06-21
HTMLCSSS3

1，製作北大青鳥網站的中心開班模組。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心開班資訊</title>
    <style>
        h2,ul,li{
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 250px;
            box-sizing: border-box;
            margin: auto;
            border: 1px gray solid;
            border-radius: 8px;
            background: linear-gradient(to bottom,#5EC2F9,#FFFFFF,white);
        }
        h2{
            color: white;
            font-size: 15px;
            border-bottom: white 1px solid;
            padding: 8px;
            background: url("images/homework3/bg.gif")10px no-repeat;
            text-indent: 2.2em;
        }
        li{
            font-size: 15px;
            list-style-type: none;
            background: url("images/homework3/dotBg.gif")0px 5px no-repeat;
            padding: 8px 18px;
            /*border: 1px solid;*/
        }
        ul{
            width: 215px;
        }
        ul li:last-of-type{
            margin-bottom: 10px;
        }
        a{
            text-decoration: none;
            color: gray;
        }
        a:hover{
            color: #FF3300;
        }
    </style>
</head>
<body>
    <div>
        <h2>中心開班資訊</h2>
        <ul>
            <li><a href="#">8月12日：學歷+技能班</a></li>
            <li><a href="#">8月16日：高考特招班</a></li>
            <li><a href="#">8月23日：Java精英班</a></li>
            <li><a href="#">8月31日：學士後強化班</a></li>
            <li><a href="#">9月5日：大學生就業班</a></li>
            <li><a href="#">9月9日：企業定向委培班</a></li>
            <li><a href="#">9月16日：網路營銷強化班</a></li>
        </ul>
    </div>
</body>
</html>

2，製作商品分類列表頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分類列表頁</title>
    <style>
        ul,li{padding: 0px;margin: 0px;}
        div{
            border: 2px solid orange;
            border-radius: 8px;
            width: 200px;
            box-sizing: border-box;
        }
        li{
            list-style-type: none;
            font-size: 15px;
            font-weight: bold;
            padding: 15px 50px;
            border-bottom: 1px gray dotted;
        }
        li:nth-of-type(1){
            background: url("images/homework4/icon_01.jpg")0px 3px no-repeat;
        }
        li:nth-of-type(2){
            background: url("images/homework4/icon_02.jpg")0px 1px no-repeat;
        }
        li:nth-of-type(3){
            background: url("images/homework4/icon_03.jpg")no-repeat;
        }
        li:nth-of-type(4){
            background: url("images/homework4/icon_04.jpg")0px 2px no-repeat;
        }
        li:nth-of-type(5){
            background: url("images/homework4/icon_05.jpg")0px 2px no-repeat;
        }
        li:nth-of-type(6){
            background: url("images/homework4/icon_06.jpg")no-repeat;
        }
        li:nth-of-type(7){
            background: url("images/homework4/icon_07.jpg")0px 1px no-repeat;
        }
        li:nth-of-type(8){
            background: url("images/homework4/icon_08.jpg")0px 3px no-repeat;
        }
        li:nth-of-type(9){
            background: url("images/homework4/icon_09.jpg")0px 3px no-repeat;
        }
        li:nth-of-type(10){
            background: url("images/homework4/icon_10.jpg")0px 2px no-repeat;
            border-bottom:none;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>酒水、飲料</li>
            <li>進口食品</li>
            <li>休閒零食</li>
            <li>地方特產</li>
            <li>保健、衝調</li>
            <li>糧油、生鮮</li>
            <li>美容洗護</li>
            <li>清潔洗滌</li>
            <li>母嬰、紙品</li>
            <li>家居百貨</li>
        </ul>
    </div>
</body>
</html>

3，製作權威課程免費體驗登陸頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免費體驗登入頁面</title>
    <style>
        body{background: url("images/homework5/bg.jpg") no-repeat;}
        body,div,form,p{padding: 0px;margin: 0px}
        body div:first-of-type{
            width: 312px;
            box-sizing: border-box;
            text-align: center;
            margin-top: 35px;
            padding: 50px 25px 50px 0px;
            color: white;
            font-size: 14px;
        }
        span{color: red;}
        p{
            padding:8px;
        }
        input{
            border-radius: 5px;
        }
        select{border-radius: 5px;}
        form p:nth-of-type(4),form p:nth-of-type(5){
            padding-right: 140px;
        }
    </style>
</head>
<body>
    <div>
        <form method="post" action="#">
                <p>
                    <span>*</span>姓名：<input type="text">
                </p>
                <p>
                    <span>*</span>郵箱：<input type="email">
                </p>
                <p>
                    <span>*</span>電話：<input type="number">
                </p>
                <P>
                    性別：
                    <select>
                        <option selected>請選擇</option>
                        <option>男</option>
                        <option>女</option>
                    </select></P>
                <P>
                    年齡：
                    <select>
                        <option selected>請選擇</option>
                        <option>20</option>
                        <option>21</option>
                    </select></P>
               <P><input type="image" src="images/homework5/btn.jpg"></P>
        </form>
    </div>
</body>
</html>

相關文章