第一篇：XXweb前端工作總結(jié)

XXweb前端工作總結(jié)

web前端XX年最火的職業(yè)，你是否也想學(xué)前端呢,那快來看看吧，下面是小編整理的幾篇XXweb前端工作總結(jié)范文，希望能夠給你帶來不一樣的體會。

XXweb前端工作總結(jié)范文篇一

工作回顧

在我進入公司的這七個月里，我陸續(xù)接觸了公司的軟件開發(fā)平臺，一些已經(jīng)完成的項目,b2b,收銀等。在工作之余，我也在努力的學(xué)習(xí)，和同事及客戶友商進行交流，學(xué)習(xí)先進的開發(fā)技術(shù)，請教別人相關(guān)開發(fā)技術(shù)問題。

存在問題

1.由于開始對公司開發(fā)平臺不是很熟悉，所以在了解客戶所要開發(fā)的功能及表單過程中多次出現(xiàn)因為需求的原因，而不斷修改的情況。在與客戶交流的時候，這個問題多次困擾著我，對方的需求不明，每次交流的過程中都在變更需求，從而導(dǎo)致了效率比較低的問題。

2.在工作過程中，用到很多我所不知道或很多我知道但不太熟悉的領(lǐng)域，在這個領(lǐng)域內(nèi)，我需要不斷的學(xué)習(xí)。

3.學(xué)習(xí)的知識不夠廣泛。對專業(yè)知識技能方面還需要努力的加強，這方面也是目前最欠缺，希望高總能給予指導(dǎo)和培養(yǎng)。一個項目中，涉及的技術(shù)往往有多種，知識多了，就會靈活變通，所以我會加強這方面的學(xué)習(xí)。

工作心得

1.每一個項目在開始著手的第一步，一定要和客戶把需求溝通清楚，只有了解了項目的需求，才有可能真正做好一個項目。

2.工作中，有一個無論是技術(shù)，還是經(jīng)驗都比較讓人肯定的前輩帶領(lǐng)，將任務(wù)詳細化，詳細到，每個頁面、甚至是一個頁面中的圖片什么時候做好，做到什么程度，這樣把工作進度有計劃有方向的贊定下來，做事很有效率。所以希望高總多給予我們一些指導(dǎo)。

3.每周的工作小結(jié)真的很重要，這讓我們每天都有計劃的知道自己干了什么，不是漫無目的的工作，所以我們應(yīng)該養(yǎng)成，周記、月記、年記的工作習(xí)慣。

4.工作并不是一成不變的，也許有一天你要去其他崗位幫忙，所以同事之間的技術(shù)要互相學(xué)習(xí)，也許有一天，公司需要你發(fā)揮其他的技能幫忙，所以互相學(xué)習(xí)也是很重要的。自己的工作不能僅僅局限于自己的業(yè)務(wù)范疇。

工作計劃

1.要提高工作的主動性，做事干脆果斷，不拖泥帶水。

2.工作要注重實效、注重結(jié)果，一切工作圍繞著目標(biāo)的完成。

3.要提高大局觀，是否能讓其他人的工作更順暢作為衡量工作的標(biāo)尺。

4.精細化工作方式的思考和實踐。

5.虛心請教比我做的優(yōu)秀的其他同事，向他們學(xué)習(xí)技術(shù)或經(jīng)驗。其實作為一個新員工，所有的地方都是需要學(xué)習(xí)的，多聽、多看、多想、多做、多溝通，向每一個員工學(xué)習(xí)他們身上的優(yōu)秀工作習(xí)慣，豐富的專業(yè)技能，配合著實際工作不斷的進步，不論在什么環(huán)境下，我都相信這兩點：一是三人行必有我?guī)煟翘斓莱昵凇?/p>

在參加工作的這短短的七個月中，我深刻的體會到，把自己所有的精力都投入進去，技術(shù)工作都不可能做到完美程度，畢竟技術(shù)工作太繁雜，項目多而人手少，但多付出一些，工作就會優(yōu)化一些，這就需要認認真真沉下心去做事情，職業(yè)做事，誠信待人。

XXweb前端工作總結(jié)范文篇二

時光飛快，自八月份轉(zhuǎn)前端以來，已經(jīng)過去了半年時間。這期間經(jīng)歷了第一次真正意義上的項目前后端分離的開發(fā)模式。對于之前從事了三年后端java開發(fā)的我來說，一切都很新鮮與刺激。當(dāng)然，收獲頗豐。下面，就具體從這個項目中學(xué)習(xí)的東西進行一次總結(jié)。

