通过这次的《小巨蛋项目》网站的实战中，最主要的还是代码的书写规范吧，可能在这次的网站的实战中代码不是写的很好，没有好好的去规划规划再做，导致了给人的感觉就是有点乱的感觉，所以要求以后的项目中书写代码要更加的好点。要学会在制作之前要规划好，在制作的过程中才会少些功夫，才会事半功倍。所以事先先规划好还是挺重要的。接下来就是来说说一些学到的小知识点吧。
要制作网站前，浏览器给的一些默认的样式还是要去除下的，还有一些禁止事情，比如禁止别人对你网站复制文字。
以下通过老师同学们知道的一些清除默认样式的代码：
比如我是创建一个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%; 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 {
1000px; /*可改动*/
margin: 0 auto;
}
.box{
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>