用html语句写一个header部分 最上方局域为带圆角透明度970*66,下方区域为带透明度 高160,最下面的区域为634*287,且分割为两块,一块高228,一块高45
时间: 2024-03-17 17:42:26 浏览: 16
以下是一个参考代码,实现了您要求的效果:
```html
<div style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; height: 66px; width: 970px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);">
<!-- 最上方局域 -->
</div>
<div style="background-color: rgba(255, 255, 255, 0.5); height: 160px; width: 100%; position: absolute; top: 66px; left: 0;">
<!-- 下方区域1 -->
</div>
<div style="background-color: rgba(255, 255, 255, 0.5); height: 287px; width: 634px; position: absolute; bottom: 0; left: 0;">
<!-- 下方区域2 -->
<div style="height: 228px;">
<!-- 下方区域2-1 -->
</div>
<div style="height: 45px;">
<!-- 下方区域2-2 -->
</div>
</div>
```
解释一下上面的代码:
- 用 `div` 标签创建了三个矩形区域,分别为最上方局域、下方区域1、下方区域2;
- 通过 `style` 属性设置了它们的样式,包括背景色、透明度、圆角、高度、宽度、位置等;
- 最上方局域使用了相对定位,水平居中,距离顶部为0;
- 下方区域1使用了绝对定位,距离顶部为66px,宽度为100%;
- 下方区域2使用了绝对定位,距离底部为0,宽度为634px;
- 下方区域2被分割成了两块,分别为高228px和高45px。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)