1.技術(shù)方面

首先，這次項目的開發(fā)環(huán)境是基于, 引入了npm包管理工具來對各種js插件進行管理。

這種方式避免了以前引入js插件時分別到各自的官網(wǎng)網(wǎng)站去下載，用了npm后只需要在終端進行全局安裝或者局部安裝，后續(xù)只需要在js文件中require就能進行調(diào)用。這種統(tǒng)一管理的方式不僅使開發(fā)變的更加簡單，減少了很多無謂的操作，也分離了一些開發(fā)人員不需要關(guān)注的關(guān)注點。

其次，項目引用了gulp + webpack，基于構(gòu)建工具的開發(fā)更接近現(xiàn)代web開發(fā)，一套流程走下來，自動打包，自動對html，css,js，圖片文件進行壓縮，合并和版本號管理以及對文件的改動進行自動監(jiān)控。這樣不僅僅是方便了開發(fā)人員，更重要的是極大地提升了客戶端頁面性能。與以前需要分別手動的對文件進行壓縮，合并，混淆處理相比，這種自動構(gòu)建工具效率更高,減少出錯率。

最后，項目引入了coala框架，使我更加清晰的明白基于web component的開發(fā)，頁面上每一個功能塊，都可以化為一個組件，每個組件有它自己的生命周期與初始的屬性。在不同的交互方式上綁定不同的事件用以來響應(yīng)用戶的行為，具體體現(xiàn)在個體的組件數(shù)據(jù)變化不會影響到頁面上其他組件，這樣就做到了頁面性能的提升和用戶體驗的雙贏。

另外，在頁面布局和html，css實現(xiàn)頁面的時候，如何能夠繪制出更規(guī)范，更有結(jié)構(gòu)化的頁面也是一個考驗。從前期的id,class命名不規(guī)范，html結(jié)構(gòu)混亂到現(xiàn)在一點點的提升，終于也領(lǐng)會到了前端開發(fā)的細致活。

2.團隊協(xié)作

這次的前后端分離和后端開發(fā)人員進行了接口聯(lián)調(diào)。不得不承認前期花費了很多時間在溝通上面。

基于QQ工具的一問一答低效率的溝通和問題表述不清都會花費時間和打斷工作中的思維，使人不能專注很長一段時間。另外,接口文檔編寫不規(guī)范，格式不美觀等都是不能忽視的問題。當(dāng)然，這些溝通技巧和提升效率的工具需要花費時間去慢慢的提升，包括我,包括團隊里面所有的人員，只有這樣，每個開發(fā)人員才能專心有效率的進行項目開發(fā)。

3.繼往開來

新的一年開始了，希望自己能夠保持良好的學(xué)習(xí)態(tài)度和狀態(tài)繼續(xù)迎接新的挑戰(zhàn)。尤其感謝同事和領(lǐng)導(dǎo)的厚愛，才能讓自己 不斷成長，不斷進步。在此，祝愿公司所有開發(fā)人員快樂生活，生活快樂。

XXweb前端工作總結(jié)范文篇三

我自xxxx

年xx月xx日入職至今已經(jīng)10個多月，在這10個多月不知不覺的忙碌工作中，美好而充實的一年即將悄然逝去，驀然回首，感慨萬千，收獲亦多。使我個人在工作中學(xué)到了很多的經(jīng)驗，從經(jīng)歷的每件事情中去總結(jié)工作經(jīng)驗，學(xué)習(xí)并且已經(jīng)適應(yīng)工作環(huán)境，并且考慮在我的工作中能夠有一個新的工作創(chuàng)新，這是我工作成長中一段寶貴的經(jīng)驗?；仡櫧衲晡覀€人的工作情況，特別是剛剛步入到這個工作環(huán)境的時候，說起來還真的有點不習(xí)慣，不過后來慢慢的自己也習(xí)慣了。

進入公司以來，我的主要工作是網(wǎng)站建設(shè)和公司的軟硬件及網(wǎng)絡(luò)維護。在此期間特別要感謝詹金橋經(jīng)理以及公司各位同事對我工作和生活各方面的幫助。

作為剛從校園走出的入職菜鳥來說，這是我的第一份正式工作，我很重視和珍惜這一份工作。一年的時間從學(xué)生到職業(yè)的轉(zhuǎn)變，讓我受益頗多，經(jīng)驗的積累，心態(tài)的轉(zhuǎn)變，工作的方法，技能的提升。

