自适应网页设计HTML代码模板

在现代网站开发中，自适应网页设计（也称为响应式设计）是确保网站在不同设备和屏幕尺寸上都能良好显示的关键。本文将介绍一个基本的自适应HTML代码模板，帮助你创建一个响应式的网页。

1. 基础HTML结构

首先，我们需要一个基本的HTML结构。这包括<!DOCTYPE html>声明、<html>标签以及包含元数据和内容的头部和主体部分。

html

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> <link rel=“stylesheet” href=“styles.css”> </head> <body> <header> <h1>Welcome to My Responsive Website</h1> <nav> <ul> <li><a href=“#home”>Home</a></li> <li><a href=“#about”>About</a></li> <li><a href=“#services”>Services</a></li> </ul> </nav> </header> <main> <section id=“home”> <h2>Home</h2> <p>This is the home section of our responsive website.</p> </section> <section id=“about”> <h2>About</h2> <p>This is the about section of our responsive website.</p> </section> <section id=“services”> <h2>Services</h2> <p>This is the services section of our responsive website.</p> </section> </main> <footer> <p>© 2023 My Responsive Website</p> </footer> <script src=“scripts.js”></script> </body> </html>

2. 添加CSS样式

为了使网页具有响应性，我们需要使用CSS来控制不同屏幕尺寸下的布局和样式。我们将使用媒体查询来实现这一点。

styles.css:

css

/* Basic Styles */ body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: white; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } /* Responsive Styles */ @media (max-width: 600px) { nav ul li { display: block; margin-bottom: 5px; } }