html和css静态网页制作
时间: 2023-07-03 07:04:45 浏览: 57
静态网页制作主要使用HTML和CSS来实现。HTML负责网页的结构和内容,而CSS则负责网页的样式和布局。
以下是一个简单的HTML和CSS代码示例,用于制作一个带有标题、图片和文本的静态网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
img {
display: block;
margin: 0 auto;
width: 50%;
}
p {
font-size: 18px;
line-height: 1.5;
padding: 20px;
text-align: justify;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<img src="myimage.jpg" alt="我的图片">
<p>这是我的网页,我喜欢学习HTML和CSS来制作静态网页。我希望通过这个网页与大家分享我的经验和知识。</p>
</body>
</html>
```
在上述代码中,`<html>`标签表示HTML代码开始,`<head>`标签包含网页的元数据,如标题和样式表,`<body>`标签包含网页的主要内容。样式表包含在`<style>`标签中,提供了网页的样式和布局信息。
这个示例网页包含一个居中显示的标题,一个居中显示的图片和一段居中对齐的文本。图片的宽度设置为页面宽度的50%,以确保在各种屏幕上都能够正确显示。文本使用`<p>`标签包含,样式表中定义了字体大小、行高和文本对齐方式。
请注意,这只是一个简单的示例代码,实际的静态网页制作需要更多的HTML和CSS知识和技巧。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)