1、背景与前景

 background-color:#000;   ——背景颜色

background-image:url(路径)   ——背景图片

background-attachment:fixed;   ——背景是固定的,不随字体滚动

background-attachment:scroll;  ——背景随字体滚动

background-repeat:no-repeat;  —— no-repeat 不平铺;repeat 平铺;repeat-x 横向平铺;repeat-y 纵向平铺

background-position:center; ——背景图居中,设置背景图位置时,repeat必须为“no-repeat”

字体

font-family:"字体类型";  ——常用微软雅黑、宋体为通用字体,任何浏览器都可识别

font-size:12px;  ——字体大小,px为像素单位

font-weight:bold;  ——bold 是加粗,normal 是正常

font-style:italic;  ——倾斜,nomal为不倾斜

text-decoration:undreline;  ——下划线,overline 上划线,line-through 删除线,none 去除

text-align:水平对齐方式;

vertical-align:垂直对齐方式;

text-indent:28px; —— 首行缩进量

line-height:24px; ——行高

display:none; —— 不显示;inline-block显示为块,不自动换行,宽高可设;block 显示为块,自动换行;inline。效果同span标签,不自动换行,宽高不可设;

visibility:hidden; ——可视性。hidden 隐藏但是占空间;visible,显示

2、边界和边框

border(表格边框)、margin(表外间距)、padding(内容与单元格间距)

border:5px solid blue; /*四边框:5像素宽、实线、蓝色(相当于以下三行)*/

border-width:5px;

border-style:solid;

border-color:blue;

border-top:5px solid blue; /*上边框:5像素宽、实线、蓝色(分写同上)*/

border-bottom:5px solid blue; /*下边框:5像素宽、实线、蓝色(分写同上)*/

border-left:5px solid blue; /*左边框:5像素宽、实线、蓝色(分写同上)*/

border-right:5px solid blue; /*右边框:5像素宽、实线、蓝色(分写同上)*/

margin:10px; /*四边框宽度为10像素。auto,居中。*/

margin-top:10px;/*上边外边框宽度为10像素;其他三边的写法类似*/

margin:20px 0px 20px 0px;/*上-右-下-左,四边外边框顺时针顺序*/

padding:10px;/*内容与边框的四边间距为10像素*/

padding-top:10px; /*内容与边框的上间距为10像素;其他三边的写法类似*/

padding:20px 0px 20px 0px;/*上-右-下-左,内容与边框的四边间距顺时针顺序*/

3、列表与方块

width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用

list-style:none;/*取消序号*/

list-style:circle; /*序号变为圆圈,样式相当于无序*/

list-style-image:url(图片地址); /*图片做序号*/

list-style-position:outside;/*序号在内容外*/

list-style-position:inside; /*序号跟内容在一起*/

4、格式与布局

1、       position:fixed  锁定位置(相对于浏览器的位置)。

2、       position:absolute 

1)        外层没有position:absolute(或relative); ,那么div相对于浏览器定位,

2)        外层有position:absolute(或relative); ,那么div相对于外层边框定位,

3、       position:relative

相对于默认位置的移动。

4、       分层(z-index

在Z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

5、float:left、right

overflow:hidden;//超出部分隐藏;scroll,显示出滚动条;

半透明效果

<div class="box">透明区域</div>

//样式表中代码:

.box

{

opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)

}

 

/*设置阴影*/   box-shadow: 5px/*左右偏移,负值左,正值右*/ 3px/*上下偏移,负值上,正值下*/ 25px/*虚化度,值越大越虚*/ red;

/*圆形div*/    -moz-border-radius:15px;
                    -webkit-border-radius:15px;
                    border-radius:25px;  /*倒角半径*/

float:方向  ——设置横向布局用left和right

 

posted on 2016-05-08 22:32  By_The_Way  阅读(168)  评论(0编辑  收藏  举报