一、公共样式 base.css
每个网站都会一个相对统一的风格,那么在开发过程中,经常会重复使用到同一个字体颜色、字体大小、背景颜色、a标签以及它们的伪类样式等等的样式,所以就要求我们前端在开发之前,把要做的那个网站重复率高的代码样式写在一个公共类里,这样我们很容易就可以做到网站布局的规范性。
不同网站的公共样式各有不同,以下代码仅供参考,开发前可做适当修改!
* -- 样式说明 --
* 最大优先实现法,全局能实现不用区域,区域能实现不用模板,
* 模板能实现不用界面,界面能实现不用标签
* g - 全局
* t - 区域
* m - 模板
* ui - 界面
* lb - 标签
* 特殊标签
* j - 脚本
* fix - 浮窗 */
//格式化页面
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
body {
font: 14px "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, "sans-serif";
color: #333;
background-color: #f3f4f6;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,img,table{
outline: none;
border: none;
margin: 0;
padding: 0;
}
ul,li{
text-decoration: none;
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a, a:hover {
transition: all .3s ease-out 0s;
}
a:hover, a:focus {
color: #509524;
text-decoration: none;
}
//定义各种字体大小
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
//定义浮动和清除浮动
.fl{
float:left;
}
.fr{
float:right;
}
.clearfix{
content: '';
clear: both;
display: block;
overflow: hidden;
}
//页面定位
.pos-re{
position: relative;
}
.pos-ab{
position: absolute;
}
//文字截取
.conceal {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.conceal2{
display: block;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
//定义下划线和上划线,我觉得#f2f2f2颜色挺适合用来定义线的
.bb{
border-bottom: 1px solid #f2f2f2;
}
.bt{
border-top: 1px solid #f2f2f2;
}
//定义各种margin和padding值
.mg10{
margin:10px;
}
.mg10_0{
margin:10px 0;
}
.mgt10{
margin-top:10px;
}
.mgb10{
margin-bottom:10px;
}
.pdt10{
padding-top:10px;
}
.pdb10{
padding-bottom:10px;
}
//显示与隐藏
hide{
display:none;
}
block{
display:block;
}
二、css书写顺序
1、位置属性(position,top,right,z-index,display,float等)
2、大小(width,height,padding,margin等)
3、文字系列(font-size,line-height,letter-spacing,color,text-align等)
4、背景(background,border等)
5、其他(animation,transition等)
例子:
.example{
z-index:-1;
display:inline-block;
font-size:1.5em;
color:red;
background-color:red;
}
三、css书写规范
1、使用css缩写属性:margin、padding等
margin:上 右 下 左
2、去掉小数点前的“0”
font-size:0.5px; ===> font-size:.5px;
3、简写命名,但前提要让别人看得懂你的命名
(X).navigation{
margin:0 0 1px 1px;
}
.atr{
color:#93c;
}
(O).nav{
margin:0 0 1px 1px;
}
.author{
color:#93c;
}
4、十六进制的颜色代码缩写
color:{color:#ffffff} ===> color:{color:#fff}
5、连字符css选择器命名规范
(1)长名称或词组可以使用中横线来为选择器命名,不建议使用“_”下划线来命名css选择器:
a.输入的时候少按一个shift键
b.浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)
c.能良好区分javascript变量命名(js命名是用“_”)
(2)不要随意使用id
Id在js是唯一的,不能多次使用,而使用class选择器却可以重复使用,另外id的优先级优于class,所以id应该按需使用,而不能滥用。
6、为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更加明了:
.is-loginout{
background:#fff;
}
四、css命名的一些规范
1、常用的css命名规则
头:header
内容:content/container
页面主体:main
导航:nav
子导航:subnav
侧栏:sidebar
栏目:colum
页面外围控制整体布局宽度:wrapper
左右中:left right center
尾:footer
友情链接:friendlink
版权:copyright
登录条:loginbar
登录:login
注册:reg
标志:logo
广告:banner
热点:hot
新闻:news
下载:download
搜索:search
滚动:scroll
标签:tags
列表::lists
提示信息:msg
小技巧:tips
标题:title
指南:guide
服务:service
状态:status
图标:icon
当前的:active/currtent
注释:note
2、注释的写法
/* header S */
内容区
/* header E */
3、css样式表文件命名
主要的:main.css
模块:module.css
基本共用:base.css
布局、版面:layout.css
主题:themes.css
专栏:columns.css
文字:font.css
表单:forms.css
补丁:mend.css
打印:print.css
五、分享一些我觉得很实用的样式
1、::-webkit-input-placeholder :
改变placeholder文字颜色,配合opacity使用效果更好
例如:
::-webkit-input-placeholder{
/*chrome、opera、safari*/
color: red;
opacity: .5;
}
::-moz-placeholder{
/*firefox 19+*/
}
:-ms-input-placeholder{
/*IE 10+*/
}
:-moz-placeholder{
/*firefox 18-*/
}
2、contenteditable :
设置元素是否可编辑:可编辑
3、position:absolute,让margin有效
如:
下面样式,给div定义了position为absolute后,margin的属性就会失效,无法居中。
div{
width: 100px;
height: 100px;
background-color: red;
margin: 100px auto;
position: absolute;
}
解决办法:加上left:0; right:0; 即可,文字position居中解决text-align:center;失效,也可同理。
4、user-select禁止用户选中文本
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
5、box-sizing让元素的宽度、高度包含border和padding
{
box-sizing:border-box;
}
6、calc()计算属性
div{
width:calc(100%-100px);
}
7、css3 linear-gradient 线性渐变,默认开始在top,也可以自定义方向
div{
linear-gradient(red,yellow);
}
{
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left, #00b4d5, #02d6d9);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(right, #00b4d5, #02d6d9);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(right, #00b4d5, #02d6d9);
/* 标准的语法 */
background: linear-gradient(to right, #00b4d5, #02d6d9);
}
8、常用选择器:nth-child()
可以选择父类下某个子节点,或选择多个倍数的节点
p:nth-child(3){} //选择父类下第三个节点
p:nth-child(3n){} //选择父类下第3、6、9…个节点
9、让图片不变形
img{
object-fit:cover;
}
六、html页面常用布局
一个好的前端页面,布局一定是整体看上去统一规范的。我们开发的时候,要先把布局搭建好,在往里面填写内容,这个框架我们可以称它为一个组件,组件形式的开发可以大大地提高前端开发的效率,并且代码的可复用强,不仅是对开发人员,包括用户的体验都是棒棒的。
我们开发前应该先想好怎么去搭建一个整体的架构:
(一)两列布局
div>
div>
div>
//在框架里,我们要注意,不要写死height值,要让它自适应
.main{
display: block;
width: 960px;
margin: 0 auto;
}
//如果是两列布局,我们可以设置左边的width固定,右边为自适应
.main .col-left {
width: 700px;
margin-right: 10px;
}
.col-left {
float: left;
}
.col-auto {
overflow: hidden;
_zoom: 1;
float: left;
}
.box {
background-color: #fff;
}
.box {
border: 1px solid #c3d4e7;
zoom: 1;
overflow: auto;
}
单行布局:这里我们使用h5规范的section和article来搭建
article>
div>
//不唯一,只是写一些可能用上的样式作为参考
.section{
background-color:#fff;
height: calc(100% - 349px);
min-height: 452px;
position: relative;
//或者不固定高度
padding-top: 150px;
padding-bottom: 150px;
border-bottom: 1px solid #ebebeb;
overflow: hidden;
}
.wrapper {
width: 1200px;
margin: 0 auto;
max-width: 80%;
}
七、前端多人参与合作–规范
有时在做一个项目的时候,可会有多个前端开发共同参与,所以有个规范和标准是很重要也是很必要的。
(1)先更新代码后修改
重要
(2)避免代码命名重复
1、建议在给css命名的时候在前面加上自己的标签,比如我是r-*****
2、好处:
A:别人在看代码时一看就知道是哪个开发人员写的,有问题也可以很快定位到这个人
B:避免通用命名的代码样式覆盖,比如.main .r-main就不怕了
(3)Layui框架的学习
在我做的几个项目里面,重复使用频率较高到的框架之一是layui,然后写一些建议:
A:前端开发都先去学习一下这个框架的基本使用方法,相关文档:https://www.layui.com/doc/
B:做项目前先引入对应的layui.css和layui.js
因为做好页面再引入,会出现很多样式强制覆盖的问题,提前引入,就可以减少后期优化的成本。
C:使用这个框架可以参考可可DJ的网站,通用的一些功能,都有代码示例
(3)一个项目核心的css和js
一个项目做下来会发现头部底部引入了很多css和js,有些js插件也不是每个页面都需要的。所以我的建议是:
A:css引入
框架样式layui.css
公共样式base.css
主要样式main.css
(PS: 还有其他框架样式,根据页面需要引入,框架样式要放在base.css和main.css之前,首页index.css和底部footer.css的样式一般不做拆分,都写在main.css里面,如果有其他模块要拆分,视情况而定。)
B:js引入
框架功能 jquery.min.js layui.js
主要功能 main.js
(PS:其他js视情况而定)
必要性:
上面提到的css和js是每个页面都要引入的,一是通用的样式或者功能可以复用;二是后面优化的时候需要增加某个全局样式或者功能,可以直接写在里面,不用害怕哪一个页面没有使用到。