CSS04-css的属性(列表,浮动,边框)

最新推荐文章于 2022-09-12 21:08:40 发布

sdsjx01

最新推荐文章于 2022-09-12 21:08:40 发布

阅读量341

点赞数

分类专栏： CSS 文章标签： css属性边框属性列表属性浮动

本文链接：https://blog.csdn.net/sdsjx01/article/details/89182451

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

sdsjx01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS04-css的属性(列表,浮动,边框)

CSS列表属性: 有列表属性的列表一般指UL OL不包含自定义列表 list-style-type:定义列表符号样式属性值:none(去掉列表符号) list-style:复合式写法属性值:none(去掉所有列表样式) 注:一般css中的列表样式全部去除 &lt...
复制链接

扫一扫