CSS HTML 靜態網頁布局(三)

2021-09-02 02:37:39 字數 1918 閱讀 3328

寫完了靜態京東網頁,有一些注意事項需要總結:

解決方案有四種:

需要給父元素設定屬性: overflow:hidden

給父元素設定固定高。

將父元素也一起浮動(這個會影響到父元素的同級元素,個人不太建議)

在父元素的最後乙個子元素後邊再多增加乙個非浮動的子元素,然後給這個子元素加個clear. 例如

父元素不浮動,子元素不浮動,子元素可以填充父元素

父元素浮動,子元素不浮動,子元素可以填充父元素

父元素浮動,子元素浮動,子元素可以填充父元素

父元素不浮動,子元素浮動,子元素不可以填充父元素

金融

商業

結果:

所以說,就算幾個內聯元素或者水平塊元素的大小之和剛好等於它們父元素的大小,還是會放不下的,原因就在這。

inline元素和inline-block元素之間預設有間距,可以通過以下方法消除它們之間的預設間距。

可以在html中直接把元素寫在一行上,或者把閉合標籤和第二個開始標籤寫在一行,或兩行之間新增注釋,或直接去掉閉合標籤(最後乙個閉合標籤除外)

先設定子元素font-size,再設定父元素font-size:0px;

直接給元素flot:left

網頁中並沒有顯示出來這個元素,給它加乙個height屬性後就可以出來。

在寫順豐靜態網頁的時候遇到輸入文字框,查了資料,順便總結下

input標籤:

input標籤是單行文字框,不會換行,並且居中顯示,可以通過size屬性指定顯示字元的長度(在沒有限制寬和高的情況下,value屬性可以指定初始值,maxlength屬性指定文字框輸入的最大長度。可以通過height和width設定寬和高(不會增加行數,還是一行) 例:

結果:

textarea標籤:

textarea是多行文字輸入框(無缺省的value屬性值),文字區中可以容納無限數量的文字,其中的文字預設是等寬字型,可以通過rows和cols屬性來設定文字框的尺寸,也可以用css的height和width屬性來設定。例:

結果:

使用方法:

.classname

box-shadow引數解釋

1:inset

有inset 則為內陰影,沒有insert 則為外陰影,預設為外陰影。

2:offset-x

橫向陰影的大小,正值陰影在右邊,負值陰影在左邊,0的時候陰影中盒子後面,看不見的,如果有blur-radius值會有模糊效果。

3:offset-y

縱向陰影的大小,值同offset-x。

4:blur-radius

陰影的模糊程度,值越大,陰影越模糊。

5:spread-radius

陰影的擴大縮小,正值時,陰影擴大;負值時,陰影縮小,預設為0,和盒子同樣大。

box-radius屬性:

只有定了具體寬高的元素使用border-radius才會生效。

實現乙個圓: radius:50%

☆超出文字省略號顯示

*

網頁三列布局

聖杯布局 center left right css container column container left center right 效果如下圖所示 這種布局方式在極端情況下有個問題,當父容器寬度不斷變窄,窄到中間元素小於左側元素寬度時,雖然中間元素能夠優先顯示,但是布局會發生一些錯亂,如...

css html簡單的布局demo

於html介紹css作風。可以改變html塊狀布局,局更加美觀。接下來看乙個基礎布局的小樣例 效果例如以下 在上面的布局中。我們主要使用margin屬性來對div進行布局。在實際中。感覺margin屬性主要適用於塊與塊之間的布局,當我們要對盒子中的內容進行布局的時候,我們能夠使用盒子的還有乙個屬性 ...

如何使用table布局靜態網頁

html lang en width 100 cellpadding 0 cellspacing 0 align center width 100 align center width 100 align center bgcolor orange align center height 35 hr...