文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導思想一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義,二是當咱們在文件夾中使用「按名稱排例」的命令時,同一種大類的文件可以排列在一塊兒,以便咱們查找、修改、替換、計算負載量等等操做。
主頁統一使用index.htm
、index.html
或index.asp
文件名(小寫)
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞爲名稱。例如:javascript
關於咱們 --> aboutus 信息反饋 --> feedback 產品 --> product
若是欄目名稱多而複雜並很差以英文單詞命名,則統一使用該欄目名稱拼音或拼音的首字母表示;
每個目錄中應該包含一個缺省的html 文件,文件名統一用index.htm
、index.html
或index.asp
;css
圖片的名稱分爲頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質
例如:廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner
標誌性的圖片取名爲: logo
在頁面上位置不固定而且帶有連接的小圖片咱們取名爲 button
在頁面上某一個位置連續出現,性質相同的連接欄目的圖片咱們取名: menu
裝飾用的照片咱們取名: pic
不帶連接表示標題的圖片咱們取名: title
範例:banner_sohu.png
、banner_sina.png
、menu_aboutus.png
、menu_job.png
、title_news.png
、logo_police.png
、 logo_national.png
、pic_people.png
鼠標感應效果圖片命名規範爲"圖片名+_+on/off"
。
例如:menu1_on.png
、menu1_off.png
html
例如:廣告條的javascript文件名爲 ad.js
彈出窗口的javascript文件名爲 pop.js
前端
以性質_描述,描述能夠有多個單詞,用「_」隔開,性質通常是該頁面得概要。
範例:register_form.asp
、register_post.asp
、topic_lock.asp
java
//項目目錄(都不是必須存在的目錄) cn 存放中文HTML文件 en 存放英文HTML文件 flash 存放Flash文件 images 存放圖片文件 imagestudio 存放PSD源文件 flashstudio 存放flash源文件 inc 存放include文件 library 存放庫文件 media 存放多媒體文件 project 存放工程項目資料 temp 存放客戶原始資料 js 存放JavaScript腳本 css 存放CSS文件
基本原則:css3
CSS樣式可細分爲3類:自定義樣式
、從新定義HTML樣式
、連接狀態樣式
。瀏覽器
自定義樣式
爲設計師自定義的新CSS樣式,影響被使用本樣式的區域,用於完成網頁中局部的樣式設定。樣式名爲「.」+「相應樣式效果描述的單詞或縮寫」
,例: .shadow
,文字樣式樣式名爲「.word」+「字號」+「行距」+「顏色縮寫」
,例:.word12
、.word12-24
、.word12-24-red
從新定義HTML樣式
爲設計師從新定義已有的HTML標籤樣式,影響所有的被設定標籤樣式,用於統一網頁中某一標籤的樣式定義。樣式名爲HTML標籤
,例:hr { border: 1px dotted #333333 }
連接狀態樣式
爲設計師對連接不一樣狀態設定特殊樣式,影響被使用本樣式區域中的連接,該樣式寫法有2種:a.nav:link
、nav.a:link
,第一種只能修飾<a>
標籤中;第二種能夠修飾全部包含有<a>標籤
的其餘標籤。
頁面內的樣式加載必須用連接方式
<link rel="stylesheet" type="text/css" href="xxx/xxx.css">
注意細則:緩存
Me(前端負責人,主開發人員,如下簡稱Me)
會根據各個模塊, 同時根據頁面類似程序, 事先寫好大致框架文件, 分配給前端人員實現內部結構
、表現
、行爲
; 共用css文件base.css
由Me
書寫, 協做開發過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;Me
分發框架文件時命名的, 爲JavaScript預留鉤子的除外;js_
起始, 好比:js_hide
、js_show
;Me
統一命名.其餘樣式名稱由 小寫英文
、數字
、_
來組合命名(不能以數字開頭), 如i_comment
, fontred
, width200
; 避免使用中文拼音, 儘可能使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.規避class與id命名(此條重要, 請及時與Me
溝通):
a、 經過從屬寫法規避, 示例見d;
b、 取父級元素id/class命名部分命名, 示例見d;
c、 重複使用率高的命名, 請以本身代號加下劃線起始, 好比Me_clear
;
d、 a,b兩條, 適用於在 2 中已建好框架的頁面, 如, 要在 2 中已建好框架的頁面代碼<div id="mainnav"></div>
中加入新的div元素:服務器
//按a命名法則 <div id="mainnav"><div class="firstnav">...</div></div> //樣式寫法 #mainnav .firstnav{.......} //按b命名法則 <div id="mainnav"><div class="main_firstnav">...</div></div> //樣式寫法 .main_firstnav{.......}
佈局定位屬性
-->自身屬性
-->文本屬性
-->其餘屬性
. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定位屬性主要包括: margin
、padding
、float(包括clear)
、position(相應的 top,right,bottom,left)
、display
、visibility
、overflow
等;自身屬性主要包括: width
、height
、background
、border
; 文本屬性主要包括:font
、color
、text-align
、text-decoration
、text-indent
等;其餘屬性包括: list-style(列表樣式)
、vertical-align
、cursor
、z-index(層疊順序)
、zoom
等,所列出的這些屬性只是最經常使用到的, 並不表明所有;<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>
,定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}
,便可實現日期居右顯示。unicode
碼, 以免編碼錯誤時亂碼;sprite技術
, 減少http請求
, 考慮到多人協做開發, sprite
按模塊
製做;table標籤
時(儘可能避免使用table標籤
), 請不要用width/height/cellspacing/cellpadding
等table屬性
直接定義表現, 應儘量的利用table自身私有屬性
分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope
; (cellspaing
及cellpadding
的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}
, 通常base.css
文件中Me
會初始化表格樣式)png-8
格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6
單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’)
;兼容性屬性
的使用, 好比text-shadow
、css3
的相關屬性;position:absolute
、float
;添加註釋
, 小區塊適量註釋;Me
會統一處理;頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制總體佈局寬度:wrapper
左右中:left
right
center
登陸條:loginbar
標誌:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情連接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
內容:content
標籤頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guild
服務:service
註冊:regsiter
狀態:status
投票:vote
合做夥伴:partner
app
/* Footer */ 內容區 /* End Footer */
container
header
content
container
main
footer
nav
sidebar
column
wrapper
left
right
center
nav
mainbav
subnav
topnav
sidebar
leftsidebar
rightsidebar
menu
submenu
title
summary
logo
banner
login
loginbar
regsiter
search
shop
title
joinus
status
btn
scroll
tab
list
msg
current
tips
icon
note
guild
service
hot
news
download
vote
partner
link
copyright
/* CSS Document */ body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} table,td,tr,th{font-size:12px;} li{list-style-type:none;} img{vertical-align:top;border:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} address,cite,code,em,th {font-weight:normal; font-style:normal;} .fB{font-weight:bold;} .f12px{font-size:12px;} .f14px{font-size:14px;} .left{float:left;} .right{float:right;} a {color:#2b2b2b; text-decoration:none;} a:visited {text-decoration:none;} a:hover {color:#ba2636;text-decoration:underline;} a:active {color:#ba2636;} //重定義的最早,僞類其次,自定義最後,便於本身和他人閱讀!
中英文混排時,咱們儘量的將英文和數字定義爲verdana
和arial
兩種字體。
head區是指HTML代碼的<head>和</head>之間的內容。
必須加入的標籤:
<!--- The site is designed by xxx 04/2018 --->
網頁顯示字符集
簡體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 繁體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 英 語:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META name="author" content="luozz@cmgos.com">
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
<LINK href="xxx/xxx.css" rel="stylesheet" type="text/css">
<title>xxxxxxxxxxxxxxxxxx</title>
能夠選擇加入的標籤:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Window-target" CONTENT="_top">
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.keyup.top">5指時間停留5秒
<META NAME="robots" CONTENT="none"> CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
<link rel = "Shortcut Icon" href="favicon.ico">
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
<body>標籤
: <body>標籤
不屬於head區,這裏強調一下,爲了保證瀏覽器的兼容性,必須設置頁面背景<body bgcolor="#FFFFFF">
禁止
在頁面中出現 <font size=?>
標記。<br>
來人工干預分段。空格
,也儘可能少使用全角空格
(英文字符集下,全角空格會變成亂碼),空白應該儘可能使用text-indent
, padding
, margin
, hspace
, vspace
以及透明的gif
圖片來實現。line-height:120%
line-height:150%
。空格
或者全角空格
來達到效果,規範的作法是在樣式表中定義 p { text-indent: 2em; }
而後給每一段加上 <p> 標記,注意,通常狀況下,請不要省略 </p> 結束標記 。<a href=」aboutus/index.htm」>
而應該這樣:<a href=」aboutus/」>
,全部內頁指向首頁的連接寫成<a href=」/」>
javascript:void(null)
代替原來的「#」標記1px
表格style="border-collapse: collapse"
實例以下:
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0"> <tr> <td></td> </tr> </table>
設置亮、暗邊框顏色
表格有亮邊框(bordercolorlight)
和暗邊框(bordercolordark)
兩個屬性能夠對錶格樣式設置。
<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">
在寫 <table> 互相嵌套時,嚴格按照的規範,對於單獨的一個<table>來講,<table><tr>對齊,<td> 縮進兩個半角空格,<td> 中若是還有嵌套的表格,<table>也縮進兩個半角空格,若是<td>中沒有任何嵌套的表格,</td> 結束標記應該與 <td> 處於同一行,不要換行,
如咱們注意在源代碼中不該有這樣的代碼:
<td><img src=」../images/sample.gif」> </td>
而應該是這樣的:
<td><img src=」../images/sample.gif」></td>
這是由於瀏覽器認爲換行至關於一個半角空格,以上不規範的寫法至關於無心中增長一個半角空格,若是確實有必要增長一個半角空格,也應該這樣寫:
<td><img src=」../images/sample.gif」> </td>
一個網頁要儘可能避免用整個一張大表格,全部的內容都嵌套在這個大表格以內,由於瀏覽器在解釋頁面的元素時,是以表格爲單位逐一顯示,若是一張網頁是嵌套在一個大表格以內,那麼極可能形成的後果就是,當瀏覽者敲入網址,他要先面對一片空白很長時間,而後全部的網頁內容同時出現。若是必須這樣作,請使用 <tbody>
標記,以便可以使這個大表格分塊顯示
首頁Flash 網頁大小應限定在
200K如下
,儘量的使用矢量圖形和Action來減少動畫大小。非首頁靜態頁面含圖片大小應限定在70K左右,儘量的使用背景顏色替換大塊同色圖片。
asp
標準寫法 <!--#include file="inc/index_top.asp" -->
jsp
標準寫法 <%@ include file="../inc/index_top.jsp" %>
都是提示性語言標籤,請注意它們之間的區別。
在咱們瀏覽網頁時,當鼠標停留在圖片對象或文字連接上時,在鼠標的右下角有時會出現一個提示信息框。對目標進行必定的註釋說明。在一些場合,它的做用是很重要的。 alt
用來給圖片
來提示的。title
用來給連接文字
或普通文字
提示的。
用法以下:
<p Title="給連接文字提示">文字</p> <a href="#" Title="給連接文字提示">文字</a> <img src="圖片.gif" alt="給圖片提示">
HTM網頁
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0">
ASP網頁
Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache"
建立站點時,應該明白訪問者可能使用各類 Web 瀏覽器。在已知的其餘設計限制下,儘量將站點設計爲具備最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種,大多數已發行了多個版本。即便您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶,但您應明確並非每一個人都在使用這兩種瀏覽器的最新版本。
您的站點越複雜(在佈局、動畫、多媒體內容和交互方面),跨瀏覽器兼容的可能性就越小。例如,並不是全部的瀏覽器均可以運行JavaScript。不使用特殊字符的純文本頁面或許可以在任何瀏覽器中正確顯示,但比起有效地使用圖形、佈局和交互的頁面,這樣的頁面在美感上可能要差得多。因此,應儘可能在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
全部的HTML 標籤的屬性都要用單引號或者雙引號括起,即咱們應該寫<a href=」url」>
而不是<a href=url>
.
全尺寸banner爲468X60px,半尺寸banner爲234X60px,小banner爲88X31px。
另外120X90,120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
廣泛的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140
次級頁的pip尺寸360X300,336X280
遊標:100X100或120X120
爲了便於INTERNET上信息的傳播,一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO,目前有三種規格:
88*31
這是互聯網上最廣泛的LOGO規格。
120*60
這種規格用於通常大小的LOGO。
120*90
這種規格用於大型LOGO。
圖片通過優化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風格、頁面內容相符;製做精美,細節處理得當。
iTaoLun
; jQuery變量要求首字符爲_
, 其餘與原生JavaScript 規則相同, 如: _iTaoLun
; 另, 要求變量集中聲明, 避免全局變量.sprite技術
集中小的背景圖或圖標, 減少頁面http請求, 但注意, 請務必在對應的sprite psd源圖
中劃參考線, 並保存至img目錄下.<!--這兒是註釋-->,
'--'只能在註釋的始末位置,不可置入註釋文字區域;/*這兒是註釋*/
;//這兒是單行註釋
,多行註釋使用 /* 這兒有多行註釋 */
;1、標識區別:
區別IE6,IE7,IE8,FF。
*
; 標準瀏覽器(如FF)不能識別*
;*
,但不能識別!important
; IE6在樣式前面加_
*
,也能識別!important
;\9
, 例如:background:red \9
;*
,但能識別!important
;1.IE6和firefox的區別:
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
2.IE6和IE7的區別:
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色3.IE7和FF的區別:
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色4.FF,IE7,IE6的區別:
background:orange;*background:green !important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.
我的主頁: https://www.keyup.top