义爨: 务眍恹 CSS

1. 骡邃屙桢 CSS.

2. 项潢膻麇龛 CSS HTML.

3. 橡噔桦 皴脲牝铕 CSS.

4. 彦脲牝铕 镱 桎屙蜩翳赅蝾痼.

5. 彦脲牝铕 镱 觌囫耋.

6. 像邂漕屐屙螓 锺邂漕觌囫覃.

 

1.骡邃屙桢 CSS

枢 恹 镱祉栩 HTML -  琨 疣珈弪觇, 眍 邈 耦玟囹咫 蜞 躅蝈腓 箅篦螯 骅珥 襦轵铖蝠铊蝈脲, 黩 漕徉怆腓 礤泐 屐屙螓 镟疣戾蝠, 铗忮鬣桢 玎 忭屮龛 忤 耱疣龛鳆: 蝈汨 <font>, <b>, <i>, <bgcolor> 蜞 溧脲.

皖 磬 赅觐-蝾 祛戾眚 觐 耱疣龛 耱嚯 蜞觇 沭铎铉潢桁 礤麒蜞徨朦睇, 黩 耱嚯 耥 - 铗 矬螯 忮溴 " 龛牦溧". 翌沅 猁腩 镳桧蝾 疱龛 疣玟咫栩 疣珈弪牦 耱疣龛鳆 (HTML) 邋 忤珞嚯铄 铘铕祀屙桢 (CSS).

昨 蜞觐 CSS

CSS (Cascading Style Sheets) - 赅耜噤睇 蜞犭桷 耱桦彘.

羊桦 - 磬犷 镟疣戾蝠钼, 玎溧栝 忭屮礤 镳邃耱噔脲龛 钺牝. 袜镳桁屦, 矬耱 禧 躅蜩, 黩钺 怦 玎泐腩怅 镥疴钽 箴钼 (蝈汨 <h1>) 磬 钿眍 耱疣龛鲥 桁咫 牮囫睇 鲡弪, 疣珈屦 - 24 猁腓 磬镨襦睇 牦瘃桠铎, 磬 漯筱铋 耱疣龛鲥 猁腓 猁 耔礤泐 鲡弪, 疣珈屦 - 12. 袜 玎泐腩忸 -  钺牝, 鲡弪, 疣珈屦 磬麇痱囗桢 -  镟疣戾蝠. 橡铖蝾 镟疣戾蝠 磬泐 钺牝 潆 疣珥 耱疣龛 疣珥, .. 铐 铗腓鬣 耱桦屐.

枢驿 屐屙 磬 耱疣龛鲥 祛驽 桁弪 疋铋 耱桦 (镟疣沭圄, 玎泐腩怅, 腓龛, 蝈犟...). 袜犷 耱桦彘 怦艴 屐屙蝾 磬琨忄 蜞犭桷彘 耱桦彘.

篷腓 潆 钿眍泐 屐屙蜞 玎溧眍 礤耜铍 耱桦彘 (赅 镳桁屦 玎泐腩怅囔), 蝾 镳桁屙弪 赅耜噤桊钼囗桢, 觐蝾痤 铒疱溴弪 镳桀痂蝈 蝾泐 桦 桧钽 耱桦.

橡彖祗耱忄 CSS

CSS 镱玮铍弪 珥圜栩咫 耦牮囹栩 疣珈屦 觐溧 皲咫囹 邈 麒蜞徨朦睇.

CSS 镱玮铍弪 玎溧忄螯 蜞觇 镟疣戾蝠, 觐蝾瘥 礤朦 玎溧螯 蝾朦觐 琨觐 HTML. 袜镳桁屦, 筢疣螯 镱澉屦觇忄龛 耨铌.

CSS 镱玮铍弪 脲汴 桤戾螯 忭屮龛 忤 耱疣龛. 橡邃耱噔, 恹 皲咫嚯 襦轵 桤 50 耱疣龛, 磬 觐蝾瘥 怦 玎泐腩怅 耔礤泐 鲡弪. 族疱 赅觐-蝾 怵屐, 恹 玎躅蝈腓 镱戾螯 耔龛 鲡弪 磬 珏脲睇. 锣 镳桎弪 镳铋蜩顸 镱 怦屐 50 耱疣龛鲟 镱戾螯 鲡弪 耦铗忮蝰蜮簋 囹痂狍蝈. CSS 忄 镳桎弪 皲咫囹  腓 钿桧 疣, 蜞犭桷 耱桦彘.

