用html+css制作网站
时间: 2023-10-10 21:04:42 浏览: 52
制作网站的基本步骤如下:
1. 设计网站的结构和布局,包括导航栏、页脚、主体内容等。
2. 编写 HTML 代码,按照设计好的结构和布局来编写网页的内容和结构。
3. 使用 CSS 样式来美化网页,包括字体、颜色、背景、布局等。
4. 添加交互效果,比如鼠标悬停、点击等效果,可以使用 JavaScript 来实现。
下面是一个简单的 HTML+CSS 网站制作示例:
1. 设计网站的结构和布局。比如,一个简单的网站可能包括导航栏、页眉、主体内容和页脚。
2. 编写 HTML 代码。通过 HTML 标签来定义网页的内容和结构。比如,导航栏可以使用 ul 和 li 标签来定义菜单列表,主体内容可以使用 div 标签来定义。
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>欢迎来到我的网站</h2>
<p>这是我的网站,欢迎来访问!</p>
<img src="image.jpg" alt="我的图片">
</main>
<footer>
<p>© 2021 我的网站</p>
</footer>
</body>
</html>
```
3. 使用 CSS 样式来美化网页。比如,设置导航栏的背景色、字体和颜色等。
```css
header {
background-color: #333;
color: #fff;
font-size: 24px;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
font-size: 18px;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
font-size: 14px;
padding: 10px;
}
```
4. 添加交互效果。比如,当用户鼠标悬停在导航栏的链接上时,链接的颜色会变化。
```css
nav a:hover {
color: #ff0;
}
```
这样,一个简单的 HTML+CSS 网站就制作完成了。当然,实际制作网站时还需要考虑更多因素,比如响应式设计、SEO 等。