第7章课后作业

最新推荐文章于 2021-12-19 11:45:17 发布

原创最新推荐文章于 2021-12-19 11:45:17 发布 · 973 阅读

1 ·

CC 4.0 BY-SA版权

第7章浮动专栏收录该内容

2 篇文章

订阅专栏

本节课后作业涵盖制作摄影社区的热门小镇模块，旨在提升用户互动；同时要求制作名人名言展示，以启发思考。此外，还包括彩妆热卖产品的列表设计，关注潮流美妆趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第3题制作摄影社区热门小镇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影社区热门小镇</title>
    <style>
        .div1{
            border: grey solid 1px;
            width: 800px;
            height: 220px;
            margin: auto;
        }
        h1{
            font-size: 14px;
            text-indent: 10px;
        }
        li{
            list-style-type: none;
            float: left;
            width: 250px;
            margin-bottom: 20px;
        }
        ul{
            padding-left: 15px;

        }
        .div2{
            border: grey solid 1px;
            border-radius: 5px;
            width: 70px;
            float: left;
        }
        span p{
            text-indent: 15px;
            line-height: 5px;
            font-size: 14px;
            margin-top: 0px;
            color: grey;
        }

        p:first-child{
            color: #2578ff;
            line-height: 20px;
        }
        img{
            padding-left: 5px;
            padding-top: 5px;
        }
        li:nth-of-type(4){
            clear: left;
        }
    </style>
</head>
<body>
<div class="div1">
    <h1>摄影社区热门小镇</h1>
    <ul>
        <li><div class="div2"><img src="image/pic_01.jpg"></div><span><p>风景狙击手</p><p>成员：80</p><p>作品：276</p></span></li>
        <li><div class="div2"><img src="image/pic_02.jpg"></div><span><p>叙事感</p><p>成员：235</p><p>作品：116</p></span></li>
        <li><div class="div2"><img src="image/pic_03.jpg"></div><span><p>定焦视界</p><p>成员：56</p><p>作品：456</p></span></li>
        <li><div class="div2"><img src="image/pic_04.jpg"></div><span><p>中画幅乐园</p><p>成员：130</p><p>作品：239</p></span></li>
        <li><div class="div2"><img src="image/pic_05.jpg"></div><span><p>《卡啪》先锋...</p><p>成员：78</p><p>作品：125</p></span></li>
        <li><div class="div2"><img src="image/pic_06.jpg"></div><span><p>植物的无声世界</p><p>成员：235</p><p>作品：1258</p></span></li>
    </ul>
</div>
</body>
</html>

第4题制作名人名言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名人名言</title>
    <style>
        header {
            padding-left: 50px;
            border-bottom: gray 1px solid;
            height: 147px;
        }

        ul {
            list-style-type: none;
            padding: 0px;
        }

        li {
            border: gray solid 1px;
            float: left;
            padding: 10px;
            margin-top: 15px;
        }

        header p {
            color: #aeaeae;
            line-height: 10px;
        }

        .div1 {
            border: 1px solid #808080;
            width: 650px;
            padding-left: 10px;
            line-height: 20px;
        }

        section {
            margin-top: 40px;
            padding-left: 30px;
        }

        h2 {
            font-size: 20px;
            margin-bottom: 0px
        }

        .p1 {
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 0px;
        }
        .div2{
            width: 650px;
            float: left;
        }
        .div3{
            margin-left: 20px;
            border: #aeaeae 1px solid;
            float: right;
            width: 350px;
            margin-right: 20px;
            padding: 10px;
            font-style: italic;
        }
        footer{
            clear: left;
            text-align: center;
            border-top: grey 1px solid;
            margin-top: 780px;
            padding-top: 20px;
            color: #aeaeae;
        }
        .div4{
            width: 1200px;
            margin: auto;
        }
        .p2{
            font-size: 20px;
            border: grey solid 1px;
            padding: 15px;
            font-weight: bold;
            margin-top: 0px;
        }
        .div5{
            font-style: italic;
            border: grey solid 1px;
            padding: 10px;
        }
        section p{
            line-height: 20px;
            padding: 0px;
        }
        a{
            text-decoration: none;
            color: #aeaeae;
        }
        a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="div4">
    <header>
        <h1>名人名言</h1>
        <p><em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</em></p>
        <ul>
            <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><a href="#">发表</a></li>
        </ul>
    </header>
    <section>
        <div class="div2" >
            <div class="div1" style="margin-bottom: 0px">
                <h2>心理学经典名言的智慧</h2>
                <p style="margin-top: 0px">洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
            </div>
            <p style="margin-bottom: 0px">
            <span class="p1">
                创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</span><br>
            创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。<br>
            发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
            <p class="p2">作者简介</p>
            <p style="margin-bottom: 0px;font-weight: bold">
                如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</p>
            <p style="margin-top: 0px;margin-bottom: 0px">
                如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</p>
            <p style="margin-top: 0px;margin-bottom: 0px">发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>
            <div class="div5">
                <p>赞助广告</p>
                <img src="image/ad_2.jpg"/>
            </div>
        </div>
        <div class="div3" style="margin-top: 0px">
            <form method="post" action="#"/>
            <p>赞助广告</p>
            <img src="image/ad.jpg"/>
            <p>搜索</p>
            <p><input type="search" placeholder="点击搜索"></p>
            <p>标签</p>
            <p>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录</p>
        </div>
    </section>
    <footer>
        &copy;All Rights Reserved by Psytopic.来自Psytopic.com的礼物
    </footer>
</div>
</body>
</html>

第5题彩妆热卖产品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彩妆热卖产品列表</title>
    <style>
        body{
            background: antiquewhite;
        }
        .div{
            background: white;
            width: 380px;
        }
        h3{
            background: #ff1e4d;
            color: white;
            padding: 15px;
            margin-bottom: 5px;
        }
        .div1{
            display: none;
            text-align: center;
        }
        li{
            line-height: 50px;
            list-style-type: none;
            border-bottom: grey dashed 1px;
        }
        ul{
            margin-top: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: #ff1e4d;
        }
        a:hover .div1{
            display: block;
        }
        span{
            color: white;
            background: grey;
            font-weight: bold;
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
        }
        a:hover span{
            background: #ff1e4d;
        }
    </style>
</head>
<body>
<div class="div">
    <h3>大家都喜欢的彩妆</h3>
    <ul>
        <li><a href="#"><span>1</span>&nbsp;Za姬芮新能真皙美白隔离霜 35g
            <div class="div1"><img src="image/icon-1.jpg"><p>￥62.00 最近69122人购买</p></div>
        </a>
        </li>
        <li><a href="#"><span>2</span>&nbsp;美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
            <div class="div1"><img src="image/icon-2.jpg"><p>￥89.00 最近13610人购买</p></div>
        </a>
        </li>
        <li><a href="#"><span>3</span>&nbsp;菲奥娜水漾CC霜40g 35g
            <div class="div1"><img src="image/icon-3.jpg"><p>￥59.90 最近13403人购买</p></div>
        </a>
        </li>
        <li><a href="#"><span>4</span>&nbsp;DHC 蝶翠诗橄榄卸妆油 200ml
            <div class="div1"><img src="image/icon-4.jpg"><p>￥169.00 最近16757人购买</p></div>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

第7章 课后作业

第7章课后作业