前端页面设计-第二节-照片墙

artly1

已于 2023-06-20 18:00:26 修改

阅读量573

点赞数

分类专栏：前端页面实训文章标签：前端 javascript css

于 2023-06-20 08:31:53 首次发布

本文链接：https://blog.csdn.net/artly1/article/details/131296262

版权

前端页面实训专栏收录该内容

9 篇文章 0 订阅

订阅专栏

有了前面的一些知识，我们可以做一个照片墙。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片墙</title>
    <style>
        .header,
        .footer {
            width: 400px;
            height: 100px;
            border: 1px solid red;
        }

        .center {
            width: 400px;
            height: 400px;
            border: 1px dashed blue;
        }

        .center div {
            width: 125px;
            height: 125px;
            border: 1px dashed black;
            float: left;
            margin-left: 5px;
            /* background-color: green; */
        }
    </style>
    <!-- 通过link关联css
<link rel="stylesheet" href="test.css"> -->
</head>

<body>
    <div class="header">头部</div>
    <div class="center">

        <div> <span>1</span>
            <img src="../花.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>2</span>
            <img src="../花2.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>3</span>
            <img src="../花3.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>44</span>
            <img src="../树4.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>5</span>
            <img src="../树5.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>6</span>
            <img src="../6.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>7</span>
            <img src="../7.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>8</span>
            <img src="../8.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
        <div><span>9</span>
            <img src="../9.jpg" alt="图片丢失" width="100%" height="80%">
        </div>
    </div>




    <div class="footer">尾部</div>
</body>

</html>