網頁設計 html布局學習1

2021-06-29 04:50:19 字數 2314 閱讀 9960

一、重置css樣式表

第一種方式

* 現在眾多的設計師發現,這行**雖然簡單,但卻讓網頁解析太慢,呵呵,當然了,自己是業餘的,不用太在意。

於是出現了幾種css重置方法:

第二種方式

nettuts上的 jeffrey way寫了篇文章weekend quick tip: create your own ****** reset.css file

發布自己用來重置css樣式表的方法

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,

li, dl, dt, dd, form, a, fieldset, input, th, td

body

h1, h2, h3, h4, h5, h6

ul, ol

aa:hover

.floatleft

.floatright

這個方法適用於大多數的網頁設計。

第三種方式

一部分人追求徹底抹去瀏覽器影響

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td

body

ol, ul

blockquote, q

blockquote:before, blockquote:after,

q:before, q:after

/* remember to define focus styles! */

:focus

/* remember to highlight inserts somehow! */

ins

del

/* tables still need 'cellspacing="0"' in the markup */

table

第四種方式

還有今天sofish提到的yahoo的yui提供的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

這些,沒有誰好誰壞一分,大多數設計師並不推薦第一種方法,因為我國的抄襲美德,現在搜尋到的css網頁設計技巧,第一位卻一定是這個。

二、連線外部css樣式

(這是外部樣式的形式)
三、背景設定問題
body
四、垂直居中
1.單行:只需要設定一下div的height和line-height相同就能夠實現當行的居中
2.多行:**中的屬性vertical-align:middle;其中必須設定高度才能夠垂直居中
3.多行2:使用padding-top和padding-buttom的設定實現,但是必須設定height為auto
4.居中:div中使用居中來實現設定center的值來實現
五、字型顏色
color屬性就能夠設定字型顏色

六、首行縮排

text-indent:2em 實現  

七、字型font-family 

font-family 規定元素的字型系列。

font-family 可以把多個字型名稱作為乙個「回退」系統來儲存。如果瀏覽器不支援第乙個字型,則會嘗試下乙個。也就是說,font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的乙個優先表。瀏覽器會使用它可識別的第乙個值。

網頁設計布局

在網頁設計中所講的布局 layout 就是把進入網頁的各種構成要素 文字 影象 選單等 在網頁瀏覽器裡有效地排列起來,在設計網頁時,要從整體上把握好各頁面的布局,主要是利用 或網格等。仔細觀察各種形態的 布局十分必要的。另外,在平時有很好的想法的時候,把那些一閃即逝的好點子都記到書寫簿上,通過這樣方...

網頁設計之HTML實戰 1 認識HTML

html 是用來描述網頁的一種語言。全稱為超文字標記語言,是英文 hyper text markup language 的縮寫,不是程式設計的語言,是一種網頁格式的表示方法或稱為一種標記語言。它由若干標記標籤組成。例如,為了表示想顯示乙個標題,就用h1標籤表示乙個標題,顯示時用粗體顯示。h1 標記標...

Web 網頁設計 HTML 3 布局基礎

網頁布局,也就是如何安排網頁的內容。乙個好的網頁布局能夠使人眼前一亮,吸引流量。網頁主要分為三部分 頭部 主體 頁尾。主體 網頁的主體承載網頁的主要內容。三段式 這是最簡單直接的布局,但簡單並不意味醜陋,這種布局因為簡潔往往能夠設計出效果出眾的網頁,最常見的就是搜尋引擎和新聞門戶的主頁。帶側邊欄 從...