本崗位目前主要有三項主要工作內(nèi)容，現(xiàn)對前期工作做出如下總結(jié)：

一、xxxx年工作總結(jié)，“xxxx”網(wǎng)站建設(shè)

自我接手本項工作以來，xxxx網(wǎng)站從無到有，從簡單到復(fù)雜，一切都是從零開始，域名備案、空間重建、網(wǎng)站策劃、頁面設(shè)計、前端靜態(tài)代碼的編寫、PHP+MySQL、后臺管理系統(tǒng)、SEO搜索引擎優(yōu)化，一步一步的都有序進行。

到目前為止，網(wǎng)站一期建設(shè)已經(jīng)完成，駐地中心湖北站已經(jīng)上線。在各大搜索引擎上的收錄量數(shù)據(jù)可觀，搜索引擎網(wǎng)站收錄數(shù)據(jù)如下：

百度收錄: 1029 反鏈：745 360收錄：1100 反鏈：2392

備注：谷歌(Google)已經(jīng)退出中國市場，所有中國業(yè)務(wù)全部取消，數(shù)據(jù)失效無用

二、xxxx年崗位工作計劃

xxxx年即將到來，現(xiàn)對做出如下工作計劃安排：

1、網(wǎng)站一期已經(jīng)完成，剩下的主要是升級維護 a)網(wǎng)頁頁面升級，現(xiàn)在的頁面在視覺上看著不太成熟;

b)功能擴展，現(xiàn)有的功能還是過于簡單，尤其在項目展示方面不夠合理(針對項

目作出單獨的版塊結(jié)構(gòu)，包含公司品牌介紹、加盟政策、項目留言、項目展示等等，站內(nèi)搜索);

2、取消網(wǎng)站之前使用的空間，租用云服務(wù)器(之前使用的是雪狼空間，這個服務(wù)提供商太差了，功能支持不完善，安全漏洞太多，訪問速度過慢，對客戶的一些基本問題都不能解決)

三、個人職業(yè)規(guī)劃

“知己知彼，百戰(zhàn)不殆”，在任何時候我們都要有一個明確的職業(yè)目標(biāo)，一個好的職業(yè)目標(biāo)會促使我們成長，找到一個未來的參考方向。

1、xxxx年-xxxx年個人職業(yè)規(guī)劃 a)技能：每個人都應(yīng)該有自己擅長的領(lǐng)域，我熱愛互聯(lián)網(wǎng)的發(fā)展，未來幾

年必將致力于互聯(lián)網(wǎng)的開發(fā)大潮。這是一個善變的行業(yè)，或許今年出現(xiàn)的新型開發(fā)工具、語言到明年就過時了，所以我們要學(xué)習(xí)的東西也就更多，不斷的學(xué)習(xí)不斷的成長，在工作中學(xué)習(xí)，在學(xué)習(xí)中工作;

b)責(zé)任：二十多年的生活一直在關(guān)懷中度過，大學(xué)畢業(yè)、走向社會，我們

不在是襁褓中的小孩。我們將要面對來自工作和家庭的雙重責(zé)任，在此期間，我們要學(xué)會善于勇?lián)?zé)任，為自己、為工作、為朋友、為家庭負責(zé);

c)心態(tài)：剛剛走向社會，我們很多心態(tài)都處在學(xué)校的時候，短暫的工作讓

我明白，沒有一個良好的心態(tài)，很難在社會上立足。在很多時候我們都要去學(xué)會接納，學(xué)會忍讓，也要善于與他人相處;

d)目標(biāo)：不想當(dāng)將軍的兵，不是好兵，在未來幾年我想通過各方面的學(xué)習(xí)，能得到各個階層的賞識，達到技術(shù)主管的職位，2、三年內(nèi)對自己及公司的期望 a)對自己：3年內(nèi)通過自己的努力，希望能達到年薪十萬左右，并學(xué)習(xí)很多

的專業(yè)及其它方面的知識。

b)對公司：希望能將創(chuàng)業(yè)扶助中心做大做強，跟多的為廣大想創(chuàng)業(yè)的人提

供最基本的服務(wù)，將扶助指導(dǎo)的思想貫徹到生活的每個角落3、3-5個可實現(xiàn)的目標(biāo)

a)在工資上能得到提升，年薪十萬左右;

b)不再是一個底層員工，能帶領(lǐng)一個團隊從事工作;

