html：<aside>
<ul class="sidebar">
<div class="out"></div>
<li>手机 平板 电话卡<span>></span></li>
<li>电视
盒子<span>></span></li>
<li>路由器 智能硬件<span>></span></li>
<li>移动电源 插线板<span>></span></li>
<li>耳机 音箱<span>></span></li>
<li>电池 存储卡<span>></span></li>
<li>保护套 后盖<span>></span></li>
<li>贴膜 其他配件<span>></span></li>
<li>米兔 服装<span>></span></li>
<li>箱包 其他周边<span>></span></li>
<div class="a">
< img src="img/phone_img.png" width="2
0px" height="43
0px">
</div>
<div class="c">
<div>
<a href=" ">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
</div>
<div class="m">
< img src="img/phone_img
01.png" width="25px" height="43
0px" />
</div>
<div class="n">
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
<div>
<a href="#">选购</a >
</div>
</div>
</ul>
</aside>
css：aside{
width
: 25
0px;
height
: 443px;
background
: #949494;
position
: relative;
left
: -46
0px;
margin: 0 auto;
}
aside ul.sidebar li{
width
: 19
0px;
height
: 44.3px;
position
: relative;
padding
:0 3
0px;
line
-height
: 44.3px;
color
: #fff;
}
aside ul.sidebar li span{
float
: right;
color
: #fff;
margin: 1
0px;
}
aside ul.sidebar li
:hover{
background
: #ff67
00;
}
aside ul.sidebar div.out{
width
: 5
00px;
height
: 442px;
border
: 1px solid transparent;
background
: #
00ffff;
position
: absolute;
left
: 25
0px;
z
-index
: 1;
display
: none;
}
aside div.a img{
position
: relative;
top
: -438px;
left
: 28
0px;
}
aside div.c div a{
position
: relative;
top
: -889px;
left
: 4
00px;
}
aside div.m img{
position
: relative;
top
: -1343px;
left
: 511px;
}
aside div.n div a{
position
: relative;
top
: -1794px;
left
: 667px;
}aside{
width
: 25
0px;
height
: 443px;
background
: #949494;
position
: relative;
left
: -46
0px;
margin: 0 auto;
}
aside ul.sidebar li{
width
: 19
0px;
height
: 44.3px;
position
: relative;
padding
:0 3
0px;
line
-height
: 44.3px;
color
: #fff;
}
aside ul.sidebar li span{
float
: right;
color
: #fff;
margin: 1
0px;
}
aside ul.sidebar li
:hover{
background
: #ff67
00;
}
aside ul.sidebar div.out{
width
: 5
00px;
height
: 442px;
border
: 1px solid transparent;
background
: #
00ffff;
position
: absolute;
left
: 25
0px;
z
-index
: 1;
display
: none;
}
aside div.a img{
position
: relative;
top
: -438px;
left
: 28
0px;
}
aside div.c div a{
position
: relative;
top
: -889px;
left
: 4
00px;
}
aside div.m img{
position
: relative;
top
: -1343px;
left
: 511px;
}
aside div.n div a{
position
: relative;
top
: -1794px;
left
: 667px;
}怎么让文字不重叠，并移至顶部
本文详细介绍了CSS中盒子模型的相关概念，包括如何通过margin和padding控制嵌套盒子间的距离，以及如何实现盒子的水平居中。文章还探讨了margin:0 auto;与text-align:center;的区别，并提供了实际应用技巧。
扫一扫
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
