某人專用教程(第4天) 開始布局

2021-09-01 01:44:37 字數 1991 閱讀 9492

今天就正式開始寫**了。

額。。hello world不用講了吧?

我們直接開始寫一些布局。

第乙個是單欄布局。也就是只有一行的布局。這種布局一般有2種情況。一種是定寬度的。比如寬為800px,另一種是100%寬度的俗稱自適應瀏覽器寬度。

不管哪種形式,單欄布局,就是相當於把所有內容放在乙個容器內。一般,這種純作為布局容器使用的情況下,我們都使用div標籤。

html**是這樣的

this is a layout box.

給這個div乙個class名叫box,主要是為了方便控制這個div。

固定寬和自適應寬度,這兩種說法,都說的是這個容器的表現樣式~那麼,這就是css需要做的事情啦。

首先,我們來寫100%寬度的css

.box
但實際上,對於這種情況,我們根本不需要寫任何css。因為本來本來div預設就是display:block形式的。而display:block形式的元素,預設就是width:100%。

接下來,我們來寫寬度是800px的css啦。

.box
通過設定width屬性值為800px,我們就可以方便的設定這個容器的寬度了。

可是看一下呈現效果。。是不是偏向頁面左側對齊了?但是現在看到的大部分網頁,都是居中對齊的,對吧?怎麼讓這個東西在瀏覽器中居中對齊呢?如果看了那個css手冊,會不會第一反應就是text-align:center;呢?然後,我們把css寫成這樣子:

.box
開啟瀏覽器看看,是不是好使了?

額。。看你用什麼瀏覽器了。如果用chrome什麼的,估計就沒有自己猜測成功的感覺了。在老版本ie瀏覽器下,估計自己會小小的興奮下。轉到非ie下,就鬱悶了。感情不是所有瀏覽器都好使的。(比較新版的ie我木有實驗,你當我懶吧,懶死我算了)。那麼這時候我們就要解決瀏覽器所謂的「相容性」問題了。

那麼,怎麼樣使所有瀏覽器都相容呢?

其實乙個塊級元素的居中,並不是用text-align:center完成的。你看看text-align,字首是text啊,也就是定義文字的。文字可不是乙個大div。。

css中的margin屬性提供了一種margin-left:auto;margin-right:auto的方式,專門做這件事情。

margin是css中最常見的屬性之一。表示乙個容器的外邊距。margin屬性可以拆分成margin-left,margin-right,margin-top,margin-bottom這四個方向的邊距。當然也可以直接用margin屬性,通過一定規則來合併四個方向的外邊距。

合併的規則是從top值開始順時針轉圈。

margin:top right bottom left。

如:margin:10px 20px 30px 40px;

如果其中,左右的值一樣。。那麼可以寫成margin:top left/right bottom。也就是將左右兩側的值合併在一起,也相當於,如果margin-left和margin-right相等。則可以不寫margin-left的值。如:margin:10px 20px 30px 20px可以寫成margin:10px 20px 30px;

如果,左右的值一樣,上下的值也一樣,就可以合併成margin:top/bottom right/left。相當於後面兩個值都可以不寫。如:margin:10px 20px 10px 20px可以寫成:margin:10px 20px;

如果四個值一樣,就直接寫成margin: top/right/bottom/left。如margin:10px 10px 10px 10px可以寫成margin:10px;

所以,剛才說了,塊級元素的居中,採用margin-left:auto;margin-right:auto來表示,其實通常合併寫為margin:0 auto;這個0 一般是上下邊距。值也可以不為0,根據設計稿來調整。

最後,我們將css**寫成

box
就完成了乙個固定寬度的單欄布局。

堅持 第48天 30天開始看Web基礎了

2016 9 25 完成了 1 看了30天 2 看了專套本 3 9 18看到了3 39 00。在觸控的開發教訓 注意拖拽 注意on load 裡面的 注意pipes 和 pipe 注意pipe 和 piepe 注意for迴圈裡面可用break ps裡的神器delete,複製刪除圖層 if this....

堅持 第238天 開始接觸shell指令碼了

sudo ls lucy 臨時以root身份去執行ls lucy命令 crond也是乙個服務 systemctl status crond 注 d是daemon守護程序 for i in 迴圈一百次 do echo i done date d是12 10 17,而date f是2017 12 10 ...

第476天 開始學習伽馬的《設計模式》

這是一本關於設計模式的書,它描述了在物件導向軟體設計過程中針對特定問題的簡介而優雅的解決方案。這不是一本讀完一遍就可以束之高閣的書。我們希望你在軟體設計過程中反覆參閱此書,以獲取設計靈感。學習這些模式,將有助於讀者設計出優秀的物件導向設計。每乙個模式描述了乙個在我們周圍不斷重 生的問題以及該問題的解...