直接给出个DIV+CSS经典教程

0409 · 发表于 2006-11-27 21:56

<strong>Div+CSS布局入门教程 </strong><table class="docParameter" cellspacing="6" cellpadding="0" width="100%" border="0"><tbody><tr><td><p>作者：<a href="http://www.blueidea.com/common/contact.asp?type=作者&username=aultoale" target="_blank">aultoale</a>　时间： 2006-06-10　文档类型：原创　来自：<a href="http://www.blueidea.com/">蓝色理想</a>
<br/>浏览统计 total:94082 | year:94082 | Quarter:49136 | Month:28303 | Week:1991 | today:1209</p><p class="list"><img height="13" src="http://www.blueidea.com/img/icon/arrow_red.gif" width="4" alt=""/> 第 1 页页面布局与规划<br/><img height="13" src="http://www.blueidea.com/img/icon/arrow_orange.gif" width="4" alt=""/> 第 2 页 <a href="http://www.blueidea.com/tech/site/2006/3574_2.asp">写入整体层结构与CSS</a><br/><img height="13" src="http://www.blueidea.com/img/icon/arrow_orange.gif" width="4" alt=""/> 第 3 页 <a href="http://www.blueidea.com/tech/site/2006/3574_3.asp">页面顶部制作之一</a><br/><img height="13" src="http://www.blueidea.com/img/icon/arrow_orange.gif" width="4" alt=""/> 第 4 页 <a href="http://www.blueidea.com/tech/site/2006/3574_4.asp">页面顶部制作之二</a><br/><img height="13" src="http://www.blueidea.com/img/icon/arrow_orange.gif" width="4" alt=""/> 第 5 页 <a href="http://www.blueidea.com/tech/site/2006/3574_5.asp">页面制作-用好border和clear</a><br/></p></td></tr></tbody></table><table class="border" cellspacing="0" cellpadding="0" width="100%" border="0"><tbody><tr><td><img height="6" src="http://www.blueidea.com/img/spacer.gif" width="6" alt=""/></td></tr></tbody></table><table class="pageLighter" cellspacing="11" cellpadding="0" width="100%" border="0"><tbody><tr><td class="content"><p>在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。</p><p>所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。</p><p align="center"><img height="434" src="http://www.blueidea.com/articleimg/2006/06/3574/01.jpg" width="450" border="0" alt=""/></p><p>下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：</p><p>　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；<br/>　　2、内容部分又可分为侧边栏、主体内容；<br/>　　3、底部，包括一些版权信息。<br/>　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:</p><p align="center"><img height="391" src="http://www.blueidea.com/articleimg/2006/06/3574/02.jpg" width="450" border="0" alt=""/></p><p>根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。</p><p align="center"><img height="300" src="http://www.blueidea.com/articleimg/2006/06/3574/03.gif" width="300" border="0" alt=""/></p><p>　　DIV结构如下：<br/>　　│body {}　/*这是一个HTML元素，具体我就不说明了*/<br/>　　└#Container {}　/*页面层容器*/<br/>　　　　　├#Header {}　/*页面头部*/<br/>　　　　　├#PageBody {}　/*页面主体*/<br/>　　　　　│　├#Sidebar {}　/*侧边栏*/<br/>　　　　　│　└#MainBody {}　/*主体内容*/<br/>　　　　　└#Footer {}　/*页面底部*/</p><p>至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。</p><p align="right">出处：<a href="http://www.blueidea.com/">蓝色理想</a>
<br/>责任编辑：<a href="http://www.blueidea.com/common/contact.asp?type=编辑&username=moby" target="_blank">moby</a></p><p align="right"><font color="#a9a9a9" style="FONT-SIZE: 12px;">上一页</font>
<a title="下一页" href="http://www.blueidea.com/tech/site/2006/3574_2.asp" style="FONT-SIZE: 12px;">下一页写入整体层结构与CSS</a></p><p>◎进入论坛<a href="http://www.blueidea.com/bbs/list.asp?GroupName=%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8">网站综合</a>、<a href="http://www.blueidea.com/bbs/list.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8">网页制作</a>版块参加讨论 </p></td></tr></tbody></table>

0409 · 发表于 2006-11-27 22:09

<p>这个网站好像是原创！！！！！！！！！！！！！！！！！！！！！！！</p><p>！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p><div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div><h1 class="ContentTitle"><strong>Div+CSS布局入门教程(一)</strong></h1><h2 class="ContentAuthor">作者:番茄红了日期:2006-03-18</h2></div><div class="Content-Info"><div class="InfoOther">字体大小: <a accesskey="1" href="javascript:SetFont('12px')">小</a>
<a accesskey="2" href="javascript:SetFont('14px')">中</a>
<a accesskey="3" href="javascript:SetFont('16px')">大</a></div><div class="InfoAuthor"><img alt="" src="http://www.tblog.com.cn/images/weather/hn2_sunny.gif" style="MARGIN: 0px 2px -6px 0px;"/><img alt="" src="http://www.tblog.com.cn/images/weather/hn2_t_sunny.gif"/>
<img alt="" src="http://www.tblog.com.cn/images/level5.gif" style="MARGIN: 0px 2px -1px 0px;"/>
</div></div><div class="Content-body" id="logPanel">一、页面布局与规划<br/><br/>　　好久没有认真写点东西了，想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题，其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...<br/><br/>　　在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。<br/><br/>　　所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。<br/><br/><img alt="" src="http://www.tblog.com.cn/attachments/month_0603/w2006318142229.jpg" border="0"/><br/><br/>　　下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：<br/>　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；<br/>　　2、内容部分又可分为侧边栏、主体内容；<br/>　　3、底部，包括一些版权信息。<br/>　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：<br/><img alt="" src="http://www.tblog.com.cn/attachments/month_0603/72006318142329.jpg" border="0"/><br/><br/>　　根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。<br/><br/><img alt="" src="http://www.tblog.com.cn/attachments/month_0603/j200631814242.gif" border="0"/><br/>　　DIV结构如下：<br/>　　│body {}　/*这是一个HTML元素，具体我就不说明了*/<br/>　　└#Container {}　/*页面层容器*/<br/>　　　　　├#Header {}　/*页面头部*/<br/>　　　　　├#PageBody {}　/*页面主体*/<br/>　　　　　│　├#Sidebar {}　/*侧边栏*/<br/>　　　　　│　└#MainBody {}　/*主体内容*/<br/>　　　　　└#Footer {}　/*页面底部*/<br/>　　至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。<br/><br/><strong>相关文章：</strong><br/><a href="http://www.tblog.com.cn/article.asp?id=283" target="_blank">Div+CSS布局入门教程(一) #</a> -- 页面布局与规划<br/><a href="http://www.tblog.com.cn/article.asp?id=284" target="_blank">Div+CSS布局入门教程(二) #</a> -- 写入整体层结构与CSS<br/><a href="http://www.tblog.com.cn/article.asp?id=286" target="_blank">Div+CSS布局入门教程(三) #</a> -- 页面顶部制作(1)<br/><a href="http://www.tblog.com.cn/article.asp?id=289" target="_blank">Div+CSS布局入门教程(四) #</a> -- 页面顶部制作(2)----使用列表<strong><li></strong>制作菜单<br/><a href="http://www.tblog.com.cn/article.asp?id=298" target="_blank">Div+CSS布局入门教程(五) #</a> -- 用好border和clear<br/><a href="http://www.tblog.com.cn/article.asp?id=195" target="_blank">优化你的CSS代码 #</a><br/><br/><strong>转载请注明出处：<a href="http://www.tblog.com.cn/" target="_blank">番茄's Blog</a></strong>
<br/><br/><br/></div><div class="Content-body">[本日志由番茄红了于 2006-05-08 11:31 PM 编辑]<br/><img alt="" src="http://www.tblog.com.cn/images/From.gif" style="MARGIN: 0px 2px -4px 0px;"/><strong>文章来自:</strong>
<a href="http://www.tblog.com.cn/" target="_blank">本站原创</a><br/><img alt="" src="http://www.tblog.com.cn/images/icon_trackback.gif" style="MARGIN: 0px 2px -4px 0px;"/><strong>引用通告地址:</strong>
<a href="http://www.tblog.com.cn/trackback.asp?tbID=283" target="_blank">http://www.tblog.com.cn/trackback.asp?tbID=283</a><br/><img alt="" src="http://www.tblog.com.cn/images/tag.gif" style="MARGIN: 4px 2px -4px 0px;"/><strong>Tags:</strong>
<a href="http://www.tblog.com.cn/default.asp?tag=DIV">DIV</a><a href="http://technorati.com/tag/DIV" rel="tag" style="DISPLAY: none;">DIV</a>
<a href="http://www.tblog.com.cn/default.asp?tag=CSS">CSS</a><a href="http://technorati.com/tag/CSS" rel="tag" style="DISPLAY: none;">CSS</a>
<a href="http://www.tblog.com.cn/default.asp?tag=%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B">入门教程</a><a href="http://technorati.com/tag/入门教程" rel="tag" style="DISPLAY: none;">入门教程</a>
<br/></div>


浙公网安备 33102302000043号浙ICP备11032801号-2