HTML5和CSS3开发电子商务网站第七章习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影社区热门小镇</title>
    <style>
        div{
            width: 920px;
             height: 300px;
            border: 1px solid #D8D8D8;
            margin: 0px auto;
        }
        h4{
            padding-left: 10px;
            margin-top: 8px;
            font-size: 15px;
        }
        #g1{
            border: 1px solid grey;
            border-radius:5px;
            width: 66px;
            height: 66px;
            margin-left:-15px;
            float: left;
            background: url("pic_01.jpg") no-repeat 3px;
        }
        #g4{
            border: 1px solid grey;
            border-radius:5px;
            width: 66px;
            height: 66px;
            margin-left:190px;
            float: left;
            background: url("pic_02.jpg") no-repeat 3px;
        }
        #g7{
            border: 1px solid grey;
            border-radius:5px;
            width: 66px;
            height: 66px;
            margin-left:180px;
            float: left;
            background: url("pic_03.jpg") no-repeat 3px;
        }
        #a1{
            border: 1px solid grey;
            border-radius:5px;
            width: 66px;
            height: 66px;
            margin-left:-26px;
            float: left;
            background: url("pic_04.jpg") no-repeat 3px;
        }
        #a4{
               border: 1px solid grey;
                     border-radius:5px;
                     width: 66px;
                     height: 66px;
                     margin-left:-26px;
                     float: left;
                     background: url("pic_05.jpg") no-repeat 3px;
                 }
        #a7{
            border: 1px solid grey;
            border-radius:5px;
            width: 66px;
            height: 66px;
            margin-left:-26px;
            float: left;
            background: url("pic_06.jpg") no-repeat 3px;
        }
        li{
            display: inline-block;

        }
        #g3,#g6,#g9{
             margin-bottom:500px;

        }
   #a3{
       margin-bottom:350px;
       margin-left:-817px;
   }#a6{
           margin-bottom:350px;
           margin-left:220px;
       }
    #a9{
        margin-bottom:350px;
        margin-left:180px;
    }


   #g2,#g5,#g8,#a2,#a5,#a8{
       float: right;
       padding-left: 20px;
       font-size: 14px;
       line-height: 22px;
   }
        a{
            text-decoration: none;
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <h4>摄影社区热门小镇</h4>
        <ul>
            <li id="g3"><div id="g1"></div>
                    <span id="g2">
                        <a href="#">风景狙击手</a><br/>
                        成员：80<br/>
                        作品：276
                    </span>
            </li>
            <li id="g6"><div id="g4"></div>
                <span id="g5">
                    <a href="#">叙事感</a><br/>
                成员：235<br/>
                作品：116
                </span>
            </li>
            <li id="g9"><div id="g7"></div>
                <span id="g8">
                     <a href="#">定焦视界</a><br/>
                成员：56<br/>
                作品：456
                </span>
            </li>
    <li id="a3"><div id="a1"></div>
        <span id="a2">
                   <a href="#">中画幅乐园</a><br/>
                成员：130<br/>
                作品：239
                </span>
            <li id="a6"><div id="a4"></div>
                <span id="a5">
                     <a href="#">《卡啪》先锋...</a><br/>
                成员：78<br/>
                作品：125
                </span>
            <li id="a9"><div id="a7"></div>
                <span id="a8">
                     <a href="#">植物的无声世界</a><br/>
                成员：235<br/>
                作品：1258
                </span>
    </li>
        </ul>
</div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名人名言</title>
    <style>
        #d1{
          width: 1200px;
            margin: 0px auto;
        }
        h1{
            margin-left: 20px;
            margin-top: 3px;
            margin-bottom: 8px;
        }
        #s1{
            margin-left: 20px;
            font-style: italic;
        }
       header ul div{
           display: inline-block;
           list-style: none;
           border: 1px solid;
           margin-left: -5px;
           padding: 12px;
       }
       header ul{
           margin-left: -15px;
           margin-top: 30px;
       }
       a{
         color:#666666;
           text-decoration: none;
       }
       header hr{
            color: grey;
            margin:-17px ;
        }
        header ul a:hover{
            text-decoration: underline;
        }
        .a1{
            float: left;
            margin-top: 60px;
            margin-left: 110px;

        }#d3{
                     width: 650px;
            border: 1px solid;
                 }
        section h3{
            margin-top: 2px;
            text-indent: 0.5em;
            margin-bottom: 4px;
        }
        section #s2{
            text-indent: 0.5em;
            margin-top: 1px;
        }
        #d4{
            width: 650px;

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

</footer>
</body>
</html>

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

HTML5和CSS3开发电子商务网站 第七章习题

猜你喜欢

HTML5和CSS3开发电子商务网站第七章习题