静态网页设计html css
时间: 2023-09-20 17:15:10 浏览: 39
HTML和CSS是静态网页设计的两大基础语言。
HTML(超文本标记语言)是一种标记语言,用于创建网页结构和内容。它使用标签和属性来定义网页元素,如标题、段落、列表、链接等。
CSS(层叠样式表)是一种样式语言,用于控制网页的外观和布局。它使用选择器和属性来定义网页元素的样式,如颜色、字体、大小、位置等。
以下是一个简单的HTML和CSS代码示例,用于创建一个带有标题、段落和图像的静态网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Static Webpage</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333333;
text-align: center;
}
p {
color: #666666;
font-size: 18px;
line-height: 1.5;
margin: 20px;
}
img {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Welcome to my static webpage!</h1>
<p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac metus vel lectus bibendum consequat. Nullam euismod placerat mauris, quis malesuada ipsum consequat ac. </p>
<img src="myimage.jpg" alt="My Image">
</body>
</html>
```
这段代码会创建一个带有灰色背景、居中标题、居中段落、带有20像素边距的图像的静态网页。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)