Web前端開發修煉之道 學習筆記一

2021-07-02 03:49:22 字數 3910 閱讀 3000

(1)前期的構思很重要,是乙個先慢後快的過程

(2)制定規範

(3)團隊的分工與合作

2.1 語義化標籤,那如何評判?

2.2 語義化的標題和內容模組

html部分

更多

段落一的內容根據瀏覽器的預設樣式

段落二的內容

css部分

.title

.title h2

p strong

2.3 語義化的表單模組

html部分

2.4 語義化的**模組

html部分

幾種頁面實現的比較

實現方式

**量搜尋引擎友好

特殊終端相容

table 布局

多 差

一般 亂用標籤的css布局

少 一般

差 標籤語義良好的css布局

少 好

3.高質量的css

3.1 建議通過以下三個css檔案組織**的css

3.2 推薦的base.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td

table

fieldset,img

address,caption,cite,code,dfn,em,strong,th,var

ol,ul

caption,th

h1,h2,h3,h4,h5,h6

q:before,q:after

abbr,acronym

/*文字排版*/

.f12

.f13

.f14

.f16

.f20

.fb.fn

.t2.lh150

.lh180

.lh200

.unl

.no_unl

/*定位*/

.tl.tc

.tr.bc

.fl.fr

.cb.cl

.cr.clearfix:after

.clearfix* html .clearfix.clearfix

.vm.pr

.pa.abs-right

.zoom

.hidden

.none

/*長度高度*/

.w10

.w20

.w30

.w40

.w50

.w60

.w70

.w80

.w90

.w100

.w200

.w250

.w300

.w400

.w500

.w600

.w700

.w800

.w.h50

.h80

.h100

.h200

.h/*邊距*/

.m10

.m15

.m30

.mt5

.mt10

.mt15

.mt20

.mt30

.mt50

.mt100

.mb10

.mb15

.mb20

.mb30

.mb50

.mb100

.ml5

.ml10

.ml15

.ml20

.ml30

.ml50

.ml100

.mr5

.mr10

.mr15

.mr20

.mr30

.mr50

.mr100

.p10

.p15

.p30

.pt5

.pt10

.pt15

.pt20

.pt30

.pt50

.pb5

.pb10

.pb15

.pb20

.pb30

.pb50

.pb100

.pl5

.pl10

.pl15

.pl20

.pl30

.pl50

.pl100

.pr5

.pr10

.pr15

.pr20

.pr30

.pr50

.pr100

(1 )「.fl」類和「.fr」類。這個類,除了設定float:left和float:right之外,還設定了display:inline.其作用是解決ie6的雙外邊距bug。在ie6下,如果對元素設定了浮動,同時又設定了margin-left或者margin-right,margin值會加倍。例如,設定margin-left:10px;在ie6下會顯示為margin-left:20px;通過設定display:inline;可以解決這個bug。

( 2 )「.bc」類。這個類是「,blockcenter,作用是使塊級元素居中。直接使用不足以使塊級元素居中,還需要設定寬度。

( 3 )「.clearfix」類。這個類用於在父容器直接清除子元素浮動。讓浮動元素的父容器能夠根據浮動元素的高度而自適應高度。

例如:( 4 )".zoom"類。ie的專有屬性。用於觸發haslayout

( 5 )".mt5",".mt10","mt20"這些類雖然繁雜,但有助於減少page層的**量

3.2. css的命名

要點:結合駝峰命名法和劃線命名法進行命名

原則:駝峰命名法用於區別不同的單詞,劃線用於表明從屬關係

例如:

2009-08-07

2009-08-06

2009-08-05

3.3.  掛多個class還是新建class——多用組合,少用繼承

通過類的組合,很容易實現類的擴充套件,避免產生類的**,下面直接上例子:

3.4  處理上下margin

3.5  低權重原則——避免濫用子選擇器

*以上內容大部分摘自《web前端開發修煉之道》曹劉陽 著

筆記內容只記錄了本人覺得比較重要的部分,有刪減。建議讀者閱讀原著,會更有幫助!

web 前端修煉之道

1.塊級元素和行內元素的區別 塊級元素即使設定了寬度,仍然是獨佔一行的,塊級元素可以設定margin和padding屬性。行內元素的margin和padding屬性只有水平邊距,沒有豎直邊距。豎直方向的padding雖然增大了行內元素的面積,但並沒有和相鄰元素拉開距離。2.display inlin...

web前端開發修煉之道 物件導向程式設計

好吧,又是很久沒寫東西了!前兩天問乙個技術人說物件導向是什麼,他打趣說就是面對著我物件 男朋友 囧了一下!呵呵,今天恰好看到 編寫高質量 的物件導向程式設計。記錄之!首先給乙個 本的例子 定義 本1 var phonebook 定義 本2 var phonebook2 查詢 function get...

web前端開發修煉之道 物件導向程式設計 二

好吧,還是先說一些p話,昨天說好這兩天的 面試是下午四五六點的。結果今天早上10點就給我打來 表示還準備早上準備一下的,畢竟有一段時間沒搞頁面了。面試完之後問結果怎麼樣的時候,那邊說如果我是廣州本地的就直接給offer了。這,武漢的孩子傷不起呀。可是我真的想去廣州。好,p話結束。面向過程程式設計所有...