顯示外部頁面 如何製作乙個HTML5頁面

2021-10-14 17:52:14 字數 2527 閱讀 4763

圖1 寫入頁面內容

整個網頁的高度設定為100%,即撐滿整個瀏覽器,為了更準確地控制元素,將預設的margin和padding屬性值都設為0,css**如下:

html,body
由於margin在父子元素之間具有傳遞性,標籤的上邊距經過最外層的標籤,傳遞給了標籤,導致頁面高度增大,圖2**現滾動條。因此,要給class名為「container」的元素設定一條透明的上邊框,以此來阻止margin的傳遞

圖2 頁面多餘的樣式

css**如下:

圖3-0 給body加入背景

以body元素為基準,設定外部div的position為absolute,實現絕對定位。將div元素的寬度設為100%,設定top屬性值為頁面高度的50%,設定text-align屬性值為center,使文字水平居中,css**如下:

圖3-1 內容居中

圖3-1中的文字內容仍處於偏下的位置,想要將其調至完全居中,使用translatey將div元素上移自身高度的50%,css**如下:

圖3-2 內容垂直居中

h1

p

採用當前最流行的扁平化設計,設定按鈕的長度、寬度和背景顏色,執行結果如圖5-0所示。css**如下

圖5-0 按鈕樣式

為了使整個按鈕的位置調整到水平居中,並且和上面的文字部分保持一定的距離,可以使用marign屬性,將上邊距設定為30px,左右邊距設定為auto,居中顯示,css**的.btn中只需加入**:

.btn
在目前常用的扁平化設計中,按鈕通常會有圓角效果,可以使用css3中的最新屬性border-radius給長方形的按鈕增加圓角樣式,css**的.btn中只需加入**:

圖5-1 頁面的靜態效果

在按鈕的選擇器後面加上:hover,表示滑鼠指標移動到按鈕上的狀態。使用width和height分別改變按鈕的寬度和高度,並調整line-height的值等於高度,實現文字的垂直居中。使用background-color改背景顏色為黃色。css**如下:

.btn:hover
這個動態效果還是比較生硬,可以用transition屬性設定過渡時間,使動態變化在一定時間內逐步完成,css**的.btn中只需加入**:

.btn
7.在手機上檢視頁面

由於移動端和pc端在尺寸、解析度等方面的不同,在頁面沒有做任何更改的時候,移動端介面上的內容會變得非常小以至於看不清。在html文件的中設定移動端的viewport顯示視窗,儲存**並測試,執行結果如圖7-0所示。html**如下:

圖7-0 手機檢視模式

但由於尺寸的縮小,段落的內容和螢幕邊界連在了一起,影響視覺效果。可以通過給外層盒子增加內邊距來保證所有元素離螢幕邊界都有一定的距離,同時使用calc()方法,將width縮小40px。儲存**並測試,執行結果如圖7-1所示。css**如下,css**中只需在.container選擇器中加入一下**:

圖7-1 所有功能完結

如何製作乙個vagrant box

因為要用的視窗應用,基於伺服器的各種box不能使用 曾經嘗試安裝桌面,沒有成功 所以試著基於ubuntu的虛擬機器建立自己的box。主要過程簡述如下 1 安裝virtualbox 2 安裝 vagrant root密碼 vagrant 使用者名稱 vagrant 使用者密碼 vagrant 4 完成...

Python裡面如何拷貝乙個物件

1.賦值 就是建立了物件的乙個新的引用,修改其中任意乙個變數都會影響到另乙個。in 168 a out 168 1,2,3 in 169 b a in 171 a out 171 1,2,3,4 in 172 b out 172 1,2,3,4 2.淺拷貝 建立乙個新的物件,但它包含的是對原始物件中...

如何製作乙個HTML網頁

標籤對中的第乙個標籤是開始標籤,第二個標籤是結束標籤 開始和結束標籤也被稱為開放標籤和閉合標籤 3.html 文件 網頁 html 文件描述網頁 html 文件包含 html 標籤和純文字 html 文件也被稱為網頁 web 瀏覽器的作用是讀取 html 文件,並以網頁的形式顯示出它們。瀏覽器不會顯...