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

suixinCaesar發表於2018-06-25
HTMLCSSS3

3.製作攝影社群熱門小鎮頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>攝影社群熱門小鎮</title>
    <style>
        *{padding: 0px;margin: 0px}
        p{
            margin: 10px 10px;
            font-size: 15px;
            color: #4F5153;
        }
        div:after{
            content: "";
            display: block;
            clear: both;
        }
        img{
            border: 3px solid #E0E0E8;
        }
        dl dd{
            margin: 10px 50px 20px 10px;
            float: left;
        }
        dd ul{
            margin-left: 15px;
            font-size: 12px;
            color: gray;
        }
        ul li{
            list-style-type: none;
        }
        ul li:first-of-type{
            font-size: 14px;
            color: #4987C5;
            margin-bottom: 6px;
        }
        dl dd:nth-of-type(3){
            margin-left: 48px;
        }
    </style>
</head>
<body>
    <div style=" width: 750px;margin: 50px auto;">
        <div style="border: 1px solid gray">
            <p>攝影社群熱門小鎮</p>
            <dl class="info" >
                <dd style="">
                    <img src="images/homework3/pic_01.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>風景狙擊手</li>
                        <li>成員：80</li>
                        <li>作品：276</li>
                    </ul>
                </dd>
                <dd >
                    <img src="images/homework3/pic_02.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>敘事感</li>
                        <li>成員：235</li>
                        <li>作品：116</li>
                    </ul>
                </dd>
                <dd >
                    <img src="images/homework3/pic_03.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>定焦視界</li>
                        <li>成員：56</li>
                        <li>作品：456</li>
                    </ul>
                </dd>
                <dd >
                    <img src="images/homework3/pic_04.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>中畫幅樂園</li>
                        <li>成員：130</li>
                        <li>作品：239</li>
                    </ul>
                </dd>
                <dd>
                    <img src="images/homework3/pic_05.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>《卡啪》先鋒...</li>
                        <li>成員：78</li>
                        <li>作品：125</li>
                    </ul>
                </dd>
                <dd>
                    <img src="images/homework3/pic_06.jpg" style="float: left">
                    <ul style="display: inline-block">
                        <li>植物的無聲世界</li>
                        <li>成員：235</li>
                        <li>作品：1258</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
</body>
</html>

4.製作名人名言頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名人名言</title>
    <style>
        body{font-size: 14px}
        ul li{
            float: left;
            border-left: gray solid 1.0px;
            border-top: gray solid 1.0px;
            list-style-type: none;
            padding: 5px;
        }
        h1{
            font-size: 24px;
        }
        em{
            font-size: 14px;
        }
        a{text-decoration: none;color: gray}
    </style>
