仿站（HTML+CSS）

最新推荐文章于 2024-01-21 17:20:09 发布

-LShang-

最新推荐文章于 2024-01-21 17:20:09 发布

阅读量1.1k

点赞数 6

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

本文链接：https://blog.csdn.net/LShang2384/article/details/104288854

版权

仿站

没有使用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">

最低0.47元/天解锁文章

-LShang-

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
仿站（HTML+CSS）

仿站没有使用JavaScript，仿的第一个站hh师姐给的建议：放大缩小网页比例（尽可能50%-150%）的时候，思考一下怎样布局可以使其结构更加稳定，即不崩代码规范，特别是命名看完师姐的建议后稍作修改了一下原图效果缩放比例50%（方便我截图……）ps：因为我没有改下载字体，所以不大一样HTML<!DOCTYPE html><html lang=...
复制链接

扫一扫