1. 程式人生 > >網頁佈局練習一

網頁佈局練習一

製作樣式如圖:


css程式碼:


html程式碼:


製作效果:


製作思路:

我的製作思路是先設定一個大的div使內容居中先,然後設定一個ul標籤,裡面有三個li標籤,li向右浮動,每個li標籤下又有一個ul標籤,四行li,每個設定取消浮動,第一個li包含H標籤,第二個包含img和P標籤,P標籤設定定位、設定背景圖片和字型顏色,第三個li中有一個P標籤和input,其中P標籤包含兩個span標籤,各自設定相應顏色,還有設定浮動和設定寬度把input按鈕推到右邊。還有前三個li裡面的內容算好寬度設定左右內間距,第四個li不設定內間距,設定邊框和顏色,就差不多做成了。