加上HTML和CSS代码
时间: 2024-09-09 07:10:30 浏览: 13
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它使用标签来定义网页的各个部分,如标题、段落、链接、图片等。CSS(Cascading Style Sheets)是一种用于描述网页外观和格式化的样式表语言,它定义了HTML元素的布局、设计和交互方式。
下面是一个简单的HTML和CSS结合的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单的网页示例</title>
<style>
/* 这里是CSS样式 */
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: auto;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
nav {
float: left;
width: 20%;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 80%;
background-color: #f1f1f1;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>我的网站</h1>
</header>
<section>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<article>
<h2>文章标题</h2>
<p>这里是一些文章内容...</p>
</article>
</section>
<footer>
<p>版权信息 © 2023</p>
</footer>
</div>
</body>
</html>
```
在这个例子中,我们创建了一个简单的网页布局,包含了头部(header)、导航栏(nav)、文章(article)和页脚(footer)。CSS样式被定义在`<style>`标签内,用来设置页面的基本格式和布局。