網(wǎng)頁(yè)設(shè)計(jì)-在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)之前需要知道的一些基本知識(shí)

時(shí)間：2023-10-03 21:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 21:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)-在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)之前需要知道的一些基本知識(shí)：在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)前要知道的一些基本知識(shí)，包括邊距、position等、設(shè)計(jì)時(shí)與運(yùn)行時(shí)的區(qū)別等。這些知識(shí)無(wú)論是自己手工編寫HTML還是用軟件（如金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器）進(jìn)行設(shè)計(jì)都應(yīng)該知道。

一、左邊距、頂邊距與內(nèi)外邊距

這里所說(shuō)的左邊距與頂邊距與內(nèi)外邊距是指下面圖中方框中的。

在利用金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器進(jìn)行設(shè)計(jì)網(wǎng)頁(yè)時(shí)，在編輯器中控件的位置與“位置、大小”->“左邊距”，“頂邊距”是相同的。

在運(yùn)行（是指在瀏覽器中運(yùn)行）時(shí)，對(duì)應(yīng)的HTML元素位置是否與設(shè)計(jì)時(shí)控件的位置相同這要分情況：

1.“位置、大小”->“position”為“將position設(shè)置為absolute_絕對(duì)位置”時(shí)，如下圖：

如上圖所示，在運(yùn)行時(shí)，對(duì)應(yīng)的HTML元素位置與設(shè)計(jì)時(shí)控件的位置相同。這種就是完全所見即得。

注意：有一種例外情況，如果“位置、大小”->“自動(dòng)左邊距”設(shè)置為“true”、 “自動(dòng)頂邊距”設(shè)置為“true”、 ，則此時(shí)運(yùn)行時(shí)的實(shí)際“左邊距”=0，“頂邊距”=0。

2.“位置、大小”->“將position設(shè)置為relative_相對(duì)前一元素底部”時(shí)，如下圖：

如上圖所示，在運(yùn)行時(shí)，對(duì)應(yīng)的HTML元素位置與設(shè)計(jì)時(shí)控件的位置就會(huì)不同。HTML元素位置如下確定：

a.HTML元素的“頂邊距”的確定

HTML元素的“頂邊距”由“內(nèi)外邊距”->“外邊距”->“頂邊距”和前一個(gè)HTML元素的頂邊距確定。即“頂邊距”= 前一HTML元素的頂邊距 + 前一HTML元素的高度 + 前一HTML元素的“內(nèi)外邊距->底邊距”+ 本HTML元素的“內(nèi)外邊距->頂邊距”。

如上圖所示，序號(hào)為“12”(紅字為序號(hào))的控件的“內(nèi)外邊距”->“頂邊距”設(shè)置為“10”。那么序號(hào)為“12”運(yùn)行時(shí)的實(shí)際“頂邊距”為：前一HTML元素（序號(hào)為“11”）的頂邊距 + 前一HTML元素（序號(hào)為“11”）的高度 + 前一HTML元素（序號(hào)為“11”）的“內(nèi)外邊距->底邊距” + 10。

我們經(jīng)常看到一些例子，看到的控件的頂位置與運(yùn)行后不一樣一般就是這個(gè)原因。

b.HTML元素的“左邊距”的確定

“左邊距”=“位置、大小”->“左邊距”+“內(nèi)外邊距”->“左邊距”。上圖序號(hào)為“12”運(yùn)行時(shí)的實(shí)際“左邊距”為：“位置、大小”->“左邊距”（如上圖值為0）+“內(nèi)外邊距”->“左邊距”（如上圖為空即為0）= 0 。

注意：有一種例外情況，如果“位置、大小”->“自動(dòng)左邊距”設(shè)置為“true” ，則此時(shí)運(yùn)行時(shí)的實(shí)際“左邊距”=“內(nèi)外邊距”->“左邊距”。

二、position

這里所說(shuō)的position是指“位置、大小”->“position”，對(duì)應(yīng)html元素的position屬性。金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器的“位置、大小”->“position”有6個(gè)選項(xiàng)：將position設(shè)置為absolute_絕對(duì)位置, 將position設(shè)置為relative_相對(duì)前一元素底部, 將position設(shè)置為inherit_繼承父元素position, 將position設(shè)置為fixed_固定位置, 將position設(shè)置為static, 不設(shè)置。 其中選項(xiàng)“不設(shè)置”則會(huì)默認(rèn)為“將position設(shè)置為relative_相對(duì)前一元素底部”，“將position設(shè)置為fixed_固定位置”和“將position設(shè)置為static”一般用在特別情況下。而最常用的就是“將position設(shè)置為relative_相對(duì)前一元素底部”和“將position設(shè)置為absolute_絕對(duì)位置”。