4、個人有何打算

這幾年是關(guān)鍵的幾年，我希望在最近的幾年，能從事專業(yè)的網(wǎng)站建設(shè)，只有這樣，才能在最短的時間里通過更多的實戰(zhàn)，學(xué)習(xí)跟多的知識，積累跟多的經(jīng)驗

5、對自己所在的部門及公司有何看法及建議

雖然我在職時間不長，但我覺得公司的很多機制都不完善，沒有明確的獎懲制度，沒有規(guī)范的辦公OA體系，各種資料雜而亂，沒有明確的職位責(zé)任，職位薪資無體系，各種安排沒有規(guī)范，想一出是一出。

6、對自身所在的不足及問題，并提出如何改進

a)過于懶散，在很多時候都無法集中精力做事;

b)很容易受周圍的環(huán)境與影響自己的心態(tài)和工作;

第二篇：Web前端工作總結(jié)

Web前端學(xué)習(xí)總結(jié)

一.名詞解釋 1.橫切

在固定頁面的寬度(按柵格化進行)并且對高度沒有限制的容器稱為一個標(biāo)準(zhǔn)橫切 2.留白 兩個容器或碎片之間的上、下、左、右的空白距離 3.繼承

元素可以從其父級元素中獲得一些可為自己使用的屬性或值。4.圖片定位

把圖片元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中，利用CSS中對圖片進行遮罩屬性，多用于頁面中的修飾圖 5.底圖

頁面中在標(biāo)簽中使用的背景圖 6.齊底(圖)線 用于區(qū)分橫切或碎片結(jié)束的線或圖 7.頁面結(jié)構(gòu)

頁面的基礎(chǔ)框架，由橫切、布局元素組成 8.焦點區(qū)(圖)最易注意的區(qū)域 9.導(dǎo)航

在頁面中具有導(dǎo)向性的鏈接集合 10.頭圖 頁面主題圖片 11.間距

碎片或文字間的距離 12.行高

文字段落中行與行之間的距離 13.首行縮進 文字段落首行縮進 14.浮動

使被定義的區(qū)域脫離正常的頁面文檔流 15.碎片 由文字、圖片組合成的內(nèi)容區(qū)域 16.通欄廣告 與頁面內(nèi)容區(qū)同寬的廣告區(qū)域 17.功能按鈕 具有交互屬性的按鈕 18.私有樣式

當(dāng)前頁面獨立使用的樣式，不具備公用性 19.水平(垂直)居中

在頁面中的某個元素處于父級的上下或左右的相同距離 20.標(biāo)準(zhǔn)頭(尾)定義相同的頁面頭或尾元素集合 二.文本格式化 1.段落：p 2.斜體：address（聯(lián)系信息）em（強調(diào)）i（突出不同）cite（引用）dfn（首次定義術(shù)語）3.粗體：strong（重要）b（提醒）4.圖片塊：figure 5.引述文段，段落縮進：blockquote 6.背景顏色：mark 7.虛線下劃線：abbr 8.上標(biāo)下標(biāo)：sub/sup 9.下劃線：ins 10.刪除線：del（標(biāo)記已刪除內(nèi)容）s（標(biāo)記不準(zhǔn)確內(nèi)容）11.等寬字體：code 12.預(yù)格式化：pre 13.字號減小，表注釋：small 14.時間：time 15.換行：br 16.html5定義區(qū)塊：header nav article section aside footer div span 三.表單表格

1.

...

2.表單元素的組織：

...

...

3.創(chuàng)建各種框: 注：text→password/url/tel/email Id:為了讓對應(yīng)的標(biāo)簽識別，添加CSS Name：為了讓服務(wù)器和腳本識別，通常與id設(shè)為一樣 Size：文本框大小 Maxlength：能輸入的最大字符數(shù) Pattern：正則表達式

4.添加標(biāo)簽： ? 5.單(多)選按鈕：

北京 上海 注：id各自唯一，name必須相同。checked：默認選擇 6.下拉框：

北京 上海 成都 注：size:選擇框的高度 multiple：允許多選 selected：默認選擇 用?對選擇框進行分組 7.上傳文件： 注：size：輸入路徑和文件名的字段的寬度 8.禁用表單元素： 9.創(chuàng)建提交按鈕： 創(chuàng)建帶圖像的提交按鈕：點擊這里 創(chuàng)建圖像按鈕： Submit→reset重置

10.文本區(qū)域：請在此輸入字符 11.表格 :

