来看看：DIV+CSS结构实例:各类2栏3栏结构实例(附下载)

显示全部楼层 · 发表于 2015-1-16 00:23:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
TwoColumnFlexible

Browsers:

登录/注册后可看大图

(5+)Description:Probablytheeasiestpagetomake.Containstwolayoutdivs,themaincontentdivisjustfloatedtotheleft.Verysimple!Actions:View|ImagePreview|Download[5k][ZIP]

TwoColumnFlexibleWithHeader

Browsers:(5+)Description:Basicallythesametemplateasabovebutwiththeadditionofaheaderdivforpagetitle,yourlogoorbannersetc.Againverysimpletosetup.Actions:View|ImagePreview|Download[3k][ZIP]

TwoColumn,LeftColumnStatic

Browsers:(5+)Description:Twocolumns,theleftcolumnisabsolutelypositionedontheleftandisafixedwidth.Therightcontentcolumnissizedandpositionedbyusingmarginsandwillresizewiththebrowserwindow.Actions:View|ImagePreview|Download[6k][ZIP]

TwoColumn,LeftColumnStatic,withHeaderBar

Browsers:(5+)Description:Thisisthesametemplateasabovebutwiththeadditionofasimpleheaderbarwhichcanbeusedforlinks,searchboxetc..Actions:View|ImagePreview|Download[6k][ZIP]

TwoColumnFixedWidthwithHeader&Footer

登录/注册后可看大图

Browsers:</p>

123下一页

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

显示全部楼层 · 发表于 2015-1-16 00:40:59

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

登录/注册后可看大图

(5+)Description:Afixedwidthcenteredpagewithaheader,footer,leftnavigationcolumnandrightcontentcolumn.Oneofmyfavourites.Actions:View|ImagePreview|Download[6k][ZIP]

ThreeColumn,Left&RightColumnsStatic

Browsers:

登录/注册后可看大图

(5+)Description:ThisismuchthesameasTwoColLeftColStaticbutnowwiththeadditionofarighthandcolumnwhichisabsolutelypositioned.Actions:View|ImagePreview|Download[6k][ZIP]

ThreeColumnPixel-Perfect

Browsers:

登录/注册后可看大图

(6)Description:Sometimesthisiscalledthe"HolyGrail".Itsathreecolumntemplatewhichfitstogether"pixelperfect".Actions:View|ImagePreview|Download[6k][ZIP]

ThreeColumnPixel-PerfectwithHeader

Browsers:

登录/注册后可看大图

(6)Description:Thesameasthe"HolyGrail"abovebutwithaheaderdiv.Alsoexpandstofitthewholescreen.Actions:View|ImagePreview|Download[3k][ZIP]

ThreeColumnPixel-PerfectwithHeader&Footer

登录/注册后可看大图

Browsers:

登录/注册后可看大图

(5+)Description:Mymostcompletetemplate.Ithasthreecolumns,aheaderandfooterandwillresi</p>

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

显示全部楼层 · 发表于 2015-1-16 00:53:23

Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
zewiththebrowserwindow.Actions:View|ImagePreview|Download[6k][ZIP]</p>

上一页123

学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：DIV+CSS结构实例:各类2栏3栏结构实例(附下载)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

来看看：DIV+CSS结构实例:各类2栏3栏结构实例(附下载)

来看看：DIV+CSS结构实例:各类2栏3栏结构实例(附下载)