应用html和css完成如图所示界面效果。内容相对于浏览器居中,图标见附件disc.jpg。
时间: 2024-06-11 21:09:58 浏览: 7
由于无法附加附件,故无法提供图片。
以下是代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Disc</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="disc">
<img src="disc.jpg">
<h1>Disc</h1>
<p>A disc (or disk) is a round flat object that can spin around.</p>
</div>
</div>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.disc {
text-align: center;
}
.disc img {
width: 100px;
height: 100px;
}
.disc h1 {
margin: 20px 0;
font-size: 36px;
}
.disc p {
font-size: 18px;
line-height: 1.5;
}
```
解释:
- 首先,我们创建了一个HTML结构,其中包含一个容器`div`和一个`disc`类的`div`元素。
- `container`类使用Flexbox布局来将内容垂直和水平居中。
- `disc`类包含图像、标题和描述,并使用`text-align`属性来使其文本居中。
- 图像使用`width`和`height`属性进行大小调整。
- 标题使用较大的字体大小,并在顶部和底部添加一些间距。
- 描述使用较小的字体大小,并增加行高,以使其更易于阅读。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](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)