..	..
..	..	..

四.文本格式化 1.{font：（斜體 粗體 小型大寫字母）字體大小(必有)行距 字體集（必有）;} 2.文本背景：{ background：#foc url（1.jpg）repeat-x scroll 0 0；} 3.字間距：word-spacing:12px;4.字偶距：letter-spacing:12px;5.縮進增加：text-indent:12px;6.小型大寫字母: font-variant:small-caps;7.文本對齊：text-align:left；適用于block，inline-block 8.單詞大小寫: text-transform:capitalize(單詞首字母大寫)/uppercase(大寫)/lowercase(小寫)9.文本上的線：text-decoraion:underline/overline/line-through;11.空格：white-space:pre(顯示所有空格回車)/nowrap（非斷行空格）； 12.h3—16px;h5—12px;verdana,Geneva,sans-serif;13.列表屬性： li{list-style:url(1.jpg)inside square;} 五.CSS布局

1.width：不包括padding，border，margin；max-width設(shè)置外圍限制； 2.浮動：float:left;清除浮動：clear:both;3.設(shè)置邊框： border:dotted 4px red;(dotted點狀、dashed虛線、solid實線)4.使元素對齊：vertical-align:baseline/middle/text-bottom..5.顯示：display:black/inline/inline-block;6.顯示：visibility:visible/hiddle;7.相對定位：{position:relative;top:5px;} 相對于該元素的原始位置 8.絕對定位：{position:absolute;top:5px;} 相對于body或離他最近定位的祖先元素 9.三維位置：{z-index:50;} 越大的在最上面

10.廠商前綴：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.創(chuàng)建圓角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半徑是50px){border-radius:50px;}(所有角簡寫)12.創(chuàng)建橢圓角：{? ? border-radius:40px/20px;}（x半徑/y半徑）13.創(chuàng)建圓形：{? ? border-radius:50px;} 50px為元素半徑大小 14.文本加陰影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半徑

15.元素加陰影：{(-moz-/-webkit-)box-shadow:(inset內(nèi)陰影)2px 5px 5px #999;5px 10px 2px #555(多重陰影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.漸變背景：{background:linear-gradient(left,#000,#999);}(left ：漸變線沿逆時針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻

1.html5支持3種視頻：.ogg/.ogv.mp4/.m4v.webm 2.添加視頻： 視頻屬性：src autoplay controls muted loop poster width height preload 3.為視頻添加多個來源： 4.html5支持5中音頻：.ogg.mp3.wav.aac.mp4 5.添加音頻： 音頻屬性：src autoplay controls muted loop preload。多個來源同video。七.一些約定

我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實際應(yīng)用，整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符；

3.設(shè)置邊框： border:dotted 4px red;(dotted點狀、dashed虛線、solid實線)4.使元素對齊：vertical-align:baseline/middle/text-bottom..5.顯示：display:black/inline/inline-block;6.顯示：visibility:visible/hiddle;7.相對定位：{position:relative;top:5px;} 相對于該元素的原始位置 8.絕對定位：{position:absolute;top:5px;} 相對于body或離他最近定位的祖先元素 9.三維位置：{z-index:50;} 越大的在最上面

10.廠商前綴：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.創(chuàng)建圓角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半徑是50px){border-radius:50px;}(所有角簡寫)12.創(chuàng)建橢圓角：{? ? border-radius:40px/20px;}（x半徑/y半徑）13.創(chuàng)建圓形：{? ? border-radius:50px;} 50px為元素半徑大小 14.文本加陰影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半徑

15.元素加陰影：{(-moz-/-webkit-)box-shadow:(inset內(nèi)陰影)2px 5px 5px #999;5px 10px 2px #555(多重陰影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.漸變背景：{background:linear-gradient(left,#000,#999);}(left ：漸變線沿逆時針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻

1.html5支持3種視頻：.ogg/.ogv.mp4/.m4v.webm 2.添加視頻： 視頻屬性：src autoplay controls muted loop poster width height preload 3.為視頻添加多個來源： 4.html5支持5中音頻：.ogg.mp3.wav.aac.mp4 5.添加音頻： 音頻屬性：src autoplay controls muted loop preload。多個來源同video。七.一些約定

我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實際應(yīng)用，整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符； 2.樣式名盡量語義化或簡寫； 3.樣式名需要組合拼寫時，采用全部小寫拼寫并使用下劃線連接，即：all_keyword； 4.使用px(像素)為基本計量單位； 5.頁面中空格的使用：全角：中文空格 半角；? 6.項目完成包中，文件夾及文件名稱全部采用小寫字母，不使用中文文件名； 7.減少DIV的嵌套層數(shù)；

8.給重要圖片加上alt屬性；給重要的元素和截斷的元素加上title； 9.使用正確的注釋方法（詳見“注釋”章節(jié)）； 10.特殊情況下要求表現(xiàn)和內(nèi)容分離，代碼中不要涉及任何表現(xiàn)的元素，例如：style、font 等；

11.雙標(biāo)記簽都要有開始和結(jié)束標(biāo)簽，單標(biāo)記標(biāo)簽的后面一定要加“ /”,例如：
等，并且有正確的層次； 12.其它特殊符號： 1)<(<)2)>(>)八.命名空間

