header宽度为980px,水平居中,上内边距20px,清除浮动。header中左div左浮动。header中右div右浮动,行高为80px。header中a标签颜色为#404042,鼠标悬浮颜色为#da5454。
时间: 2024-02-29 09:52:22 浏览: 52
下面是实现上述要求的 CSS 代码:
```css
header {
width: 980px;
margin: 20px auto 0;
overflow: hidden; /* 清除浮动 */
}
header .left {
float: left;
}
header .right {
float: right;
line-height: 80px;
}
header a {
color: #404042;
}
header a:hover {
color: #da5454;
}
```
其中,`header` 元素的 `width` 属性设置为 `980px`,`margin` 属性设置为 `20px auto 0`,表示上内边距为 `20px`,左右外边距自动,从而实现水平居中。`overflow: hidden;` 用于清除 `header` 内部的浮动元素。`header .left` 和 `header .right` 分别指定了左右两个子元素的浮动方向。`header a` 和 `header a:hover` 分别设置了链接文本的颜色和鼠标悬浮时的颜色。
相关问题
html用div页面分成上左右三个部分
可以使用CSS中的定位属性和宽高属性来实现将HTML页面划分为上、左、右三个部分,以下是一种实现方法:
```html
<div class="header">这是头部</div>
<div class="main">
<div class="left">这是左侧</div>
<div class="right">这是右侧</div>
</div>
```
```css
/* 设置页面的基本样式 */
html, body {
height: 100%;
margin: 0;
}
/* 设置头部的样式 */
.header {
height: 80px;
background-color: #ccc;
}
/* 设置主要内容区域的样式 */
.main {
height: calc(100% - 80px); /* 计算主要内容区域的高度 */
position: relative;
}
/* 设置左侧和右侧的样式 */
.left, .right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
width: 200px; /* 设置左侧宽度 */
background-color: #eee;
}
.right {
left: 200px; /* 将右侧距离左侧 200px */
right: 0;
background-color: #ddd;
}
```
上面的代码将一个 HTML 页面划分为上、左、右三个部分,其中头部占据固定高度(上部分),左侧和右侧占据剩余的高度(下部分)。
值得注意的是,为了让左侧和右侧占据剩余的高度,可以使用绝对定位,并同时设置 top 和 bottom 的值为 0。另外,为了让右侧占据剩余的宽度,可以设置其 left 的值为左侧的宽度。
<header>标签在<body>标签中水平居中
可以使用CSS来实现<header>标签在<body>标签中水平居中,可以使用以下代码:
```css
header {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
```
这会将<header>标签相对于父元素的左边缘移动到50%的位置,然后使用transform属性将其向左移动它自身宽度的一半,从而使其水平居中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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_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)