day04
案例:二级菜单的样式
<body>
<div id="leftsidebar_box">
<ul>
<!--与li同级的ul是二级菜单 -->
<li class="cmenu1 menu">我的订单
<img alt="" src="../images/myOrder/myOrder1.png">
</li>
<ul class="submenu">
<li>全部订单</li>
<li>待付款</li>
<li>待收货</li>
<li>待评价</li>
<li>退货退款</li>
</ul>
<li class="cmenu2 menu">我的优惠券
<img alt="" src="../images/myOrder/myOrder1.png">
</li>
<ul class="submenu">
<li>我的优惠券</li>
</ul>
<li class="cmenu3 menu">收货地址
<img alt="" src="../images/myOrder/myOrder1.png">
</li>
<ul class="submenu">
<li>地址管理</li>
</ul>
<li class="cmenu4 menu">账号管理
<img alt="" src="../images/myOrder/myOrder1.png">
</li>
<ul class="submenu">
<li>我的信息</li>
<li>安全管理</li>
</ul>
</ul>
</div>
</body>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li{
/* 去掉li前面的黑点 */
list-style: none;
}
a{
text-decoration: none;
color: #808080;
}
#leftsidebar_box {
width: 160px;
}
.cmenu1{
background-image: url("../images/myOrder/myOrder.png");
}
.cmenu2{
background-image: url("../images/myOrder/pcenter_icon1.png");
}
.cmenu3{
background-image: url(../images/myOrder/pcenter_icon2.png);
}
.cmenu4{
background-image: url(../images/myOrder/pcenter_icon3.png);
}
.menu{
background-color: rgb(10,161,237);
height: 36px;
color: #f5f5f5;
font-size: 14px;
font-weight: bold;
font-family: "黑体";
background-repeat: no-repeat;
padding-left: 40px;
/* 文本垂直居中 */
line-height: 36px;
background-position: 10px center;
margin-bottom: 10px;
}
.submenu{
background-color: #fff;
padding-left: 40px;
margin-bottom: 10px;
}
.submenu>li{
line-height: 30px;
font-size: 14px;
font-family: "黑体";
color:#808080;
}
</style>
5. 边框属性 border
border:1px solid #006699;
border-width:1px;
border-style:solid;
border-color:#006699;
border-top:上边框
border-right:
border-bottom:
border-left:
border-top-width:
...
溢出属性
overflow:溢出
- hidden 溢出部分隐藏
- visiable 溢出部分显示
- scroll 溢出部分显示滚动条
复杂属性
display 控制元素的显示方式
- display:none 隐藏标签,可以写在内联样式中
- display:block;按块级标签进行显示
- display:inline;按照行级标签显示,基本不用!
浮动,把块级元素在一行中显示
float:left ,把元素浮动起来之后往左排列
float:right,把元素浮动起来之后往右排列
clear:both,清除浮动
总结
一旦元素设置了浮动属性,
当前元素将会脱离默认文档流
在默认文档流之上(上一层)进行渲染绘制
同时,此元素先前的位置将会被其它元素占用
clear:both,是让本元素不去占用浮动元素原来的位置
或者说不让本元素被浮动的元素覆盖
定位
position:absolute;绝对定位
position:relative;相对定位
使用定位的要点
- 一个元素想使用定位,父级元素必须有position:relative;如果没有,那么子元素会逐层向外寻找有position:relative;的包裹元素.并以这个包裹元素为参照物,使用top left等属性.如果都没有,以body为参照物
- postion:absolute原位置会被下面的元素占用
- position:relative;原位置被保留,不会被下面的元素占用
- top left right bottom