8.1外掛樣式名稱 全局：public.css 全局樣式為全站公用，為頁面樣式基礎(chǔ)，頁面中必須包含。結(jié)構(gòu)：layout.css 頁面結(jié)構(gòu)類型復(fù)雜，并且公用類型較多時使用。多用在首頁級頁面和產(chǎn)品類頁面中。私有：style.css 獨立頁面所使用的樣式文件，頁面中必須包含。模塊 module.css 產(chǎn)品類頁面應(yīng)用，將可復(fù)用類模塊進行剝離后，可與其它樣式配合使用。默認 default.css 文章 article.css 圖片 photo.css 下載 soft.css 主題 themes.css 實現(xiàn)換膚功能時應(yīng)用。補丁 mend.css 基于以上樣式進行的私有化修補。8.2 常用名稱(1)頁面結(jié)構(gòu) 容器: container 頁頭：header 內(nèi)容：content/container/content(A)頁面主體：main 頁尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper 左右中：left right center 浮左浮右：fl fr 清除浮動 clear(2)導(dǎo)航 導(dǎo)航：nav 主導(dǎo)航：mainbav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題：title 摘要：summary 路徑：path(3)模塊化命名 模塊頭部：hd 模塊內(nèi)容部分：bd 模塊底部：ft(4)各內(nèi)容頁對應(yīng) 標(biāo)題：title 副標(biāo)題：subtitle 屬性：properties 簡介：infor 內(nèi)容：content 分頁：page 插入廣告：insert_ad 表情：expression 功能選項：options 上下篇：up_down 評論：comments 相關(guān)內(nèi)容：related 下載地址：download 播放地址：play_add(5)功能 標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：regsiter 搜索：search 日期：date 功能區(qū)：shop 標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動：scroll 標(biāo)簽頁：tab 文章列表：list 提示信息：msg 當(dāng)前的：current 小技巧：tips 圖標(biāo)：icon 注釋：note 指南：guild 服務(wù)：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright 九.基本設(shè)置-public.css 9.1 全局設(shè)置

上下邊距(margin、padding)：0(px)左右邊距(margin)：auto(自動)底色(background):#FFF(白色)字體(font-family)、字號(font-szie)、字色(color)：”宋體” 12px #666 代碼： /* 全局CSS定義 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋體';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 頁面標(biāo)簽初始化設(shè)置 1.常用基本標(biāo)div,form,ul,ol,li,span,p,dl,dt,dd,img 設(shè)置基本標(biāo)簽的間距、邊框默認值為0。2.h1～h6標(biāo)題

默認標(biāo)題內(nèi)字號12px，內(nèi)外間距為0px，文字不加粗。3.ul,ol,li 列表 默認不顯示項目符號。4.h2 欄目標(biāo)題

說明：h2標(biāo)簽被定義為欄目標(biāo)題特殊使用，在標(biāo)簽中非標(biāo)題文字默認居右顯示，主標(biāo)題文字使用span標(biāo)簽包含，居左顯示。5.默認鏈接顏色

常態(tài)下不顯示文字下劃線，顏色為灰(#333)，鼠標(biāo)懸浮時：顯示文字下劃線，顏色變?yōu)榘导t(#ccc)。6.狀態(tài)：a:link{未點} a:visited{已點} a:focus{鍵盤選中} a:hover{指針停留} a:active{正在點} 9.3 頁面寬度 默認頁面寬(命名規(guī)范)：按柵格化進行 9.4.clear 結(jié)束容器內(nèi)各元素的浮動屬性，使相鄰容器或元素節(jié)點正常顯示。以下是清除浮動的幾種方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法: