网页设计模板的HTML代码可以根据不同的需求和设计风格有很大的不同。以下是一个简单的HTML网页模板示例,它包含了一些基本的元素:头部(Header)、导航栏(Nav)、主体内容(Section)、侧边栏(Aside)和底部(Footer)。
自适应开发模板:http://www.yunbuluo. net/html
html
Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单网页模板</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
nav {
float: left;
width: 20%;
height: 300px; /* 仅为了演示 */
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 80%;
background-color: #f2f2f2;
}
section:after {
content: "";
display: table;
clear: both;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h1>我的网页</h1>
</header>
<section>
<nav>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</nav>
<article>
<h2>文章标题</h2>
<p>这是一段示例文本,你可以在这里添加更多的内容。</p>
</article>
</section>
<footer>
<p>底部信息</p>
</footer>
</body>
</html>