css07家用電器分類

2022-05-15 07:37:42 字數 2971 閱讀 7185

1.建立乙個html頁面

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>家用電器分類

title

>

<

link

href

="css/type.css"

rel="stylesheet"

type

="text/css"

/>

head

>

<

body

>

<

div

id="type"

>

<

div

id="title"

>家用電器

div>

<

div

class

="secondtitle"

><

a href

="#"

>大家電

a>

div>

<

p><

a href

="#"

>平板電視

a>

<

a href

="#"

>洗衣機

a>

<

a href

="#"

>冰箱

a><

br/>

<

a href

="#"

>空調

a>

<

a href

="#"

>煙機/灶具

a>

<

a href

="#"

>熱水器

a><

br/>

<

a href

="#"

>冷櫃/酒櫃

a>

<

a href

="#"

>消毒櫃

a>

<

a href

="#"

>家庭影院

a>

p>

<

div

class

="secondtitle"

><

a href

="#"

>生活電器

a>

div>

<

p><

a href

="#"

>電風扇

a>

<

a href

="#"

>淨化器

a>

<

a href

="#"

>吸塵器

a><

br/>

<

a href

="#"

>淨水裝置

a>

<

a href

="#"

>掛燙機

a>

<

a href

="#"

>**機

a>

p>

<

div

class

="secondtitle"

><

a href

="#"

>廚房電器

a>

div>

<

p><

a href

="#"

>榨汁機

a>

<

a href

="#"

>電壓力鍋

a>

<

a href

="#"

>電飯煲

a><

br/>

<

a href

="#"

>豆漿機

a>

<

a href

="#"

>微波爐

a>

<

a href

="#"

>電磁爐

a>

p>

<

div

class

="secondtitle"

><

a href

="#"

>五金家裝

a>

div>

<

p><

a href

="#"

>淋浴/水槽

a>

<

a href

="#"

>電動工具

a>

<

a href

="#"

>手動工具

a><

br/>

<

a href

="#"

>儀器儀表

a>

<

a href

="#"

>浴霸/排氣

a>

<

a href

="#"

>燈具

a>

p>

div>

body

>

html

>

2.建立對應的type.css

#typeaa:hover#title.secondtitlepp a:hover
3.效果圖

CSS 07 CSS文字設定

1 doctype html 2 html 3 head 4 meta charset utf 8 5 title title 67 891011 1213 1415 16 style type text css 17.text 27style 28head 29 body 30 div class...

07 CSS背景和列表

vertical align 垂直對齊 baseline 預設。元素放置在父元素的基線上。super 垂直對齊文字的上標 sub 垂直對齊文字的下標。text top 把元素的頂端與父元素字型的頂端對齊 text bottom 把元素的底端與父元素字型的底端對齊。top 把元素的頂端與行中最高元素的...

前端應用 css 盒子模型 07

當子元素的尺寸超過父元素的尺寸時,需要設定父元素顯示溢位的子元素的方式,設定的方法是通過overflow屬性來設定。如圖 overflow的設定項 1 visible 預設值。內容不會被修剪,會呈現在元素框之外。2 hidden 內容會被修剪,並且其餘內容是不可見的。在父元素新增屬性 overflo...