便宜做網(wǎng)站,不用客戶動手特價(jià)999元,源碼整套僅需50元起

做網(wǎng)站/做SEO/解決各類網(wǎng)站問題,直接與技術(shù)談!
網(wǎng)站頁面div+css架構(gòu)的一些技術(shù)細(xì)節(jié),對網(wǎng)站優(yōu)化會有很大幫助
發(fā)布時(shí)間:2018-09-19 來源:本站原創(chuàng) 作者:野狼SEO團(tuán)隊(duì) 閱讀:781次
我公司有相對嚴(yán)苛的一些網(wǎng)站建設(shè)標(biāo)準(zhǔn),包括頁面的代碼架構(gòu),都會有比較詳細(xì)的規(guī)定和建議。比如我們要求,在網(wǎng)站的內(nèi)容界面,要把網(wǎng)站標(biāo)題用h1標(biāo)簽環(huán)繞,這就是與搜索引擎進(jìn)行良性的溝通,用搜索引擎的思維去思考網(wǎng)站,讓網(wǎng)站更容易被搜索引擎所理解,這里就是摘抄的一小段關(guān)于網(wǎng)站優(yōu)化的細(xì)節(jié)建議:
(1)不可使用“ad”之類作為文件或者圖片名字,部分安全軟件或?yàn)g覽器會把這類文件攔截。比如“ad.jpg”“ad_1.html”是不允許的。
(2)優(yōu)先使用jpg圖片,透明圖片使用png24位輸出(gif透明圖片會有噪邊),動畫圖片用gif。(3)不要直接修改后綴名來修改圖片格式,例如用png的圖片,修改后綴名為jpg使用在網(wǎng)頁上。這樣可能導(dǎo)致某些瀏覽器圖片無法正常顯示,還會影響PS二次處理圖片。
(4)大圖片jpg輸出,請選擇“連續(xù)”,可以實(shí)現(xiàn)多進(jìn)程,從模糊到清晰的加載效果。
(5)jpg圖片的壓縮一般質(zhì)量在85%左右為最佳。
① 如果圖片大于200K的可以調(diào)整到40~80%之間,使之降低到200K以內(nèi)。
② 小圖片輸出85%上下即可。
(6)首頁全屏焦點(diǎn)圖應(yīng)該使用1920px寬度的圖片,作為背景圖居中顯示。(如果背景色是純色,可以使用小寬度的圖片放在1200px的div中)。
(7)首頁焦點(diǎn)圖要可以點(diǎn)擊,可以做成<li><a href=”#”></a></li> 其中a樣式.focus a{display:block;width:100%;height:100%}。
(8)HTML和CSS文件要用utf-8編碼
(9)不要去使用生僻的標(biāo)簽,因?yàn)檫@些標(biāo)簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的使用常用的標(biāo)簽如div、p、ul、li、img、span、a、h1、h2、h3;特別注意不要使用已經(jīng)過時(shí)的font標(biāo)簽。
(10)特殊字體要使用圖片,不要直接寫font-family,因?yàn)樘厥庾煮w有很多電腦系統(tǒng)默認(rèn)是沒有的。宋體(SimSun),大多數(shù)系統(tǒng)都支持;微軟雅黑("Microsoft Yahei"),XP不怎么支持,XP之后都開始支持了,英文以Arial、Tahoma為主。(公司默認(rèn)css中已經(jīng)寫好文字,其他地方最好不要自定義字體類型)。
(11)a標(biāo)簽不能嵌套a標(biāo)簽;span里也不能嵌套span標(biāo)簽;類似的標(biāo)簽還有:p、h系列、img更不能這樣。
(12)所有a標(biāo)簽必須有href屬性;外部鏈接,一律添加target="_blank"。
(13)鼠標(biāo)hover背景圖,需與link背景圖在同一個(gè)圖片上,防止hover時(shí)圖片加載卡頓現(xiàn)象發(fā)生。(background-position控制顯示)。
(14)回到頂部的鏈接、程序架構(gòu)之后會直接被使用的鏈接用href="#";網(wǎng)站建成后還是空鏈接的a標(biāo)簽用href="javascript:void(0);",防止空鏈接影響點(diǎn)擊體驗(yàn)。
(15)鼠標(biāo)放li上有背景變化,li中套有a標(biāo)簽a標(biāo)簽有手型,但是li比較寬的話,鼠標(biāo)放到字上背景變色,手型;但li其他地方,背景變色,箭頭型。
解決辦法:
(1)li:hover{cursor:pointer}
(2)a加css{width:100%;height:100%;display:block}
(16)img標(biāo)簽上一定要帶 alt 屬性,最好同時(shí)加上title標(biāo)簽。a標(biāo)簽上可以帶title屬性,尤其是預(yù)期會截取的,或者某些地方需要有鼠標(biāo)放上去的提示文字(例如div做成的一個(gè)背景圖片加上title標(biāo)簽就會出現(xiàn)提示文字,方便使用網(wǎng)站)。
(17)Img標(biāo)簽上要有width和height屬性(手機(jī)網(wǎng)站和特殊情況除外)。
(18)text-align:center 可針對a、span、img進(jìn)行居中操作,所以針對這一類的居中問題,不要使用固定寬度的div設(shè)置margin:0 auto的方式,因?yàn)閠ext-align:center可以隨意增減包裹的內(nèi)容。
(19)&nbps;標(biāo)簽,長度沒有辦法確定,是因?yàn)闆]有設(shè)置字體和字體大小,要設(shè)置一下字體大小。
(20)注意切圖和設(shè)計(jì)的時(shí)候?qū)EO的運(yùn)用。運(yùn)用好H1~H3,例如新聞頁面標(biāo)題應(yīng)該用H1環(huán)繞、產(chǎn)品內(nèi)容頁的產(chǎn)品標(biāo)題也要用H1標(biāo)簽。一個(gè)頁面不建議多個(gè)H1標(biāo)簽。
(21)元素半透明,要同時(shí)使用3個(gè)css,不要只寫opacity:0.50;
filter:alpha(opacity=50); /*支持 IE 瀏覽器*/
-moz-opacity:0.50; /*支持 FireFox 瀏覽器*/
opacity:0.50; /*支持 Chrome, Opera, Safari 等瀏覽器*/
也可以用JS來做
(22)必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
(23) 代碼縮進(jìn)與格式: 建議單行書寫,一個(gè)css樣式不要用多行。
(24)不要用“#id”的形式寫樣式,而是要寫在類上,方便反復(fù)調(diào)用并且用類優(yōu)先級不易弄亂。
(25)獨(dú)立功能考慮到css沖突問題,所以要寫類選擇器路徑。例如“.kefu .top{……}”、“.kefu *{……}”、“.kefu .tel{……}”,全部都帶上最外部的類名.kefu。
(26)同一類名的樣式要合并到一起,不要重復(fù)寫多次,容易弄亂。
這些細(xì)節(jié)建議或者規(guī)定,也會隨著進(jìn)行變化和補(bǔ)充,會越來越完善,保證所有成員能夠按照這樣的標(biāo)準(zhǔn)進(jìn)行,不管是對于圖片的輸出,美工的設(shè)計(jì)或者是界面的一些div命名等都會有所要求。這只是一小部分,我們有整整幾十頁的技術(shù)標(biāo)準(zhǔn),包括css的命名,廣告法的一些規(guī)定等等,大家也可以到我公司來查看。

本文作者:野狼SEO團(tuán)隊(duì)

十六年網(wǎng)站建設(shè)相關(guān)經(jīng)驗(yàn)
一站式為您提供網(wǎng)站相關(guān)服務(wù)
歡迎掃碼咨詢
繼續(xù)瀏覽有關(guān) 網(wǎng)站優(yōu)化 的內(nèi)容
還沒有人評論,快來搶個(gè)沙發(fā)!