PC端網頁布局 世紀佳緣(三)頭部

2021-10-08 14:29:52 字數 1793 閱讀 5084

來看頭部,做好的效果圖如下:

接下來就進入主題吧~~

先來分析一下:

有兩張,乙個填寫賬號密碼和登入按鈕的登入框,其他登入方式,(因為海外登入方式與前面純圖示的不太一樣,這裡又是只做了個大致的樣式,所以就把海外使用者登入與忘記密碼做在了乙個大div塊中,大家可以按照自己的想法自行修改)

很明顯,除了,後面的內容做在了乙個大塊中,其中每乙個小塊又可以使用div來做,而div是塊標籤,要想一行顯示,就需要使用浮動了

初步做好長這樣:

去掉灰色(body的顏色)和粉色(頭部顏色)之後就是和原圖一樣了~

html**如下:

其他登入

海外使用者登入

忘記密碼

重要部分上場了:

css(有三處背景顏色注釋,可以去掉注釋看一下效果是什麼樣子的):

body

/* 頭 */

.new_header

/* 為什麼要設定a標籤的浮動呢?

此時a標籤要和後面的form_login的div標籤一行顯示,所而div是塊元素,獨佔一行,所以要給div塊加上浮動,但是只給div塊加浮動,會將a標籤擠到右邊,所以a標籤也加浮動

*/.new_header a

/* 整個form_login塊往左移動20個畫素,並加20個畫素的上邊距 */

1.button標籤總是再帶乙個自己原有的樣式,搞不明白應該怎麼樣去掉

2.input輸入框之間有一塊莫名其妙的邊距,怎麼也去不掉,並且高低也不一樣,button的高低也不一樣

1.這是button按鈕的邊框造成的 ,加border:0去掉邊框就可以了

兩個輸入框和button按鈕是行內塊元素,它們可以挨在一起,但是挨在一起的時候呢,中間會存在空隙以及大小寬高等讓人很無奈的問題,這個時候,可以使用浮動來解決這個問題,所以在這裡加了float:left,問題解決

PC端網頁布局 世紀佳緣(二)頁面初搭建

咱們首先來搭建一下整體的大結構 效果如下 每一塊呢,都是使用div塊做的,並不難理解 除了頭部之外,每一塊都是外面乙個大的div,裡面再包乙個小的div,也就是所謂的通欄和版心 由於個人問題,版心設定了兩個寬度的,大家可以根據個人需求來設計 html 如下所示 頭部 2.2億註冊會員 優質會員 藍色...

rem布局實現pc端網頁自適應

首先,將html的font size設定為100px,方便計算然後將body的font size設定為正常值,例如 12px,不然其他的dom都會繼承html的font size,導致效果差距巨大,再在index.html頁面中寫動態設定font size字型大小的js 當瀏覽器發生變化的時候,內容...

PC端網頁特效

動態得到相關元素的位置 大小 1.獲得元素距離帶有定位的父元素的位置 2.獲得元素自身的大小 返回的數值都不帶單位 offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值 offsetleft offsetwidth 可以得到元素的大小 寬度和高度 是包含padding border w...