「滿花屋」靜態網頁編寫的架構與解決點

2021-10-07 21:53:18 字數 1595 閱讀 3787

首先,在練習實現乙個網頁的過程中,第一步是要分析這個網頁的布局模式

在基本的結構框架下分配好布局再來進行對應區域內內容的實現

首先將整個網頁分成4大塊兒,分別是如上圖

1.logo區

2.目錄鏈結區

下面則是左右兩欄布局

整體意義上還是兩個大的盒子模組

插入,設定寬度,center居中。

建造乙個div盒子,寬度設定與上方logo同寬。

用ul li a寫入鏈結內容

再對a元素中的每個塊進行調整大小、內邊距、外邊距、居中。

兩欄左右布局在頁面布局中是非常常見的一種用法,比較常用的布局兩欄方法有

1.浮動布局。一般為左(右)寬度固定,右(左)邊選擇自適應的寬度。

2.絕對定位布局

通過position-absolute和margin-left兩個元素進行兩欄布局

3.浮動+bfc規則

滿屋花實驗

3.1左側3號盒子裡再內建兩個盒子

乙個使用者註冊乙個鮮花分類

使用者註冊盒子寫入基本的使用者密碼type input ,邊框只保留下劃線

下面三個分別兩個button 按鈕+乙個a 元素標籤,a 元素需display換成塊盒再一齊左浮動。或者三個a元素,設定樣式大小排列對其即可。

鮮花分類盒子中一樣ul li序列,左對齊,設定小標題左浮動與插入序列與樣式相同,下面序列千篇一律。

3.2右側

4號大盒子裡再分成4個小盒,分別是本站快訊、鮮花推薦、新品上市、鮮花導購。

本站快訊盒子中插入三張對應,設定大小、左間距,只要保證三張加起來的寬度不超過外層盒子寬度大小被擠下去即可。

新品上市盒子插入四張對應,同本站快訊盒子一樣。

鮮花導購盒子中劃分兩個小盒子,分別插入兩排li,設定標籤樣式,盒子中間空白部分通過設定盒子的寬度排擠開更加便捷。

最後再設定細枝末節如盒子的邊框radius、每個盒子的隔閡間距,完善的對齊方式使其於效果影象。

本次的練習再次熟練加深了css布局基本排本和浮動的熟練運用,就是主要扣細節,難度上就是考驗耐心了,不錯不錯。

取妻當如滿一花

過完春節,一段時間都在尋找以前的那種感覺,於是每天時間還是有很多空餘。再加上在春節期間真的是吃好 喝好 睡好。過完春節都這麼久了,到現在精力還是很過剩。於是,在心愛的美劇都還沒有輪流上陣的時候,過多的精力只好由國產電視劇集來代替。照道理來說,國產劇是打著燈籠也找不到乙個值得看的,可就在無意之間,在潘...

取妻當如滿一花

過完春節,一段時間都在尋找以前的那種感覺,於是每天時間還是有很多空餘。再加上在春節期間真的是吃好 喝好 睡好。過完春節都這麼久了,到現在精力還是很過剩。於是,在心愛的美劇都還沒有輪流上陣的時候,過多的精力只好由國產電視劇集來代替。照道理來說,國產劇是打著燈籠也找不到乙個值得看的,可就在無意之間,在潘...

網頁爬蟲 靜態網頁《一》

一 通過jsoup請求獲取 網頁審查元素。eg request path document doc jsoup.connect request path get 二 檢視需要扣取資料的標籤,通過日誌輸出 doc的body。eg log.v tag,body doc.body 三 檢視列印的日誌,找到...