HTML5和CSS3开发第七章课后作业

  • Post author:
  • Post category:其他


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>作品:



版权声明:本文为suixinCaesar原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。