高效的CSS代码(1)

简介: ——阅读笔记,欢迎纠错 平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错) /************CSS reset *********/ /********顾名思义CSS标签重置,不改动,适合初学者吧,小杂也是初学者,对各个标签进行初始化后比较不会出...

——阅读笔记,欢迎纠错

平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错)

/************CSS reset *********/

/********顾名思义CSS标签重置,不改动,适合初学者吧,小杂也是初学者,对各个标签进行初始化后比较不会出现一些意外的结果,也是对各个浏览器的兼容性的考虑*****/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0; } 
table{border-collapse: collapse; border-spacing:0; }
fieldset,img{border:0; }
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal; }
ol,ul{list-style:none; }
caption,th{text-align:left; }
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal; }
q:before,q:after{content:''; }

/********CSS base*********/

/*******CSS的基础层,具体怎么使用看个人,小杂每次使用都是看页面需要什么才加入,可以用于CSS组合,平时常用的有这些,这些是看书后的笔记****/

/* 文字排版 */
 .f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align:right;}
.bc{margin-left:auto; margin-right:auto;}
.fl{float:left;display:inline;}
.fr{folat:right;display:inline;}
.cb{clear:both;}
.cr{clear:right;}
.cl{clear:left;}
/*clearfix是为了在父容器直接清除子元素浮动,让浮动元素的父容器能根据浮动元素的高度而自适应高度,把这个clearfix
给父容器挂上*/
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display: inline-block}*html
.clearfix{height:1%;}
.Clearfix{display:block;}
.vm{vertical-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.pf{position:fixed;}
.abs-right{position: absolute;right: 0;}/*this character i haven't uesd*/
.zoom{zoom:1;}/*用于LAYOUT的启动*/
.hidden{visibility:hidden;}
.none{display:none;}
/*width height*/
.w10{width:10px;} 
.w20{width:20px;} 
.w30{width:30px;} 
.w40{width:40px;} 
.w50{width:50px;} 
.w60{width:60px;} 
.w70{width:70px;} 
.w80{width:80px;} 
.w90{width:90px;} 
.w100{width:100px;} 
.w200{width:200px;} 
.w250{width:250px;} 
.w300{width:300px;} 
.w400{width:400px;} 
.w500{width:500px;} 
.w600{width:600px;} 
.w700{width:700px;} 
.w800{width:800px;} 
.w{width:100%}
.h50{height:50px;}
.h80{height:80px;}
.h100{height:100px;}
.h200{height:200px;}
.h{height:100%;}
/*margin padding*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}

 

作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
6月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
212 4
|
8天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
46 6
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
52 1
简单几行代码CSS实现网页自动打文字效果
|
6月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
57 0
|
3月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
3月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
5月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
56 5
|
4月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
69 0
|
6月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
5月前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
62 0