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

老白 10个月前 268浏览 0评论

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

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

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

a:link { } /* 未访问的链接 */
a:visited { } /* 已访问的链接 */
a:hover { } /* 鼠标移动到链接上 */
a:active { } /* 选定的链接 */
font-style: normal;  /*斜体*/
font-weight: normal; /*粗体*/
border:1px solid #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) left center no-repeat;padding-left: 20px}
margin 外部(居中用auto)
margin:10px auto; /*外部上下10px*/

padding 内部
padding: 0 12px; /*内宽同缩*/
padding: 20px 10px  /*内高所20,宽所10px*/
position
position:relative; /*不覆盖,不悬浮,从上一个开始*/
文字悬浮在图片上:
HTML = <div class=new-img><a h=#><img><span class=tags>文字</span></a>
CSS = .news-img .tags { position: absolute; z-index: 2; left: 10px; top: 10px; line-height: 1; padding: 5px 10px; color: #fff; border-radius: 2px; }
input:
value="自动填入”
placeholder="提示"
下划线:
text-decoration:none;  /*无下划线*/
text-decoration:underline /*下划线样式*/
text-decoration:line-through /*删除线样式-贯穿线样式*/
text-decoration:overline  /*上划线样式*/
ul li两列:
overflow:hidden; /*多UL不重叠*/
float:left; width:49%; text-align:left; /*两列*/
--------------------------------------------------
li前图标:
li加点最简单方法:
padding-left:12px;background:url(images/list-li.png) no-repeat 0px 8px;
/*内部左缩进文字12,图标距上8px*/
li加数字的背景方法:
ul{….;background:url(路径) no-repeat 1px 2px;….}
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的同学如上图记录,真苦逼,只能用到哪儿学到哪儿,最后乱七八糟的。

css
评论