仓酷云

标题: DIV教程之英文教程:用CSS把持和操纵BODY标志 [打印本页]

作者: 再见西城 时间: 2015-1-15 23:35
标题: DIV教程之英文教程:用CSS把持和操纵BODY标志
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
网页制造POLUOLUO文章简介：利用CSS利用你的body元素.
Let’ssayyouwanttochangethecolorofyourlinksonjustyourcontactpagetored.Theyareblueoneveryotherpage,butitjustmakessenseforthemtoberedonyourcontactpage(forsomereason).Thereareacouplewaysyoucouldgoaboutthis.

Youcoulddeclareaseparatestylesheetforyourcontactpage.Thisisn’tideal,becauseit’sredundant.Ifyoumakeanyotherchanges,you’llalwayshavetomakethembothonthemainstylesheetandthecontactpagestylesheet.
Youcouldgiveallthoselinksauniqueclassonthatpage.Thisisn’tideal,becauseitisn’tverysemanticandit’salsoredundant.Whyapplyaclasstoeverysinglelinkonthepagewhentheyreallyaren’tanydifferentfromlinkselsewhereonthesite,contextuallyspeaking?
ThebestsolutionistogiveyourthebodyauniqueID.Thissolvestheproblemperfectly.YoucanusethesamestylesheetandtargetjustthelinksyouwanttowithasingleCSSselector.

Howit’sdone

Simple,literallyjustapplytheIDtothebodytag:

...</head><bodyid="contact-page">...

复制代码

Nowforourexampleofmakingalllinksonthecontactpageredinsteadofblue,justusesomeCSSlikethis:

a{color:blue;}#contact-pagea{color:red;}

复制代码

Howaboutamorepracticalexample?

Yougotit.Oneofthemostusefulimplementationsofthistechniqueiswithinnavigation.Takealookatthissamplenavigation:

Seehowtheforumstabisthe“active”tab?Certainlythat’sjustaslightchangeinCSS,probablyjustashiftinthepositionofabackgroundimage.PerhapstheXHTMLlookssomethinglikethis:

...<li><ahref="/fieldtips">Fieldtips</a></li><liclass="active"><ahref="/forums">Forums</a></li>...

复制代码

The“active”classappliedtothelistitemiswhatshiftsthebackgroundimage.That’lldothetrick,butwhataboutwhenwemovetotheFieldTipspage?WewillhavetoremovetheactiveclassfromtheforumstabandapplyittothetheFieldTipstab.That’snotveryconvenient.Thatmeansthecodeforthenavigationblockisuniqueoneverysinglepageofthesite.Solet’ssaydowntheroadwewanttoaddaContacttab,we’llhavetoalterthecodeoneverysinglepage.Nofun.
Let’sdothisalittlesmarter.Firstwedon’twanttoincludethenavigationblockofcodeoneverypage,wewanttoincludeit,probablywithasimplePHPincludelikethis:

<?phpinclude_once("nav.html");?>

复制代码

Butthenhowdoweapplythe“active”classtothecurrentnavigationlistelement?

ThisiswhereapplywhatwejustlearnedaboutgivinguniqueID’stothebody!Insteadofapplyingaclasstoonlytheactivelistelement,let’sapplyauniqueclasstoeachseparatelistitemaswellasgiveourbodyanuniqueID.

...</head><bodyid="field-tips">...<liclass="fieldtips"><ahref="/fieldtips">Fieldtips</a></li><liclass="forums"><ahref="/forums">Forums</a></li>...

复制代码

NowwecantargetspecificelementsinthenavigationwithsomecleverCSS:

#field-tipsli.fieldtips,#forumsli.forums{background-position:bottom;}

复制代码

Thismeansthatthecodeforthenavigationblockcanstaythesameoneverypage,yetonlythenavigationelementnativetothatpagewillbeaffectedbythisCSSand“flip”totheactivestate.

Let’sgetevenmoredynamic

ReaderBrianleftanawesomecommentonhowyoucanusePHPtoapplytheuniqueIDtotothebodyelement:

<bodyid="<?=basename(Let’ssayyouwanttochangethecolorofyourlinksonjustyourcontactpagetored.Theyareblueoneveryotherpage,butitjustmakessenseforthemtoberedonyourcontactpage(forsomereason).Thereareacouplewaysyoucouldgoaboutthis.
[list]
[*][b]Youcoulddeclareaseparatestylesheetforyourcontactpage.[/b]Thisisn’tideal,becauseit’sredundant.Ifyoumakeanyotherchanges,you’llalwayshavetomakethembothonthemainstylesheetandthecontactpagestylesheet.
[*][b]Youcouldgiveallthoselinksauniqueclassonthatpage.[/b]Thisisn’tideal,becauseitisn’tverysemanticandit’salsoredundant.Whyapplyaclasstoeverysinglelinkonthepagewhentheyreallyaren’tanydifferentfromlinkselsewhereonthesite,contextuallyspeaking?
[*][b]ThebestsolutionistogiveyourthebodyauniqueID[/b].Thissolvestheproblemperfectly.YoucanusethesamestylesheetandtargetjustthelinksyouwanttowithasingleCSSselector.
[/list]
[size=4]Howit’sdone[/size]
Simple,literallyjustapplytheIDtothebodytag:
[code]...</head><bodyid="contact-page">...

复制代码

Nowforourexampleofmakingalllinksonthecontactpageredinsteadofblue,justusesomeCSSlikethis:

a{color:blue;}#contact-pagea{color:red;}

复制代码

Howaboutamorepracticalexample?

Yougotit.Oneofthemostusefulimplementationsofthistechniqueiswithinnavigation.Takealookatthissamplenavigation:

Seehowtheforumstabisthe“active”tab?Certainlythat’sjustaslightchangeinCSS,probablyjustashiftinthepositionofabackgroundimage.PerhapstheXHTMLlookssomethinglikethis:

...<li><ahref="/fieldtips">Fieldtips</a></li><liclass="active"><ahref="/forums">Forums</a></li>...

复制代码

<?phpinclude_once("nav.html");?>

复制代码

...</head><bodyid="field-tips">...<liclass="fieldtips"><ahref="/fieldtips">Fieldtips</a></li><liclass="forums"><ahref="/forums">Forums</a></li>...

复制代码

NowwecantargetspecificelementsinthenavigationwithsomecleverCSS:

#field-tipsli.fieldtips,#forumsli.forums{background-position:bottom;}

复制代码

a{color:blue;}#contact-pagea{color:red;}2

复制代码

ThiswillreturnthenameofthePHPfilebeingexecutedastheID(e.g.bodyid=”index.php”).Toleaveoffthe.phppart,justremovethe“.php”part.
SERVER[PHP_SELF],".php")?>">[/code]ThiswillreturnthenameofthePHPfilebeingexecutedastheID(e.g.bodyid=”index.php”).Toleaveoffthe.phppart,justremovethe“.php”part.

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

作者: 小妖女 时间: 2015-1-17 23:29
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 简单生活 时间: 2015-1-24 14:48
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 第二个灵魂 时间: 2015-2-1 18:08
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 分手快乐 时间: 2015-2-7 14:42
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 仓酷云 时间: 2015-2-22 19:29
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 不帅 时间: 2015-3-7 03:10
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 活着的死人 时间: 2015-3-14 11:18
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 柔情似水 时间: 2015-3-21 06:01
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

欢迎光临仓酷云 (http://ckuyun.com/)