CSS 疋玎磬 蜞 磬琨忄屐 犭铟磬 忮瘃蜿 襦轵.

 

2.项潢膻麇龛 CSS HTML

砚琨忄龛. 铎 耠篦噱 耱桦 铒桉帼蝰 铗溴朦眍 羿殡 疣聒桊屙桢 *.css. 矬耱 磬 羿殡 耦 耱桦扈 Mystyle.css. 项潢膻麒 邈 磬祗 HTML-漕牦戾眚, 溴豚弪  镱祛 蝈汔 <link>, 镱戾屐钽 <head></head>.

<head>

<link rel=攕tylesheet type=攖ext/css href=擬ystyle.css>

</head>

项潢膻鬣螯 祛骓 钿眍怵屐屙眍 礤耜铍 羿殡钼, 潆 钽 祛骓 漕徉怆螯 礤耜铍 蝈泐 <link>.

马邃疱龛 漕牦戾眚. 铎 耠篦噱 耱桦 铒桉帼蝰 襦祛 HTML-耱疣龛鲥, 蝈沐 <style></style>, 觐蝾瘥 镱戾弪 <head></head>.

<style type=攖ext/css>

/* 玟羼 铒桉噱 襦扈 耱桦 */

</style>

物屦囹桠眍 铒疱溴脲龛 (忭邃疱龛 蝈). 羊桦 磬珥圜噱蝰 觐黻疱蝽铎 蝈泱. 蒡 溴豚弪 矬蚋 磬珥圜屙 蝈泱 囹痂狍蜞 style, 珥圜屙桢 觐蝾痤泐 怆弪 铒桉囗桢 耱桦. 莉痂狍 style 镱滗屦骅忄 怦 蝈汨, 铗钺疣驵屐 磬 耱疣龛鲥.

<bodystyle=color: blue; background-color: #FFFFFF>

褥镱痱. 褥邋蝰 忤潴 磬珥圜屙桢 耱疣龛鲥 耱桦, 桁镱痱桊钼囗眍泐 漯筱铋 耱疣龛鳆 镱 甯 URL-噤疱耋. 橡铒桉噱蝰 桁镱痱 蝈沐 <style></style>.

<style type=攖ext/css>

@import: url(http://www....)

</style>

 

3.橡噔桦 皴脲牝铕 CSS

CSS, 赅 膻犷 琨, 桁邋 疋铋 耔眚嚓耔. 礤 礤 龛 屐屙蝾, 龛 镟疣戾蝠钼, 龛 蝈泐. 礤 羼螯 镳噔桦. 橡噔桦 耦耱铊 桤 皴脲牝铕 犭铌 钺怆屙 耱桦彘, 玎觌屙眍泐 翳泱痦 耜钺觇:

css2

燕 犭铌 钺怆屙 耱桦彘 耦耱铊 桤 疋铋耱 桴 珥圜屙栝, 疣玟咫屙睇 蝾麝铋 玎蝾:

css3

橡桁屦

body{

background: blue;

color: white;

}

h1{

color:red;

}

h2{

color:yellow;

}

 

4.彦脲牝铕 镱 桎屙蜩翳赅蝾痼

磬 镳桁屦 赅麇耱忮 皴脲牝铕钼 桉镱朦珙忄腓顸 屐屙螓 耱疣龛鳆: body, h1, h2. 皖 黩 溴豚螯, 羼腓 磬 html-耱疣龛鲥 羼螯 礤耜铍 钿桧嚓钼 屐屙蝾 (磬镳桁屦, 镟疣沭圄钼), 禧 躅蜩, 黩钺 蝈犟 怦艴 镟疣沭圄钼 猁 麇痦, 钿眍泐 桤 龛 - 痤珙恹 鲡弪铎. 翌沅 磬 镱磬漕徼蝰 箨噻囹 箜桕嚯 桎屙蜩翳赅蝾 潆 钽 镟疣沭圄 耦玟囹 潆 礤泐 耱桦.

HTML 桎屙蜩翳赅蝾 屐屙蜞 玎溧弪 镳 镱祛 镟疣戾蝠 id, 赅麇耱忮 珥圜屙 觐蝾痤泐 箨噻噱蝰 箜桕嚯铄 桁. 袜镳桁屦:

<p id="pink">义犟 镟疣沭圄 桎屙蜩翳赅蝾痤 (id).</p>

褥屙 祛骓 溧忄螯 膻猁, 牮铎 玎疱珏疴桊钼囗睇 耠钼 ( 龛 铗眍蝰 桁屙 蝈泐 镟疣戾蝠钼 屐屙蝾 HTML CSS), 磬镳桁屦, 礤朦 桎屙蜩翳赅蝾痼 溧螯 桁 body.

橡桁屦 CSS:

p{
 color:black;
}
p#pink{
color:pink;
}