1.“將position設(shè)置為relative_相對(duì)前一元素底部”

使用“將position設(shè)置為relative_相對(duì)前一元素底部”是最廣泛的，也建議大家使用這種類型，好處是這種類型可以非常方便準(zhǔn)確確定位置，特別是使用css樣式表可以多個(gè)HTML元素用一個(gè)css樣式來(lái)統(tǒng)一確定位置。如頁(yè)面上有10個(gè)面板（div）,如果我們要使每個(gè)面板之間間隔10px，使用這種類型直接將“內(nèi)外邊距”->“頂邊距”設(shè)置為10即可。如果是使用“將position設(shè)置為absolute_絕對(duì)位置”這種類型，還得考慮每個(gè)面板的高度，麻煩很多。另外，我們?cè)谠O(shè)計(jì)時(shí)也可以不必在意控件的頂邊距，只設(shè)計(jì)好“內(nèi)外邊距”->“頂邊距”即可。

使用這種類型運(yùn)行后的實(shí)際頂邊距的計(jì)算，請(qǐng)看上一節(jié)的【一、左邊距、頂邊距與內(nèi)外邊距】->【2.“位置、大小”->“將position設(shè)置為relative_相對(duì)前一元素底部】。

2.“將position設(shè)置為absolute_絕對(duì)位置”

“將position設(shè)置為absolute_絕對(duì)位置”一般是小面積內(nèi)位置確定或控件間位置不規(guī)則使用比較方便。

默認(rèn)情況，金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器創(chuàng)建的控件都是“將position設(shè)置為absolute_絕對(duì)位置”的，這是因?yàn)闉榱诉m應(yīng)剛?cè)腴T的朋友。如果你已熟悉，建議改為“將position設(shè)置為relative_相對(duì)前一元素底部”。如當(dāng)父面板已用“將position設(shè)置為relative_相對(duì)前一元素底部”，那么他的子控件就會(huì)繼承父的這個(gè)類型。

三、水平居中

HTML元素水平居中非常常用。如本文檔中的圖片、主內(nèi)容面板。一般的電腦顯示分辨率都很大，現(xiàn)在基本都1920*1024以上，像本頁(yè)這種文檔的閱讀，如果都做成這么大，那么遇到1024*768這種小的分辨率，就需要顯示滾動(dòng)條，另外如果寬度大，人們?cè)陂喿x就頭部轉(zhuǎn)動(dòng)的幅度就會(huì)過(guò)大，體驗(yàn)都不好。這樣，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)，一般主內(nèi)容面板寬度可以設(shè)定為1024px，居中顯示即可，如本文檔。

1.面板水的平居中

是指“常用組件”->“面板”，創(chuàng)建一個(gè)容易的移動(dòng)網(wǎng)頁(yè)，在這個(gè)網(wǎng)頁(yè)創(chuàng)建一個(gè)“常用組件”->“面板”。然后做以下設(shè)置：

“對(duì)齊方式”設(shè)置為“水平居中對(duì)齊_運(yùn)行網(wǎng)頁(yè)后生效”(設(shè)計(jì)時(shí)不居中，運(yùn)行后居中)；“位置、大小”->“position”設(shè)置為“將position設(shè)置為relative_相對(duì)前一元素底部”；“顏色”->“顏色”設(shè)置為“clblue”，方便測(cè)試。如下圖：

如上圖，面板是我們隨意放置的，不是水平居中的，然后點(diǎn)“預(yù)覽網(wǎng)頁(yè)”，如下：

如上圖，預(yù)覽后是水平居中的，如果我們改變?yōu)g覽器的寬度，發(fā)現(xiàn)仍然還是水平居中的。

2.LayUI面板的水平居中

LayUI的面板水平居中很簡(jiǎn)單，只需要把“面板類型”設(shè)置為“容器面板layui—container”即可。

3.文本框中的文字的水平居中

文本框中的文字水平居中也很簡(jiǎn)單，把其屬性“文本屬性”->“水平對(duì)齊”設(shè)置為“Center—居中對(duì)齊”即可。一般來(lái)說(shuō)，文字居中是在父容器中居中，這時(shí)我們可以把文本框的屬性“位置、大小”->“與父的寬度同”和“自動(dòng)左邊距”都設(shè)置為“true”。如下圖，是在一個(gè)面板上創(chuàng)建了文本框，文字水平居中顯示：

預(yù)覽后文字是在面板中居中，效果如下圖：