码迷,mamicode.com
首页 > Web开发 > 详细

CSS常用操作

时间:2018-12-27 20:28:03      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:定义   垂直   图片   margin   指针   水平对齐   位置   back   水平   

CSS常用操作
对齐操作、尺寸操作、分类操作、导航栏、图片操作

对齐操作
1、使用margin属性进行水平对齐
margin:100px auto; 上下为100px,左右自适应
2、使用position属性进行左右对齐:是一个指定当前布局方式是绝对布局、相对布局、静态
position: absolute;
right: 0px;
当前布局靠右
3、使用float属性进行左右对齐


尺寸操作:
属性:
height 设置元素高度,normal(正常),百分比(200%、50%)
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width设置元素宽度

分类操作:
属性:
clear 设置一个元素的侧面是否允许其他的浮动元素
cusor 规定当指定元素之上时显示的指针类型,比如鼠标箭头放在某个元素之上你可以显示为手指、箭头等
display 设置是否及如何显示元素,li{display:inline} 列表变成一行,比如设计导航栏之时
float 定义元素在那个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见

导航栏:
1、垂直导航栏
2、水平导航栏
3、导航栏效果
垂直
ul{
list-style-type: none;
margin:0px;
padding:0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: bisque;
color: blueviolet;
width: 50px;
text-align: center;
}

a:active,a:hover{
background-color: aqua;
}

水平
ul{
list-style-type: none;
margin:0px;
padding:0px;
background-color: brown;
width: 200px;
text-align: center;
}
li{
display: inline-table;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: bisque;
color: blueviolet;
width: 50px;
text-align: center;
}

a:active,a:hover{
background-color: aqua;
}

 

CSS常用操作

标签:定义   垂直   图片   margin   指针   水平对齐   位置   back   水平   

原文地址:https://www.cnblogs.com/CherishZeng/p/10186816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!