本文探讨了网页设计中#box1到#box10的CSS样式应用，详细解析了如何通过定位、边框、背景颜色等属性创建复杂布局。重点讲解了绝对定位、相对定位以及固定定位的使用，同时提及了CSS盒模型在调整元素尺寸和间距中的作用。内容涵盖了从简单的网页元素到复杂的响应式布局设计，旨在提升网页视觉效果和用户体验。
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
#box4 {
background-color: #E8E8E8;
border: 1px solid #E8E8E8;
width: 90px;
height: 180px;
position: absolute;
top: 560px;
left: 190px;
}
#box5 {
border: 1px solid white;
width: 530px;
height: 180px;
position: absolute;
top: 510px;
left: 290px;
margin: 5px;
}
#box6 {
border: 1px solid #E8E8E8;
width: 240px;
height: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
font-family:"微软雅黑";
font-size: 15px;
top: 510px;
left: 830px;
margin: 0px;
padding:0px;
}
#box7 {
background-color: #e2121f;
border: 1px solid #e2121f;
width: 120px;
font-size: 12px;
font-family: "微软雅黑";
text-align: right;
position: absolute;
top: 700px;
left: 950px;
margin: 5px;
}
#box8 {
border: 1px #e2121f;
width: 90px;
height: 36px;
position: absolute;
bottom: 20px;
right: 20px;
}
#box9 {
border: 1px red;
width: 41px;
height: 114px;
position: fixed;
right: 0px;
bottom: 500px;
}
#box10{
width: 1280px;
margin: 0px auto;
background: whitesmoke;
font-family: "微软雅黑";
text-align: center;
font-size:12px;
position: absolute;
bottom:0px;
left:0px;
}
.nav ul {
width: 1280px;
margin: 0px auto;
height: 38px;
padding: 0;
background: #e2121f;
position: absolute;
bottom: 20px;
left: 0px;
}
.nav ul li {
float: left;
}
.nav ul li a {
width: 100px;
height: 28px;
line-height: 28px;
background: #e2121f;
color: #FFF;
margin: 5px 20px;
font-family: "微软雅黑";
font-size: 16px;
display: block;
text-align: center;
text-decoration: none;
}
.nav ul li img {
float: right;
}
.nav ul li a:hover {
width: 98px;
height: 26px;
line-height: 28px;
border: 1px solid red;
font-weight: bold;
color: white;
background: #e2121f;
}
span {
color: red;
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
