HTML5和CSS3开发电子商务网站第七章习题_摄影社区热门小镇代码-优快云博客

本文链接：https://blog.youkuaiyun.com/wsbbdbjay/article/details/80793283

本文主要探讨HTML5和CSS3在电子商务网站开发中的实践，通过一系列习题帮助读者掌握相关技能，涉及网页布局、响应式设计及交互元素等关键点。

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

<!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>