web前端网页制作只用css提供一个模版
时间: 2023-07-25 09:44:31 浏览: 43
当你只使用 CSS 来创建网页模板时,你需要使用 CSS 的布局和样式来控制网页的外观和排版。以下是一个简单的 CSS 模板示例,你可以根据自己的需求进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS 模板示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #ccc;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
section {
background-color: #fff;
padding: 20px;
margin: 20px;
text-align: justify;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>CSS 模板示例</h1>
</header>
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</nav>
<section>
<p>这里是页面主要内容。</p>
</section>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
这个模板包含了一个顶部的标题栏,一个导航栏,一个主要内容区域和一个底部的版权信息。你可以通过修改 CSS 样式和 HTML 结构来创建你自己的网页。