设置#left部分:相对定位,宽度为755px,高度为335px,文字加粗,背景图片为images目录下的img_left.jpg,左浮动。
时间: 2023-12-06 22:03:48 浏览: 26
可以使用以下代码实现:
```css
#left {
position: relative;
width: 755px;
height: 335px;
font-weight: bold;
background-image: url(images/img_left.jpg);
float: left;
}
```
解释一下代码:
- `position: relative;`:相对定位,使得后面可以使用 `top`、`bottom`、`left`、`right` 属性进行微调。
- `width: 755px;`:设置宽度为 755 像素。
- `height: 335px;`:设置高度为 335 像素。
- `font-weight: bold;`:加粗字体。
- `background-image: url(images/img_left.jpg);`:设置背景图片为 `images` 目录下的 `img_left.jpg`。
- `float: left;`:左浮动,使得 `#left` 元素在父级元素中左对齐。
相关问题
设置#content_left部分:绝对定位;top:50px;right:45px;文字居右。
可以使用以下 CSS 代码实现:
```css
#content_left {
position: absolute;
top: 50px;
right: 45px;
text-align: right;
}
```
这样就可以将 `#content_left` 部分绝对定位,并且距离顶部 50px,距离右侧 45px,同时其内部的文字也会被右对齐。
设置.name_en部分 字体大小14px。 设置.name_ch 部分 字体大小24px;黑体;右内边距10px。 设置.motto部分 字体大小16px;黑体;上外边距20px。 设置ul.style_a部分 上外边距:25px;左外边距:120px;列表项list-style设置为none;溢出部分隐藏overflow:hidden。 设置ul.style_a li部分 左浮动;左外边距:10px。 设置ul.style_a li a部分 白色背景;边框为 1px solid #ff7202;宽度:26px;高度:22px;文本居中对齐;行高:22px;垂直居中对齐;块级显示;字体颜色为:#ff7202;字体大小:18px;文本修饰:无。 设置ul.style_a li.current a:hover部分 相对定位;宽度30px;高度26px;行高26px;背景色为#ff7202;前景色为白色;上外边距-2px。 ⑥控制右边大盒子及整体内容样式 首先,对右边大盒子定义ID为right的选择器,定位右浮动属性,对其内容部分content_right我们同样可以运用绝对定位到相应的位置,同时对父元素right设置相对定位。 设置#right部分 相对定位;宽度245px;高度335px;背景色#4b4642;右浮动。 设置#content_right 绝对定位;top:50px;left:30px。
以下是对你的样式要求的CSS代码:
```
.name_en {
font-size: 14px;
}
.name_ch {
font-size: 24px;
font-family: 黑体;
padding-right: 10px;
}
.motto {
font-size: 16px;
font-family: 黑体;
margin-top: 20px;
}
ul.style_a {
margin-top: 25px;
margin-left: 120px;
list-style: none;
overflow: hidden;
}
ul.style_a li {
float: left;
margin-left: 10px;
}
ul.style_a li a {
display: block;
width: 26px;
height: 22px;
background-color: white;
border: 1px solid #ff7202;
color: #ff7202;
font-size: 18px;
text-align: center;
line-height: 22px;
vertical-align: middle;
text-decoration: none;
}
ul.style_a li.current a:hover {
position: relative;
width: 30px;
height: 26px;
line-height: 26px;
background-color: #ff7202;
color: white;
margin-top: -2px;
}
#right {
position: relative;
width: 245px;
height: 335px;
background-color: #4b4642;
float: right;
}
#content_right {
position: absolute;
top: 50px;
left: 30px;
}
```