zblog模板制作中常用到的一些css

《zblog模板制作中常用到的一些css》正文开始，本次阅读大概3分钟。

记得刚接触css那会儿，没有系统学习过，也是属于半路出家，对很多css一知半解，就很难制随意制作出自己想要的效果，设计与作品千差万别。

所以你只要想做前端，哪怕是玩玩，也要先系统去学习下CSS，这是最最基础的。

今天建了这个zblog模板站，翻看之前记录的css，真的有意思，特此罗列出来，当初也是这么一点一滴学习的；如果你想要学习制作zblog模板，更是少不了系统的去学习CSS，不然真的很难做出出众的作品；如果你也像我一样这么一点点记录学习的话，真的是非耗时间，浪费青春。

a:link{}/*未访问的链接*/
a:visited{}/*已访问的链接*/
a:hover{}/*鼠标移动到链接上*/
a:active{}/*选定的链接*/
font-style:normal;/*斜体*/
font-weight:normal;/*粗体*/
border:1pxsolid#CCC;/*四周框线可以用border-left*/
text-align:right;/*文字居中*/
height:1.40625rem;/*高*/
line-height:1.40625rem;/*行高*/
border-radius:15px;/*圆角*/
border-radius:0px;
word-wrap:break-word;word-break:normal;/*自动换行*/
white-space:nowrap;/*强制不换行*/
overflow:hidden;/*自动隐藏文字*/
text-overflow:ellipsis;/*文字隐藏后添加省略号*/
-o-text-overflow:ellipsis;/*适用于opera浏览器*/
overflow:hidden;/*覆盖*/
.ico-com{background:url(images/img31.png)leftcenterno-repeat;padding-left:20px}
margin外部（居中用auto）
margin:10pxauto;/*外部上下10px*/
padding内部
padding:012px;/*内宽同缩*/
padding:20px10px/*内高所20，宽所10px*/
position
position:relative;/*不覆盖，不悬浮，从上一个开始*/
文字悬浮在图片上：
HTML=divclass=new-imgah=#imgspanclass=tags文字/span/a
CSS=.news-img.tags{position:absolute;z-index:2;left:10px;top:10px;line-height:1;padding:5px10px;color:#fff;border-radius:2px;}
input：
value=自动填入”
placeholder=提示
下划线：
text-decoration:none;/*无下划线*/
text-decoration:underline/*下划线样式*/
text-decoration:line-through/*删除线样式-贯穿线样式*/
text-decoration:overline/*上划线样式*/
ulli两列：
overflow:hidden;/*多UL不重叠*/
float:left;width:49%;text-align:left;/*两列*/
--------------------------------------------------
li前图标：
li加点最简单方法：
padding-left:12px;background:url(images/list-li.png)no-repeat0px8px;
/*内部左缩进文字12，图标距上8px*/
li加数字的背景方法：
ul{….;background:url(路径)no-repeat1px2px;….}
list-style-image:none|url(url)
取值：
none:　默认值。不指定图像
url(url):　使用绝对或相对url地址指定图像
list-style-position:outside|inside
取值：
outside:　默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside:　列表项目标记放置在文本以内，且环绕文本根据标记对齐
list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none|armenian|cjk-ideographic|georgian|lower-greek|hebrew|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-latin|upper-latin
取值：
disc:　CSS1默认值。实心圆
circle:　CSS1空心圆
square:　CSS1实心方块
decimal:　CSS1阿拉伯数字
lower-roman:　CSS1小写罗马数字
upper-roman:　CSS1大写罗马数字
lower-alpha:　CSS1小写英文字母
upper-alpha:　CSS1大写英文字母
none:　CSS1不使用项目符号
----------------------------------------------------
左侧出头一点的CSS
padding-left:9px;border-left-width:4px;border-left-color:#407864;border-left-style:solid;
------------------------------------------------
border-方向-style:
p{border-style:solid;}
p.none{border-left-style:none}
p.dotted{border-left-style:dotted}
p.dashed{border-left-style:dashed}
p.solid{border-left-style:solid}
p.double{border-left-style:double}
p.groove{border-left-style:groove}
p.ridge{border-left-style:ridge}
p.inset{border-left-style:inset}
p.outset{border-left-style:outset}
----------------------------------------------------
。。。。。。。（省略）

没有系统学习过CSS的同学如上图记录，真苦逼，只能用到哪儿学到哪儿，最后乱七八糟的。