带来一篇CSS网页结构全精晓
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。在本文中将利用四种罕见的做法,分离CSS于布局化标志语法制造两栏结构.很快地就会发明,不必嵌套表格,距离用的GIF也能做出分栏版面结构.
相干文章：CSS网页结构开辟小技能24则
稍后在"技能延长"中,将会会商Windows版InternetExplorer5.0盒模子的成绩,和绕过它的办法.也将分享一个以CSS告竣等宽栏位的复杂奥密.
要怎样以CSS作出两栏版面结构?
谜底是有好几种办法,为了率领你起步,同时匡助你懂得两种罕见办法的差别(浮动与定位),因而先把核心放在四种分歧的办法上,在此每种办法都能做出两栏结构,同时具有页首和页尾.
我的希望是:你能以本章作为指引入手下手构建一个网站,并发扬本书其他章节以内的办法制造内容.
我们将会商的四种办法都使用在文档的<body>与</body>标签之间,同时我会在入手下手会商每种办法之前先容将会利用的标志语法布局.
为了让你懂得环绕着每种办法的页面布局,让我们大抵看一下还必要到场些甚么:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en">
<head>
<title>CSSLayouts</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
</head>
<body>
...办法树模...
</body>
</html>
为了让你能够懂得要告竣的版面设置,请看2-1:这就是我们想要完成的分栏版面结构.
2-1两栏结构的框线图
办法A:浮动侧边栏
<divid="header">
...页头部分...
</div>
<divid="sidebar">
...侧边栏部分...
</div>
<divid="content">
...主体部分...
</div>
<divid="footer">
...页脚部分...
</div>
下面就是我们要以CSS的float属性制造成份栏结构的标志源代码,利用<div>标签把页面元素分红几个逻辑段落,每一个都设定了独一的id:
[*]#header:包括题目图片,导航栏等
[*]#sidebar:包括分外的内容链接与相干资讯
[*]#content:包括次要的笔墨内容,也是页面的核心地点.
[*]#footer:包括版权信息,作者,帮助链接等
把这些页面段落拆开,能让我们能完整把持版面结构,只需指定几条CSS划定规矩,就能够即刻完成两栏结构.
为页首与页尾指定款式
要把内容布局转化成份栏结构的第一步,是为页首,页尾加上一点背景色彩和一点内补钉,如许能使内容更简单凸显出来.
#header{
padding:20px;
background:#ccc;
}
#footer{
padding:20px;
background:#eee;
}
为办法A的布局加上后面这段CSS会使它显现成2-2如许,我为各个段落加了一些假象的内容.
2-2为页首,页尾指定款式
固然,在#header与#footer里,能够持续为这些段落指定得当的款式,像是font-family,color,链接色采等等.如今让我们把两栏版面打造出来.
浮动侧边栏
办法A的精髓,在于它以float属性把#sidebar放到次要内容<div>的任一边往.以这个例子来讲,将它放到内容的右边,可是放到另外一侧固然也行.
浮动#sidebar的关头在于,在标志源代码中,必需呈现在主内容<div>之前,如许一来,侧边栏的顶部就会与主内容的顶部排齐.
接着,为#sidebar加上float属性,同时把它的宽度设为30%,指定背景色彩:
#header{
padding:20px;
background:#ccc;
}
#sidebar{
float:right;
width:30%;
background:#999;
}
#footer{
padding:20px;
background:#eee;
}
2-3是加上这段CSS以后的显现效果,能看到侧边栏跑到右侧往了,而次要内容在侧边栏局限以内活动.
2-3把#sidebar浮动到次要内容的右边
真实的栏位
看看2-3,我们还没有真正完成两栏结构,为了完成这个效果还必需取#content这个<div>,指定与忧侧边栏宽度不异的右外补钉,因而发生安排#sidebar的空间.
必要加上的CSS就是这么复杂:
#header{
padding:20px;
background:#ccc;
}
#sidebar{
float:right;
width:30%;
background:#999;
}
#content{
margin-right:34%;
}
#footer{
clear:right;
padding:20px;
background:#eee;
}
我们会发明,我们给content设定的右外补钉巨细比#sidebar还年夜4%,云云能在两栏之间留下一点空位.2-4是以扫瞄器检察的效果,你能够发明只需为<div>设定右外补钉,就可以造出第二栏的假象.
2-4两栏结构
同时要寄望的是对#footer所加上的clear:right划定规矩,这个划定规矩很主要,能确保页尾必定会呈现在侧边栏和内容区以后,而不受两栏的长度变化影响,页尾会避开任何先前呈现的float内容.
如今有了能利用的两栏结构,能够持续为如今的CSS声明加上更多界限,背景,边框与其他元素,使表面更吸惹人.
至今为止我们都以百分比设定宽度,以便造出天真的结构(栏宽会主动跟着利用者的视窗宽度缩放).我们也能以像素单元造出定宽结构,可是以像素指定表里补钉巨细时,必需注重IEforWindows毛病剖析CSS盒模子的成绩,你能在本章的"盒模子成绩"找到更多信息和能用的办理办法.
办法B:两重浮动
<divid="header">
...headercontenthere...
</div>
<divid="content">
...maincontenthere...
</div>
<divid="sidebar">
...sidebarcontenthere...
</div>
<divid="footer">
...footercontenthere...
</div>
办法A的弱点之一是:为了浮动侧边栏,则必需在标志源代码以内把侧边栏放到主内容<div>的后面,封闭CSS的扫瞄器,笔墨扫瞄器,屏幕浏览器与其他不撑持CSS的设备将会在页面次要内容之前显现(或念出)侧边栏的内容.如许其实不松散.
我们能够使用float做法,并避开这个成绩,只需互换标志源代码里的主内容,侧边栏<div>的地位(如上所示),然后以CSS将二者浮动到分歧边便可.
#header{
padding:20px;
background:#ccc;
}
#content{
float:left;
width:66%;
}
#sidebar{
float:right;
width:30%;
background:#999;
}
#footer{
clear:both;
padding:20px;
background:#eee;
}
经由过程把两个<div>浮动到分歧偏向,就可以以最得当的体例分列源代码(主内容放在侧边栏后面),同时仍能失掉2-4如许的效果.
避开双方
一样主要的是,你必需将#footerdeclear属性设为both,云云一来不论两栏的长度多长,页尾老是显现在最初,而标签源代码的内容按次也改良了.
办法C:浮动主内容
<divid="header">
...页头内容...
</div>
<divid="content">
...主内容...
</div>
<divid="sidebar">
...侧边栏...
</div>
<divid="footer">
...页尾内容...
</div>
另有个值得一提的办法,只必要用一个float属性,同时标志源代码仍旧能够将主内容的<div>放在侧边栏之前.
只需将主内容的<div>浮动到左边,而且为它设定小于100%的宽度,云云一来就可以在右边留下充足空间摆放侧边栏.
CSS内容
办法C必要的CSS内容再复杂不外了,"一个float属性",内容区但愿利用的宽度,和两栏之间留下的小界限.
#header{
padding:20px;
background:#ccc;
}
#content{
float:left;
width:66%;
}
#sidebar{
background:#999;
}
#footer{
clear:left;
padding:20px;
background:#eee;
}
请注重我们其实不必要界说侧边栏的宽度,由于它会主动填满主内容<div>用剩下的空间(在这个例子中是34%).
凄惨的背景
2-5就是以扫瞄器检察的功效,哦喔!在某些经常使用扫瞄器里,侧边栏的背景色彩会呈现在主内容区底下,因为侧边栏并未制订宽度,因而它想扩到与扫瞄器视窗一样宽.
2-5浮动内容,可是侧边栏的背景色彩透了出来
这个部分只需我们能在侧边栏右边加上宽度与内容区不异的外界限即可以避开这个成绩.实践上我们会把外补钉设的略微年夜一点,以便在两栏之间留下一点空缺.
#header{
padding:20px;
background:#ccc;
}
#content{
float:left;
width:66%;
}
#sidebar{
margin-left:70%;
background:#999;
}
#footer{
clear:left;
padding:20px;
background:#eee;
}
复杂朴实
大概是,假如触及不必要用到背景致的话,那就不用设定界限了,2-6是往失落全部#sidebar声明,在为主内容<div>加上一点右外补钉以后的了局.此时两栏会共用页面预设的背景致.
2-6不利用背景致的浮动内容
CSS则能缩减成:
#header{
padding:20px;
background:#ccc;
}
#content{
float:left;
width:66%;
margin-right:6%;
}
#footer{
clear:left;
padding:20px;
background:#eee;
}
除加上左外补钉(或是省往背景致)以外,另有个利用背景图片的替换做法能让分栏具有背景致彩,我稍后会在本章的"技能延长"单位里提醒这个小奥密.
办法D:定位
<divid="header">
...页首内容...
</div>
<divid="content">
...主内容...
</div>
<divid="sidebar">
...侧边栏...
</div>
<divid="footer">
...页脚内容...
</div>
办法D是利用不异的标志源代码布局,然后以最无效率的体例分列<div>:把主内容放在侧边栏之前,封闭款式的扫瞄器,屏幕浏览器会先收到主内容部分,再收到侧边栏,在定位时,标志源代码内的按次与页面元素呈现的地位没有干系.
可以展望的高度
CSS内容与前三个办法有点相似,第一个差别是对页首指定的像素高度,我们必要可以展望的高度以便稍后为侧边栏定位.
在这里随机选了一个数字,而这必要依据页首利用的内容调剂,像是标记,导航栏,搜刮表单等.
#header{
height:40px;
background:#ccc;
}
#footer{
padding:20px;
background:#eee;
}
为各栏留下空间
接着,要为#content这个<div>设定右外补钉,就像前几个办法一样,这能为右边边栏留下空间,稍后会利用相对定位法(不是浮动)把右边边栏放出来.
#header{
height:40px;
background:#ccc;
}
#content{
margin-right:34%;
}
#footer{
padding:20px;
background:#eee;
}
放进侧边栏
最初,要利用相对定位法把#sidebar这个<div>放到#content的界限里,也必需往失落扫瞄器在页面四周加上的预设界限,云云一来定位座标在一切扫瞄器以内就会分歧了.
body{
margin:0;
padding:0;
}
#header{
height:40px;
background:#ccc;
}
#content{
margin-right:34%;
}
#sidebar{
position:absolute;
top:40px;
right:0;
width:30%;
background:#999;
}
#footer{
padding:20px;
background:#eee;
}
在指定position:absolute以后,就可以以top与right坐标把#sidebar正确的放到所想的地位(2-7).
2-7以定位做出的两栏结构效果
我们叙说了"把#sidebar这个<div>放到间隔扫瞄器视窗上边沿40像素,右侧缘0像素的地位",除此以外,也能用bottom和left指定坐标.
页尾成绩
以先前的办法浮动分栏时,能够用clear属性确保页尾高出全部扫瞄器视窗的宽度,而不受主内容,侧边栏的长度影响.
在定位时,侧边栏的文档流自力于全部页面以外,以是只需侧边栏比内容还长,它就会挡住页尾部分.(2-8)
2-8侧边栏与页尾堆叠
面临这个成绩我经常使用的办理办法之一,是为页尾指定与主内容一样的右外补钉,让侧边栏可以延长凌驾页尾.
利用这个办法的话,CSS必要调剂成如许:
body{
margin:0;
padding:0;
}
#header{
height:40px;
background:#ccc;
}
#content{
margin-right:34%;
}
#sidebar{
position:absolute;
top:40px;
right:0;
width:30%;
background:#999;
}
#footer{
margin-right:34%;
padding:20px;
background:#eee;
}
这个办理计划在内容很短,侧边栏很长的页面上看起来有点怪,可是它切实其实无效,了局可参照2-9,树模了侧边栏避开页尾的情形.
2-9外补钉和主内容不异的页尾
除利用float属性以外,也能用定位打造出分栏结构,让我们看看最初一个选择,办法D.
三人行
假如想做三栏结构的话该怎样办?没成绩,并且在利用相对定位时很简单到场.只必要为主内容,也为加上左外补钉,巨细充足包容第三栏便可.
另外一个侧边栏可以放在标志源代码以内任何中央,由于会必要再度利用相对定位举行结构.
假定加了第二个侧栏,并将它取名#sidecolumn,接着以上面这段CSS为它空出地位,再把它放出来.
body{
margin:0;
padding:0;
}
#header{
height:40px;
background:#ccc;
}
#content{
margin-right:24%;
margin-left:24%;
}
#sidecolumn{
position:absolute;
top:40px;
left:0;
width:20%;
background:#999;
}
#sidebar{
position:absolute;
top:40px;
right:0;
width:20%;
background:#999;
}
#footer{
margin-right:24%;
margin-left:24%;
padding:20px;
background:#eee;
}
方才完成的部分是在主内容,页尾区空出左外补钉(制止堆叠),与之前做右边边栏一样,接着以相对定位法放进新的#sidecolumn,将它放在间隔上边沿40像素,间隔右边缘0像素的地位.
你有寄望我们略微修改了宽度以包容第三栏吗?因为我们利用百分比,因而这个结构会跟着扫瞄器的宽度缩放,大概也能够为任何一栏指定像素宽度,以便使结构宽度流动上去.
2-10是用扫瞄器检察这个示例的效果,一份以CSS相对定位完成的天真三栏结构.
2-10以定位法作出的天真三栏结构
归结
我们在这章略微研讨了以CSS计划版面结构是可以告竣的效果.本章的目标是供应你发扬的基本,因而树模了两种次要的做法:浮动和定位.
我但愿你能持续深切实验CSS结构技能,往失落页面内的嵌套表格,而且换上更多扫瞄器与设备能读取的天真的布局化的标志语法.
假如你想晓得更多关于CSS版面结构的资讯,那末必定要看看这些资本:
[*]"TheLayoutReservoir"(http://www.bluerobot.com/web/layouts):这是个利用相对定位制造多栏排版的尽佳示例.
[*]"FromTableHackstoCSSLayout:AWebDesignersJourney"(http://www.alistapart.com/articles/journey/):JeffreyZeldman撰写的尽佳教授教养,纪录了创建双栏结构所需的步骤.
[*]"CSSLayoutTechnoques:ForFunandProfit"(http://www.glish.com/css/):EricCostello的各类CSS结构资本.
[*]"LittleBoxes"(http://www.thenoodleincident.com/tutorials/box_lesson/boxes/html):OwenBriggs编写的很多CSS结构示例的大度界面.
[*]"CSSZenGarden"(http://www.csszengarden.com/):"树模以CSS为基本的计划能告竣甚么视觉效果".DaveShea培育的"花圃"以单一XHTML文档展现读者投稿的最新CSS计划(固然也包括结构).这是个能看到CSS结构才能极致的奇妙网站.
技能延长
如今我们经由了创建基础CSS结构的基本,该是会商Windows版InternetExplorer5与5.5版,和它们毛病剖析CSS盒模子这个不幸成绩的时分了.稍后也会分享一个经由过程平展背景图片告竣等高栏位结构的奥密技能.
盒模子成绩
本章入手下手的时分我们会商了创建多栏CSS结构的办法,只用width属性界说每栏的宽度,当你入手下手为这些栏位加上补钉,边框的时分,事变就变得有些庞大了.为何?
不幸的是,InternetExplorer5forWindows在加上表里补钉,边框的时分,没法准确盘算外包元素的宽度.
举例来讲,除IE5forWindows以外,一切撑持CSS1的扫瞄器城市将外包元素的宽度盘算为宽度,内补钉,边框三者相加,这是W3C但愿一切扫瞄器处置CSS盒模子的体例.
可是IE5forWindows会将边框和内补钉算在指定的宽度以内,弄搅浑了?不必忧虑,间接看看成绩会对你有所匡助.
目击为实
对照一下2-11和12-12,2-11是个200像素宽的元素,两侧各有10像素的内补钉,和5像素的边框,把程度部分的数值全加起来,就可以晓得实践宽度为230像素.
2-11盒模子的准确盘算了局
2-12IE5forWindows毛病的内补钉,边框,宽度盘算了局
这是切合计划的盒模子:width属性老是界说元素的内容局限,而内补钉,边框则会加到这个数值上.
因而,假如将侧边栏的宽度界说成200像素然后加上内补钉和边框,CSS的声明以下:
#sidebar{
width:200px;
padding:10px;
border:5pxsolidblack;
}
把宽度设定为200像素,可是侧边栏实践必要230像素的空间,除IE5forWindows之外.IE5forWindows里侧边栏统共会占用200像素,把内补钉和边框都算在内里.
2-12显现的是当width属性指定为200像素时,边框和内补钉会占用内容空间,而不是内容空间以外.
扭捏不定的宽度
我们否决为元素指定边框,内补钉的来由就是实践宽度会跟着利用者扫瞄器的分歧而分歧,就算在明天,几百万利用IE5.x的用户仍是会看到分明偏向的计划了局.同时有个重点必需记着:在这段笔墨撰写的时分,仍旧有太多人在利用IE5乃至我们不克不及无视这个成绩.
以是该怎样办?恩,侥幸的是,有个能修复这个成绩的技能,这个技能能够供应两种分歧的宽度,一种给IE5forWindows,另外一种给其他扫瞄器以便失掉准确的盒模子.
盒模子Hack
亲热的TantekCelik写了盒模子Hack(http://www.tantek.com/CSS/Examples/boxmodelhack.html)让我们能供应两种分歧宽度:一种调剂过,只会被WindowInternetExplorer5利用,另外一种则给其他一切扫瞄器利用.
经由过程IE5和IE5.5才有的CSS剖析Bugs,能够指定一个略年夜的宽度(包容边框和内补钉),然后以实践的宽度掩盖这个数值,让其他扫瞄器能显现出准确的了局.
源代码示例
举例来讲,假如但愿把侧边栏的内容地区宽度设为200像素宽,加上10像素内补钉和5像素边框,那末我们的CSS看起来就像:
#sidebar{
width:200px;
padding:10px;
border:5pxsolidblack;
}
对IE5forWindows来讲,则必要把宽度指定为230像素(加上两侧内补钉和边框的宽度),接着再以200像素掩盖返来,让切合尺度的扫瞄器失掉准确的宽度.
#sidebar{
padding:10px;
border:5pxsolidblack;
width:230px;/*forIE5/Win*/
voice-family:""}"";
voice-family:inherit;
width:200px;/*actualvalue*/
}
寄望IE5forWindows的值先呈现,接着几条让IE5forWindows以为声明已停止的划定规矩,在此我们利用voice-family属性,缘故原由纯真只是扫瞄器认得它的话也不会改动视觉效果,最初指定实践的宽度,掩盖最后的width划定规矩,第二个width划定规矩会被IE5forWindows疏忽.
了局在IE5forWindows和其他一切兼容CSS2的扫瞄器上看起来应当完整不异.没有利用这个hack的话,IE5forWindows的利用者就会看到比计划还瘦的栏宽.
对Opera友爱
关于一样具有IE5forWindows剖析毛病的CSS2兼容扫瞄器来讲,我们必需在每次利用盒模子补钉以后加上一段分外的声明,这个称为"对Opera友爱"的划定规矩会让一切切合尺度的扫瞄器不被剖析Bug卡住,确保他们能显现出希冀中的宽度.
#sidebar{
padding:10px;
border:5pxsolidblack;
width:230px;/*forIE5/Win*/
voice-family:""}"";
voice-family:inherit;
width:200px;/*actualvalue*/
}
html>body#sidebar{
width:200px;
}
有了这段划定规矩,就能够完整绕过IE5forWindows毛病剖析CSS盒模子的成绩,让一切人都能看到准确的效果.
不止宽度
在这里以"盒模子Hack"告竣显现不异宽度,可是这个Hack实在能在任何想为IE5forWindows供应分歧CSS内容时派上用处.任何Hack都必需当心利用,同时只要在真正必要的时分才利用,记着"盒模子Hack"的利用地址是个好主张,如许才干在将来容易拿失落它.
本文撰写时仍有上百万收集利用者仍旧利用IE5forWindows,因而这个补钉不成或缺.
上面这段"假装的栏位"原始出自2004年一月份的AListApart杂志(http://www.alistapart.com/articles/fauxcolumns/).
假装的栏位
关于我团体网站的计划,我最常被问到的成绩是:
"你是怎样让右栏的背景致一起延长到整页底部的?"
实在这只是个复杂的观点,真的.并且这个观点能使用到本章入手下手所述的每种结构办法上.
垂直舒展
CSS最简单让人感应波折的性子之一,是元素只会垂直舒展到真正必要的长度.这代表假如在<div>里放一张200像素高的图片,那末<div>就只会在页面上延长200像素.
当你以<div>切割页面段落,接着用本章入手下手时的办法用CSS完成多栏结构时,这就会成为风趣的窘境,某一栏大概比其他栏都长(2-13),当你想为每栏选用共同的背景致彩时,视内容多寡而定,做出两个一样长的栏位大概好不容易.
2-13长度纷歧样的栏位
有几个做法能让阑尾看起来一样长,不受栏位包括的内容的影响.我筹办分享我的办理办法(合用于相对定位结构法),而这个办法其实是稀里糊涂的...复杂.
做弊
这个难以开口的复杂法门,是用一个垂直分列的背景图片作出黑色栏位的错觉.在SimpleBits(http://www.simplebits.com/),我用了相似2-14的背景图片(为了树模而修正了比例):右边有粉饰用条纹,两头留下宽广的空缺空间安置次要内容,接着是一条1像素的边框,然后是右边边栏的浅棕色地区,随着是反向的粉饰用条纹.
2-14tile.gif2像素高的背景图片,事后分派好栏宽.
全部图片没有几像素高,可是垂直平展以后,他就可以形成一起究竟的黑色栏位,不论栏位内容多长都无所谓.
CSS内容
我为<body>标签加上这条CSS划定规矩:
background:#cccurl(tile.gif)repeat-y50%0;
这会使全部页面的背景致设为灰色,而且只垂直平展图片(repeat-y),前面的50%0代表背景图片的定位:在这个例子里,是从扫瞄器视窗右边缘算起50%(使图片居中),而且紧贴上边沿.
栏位定位
放好背景图以后,在把我的定位结构放到下面,为左栏,右栏指定表里补钉以确保它们会对齐准确地位:也就是背景图制造出来的子虚栏位里(2-15).
2-15平展背景图制造出的黑色栏位
有个重点必需要注重:假如哪一栏指定了边框,表里补钉的话,就仍旧用TantekCelik的盒模子Hack为IE5forWindows修改盒模子成绩(参照本章稍早的"盒模子成绩").
大概是,假如可以只利用外补钉,制止边框与内补钉的话,就不必要加上盒模子Hack了,同时,假如栏位的内容只纯真放在平展背景图之上(通明显现),那末要制止利用Hack也应当很复杂.
只需有效就好
固然我以相对定位法在本人的网站上做了两栏结构,可是你也能用本章入手下手时提过的其他办法告竣一样好的效果.一样的设法仍旧合用:平展背景图,接着再浮动某个栏位,使其掩盖在摹拟的栏位背景上.
这是个复杂的观点,可是可以办理计划者在构建CSS结构时常常碰到的波折之一.
结论
我但愿本章能带给你入手下手探究CSS结构的安慰天下,本章入手下手时我们看到了四种构建版面结构的体例,个中三种用了float属性,另有一种用了相对定位.必定要往看看我列出的分外资本,内里有更多结构的技能和树模.
我们也会商了盒模子Hack在创建具有边框,内补钉的栏位时有何主要性,让这些效果在IE5forWindows和其他扫瞄器上体现分歧.
最初,我分享了一个有效的技能,让你在计划CSS结构时能做出等高栏位,这是某些人以为非常基础,但完成上常常让人感应波折的计划方针.只需小小一个平展背景图就可以弄定,让你失掉可以到达页面底部(不论内容多长)的栏位.
结构清晰，容易被搜索引擎搜索到，天生优化了seo HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 学Dreamweaver技术的过程其实是一个增加信心的过程。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 可以使用 CSS 检查工具进行设计。
页:
[1]