总结之前做项目中要注意的一些书写规范
通過這次的《小巨蛋項目》網站的實戰中，最主要的還是代碼的書寫規范吧，可能在這次的網站的實戰中代碼不是寫的很好，沒有好好的去規劃規劃再做，導致了給人的感覺就是有點亂的感覺，所以要求以后的項目中書寫代碼要更加的好點。要學會在制作之前要規劃好，在制作的過程中才會少些功夫，才會事半功倍。所以事先先規劃好還是挺重要的。接下來就是來說說一些學到的小知識點吧。
要制作網站前，瀏覽器給的一些默認的樣式還是要去除下的，還有一些禁止事情，比如禁止別人對你網站復制文字。?
以下通過老師同學們知道的一些清除默認樣式的代碼：
比如我是創建一個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>?
轉載于:https://www.cnblogs.com/dadayang/p/5797612.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的总结之前做项目中要注意的一些书写规范的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Partitioning Strateg
- 下一篇： PostgreSQL 最佳实践 - 水平