首页 > 代码库 > 常用样式
常用样式
padding:6px 10px 0 10px; 上 右 下 左
border:1px solid #dbdbdb;边框
margin-bottom:8px与最下边边框的距离
display:block;
display:block;比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:
block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。你可以实际写几行
简单代码感受一下。
background:url(images/side_bg.gif) 0 bottom no-repeat
背景图片地址-左右的对齐方式(或距离)-左右的对齐方式(或距离)-是否重复
border-bottom:1px dashed #dcdcdc; color:#777;} 下边框定义虚线
border-bottom:1px dashed #dcdcdc; 下划线 及下划线的颜色
padding:0; margin:0;
表示全局声明div的边框外部和元素距离为0
list-style:none;去掉黑点;
text-decoration:none;修饰下划线
background:url(images/nav_bg.gif) 0 0 repeat-x;
意思就是背景以X轴(横向)平铺
color:#fff;
color:#444;
color:6e6e6e
color:#666;
text-decoration:underline; /*定义文字具有下划线*/
text-decoration:none; /*定义文字不带有下划线*/
font-weight:bold; /*加粗文字*/
overflow:hidden的作用是隐藏溢出 也就是超出的部分隐藏
border-bottom:1px dashed #dcdcdc; color:#777;}
padding-bottom:10px; 填充就是让下边框展示多大
margin-bottom:10px; 与边框的距离
text-indent:50em
text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;
border:1px solid #FF0000; 边框大小 实线边框的颜色
padding:20px 300px; /* 上下内补丁为150px 左右内补丁为50px */
border:solid #FF0000; /* 定义边框样式以及颜色,使用默认边框大小 */
border-width:10px 5px; /* 定义边框大小覆盖上面的默认大小,上下边框为10px,左右边框为
5px */
margin:50px 100px; /* 上下外补丁50px 左右外补丁为100px */
width:200px;
height:100px;
padding:150px 50px; /* 上下内补丁为150px 左右内补丁为50px */
display:none;隐藏
display:block;比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:
block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。
position:relative 这是相对定位啊
position:absolute这个是绝对定位
text-indent:80px; /* 设置段落p标签缩进24px; */
text-decoration:underline; 有下划线的
font-weight:bold; 加粗字体
background-repeat:no-repeat; 页面中背景图片显示在背景色之上
background-position:right bottom 将背景图片定位到div容器的右下角
background-position:50% 100px; 将背景图片定位到div容器的水平50%,垂直100px的位置
background-position:100px; 属性值只有一个数值,该数值将作用于水平方向的定位,而垂直方向的将以
默认的50%为基准
background-repeat:repeat-x; /* 设置背景图像仅以X轴为基准的横向平铺 */
background-repeat:repeat-y; /* 设置背景图像仅以Y轴为基准的纵向平铺 */
background-repeat:repeat; /* 设置背景图像在纵向和横向上平铺 */
}
background:#FFFFFF url(images/logo.jpg) no-repeat center center; /* 定位段落p标签的背景色为白
色,背景图片不重复,并且水平方向以及垂直方向都为居中 */
text-decoration:none;取消下划线
border-top:1px dashed #AFAFB0;
border-bottom:1px dashed #AFAFB0;
background-color:#FFFFFF;
设置虚线
display:inline; /* 取消段落p标签的块属性 */ 也就是取消段落字节等的空白
<style type="text/css">
li {
list-style-image:url("images/music.gif"); /* 设置列表的修饰符为一个ICO图标 */
}
li.li_position_in {
list-style-position:inside; /* 将列表的修饰符定义在列表之内 */
}
li.li_position_out {
list-style-position:outside; /* 将列表的修饰符定义在列表的外围 */
}
</style>