</head>
<body style="width: 1200px;margin: 0px auto;">
    <header style="width: 1200px;height: 130px">
        <h1>名人名言</h1>
        <p><em>分享名人名言，開始一段觸動心靈的智慧之旅跳到內容</em></p>
        <ul style="height: 20px;padding-left: 0px">
            <li><a href="#">登入</a></li>
            <li><a href="#">關於</a></li>
            <li><a href="#">名人名言</a></li>
            <li><a href="#">英文名言(English)</a></li>
            <li><a href="#">心理雜誌</a></li>
            <li><a href="#">心理書籍</a></li>
            <li><a href="#">專題活動</a></li>
            <li style="border-right:1px solid gray "><a href="#">發表</a></li>
        </ul>
        <div style="width: 1300px;margin: -5px -50px;border-top:1px solid gray "></div>
    </header>
    <section style="width: 1200px;height: 735px">
        <div style="width: 560px;display: inline-block">
            <p style="width: 550px;border: 1px solid gray;padding:5px 5px">
                <span>心理學經典名言的智慧</span><br/>
                洞察人性的美與醜，認識自我的強與弱。一句好的格言能夠穿越時間，永不失色、歷久彌香，它總是能給人們帶來心靈的滋養。
            </p>
            <p style="line-height: 25px;font-weight: bold;width: 550px">
                創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以，創
                造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現的能力。
            </p>
            <p style="line-height: 25px;width: 550px;margin-bottom: 0px">
                創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以，創
                造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現的能力。<br>
                發表在 未分類 | 標籤： 《換個腦袋去思考》, 創造力 | 留下評論
            </p>
            <div style="width: 550px;border: 1px solid gray;padding: 5px">
                <span style="font-size:16px;font-weight: bold ">作者簡介</span>
            </div>
            <p style="line-height: 25px;font-weight: bold;width: 550px">
                如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人生的真諦。這其實簡單到
                不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興趣；如果你想讓他人緊張，那麼你自己首先要緊張
                起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個
                人交流時證實這一點。
            </p>
            <p style="line-height: 25px;width: 550px;margin-bottom: 0px">
                如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人生的真諦。這其實簡單到
                不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興趣；如果你想讓他人緊張，那麼你自己首先要緊張
                起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個
                人交流時證實這一點。<br>
                發表在 未分類 | 標籤： 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論
            </p>
            <div style="border: 1px solid gray">
                <p>贊助廣告</p>
                <img src="images/homework4/ad_2.jpg" >
            </div>
        </div>
        <div style="width:350px;height: 500px;float: right;margin-right:150px ">
                <div style="border: 1px solid gray;font-size: 16px;margin:0px 0px 0px 20px;padding: 20px">
                    <p><em>贊助廣告</em></p>
                    <div><img src="images/homework4/ad.jpg"></div>
                    <p><em>搜尋</em></p>
                    <div><input type="search" placeholder="點選搜尋"></div>
                    <p><em>標籤</em></p>
                    <p style="color: gray;width: 300px"><em>60年語錄 《犯罪心理》 世間百態 二十四史傳統名人 體育人物 卡斯特羅 卡斯特羅名言 卡斯特羅語錄
                        歷史 友誼愛情 古代格言 名人名言 名人隨語 教子立人 新聞事件 李白 愛情語錄 韓寒語錄 </em></p>
                </div>
        </div>
    </section>
    <footer style="text-align: center;margin-top: 20px">
        <div style="border-bottom: 1px gray solid;width: 1300px;margin: -5px -50px;"></div>
        <p>
            &copy;All Rignts Reserved by Psytopic.來自Psytopic.com的禮物
        </p>
    </footer>
</body>

5.製作彩妝熱賣產品列表頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彩妝熱賣產品列表</title>
    <style>
        .title{
            color: white;
            font-weight: bold;
            background-color: #E9185A;
            height:40px;
            line-height: 40px;
            padding-left: 10px;
            margin-top: 0px;
        }
        li{
            list-style-type: none;
            font-size: 14px;
            border: 0.5px dashed gray;
            padding: 6px;
        }
        ul{
            width: 300px;
            margin: -17px 60px 0px -40px;
            background: white;
        }
        span{
            width: 20px;
            height: 20px;
            border-radius:50%;
            line-height: 20px;
            text-align: center;
            display: inline-block;
            margin-right: 10px;
            color: white;
            font-weight: bold;
            background-color: black;
        }
        a{
            text-decoration: none;
            color: gray;
        }
        a:hover{
            color: #E9185A;
        }
        a:hover span{
            background-color: #E9185A;
        }
         ul li div{
            display: none;
            text-align: center;
        }
        li a:hover div{
            display: block;
        }
    </style>
</head>
<body style="background-color: #EEE7E1">
    <div style="width: 300px;padding: 0px">
        <p class="title">大家都喜歡的彩妝</p>
        <ul>
            <li>
                <a href="#"><span>1</span>
                    Za姬芮新能真皙美白隔離霜 35g
                    <div>
                        <img src="images/homework5/icon-1.jpg">
                        <p>￥62.00 最近69122人購買</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml
                    <div>
                        <img src="images/homework5/icon-2.jpg">
                        <p>￥89.00 最近13610人購買</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#"><span>3</span>菲奧娜水漾CC霜40g
                    <div>
                        <img src="images/homework5/icon-3.jpg">
                        <p> ￥59.90 最近13403人購買</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml
                <div>
                    <img src="images/homework5/icon-4.jpg">
                    <p>￥169.00 最近16757人購買</p>
                </div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

相關文章