CSS04-css的属性(列表,浮动,边框)
CSS列表属性:
有列表属性的列表一般指UL OL不包含自定义列表
list-style-type:定义列表符号样式
属性值:none(去掉列表符号)
list-style:复合式写法
属性值:none(去掉所有列表样式)
注:一般css中的列表样式全部去除
<style>
*{
margin:0;
padding:0;
font-weight: normal;
font-style: normal;
}
li{
list-style: none;
}
</style>
<body>
<ul>
<li>好爱好好</li>
<li>好爱好好</li>
<li>好爱好好</li>
<li>好爱好好</li>
<li>好爱好好</li>
<li>好爱好好</li>
</ul>
</body>CSS的浮动属性*
浮动:
特点:1:不占据空间
2:如果让多个元素横向排列,这些元素都要添加浮动
3:如果添加浮动的总宽超过父元素,最后一个子元素会被挤下来.
float:浮动
left(左浮动)
right(右浮动)
none(不浮动)
注:只要子元素有浮动,父元素一定添加高度
<style>
*{
margin:0;
padding:0;
}
#con{
width: 600px;
height: 500px;
background: paleturquoise;
}
.con-l{
width: 200px;
height: 100px;
background: peru;
float: left;
}
.con-s{
width: 240px;
height: 100px;
background: palegreen;
float: left;
}
</style>
<body>
<div id="con">
<div class="con-l"></div>
<div class="con-s"></div>
</div>
</body>边框属性:
1:border-style:线型(实线/虚线)
属性值:solid(实线)*
dashed(虚线)
dotted(点状线)
double(双线)
none(没有边框)
2:border-width:边框的宽度
属性值:数值(10px)
位置:
一个值:四周
两个值:上下 左右
三个值:上 左右 下
四个值:上 右 下 左
3:border:复合属性
属性值:边框的大小 边框的样式(实线/虚线) 边框的颜色
4:给单一方向添加边框:
border-left/right/top/bottom:
属性值:边框的大小 边框的样式 边框的颜色
<style>
.con{
width: 100px;
height: 100px;
background: #98FB98;
border-left: 2px solid red;
}
</style>
<div class="con">
</div>
5:transparent:代替颜色值为透明
6:使用边框切一个向上的三角形
优点:在移动端使用代码实现比图片实现加载要少消耗流量
思路:确定边框的位置,给要切的边框设置大小,颜色;将要切的边框两端的边框颜色设为透明色(transparent)
border-bottom: 20px solid red;
border-left:15px solid transparent;
border-right: 15px solid transparent;
<style>
.con{
width: 0px;
height:0px;
/*使用边框切一个向上的三角形*/
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
<body>
<div class="con">
</div>
</body>
上一篇： 帧动画、视图动画、属性动画