下午一边学到做,一边整理的常用的DIV+CSS语法,常会更新的!

2013-05-08 22:15:04 qiukai 41

济南网站建设硬逼到自己在研究DIV+CSS布局,总算明白了了一些道理,建网站,先给自己打打气先,~!希望能坚持住搞几天~!~呵呵~!~

那下面把我整理的语法贴出来,网站制作大家一起分享下。我是打算整理一份比较傻瓜似的模板出来,以后直接复制,粘贴哈~!~嘎嘎!~!~贼笑中~!~~~~!

-----------------------------------------------------------------------------------
/*最基本属性*/
-----------------------------------------------------------------------------------
boby{
text-align:center;/*设置为居中*/
background-color:#f8ffd3;
margin:0px; padding:0px; /*边距 间隔都为0*/
width:100%; /*宽*/
height:32px; /*高*/
}

-----------------------------------------------------------------------------------
/*浮动的基本属性*/
-----------------------------------------------------------------------------------
clear:both; /*不受浮动影响。一般用到设置页面最下面的#Footer版块,*/

float:left;/*靠左对齐*/
     
     

-----------------------------------------------------------------------------------
/*文字基本属性*/
-----------------------------------------------------------------------------------
font-family:黑体, 幼圆;    /*文字的字体*/
fort-size:12px;           /*字体大小*/
color:#333333;           /*字体颜色*/
font-weight:bold;     /* 粗体字 */
font-style:italic;     /*设置为斜体字*/   font-style:normal;/* 设置为标准风格 */
letter-spacing:-2pt; /* 字间距,绝对数值,负数 */

line-height:20px; /* 行间隔 */


a:link{        /* 超链接正常状态下的样式 */
color:#005799;     /* 深蓝 */
text-decoration:none;   /* 无下划线 */
}


a:visited{       /* 访问过的超链接 */
color:#000000;     /* 黑色 */
text-decoration:none;   /* 无下划线 */
}


a:hover{       /* 鼠标经过时的超链接 */
color:#FFFF00;     /* 黄色 */
text-decoration:underline; /* 下划线 */
}

例如p span{
font-size:60px;     /* 首字大小 */
float:left;      /* 首字下沉 */
padding-right:5px;    /* 与右边的间隔 */
font-weight:bold;    /* 粗体字 */
font-family:黑体;    /* 黑体字 */
color:yellow;     /* 字体颜色 */
}

-----------------------------------------------------------------------------------
/*表格框框基本属性*/
-----------------------------------------------------------------------------------
border:1px solid #F1C770;/*边框1象素,边框色00000*/

border="0"/*边线为1*/


-----------------------------------------------------------------------------------
/*设置背景图片*/
-----------------------------------------------------------------------------------
background:url(images/bg.jpg) repeat-x; /* 添加为背景图片,横向平铺 */
background-color:#f8ffd3;                   /*背景色*/

-----------------------------------------------------------------------------------
/*对齐属性*/
-----------------------------------------------------------------------------------
p{ font-size:12px; }
p.left{ text-align:left; }    /* 左对齐*/   /* <p class="left"></p> */
p.right{ text-align:right; }   /* 右对齐 */
p.center{ text-align:center; }   /* 居中对齐 */
p.justify{ text-align:justify; } /* 两端对齐 */


td.top{ vertical-align:top; }    /* 顶端对齐 */
td.bottom{ vertical-align:bottom; }   /* 底端对齐 */
td.middle{ vertical-align:middle; }   /* 中间对齐 */
-----------------------------------------------------------------------------------
/*英文字母大小写*/
-----------------------------------------------------------------------------------
text-transform:capitalize;    /* 单词首字大写 */
text-transform:uppercase;   /* 全部大写 */
text-transform:lowercase;     /* 全部小写 */
letter-spacing:-2px;    /* 字母间距 */
-----------------------------------------------------------------------------------


-----------------------------------------------------------------------------------
/*下滑线*/
-----------------------------------------------------------------------------------
text-decoration:underline;    /* 下划线 */
text-decoration:overline;    /* 顶划线 */
text-decoration:line-through; /* 删除线 */
text-decoration:blink;      /* 闪烁 */
text-decoration:underline overline;        /* 下划线+顶划线 */
text-decoration:underline line-through;       /* 下划线+删除线 */
text-decoration:overline line-through;        /* 顶划线+删除线 */
text-decoration:underline overline line-through; /* 三种同时 */
-----------------------------------------------------------------------------------

-----------------------------------------------------------------------------------
/*margin:10px 0px 10px 0px; 的设置*/   /*上 右 下 左*/
-----------------------------------------------------------------------------------
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
-----------------------------------------------------------------------------------


-----------------------------------------------------------------------------------
/*padding:10px 0px 10px 0px; 的设置*/   /*上 右 下 左*/
------------------------------------------------------------------------------------
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;

------------------------------------------------------------------------------------

本文内容纯属原创,版权归济南网站建设网站所有,如需转载请注明出处 本文链接:http://www.jnxfx.com