web项目开发中css使用总结

151 阅读1分钟

开发规范

1.间距使用px,元素宽度在使用px的情况下使用em替换;

样式技巧

  1. 滚动顺滑
    body{-webkit-overflow-scrolling:touch;}
  2. 变量的使用
    定义:--pramaryColor:#000;
    使用:var(--primaryColor);
  3. 全局定义某个块或标签的样式
    h3{ margin: 20px 0; color: #333; font-size: 18px; }

公共样式

*{padding: 0;margin: 0;}

body { font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; }

h1, h2, h3, h4, h5, h6, p{ font-size: 100%; font-weight: normal; padding: 0; margin: 0; }

button,input,select,textarea{ font-size:100%; outline: none; }

fieldset,img{ border:0; }

a { text-decoration: none; background: none ; } ul, ol { list-style: none; }

模块化样式

1.按钮(包含三种状态)

.pageBtn{
    font-size: 16px;
    color: #fff;
}
.pageBtn:hover{
    background:;
}
.pageBtn:active{
    background:;
}

注: 文档持续更新中...
有兼容性或其它问题请指教 ^_^