仿站（HTML+CSS）

最新推荐文章于 2021-06-18 22:40:11 发布

-LShang-

最新推荐文章于 2021-06-18 22:40:11 发布

阅读量1.1k

点赞数 6

分类专栏：前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/LShang2384/article/details/104288854

版权

本文介绍了使用HTML和CSS进行网站仿制的过程，强调了布局稳定性和代码规范的重要性。作者根据师姐的建议，调整了布局以提高缩放比例下的稳定性，并指出自己在选择器运用、CSS冗余及页面缩放稳定性方面有待提升。

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

仿站

没有使用JavaScript，仿的第一个站hh

师姐给的建议：

放大缩小网页比例（尽可能50%-150%）的时候，思考一下怎样布局可以使其结构更加稳定，即不崩
代码规范，特别是命名

看完师姐的建议后稍作修改了一下

原图

Gardening

效果

缩放比例50%（方便我截图……）

ps：因为我没有改下载字体，所以不大一样

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gardening</title>
    <link rel="stylesheet" href="CSS/head.css">
    </style>
</head>

<body>
    <div class="banner">
        <header class="headers w">
            <nav>
                <div class="home"><img src="images/001.png"></div>
                <ul class="list">
                    <li>ABOUT</li>
                    <li>GALLERY</li>
                    <li>NEWS</li>
                    <li>TYPO</li>
                    <li>CONTACT</li>
                </ul>
                <div class="share"><img src="images/005.png"></div>
            </nav>
        </header>
        <h1>Gardening</h1>
        <div class="w">
            <div class="aqu color1 fl">
                <img src="images/002.png">
                <p>CLARITAS EST ETIAM</p>
            </div>
            <div class="kong"></div>
            <div class="aqu color2 fl">
                <img src="images/003.png">
                <p>CLARITAS EST ETIAM</p>
            </div>
            <div class="kong"></div>
            <div class="aqu color3 fl">
                <img src="images/004.png">
                <p>CLARITAS EST ETIAM</p>
            </div>
            <div class="kong"></div>
            <div class="aqu color4 fl">
                <img src="images/006.png">
                <p>CLARITAS EST ETIAM</p>
            </div>
        </div>
    </div>
    <div class="greys">
        <div class="w">
            <article class="aqu1 fl oh">
                <h2>MIRUM EST NOTARE</h2><br>
                <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,set diam nonummy nibh euismod tincidunt ut
                    laoreet dolore magna aliquam erat volupat.</p>
                <img src="images/007.png">
            </article>
            <div class="kong"></div>
            <article class

最低0.47元/天解锁文章