帖 耥圜嚯 箨噻嚯 皲咫囹 蝈犟 怦艴 镟疣沭圄钼 麇痦, 蝈犟 镟疣沭圄 id "pink" 皲咫囹 痤珙恹. 袜 皴脲牝铕 耦耱铊 溧眄铎 耠篦噱 桤 屐屙蜞 (p), 疣玟咫栩咫 (#) 桁屙 桎屙蜩翳赅蝾疣 (pink).

锣骓 玎镱祉栩, 黩 磬 耱疣龛鲥 祛驽 猁螯 蝾朦觐 钿桧 桎屙蜩翳赅蝾 (id). .. 潆 磬泐 镳桁屦 礤朦 耦玟囹 溻 镟疣沭圄 id "pink", 镟疣沭圄 蜞觇 id 祛驽 猁螯 蝾朦觐 钿桧. 皖 赅驿 镟疣沭圄 祛驽 桁弪 疋铋 桎屙蜩翳赅蝾, 磬镳桁屦, 祛骓 耦玟囹 镟疣沭圄 id="green" 玎溧螯 耱桦 潆 钽 镟疣沭圄 蜞犭桷 耱桦彘

 

5.彦脲牝铕 镱 觌囫耋

镳桁屦 恹 禧 耦玟嚯 镟疣沭圄 痤珙恹 鲡弪铎 蝈犟蜞 箨噻嚯, 黩 蜞觐 id 祛驽 猁螯 蝾朦觐 钿桧. 皖, 黩 溴豚螯, 羼腓 禧 躅蜩, 黩钺 痤珙恹 鲡弪 蝈犟蜞 猁 溻篚 桦 蝠艴 镟疣沭圄钼. 碾 钽 HTML 耋耱怏弪 镟疣戾蝠 class, 赅麇耱忮 珥圜屙 觐蝾痤泐 箨噻噱蝰 邈 桁.

泥忄轵 漕徉忤 磬 html-耱疣龛鲶 妁 镟痼 镟疣沭圄钼 镳桉忸桁 桁 class="pink":

<pid="pink">泪玎 桎屙蜩翳赅蝾痤</p>

<p class="pink">泪玎 觌囫耦 (class) pink</p>

橡桁屦 CSS:

p#pink
{
 color:pink;
}
p.pink
{
 color:pink;
}

项溻邃屐 镳铎彐篁铟睇 栩钽:

羼腓 怦 镱漕犴 屐屙螓 (磬镳桁屦, 怦 玎泐腩怅 h1) 漕腈睇 桁弪 钿桧 耱桦, 蝾 皴脲牝铕 耦耱铊 蝾朦觐 桤 钽 屐屙蜞 (磬镳桁屦, p{color:black;})

羼腓 屐屙 (膻犷: 噌玎, 玎泐腩忸...) 漕腈屙 铗腓鬣螯 铗 怦艴 铖蜞朦睇, 蝾 屐 镳桉忄桠噱蝰 桎屙蜩翳赅蝾 (id) 疣玟咫栩咫屐 蜞犭桷 耱桦彘 怆弪 珥嚓 疱蜿 (#), 磬镳桁屦, p#pink{color:pink;} .

羼腓 驽 磬 耱疣龛鲥 狍溴 礤耜铍 屐屙蝾 钿桧嚓钼 耱桦屐, 蝾 桁 镳桉忄桠噱蝰 觌囫 (class) 疣玟咫栩咫屐 蜞犭桷 耱桦彘 怆弪 珥嚓 蝾麝 (.), 磬镳桁屦, p.pink{color:pink;}.

桎屙蜩翳赅蝾 桁邋 犷脲 恹耦觇 镳桀痂蝈, 麇 觌囫. 项铎, 羼腓 潆 赅觐泐-腓犷 屐屙蜞 狍溴 箨噻囗 觌囫, 桎屙蜩翳赅蝾 (黩 礤 镳铗桠铕鬻栩 镳桧鲨镟 CSS), 蝾 镳桁屙屙 狍溴 耱桦 桎屙蜩翳赅蝾疣.

 

枢 箧 箫铎桧嚯铖 桎屙蜩翳赅蝾瘥 觌囫覃 祛骓 玎溧忄螯 膻猁 屐屙蜞 html. 皖 鬣耱 猁忄弪 蜞, 黩 禧 躅蜩 礤耜铍 疣珥 屐屙蝾 恹溴腓螯 钿龛 耱桦屐, 磬镳桁屦, 珏脲睇 鲡弪铎. 蜞觐 耠篦噱 祛骓 忸耧铍钼囹 箜梏桷桊钼囗睇 皴脲牝铕铎. 蜞觇 皴脲牝铕圊 桁 屐屙蜞 礤 箨噻噱蝰, 箨噻帼蝰 蝾麝 桦 疱蜿, 赅 镳桤磬 觌囫襦 桦 桎屙蜩翳赅蝾疣 桁. 袜镳桁屦:

 

.red{

color:red;

}

#yellow{

color:yellow;

}

 

暑眚尻耱睇 皴脲牝铕

帖 躅蜩, 黩钺 牦瘃桠 猁 恹溴脲 妁 珏脲睇 鲡弪铎. 翌沅 蜞犭桷 耱桦彘 禧 玎镨 皴脲牝铕 镱 屐屙蝮, ..

i{ color:green;}

皖 黩, 羼腓 禧 玎躅蜩, 黩钺 礤 忮顸 牦瘃桠睇 蝈犟 恹溴腭 珏脲睇, 腓 蝾, 觐蝾瘥 磬躅滂蝰 镟疣沭圄圊. 碾 钽 禧 忭羼屐 桤戾礤龛 蜞犭桷 耱桦彘:

pi{ color:green;}

亦 禧 箨噻嚯, 镳桁屙螯 溧眄 耱桦 屐屙蜞 i, 觐蝾瘥 磬躅蝰 屐屙蜞 p. 袜玮囗 屐屙蝾 镳 铎 铗溴 镳钺咫铎. 亦觇 皴脲牝铕 磬琨忄 觐眚尻耱睇扈.

灭箫镨痤怅 皴脲牝铕钼

篷腓 犭铌 钺怆屙 耱桦彘 潆 礤耜铍桴 皴脲牝铕钼 耦怙噤帼 (磬镳桁屦, 禧 躅蜩, 黩钺 玎泐腩怅 镥疴 蝠艴 箴钼礤 猁腓 珏脲眍泐 鲡弪), 蝾 桴 祛骓 胥痼镲桊钼囹. 碾 钽 皴脲牝铕, 觐蝾瘥 狍溴 镳桁屙螯 钿桧 耱桦, 眢骓 镥疱麒耠栩 麇疱 玎蝮. 橡桁屦:

h1, h2, h3{ color:green;}

橡邃镱腩骅, 黩 牮铎 鲡弪, 禧 躅蜩 玎溧螯 磬 玎泐腩怅囔 疣珈屦. 翌沅 禧 祛驽 镳铖蝾 漕镨襦螯 磬 蜞犭桷 耱桦彘:

h1, h2, h3{ color:green;}

h1{ font-size:18px;}

h2{ font-size:16px;}

h3{ font-size:14px;}

磬 玎泐腩怅钼 狍溴 箨噻囗睇 疣珈屦, 眍 怦 铐 狍潴 珏脲眍泐 鲡弪.

 

 


 

6. 像邂漕屐屙螓 锺邂漕觌囫覃

枢 猁腩 耜噻囗 恹, CSS 镳桁屙弪 屐屙蜞 HTML. 皖 羼螯 礤耜铍 屐屙蝾, 觐蝾瘥 礤 耋耱怏弪 HTML, 眍 铐 镳桉篁耱怏 磬 耱疣龛鲥 (镥疴 狍赈 耠钼 镥疴 耱痤赅 噌玎鲟). 亦觇 屐屙螓 磬琨忄 锺邂漕屐屙蜞扈. 褥 祛骓 玎溧忄螯 耱桦, 蜞赕 赅 屐屙蜞 HTML.

锺邂漕屐屙蜞 铗眍:

p:first-letter{ color:red; }

p:first-letter{

color:red;

}

p:first-line{

color:blue;

}

像邂漕觌囫覃

CSS 耋耱怏 麇螓疱 锺邂漕觌囫襦, 铐 镱玮铍 疣犷蜞螯 耦 耨赅扈. 枢 恹 珥噱蝈, 耨铌 羼螯 麇螓疱 耦耱龛: 镳铖蜞, 嚓蜩忭, 镱皴眄 蜞, 磬 觐蝾痼 磬忮溴 牦瘃铕. 杨耱龛 耨铌 玎忤耔 铗 溴轳蜮 镱朦珙忄蝈, 狃囿珏, 玎忤耔祛耱 铗 桴 溴轳蜮栝 祛驽 镳桁屙螯 疣珥 耱桦. 碾 铒桉囗 桴 耱桦彘 耋耱怏 锺邂漕觌囫覃.

 

HTML 怦 屐屙螓 祛骓 疣玟咫栩 磬 溻 蜩镟: 犭铟睇 耱痤黜.

岭铟睇 屐屙螓 忤珞嚯 耦玟帼 襦祛耱蝈朦眢 耱痼牝箴眢 邃桧桷 - 犭铌. 龛 祛骓 铗礤耱, 磬镳桁屦, 屐屙螓 H1-H6, P, DIV. 亦觇 屐屙螓 铗溴 铗 漯筱桴 噌玎鲰 铗耱箫囔.

羊痤黜 屐屙螓 恹忸蝰 腓礤轫铋 耱痤觐. 龛 祛骓 铗礤耱, 磬镳桁屦, 屐屙螓 I, B, U, S 漯筱桢.

岭铌 桁邋 镳祛筱铍簋 纛痨:

 

http://www.site-do.ru/images/css29.gif

 

闰嚓, 犭铌 羼螯 耦溴疰桁铄, 磬镳桁屦, 潆 屐屙蜞 p -  蝈犟. 骂牮筱 耦溴疰桁钽 羼螯 铗耱箫 (padding), 铐 耠箧囹 潆 蝾泐, 黩钺 蝈犟 礤 镳桁嚯 怙腩蝽簋 沭囗桷 犭铌. 灶 铗耱箫钼 蜞觐 驽, 赅 耦溴疰桁钽.

青蝈 桎弪 沭囗桷 犭铌 (border), 觐蝾疣 祛驽 猁螯 赅 忤滂祛, 蜞 礤忤滂祛.

亦赕 犭铌 桁邋 镱 (margin), 觐蝾瘥 玎溧 漕镱腠栩咫铄 疋钺钿眍 镳铖蝠囗耱忸 忸牮筱 犭铌. 灶 镱脲 镳铉疣黜, .. 耜忸琰 礤泐 镳铖忮麒忄弪 纛 痤滂蝈朦耜钽 屐屙蜞.

朽珈屦 犭铌, .. 邈 痂磬 (width) 恹耦蜞 (height), 铒疱溴 耦溴疰桁.  磬漕 玎镱祉栩: 镱 铗耱箫 礤 篦栩帼蝰 疣珈屦 犭铌.

 

项玷鲨铐桊钼囗桢 犭铌钼

暑沅 怦 屐屙螓 铗钺疣驵 铌礤 狃囿珏疣 疋屦躞 忭桤, 镱 忮痱桕嚯, 蝾 镱潢, 赅觐 铐 耠邃簋 漯筱 玎 漯筱铎 html-觐溴 , 蝾 蜞觐 镱玷鲨铐桊钼囗桢 屐屙蝾 磬琨忄弪 镱玷鲨铐桊钼囗桢 眍痨嚯铎 镱蝾赍.

项 疋铄 耋蜩 眍痨嚯 镱蝾 龛麇 礤 铗腓鬣弪 铗 镱玷鲨铐桊钼囗 屐屙蝾 HTML. 潆 忮瘃蜿 蜞觐 耱疣龛鳆 徨 CSS, 磬 镳桫腩顸 猁 桉镱朦珙忄螯 蜞犭桷, 玎 礤桁屙桢 漯筱桴 忄痂囗蝾. CSS 驽 磬 镳邃铖蜞怆 漯筱桢 聃屐 镱玷鲨铐桊钼囗:

         噌耦膻蝽铄 镱玷鲨铐桊钼囗桢

         铗眍耔蝈朦眍 镱玷鲨铐桊钼囗桢

         镫噔帼 犭铌钼 祛溴朦

碾 铒疱溴脲龛 聃屐 镱玷鲨铐桊钼囗 桉镱朦珞弪 疋铋耱忸 position, 铐 祛驽 镳桧桁囹 麇螓疱 珥圜屙, 耦铗忮蝰蜮簋 恹狃囗眍 聃屐 镱玷鲨铐桊钼囗:

泪耦膻蝽铄 镱玷鲨铐桊钼囗桢

橡 铋 聃屐 镱玷鲨铐桊钼囗 疣耧铍铈屙桢 犭铌 磬 耱疣龛鲥 礤 玎忤耔 铗 蝾泐, 赅觐 戾耱 html-觐溧 疣耧铍铈屙 铗 犭铌. 朽耧铍铈屙桢 赅驿钽 犭铌 玎溧弪 箨噻囗桢, 赅觐 戾耱 疣磬 铗钺疣玷螯 溧眄 犭铌. 碾 钽 耋耱怏 麇螓疱 疋铋耱忄:

悟眍耔蝈朦眍 镱玷鲨铐桊钼囗桢

橡 铗眍耔蝈朦眍 镱玷鲨铐桊钼囗梃 犭铌 磬漕 玎溧螯 疋铋耱忸 position:relative 疋铋耱忄 耢妁屙. 鸯妁屙桢 铎 耠篦噱 狍溴 镳铊聃钿栩 礤 铗眍耔蝈朦眍 "痤滂蝈朦耜钽" 屐屙蜞 (赅 镳 噌耦膻蝽铎 镱玷鲨铐桊钼囗梃), 铗眍耔蝈朦眍 襦祛泐 犭铌 眍痨嚯铎 镱蝾赍.

#blok1, #blok2, #blok3

{ border:1px solid red; width:150px; height:50px; }

#blok2

{ position:relative; left:50px; top:25px; }

http://www.site-do.ru/images/css49.gif

想噔帼 犭铌
蒡 犭铌 礤朦 镱玷鲨铐桊钼囹 蝾黜铖螯 漕 镨犟咫, 赅 镳邃簌桴 聃屐圊, 眍 桁屙眍  聃屐 镱玷鲨铐桊钼囗 铟屙 疣耧痤耱疣礤眄. 铃 镫噔帼 犭铌钼 钺躅滂蝰 疱潢栝 襦轵, 箧 皲咫囹 "疱玷眍怏" 忮瘃蜿 襦轵 徨 龛 忸怦 礤忸珈铈眍.

亦觇 犭铌 祛泱 疋钺钿眍 镥疱戾螯 镱 耱疣龛鲥, 镱漕犴 钺疣珙 忮潴 皴 赅痱桧觇 HTML, 恹痤忭屙睇 镱祛 镟疣戾蝠 align.

想噔帼 犭铌 铒疱溴 疋铋耱忸 float, 觐蝾瘥 铒疱溴弪 狍溴 腓 犭铌 镫噔帼 赅牦 耱铕铐 铐 狍溴 镥疱戾螯. 骂珈铈睇 蝠 忄痂囗蜞:

         none - 犭铌 礤 镥疱戾弪 镱玷鲨铐桊箦蝰 耦汶囫眍 疋铋耱怏 position.

妈潲 疋铋耱忄 犭铌钼

枢 恹 镱祉栩, 屐屙螓 祛泱 猁螯 犭铟睇扈 耱痤黜 (箴铌 8). 项 箪铍鬣龛 潆 赅驿钽 屐屙蜞 邈 忤 铒疱溴脲, 蜞 屐屙螓 div p 怆 犭铟睇扈, span a - 耱痤黜. 皖 桧钽溧  礤钺躅滂祛 桤戾龛螯, 潆 钽 桉镱朦珞弪 疋铋耱忸 display. 蒡 疋铋耱忸 祛驽 镳桧桁囹 钿眍 桤 麇螓疱 珥圜屙栝.

display:block - 蒡 珥圜屙桢 溴豚弪 屐屙 犭铟睇.

display:inline - 蒡 珥圜屙桢 溴豚弪 屐屙 耱痤黜.

display:list-item - 蒡 珥圜屙桢 溴豚弪 膻犷 屐屙 鬣耱 耧桉赅.

display:none - 蒡 珥圜屙桢 筢桊噱 屐屙 耦 耱疣龛鳆

袜漕 耜噻囹, 黩 CSS 羼螯 妁 钿眍 疋铋耱忸 磬 镥疴 忡汶 镱躅驽 磬 display:none. 蒡 疋铋耱忸, 铗忮鬣邋 玎 忤滂祛耱 犭铌 - visibility. 雾 祛驽 镳桧桁囹 溻 珥圜屙: visible (铗钺疣驵螯) hidden (皲咫囹 礤忤滂禧).

央铊

篷腓 恹 箪邋蝈 疣犷蜞螯 赅觐-腓犷 沭圄梓羼觐 疱溧牝铕, 蝾 忄 镱蝽, 黩 铉磬鬣弪 溧眄 蝈痨桧. 碾 铖蜞朦睇 镱耥. 橡邃耱噔 皴徨 祉铈羼蜮 腓耱觐 狍爨汨, 磬 赅驿铎 桤 觐蝾瘥 黩-蝾 磬镨襦眍 桦 磬痂耦忄眍. 帖 忤滂 蝾朦觐 耦溴疰囗桢 忮瘐礤泐 腓耱, 眍 羼腓 禧 邈 耥桁屐, 蝾 筲桎桁 耦溴疰囗桢 耠邃簋泐 腓耱 ..

亦赕 CSS, 禧 祛驽 耦玟囹 礤耜铍 耠铄, 磬 赅驿铎 疣珈羼蜩螯 礤钺躅滂禧 屐屙螓 镳铐箪屦钼囹 耠铊 镱祛 疋铋耱忄 z-index. 族 犷朦 眍戾, 蝈 恹 耠铋 磬躅滂蝰 耱铒赍 耠铄. 袜镳桁屦, 羼腓 皲咫囹 6 耠铄, 蝾 镱朦珙忄蝈朦 耥圜嚯 筲桎栩 桁屙眍 耠铋 z-index:6.

央铊 鬣耱 桉镱朦珞 镳 耦玟囗梃 疣耜瘥忄桴 戾睨.

1

function books()

{ document.getElementById("book").style.visibility='visible'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; }

 

function movies()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='visible'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; }

 

function musiks()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='visible'; document.getElementById("game").style.visibility='hidden'; }

 

function games()

{ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='visible'; }

 

剜 2

项潢膻麒螯 js

剜 3

<div id="menu">

<a href="#" onMouseOver="books();">薯桡</a>

<a href="#" onMouseOver="movies();">澡朦禧</a><a href="#" onMouseOver="musiks();">腆琨赅</a>

<a href="#" onMouseOver="games();">茹瘥</a>

</div>