设置.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。
时间: 2024-01-22 11:20:26 浏览: 24
以下是对你的样式要求的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;
}
```