深爱那片海 发表于 2015-1-16 00:23:31

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

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

Browsers:









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


TwoColumnFlexibleWithHeader

Browsers:(5+)Description:Basicallythesametemplateasabovebutwiththeadditionofaheaderdivforpagetitle,yourlogoorbannersetc.Againverysimpletosetup.Actions:View|ImagePreview|Download


TwoColumn,LeftColumnStatic

Browsers:(5+)Description:Twocolumns,theleftcolumnisabsolutelypositionedontheleftandisafixedwidth.Therightcontentcolumnissizedandpositionedbyusingmarginsandwillresizewiththebrowserwindow.Actions:View|ImagePreview|Download


TwoColumn,LeftColumnStatic,withHeaderBar

Browsers:(5+)Description:Thisisthesametemplateasabovebutwiththeadditionofasimpleheaderbarwhichcanbeusedforlinks,searchboxetc..Actions:View|ImagePreview|Download


TwoColumnFixedWidthwithHeader&Footer



Browsers:</p>123下一页


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

深爱那片海 发表于 2015-1-16 00:40:59

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

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




(5+)Description:Afixedwidthcenteredpagewithaheader,footer,leftnavigationcolumnandrightcontentcolumn.Oneofmyfavourites.Actions:View|ImagePreview|Download

ThreeColumn,Left&RightColumnsStatic

Browsers:





http://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231554697.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231554128.gif(5+)Description:ThisismuchthesameasTwoColLeftColStaticbutnowwiththeadditionofarighthandcolumnwhichisabsolutelypositioned.Actions:View|ImagePreview|Download


ThreeColumnPixel-Perfect

Browsers:http://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231554542.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231554750.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231555797.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231555468.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231556764.gif(6)Description:Sometimesthisiscalledthe"HolyGrail".Itsathreecolumntemplatewhichfitstogether"pixelperfect".Actions:View|ImagePreview|Download


ThreeColumnPixel-PerfectwithHeader

Browsers:http://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231556531.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231557801.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231558575.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231558788.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231558723.gif(6)Description:Thesameasthe"HolyGrail"abovebutwithaheaderdiv.Alsoexpandstofitthewholescreen.Actions:View|ImagePreview|Download


ThreeColumnPixel-PerfectwithHeader&Footer



Browsers:http://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231558623.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231559247.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231559454.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/20071226231559245.gifhttp://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623160647.gif(5+)Description:Mymostcompletetemplate.Ithasthreecolumns,aheaderandfooterandwillresi</p>上一页123下一页


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

深爱那片海 发表于 2015-1-16 00:53:23

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

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


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

只想知道 发表于 2015-1-18 08:42:34

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

仓酷云 发表于 2015-1-27 05:16:25

由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。

因胸联盟 发表于 2015-2-5 09:12:07

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

兰色精灵 发表于 2015-2-11 08:40:45

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

再见西城 发表于 2015-3-2 06:04:05

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。

灵魂腐蚀 发表于 2015-3-11 04:32:00

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

简单生活 发表于 2015-3-17 21:10:43

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。

小魔女 发表于 2015-3-25 03:59:24

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
页: [1]
查看完整版本: 来看看:DIV+CSS结构实例:各类2栏3栏结构实例(附下载)