创建base公共样式文件
2015-08-27 11:39
609 查看
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px Arial, Tahoma, 宋体; color:#454545; } button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-size:100%; } h2, h3 { font-size:14px; } button, input, select, textarea, label { vertical-align:middle; outline:none; } img { vertical-align:middle; border:none; display:inline-block; background:#fff url(/images/common/nopic.png) center no-repeat; } ul, ol { list-style:none; } a { text-decoration:none; color:#454545; vertical-align:baseline; cursor:pointer; } a:hover { text-decoration:underline; color:#000; } table { border-collapse:collapse; border-spacing:0; } body { word-wrap:break-word; word-break:break-all; _height:100%; } /*输入框*/ .g-txt { height:23px; line-height:23px; border-width:1px; border-style:solid; border-color:#454545 #ccc #ccc #454545; padding-left:3px; } .g-txt:hover, .g-txt.focus { background-color:#fffcc5; } /*--------------*/ /*--------------*/ /*单项公共样式开始*/ /*--------------*/ /*--------------*/ /*顶底边框*/ .g-bt-n { border-top:none !important; } .g-bb-n { border-bottom:none !important; } .g-b-dd { border:1px solid #dddddd; } /*背景色*/ .g-bc-w { background-color:#fff } .g-bi-n { background-image:none !important; } /*字体灰色*/ .g-c-22 { color:#222; } .g-c-33 { color:#333; } .g-c-66 { color:#666; } .g-c-99 { color:#999; } /*字体白色*/ .g-c-w { color:#fff; } /*字体红色*/ .g-c-r { color:#e25150; } /*绿色*/ .g-c-green { color:#579719; } /*清浮*/ .g-cf:after { content:""; clear:both; display:table; } .g-cf { zoom:1; } /*浮动*/ .g-f-l { float:left !important; _display:inline; } .g-f-r { float:right !important; _display:inline; } /*显示隐藏*/ .g-d-n { display:none; } .g-d-b { display:block; } .g-d-i { display:inline; } .g-d-ib { display:inline-block; } .g-v-h { visibility:hidden; } .g-v-v { visibility:visible; } /*字体宋体*/ .g-ff-s { font-family:宋体; } /*字体风格*/ .g-fs-n { font-style:normal; } /*字体加粗*/ .g-fw-b { font-weight:bold; } .g-fw-n { font-weight:normal; } /*字体大小*/ .g-fz-18 { font-size:18px; } .g-fz-16 { font-size:16px; } .g-fz-15 { font-size:15px; } .g-fz-14 { font-size:14px; } .g-fz-12 { font-size:12px; } /*高、行高*/ .g-h-a { height:auto !important; } .g-lh-18 { line-height:18px !important; } .g-h-22 { height:22px !important; } .g-lh-22 { line-height:22px !important; } .g-h-24 { height:24px !important; } .g-lh-24 { line-height:24px !important; } .g-h-25 { height:25px !important; } .g-lh-25 { line-height:25px !important; } .g-lh-30 { line-height:30px !important; } /*最小高度*/ .g-mh-20 { min-height:20px; _height:20px; } .g-mh-50 { min-height:50px; _height:50px; } /*外边距*/ .g-mlr-a { margin-left:auto; margin-right:auto; } .g-m-10 { margin:10px; } .g-mtb-10 { margin-top:10px; margin-bottom:10px; } .g-mlr-10 { margin-left:10px; margin-right:10px; } .g-mt-10 { margin-top:10px; } .g-mb-10 { margin-bottom:10px; } .g-ml-10 { margin-left:10px; } .g-mr-10 { margin-right:10px; } .g-m-5 { margin:5px; } .g-mtb-5 { margin-top:5px; margin-bottom:5px; } .g-mlr-5 { margin-left:5px; margin-right:5px; } .g-mt-5 { margin-top:5px !important; } .g-mb-5 { margin-bottom:5px !important; } .g-ml-5 { margin-left:5px !important; } .g-mr-5 { margin-right:5px !important; } .g-mt-n { margin-top:0 !important; } .g-mb-n { margin-bottom:0 !important; } .g-ml-n { margin-left:0 !important; } .g-mr-n { margin-right:0 !important; } /*内边距*/ .g-p-10 { padding:10px; } .g-ptb-10 { padding-top:10px; padding-bottom:10px; } .g-plr-10 { padding-left:10px; padding-right:10px; } .g-pt-10 { padding-top:10px; } .g-pb-10 { padding-bottom:10px; } .g-pl-10 { padding-left:10px; } .g-pr-10 { padding-right:10px; } .g-p-5 { padding:5px; } .g-ptb-5 { padding-top:5px; padding-bottom:5px; } .g-plr-5 { padding-left:5px; padding-right:5px; } .g-pt-5 { padding-top:5px !important; } .g-pb-5 { padding-bottom:5px !important; } .g-pl-5 { padding-left:5px !important; } .g-pr-5 { padding-right:5px !important; } .g-pt-n { padding-top:0 !important; } .g-pb-n { padding-bottom:0 !important; } .g-pl-n { padding-left:0 !important; } .g-pr-n { padding-right:0 !important; } .g-pt-20 { padding-to cf19 p:20px !important; } /*overflow*/ .g-o-h { overflow:hidden !important; } .g-o-a { overflow:auto !important; } .g-o-v { overflow:visible!important; } /*相对定位*/ .g-p-r { position:relative; } /*水平右中左*/ .g-ta-r { text-align:right !important; } .g-ta-c { text-align:center !important; } .g-ta-l { text-align:left !important; } /*垂直上中下*/ .g-va-t { vertical-align:top !important; } .g-va-m { vertical-align:middle !important; } .g-va-b { vertical-align:bottom !important; } .g-va-bl { vertical-align:baseline !important; } /*缩进*/ .g-ti-1 { text-indent:1em; } .g-ti-2 { text-indent:2em; } .g-ti-3 { text-indent:3em; } .g-ti-4 { text-indent:4em; } .g-ti-5 { text-indent:5em; } /*下划线*/ .g-td-n { text-decoration:none !important; } /*强制不换行*/ .g-ws-w { white-space:nowrap; } /*强制换行*/ .g-ww-bw { white-space:normal; word-wrap:break-word; word-break:break-all; }
中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}
结论
各个手机系统有自己的默认字体,且都不支持微软雅黑如无特殊需求,手机端无需定义中文字体,使用系统默认
英文字体和数字字体可使用 Helvetica ,三种系统都支持
/* 移动端定义字体的代码 */ body{font-family:Helvetica;}
创建base公共样式文件
样式重写
@charset "utf-8";
/* 重写 */
*{ text-indent:0 !important;}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline; color:#E90000;}
html{color:#413b39; zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;}
/**html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } */
body{ background: url(../images/spbg01.gif) #e4eef6 no-repeat; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0;} table{/*border-collapse:collapse;border-spacing:0;*/}
fieldset,img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{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:'';}
英文超出
overflow:hidden;word-wrap:break-word;
示例:
移动端TAB触屏切换效果
jQuery实现多条件筛选
纯CSS3实现超酷的鼠标悬停效果
HTML+CSS实现漂亮的价格表
CSS+Cookie实现的固定页脚广告条
跨浏览器兼容的HTML5视频音频播放器
jQuery实现的全选、反选和不选功能
jQuery实现多级手风琴菜单
滚屏加载--无刷新动态加载数据技术的应用
jQuery信息提示工具
jQuery+PHP实现浏览更多内容
jQuery实现加入购物车飞入动画效果
相关文章推荐
- css中子元素浮动,无法自动撑开父元素的解决办法
- 常用CSS书写技巧和CSS HACK技巧
- css网页自适应-2
- css网页自适应-1
- CSS强制英文、中文换行与不换行 强制英文换行-样式在线生成-样式在线调试
- 如何快速的合成各种样式的图片
- 纯css下拉菜单的制作
- PS学习笔记------图层样式
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- html+css如何保证页面一直处于居中
- CSS性能优化
- CSS3 icon font完全指南(CSS3 font 会取代icon图标)
- css图片响应式+垂直水平居中2
- Btn 样式
- Btn 样式
- QT表单样式规则
- CSS:超出省略三部曲
- 一个简陋的 CSS 样式
- Qt浅谈之二十二Qt样式表
- (转)Qt中如何使用样式表QPalette以及相关注意事项