div+css 复刻网页能按照浏览器大小适应-CFANZ编程社区

div+css 复刻网页能按照浏览器大小适应

鱼弦：公众号：红尘灯塔，CSDN内容合伙人、CSDN新星导师、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）

下面是一个使用div+css实现按照浏览器大小适应的网页复刻示例，满足您提出的要求：

首先，创建一个HTML文件，命名为index.html，并在同一目录下创建一个名为css的文件夹和一个名为images的文件夹。将所有的CSS代码保存在css文件夹中的style.css文件中，将网页所需的图片保存在images文件夹中。

HTML文件（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>适应浏览器大小的网页复刻</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="images/logo.png" alt="Logo">
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <h1>欢迎来到我们的网站</h1>
            <p>这是一段网站内容的示例文本。Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
        <footer>
            <p>版权所有 © 2023</p>
        </footer>
    </div>
</body>
</html>

CSS文件（css/style.css）：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    min-height: 100%;
    position: relative;
}

header {
    background-color: #f2f2f2;
    padding: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    padding: 10px;
    text-decoration: none;
}

section {
    padding: 20px;
}

footer {
    background-color: #f2f2f2;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

请将上述HTML代码和CSS代码分别保存到index.html和css/style.css文件中，并将所需的图片按照要求存储在images文件夹中。

这个示例中，使用了div布局和CSS样式来实现网页的自适应。通过设置容器的最小高度为100%，使得容器能够撑开整个浏览器窗口的高度。然后使用相对定位和绝对定位来定位页面的其他元素，如header、section和footer。CSS中的其他样式设置可以根据实际需求进行调整。

这样，网页中的内容和布局就能够根据浏览器的大小进行自适应了。