总结之前做项目中要注意的一些书写规范

　　通过这次的《小巨蛋项目》网站的实战中，最主要的还是代码的书写规范吧，可能在这次的网站的实战中代码不是写的很好，没有好好的去规划规划再做，导致了给人的感觉就是有点乱的感觉，所以要求以后的项目中书写代码要更加的好点。要学会在制作之前要规划好，在制作的过程中才会少些功夫，才会事半功倍。所以事先先规划好还是挺重要的。接下来就是来说说一些学到的小知识点吧。

要制作网站前，浏览器给的一些默认的样式还是要去除下的，还有一些禁止事情，比如禁止别人对你网站复制文字。

以下通过老师同学们知道的一些清除默认样式的代码：

比如我是创建一个css文件reset.css。把以下放在reset.css里面，在链接<link rel="stylesheet" type="text/css" href="css/reset.css"/>到html页面，就可以调用了，方便。

body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;}
ul,dl,ol{list-style:none;}
img,fieldset,input[type="submit"]{border:0 none;}
em{font-style:normal;}
strong{font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
button,input[type="button"]{cursor:pointer;border:0 none;}
a,button,input,img{-webkit-touch-callout:none;}
img{pointer-events:none;/*禁止图片的点击事件，例如长按保存图片*/}
input,select,textarea{outline:none;}
a{text-decoration:none;}
.fl{ float: left}
.fr{ float: right}
.clear{clear:both;} 
html,body{
/*禁止用户选择元素*/
-moz-user-select:none;-webkit-user-select: none;
-ms-user-select: none;-khtml-user-select:none; /*禁止元素点击出现半透明黑色背景*/-webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
html {height: 100%;width: 100%;font-family: 'Heiti SC', 'Microsoft YaHei';outline: 0;-webkit-text-size-adjust:none;}
body {height: 100%;margin: 0;position: relative;}

在做项目中，发现做一个网站难免不了有一些同样的代码，做的页面多了，同样的代码只多不减的，所以可以自己创建一个公共样式，以下也是通过小组、同学和自己的总结学到的一个小技巧吧：

/*公共样式 开始*/
body {font-family: "微软雅黑";font-size: 12px;
}
/*文字效果*/
.text-align{text-align: center;
}
/*浮动用的*/
.fl {float: left;
}
.fr {float: right;
}
.clear {clear: both;
}/*容器*/
.container {width: 1000px; /*可改动*/margin: 0 auto;}
.box{width: 1000px;/*可改动*/margin: 0 auto;
}
.button { cursor: pointer; }/*公共样式 结束*/

还有一些代码的规范吧，使总体的代码看起来舒服点，以下就是通过这次总结的几个代码书写规范：

/*使用规范*/
1、命名必须用英文,太长可以以首字母缩写,缩写的链接用横杠"-",子类的话用child或者son,后面接着01,02,03...这样来命名.
2、缩进用统一使用tab键,不能用空格
3、将左花括号与选择器放在同一行。
4、左花括号与选择器间添加以空格。
5、冒号与属性值之间添加已空格。
6、逗号和符号之后使用一个空格。
7、每个属性与值结尾都要使用符号。
8、只有属性值包含空格时才使用引号。
9、右花括号放在新的一行。

下面是通过transition过度实现的导航条，鼠标移上就有动画效果如下：

（兼容现在主流的浏览器）

集团简介
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心
项目简介
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心
新闻更新
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>ul{list-style: none;}.nav a{text-decoration: none;color: white;}.nav > li{width: 130px;height: 50px;line-height: 50px;float: left;margin-left: 5px;border-radius: 10px;background: #ccc;text-align: center;transition: all 1s ease-in;overflow: hidden;}.nav > li:hover{height: 269px;　　　　　　/*一个简单好看的过渡效果主要还是通过这绿色的三行代码实现的*/}.nav-child li{width: 150px;height: 43px;line-height: 43px;text-align: center;background: #dfdfdf;margin-left: -50px;border-bottom:1px solid #c4c4c4;}.nav-child li:hover{background: #d0d1d2;}.nav-child li a{color: #535353;}
</style>
</head>
<body><ul class="nav"><li><a href="#">集团简介</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li><li><a href="#">项目简介</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li><li><a href="#">新闻更新</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li></ul>
</body>
</html>