CSS教程:div仿框架方法

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows

问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住列祖列宗。

先请看demo：

运行代码框!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta name="author" content="Chomo" /link rel="start" href="http://www.14px.com" ti...<a href="http://www.tulaoshi.com/n/20160219/1630692.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-19</span> <i>标签:</i> <div class="yyy_2_a"><a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="http://www.tulaoshi.com/n/20160219/1630692.html" target="_blank">CSS教程:div仿框架方法</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1630395" target="_blank"><img src="http://img.tulaoshi.com/201602/19/f974697a911a844039f1324f9620f743_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630395.html" target="_blank">css框架(CSS Frameworks)：CSS框架应用</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 什么是css框架实际上还是让我们从框架说起吧。框架就是一个你可以用于你的网站项目的基本的概念上的结构体。阅读更多网页教学网CSS框架相关知识： CSS教程关于css框架网页设计门户网站构建CSS框架的规则利用CSS框架进行高效率的站点开发 CSS框架的利与弊（上） CSS框架的利与弊（下）利用CSS框架进行高效率的站点开发 Elements css框架通常只是一些css文件的集合，这些文件包括基本...<a href="http://www.tulaoshi.com/n/20160219/1630395.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/哒哒哒晓晓/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/15.jpg" /><span>哒哒哒晓晓</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">8</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1607177" target="_blank"><img src="http://img.tulaoshi.com/201602/19/0c18887975dae19ee6494efdecd6d30b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1607177.html" target="_blank">轻松学DIV教程（div＋css布局）</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align=left等等)束手无策，不知道该转换成对应的什么CSS...<a href="http://www.tulaoshi.com/n/20160219/1607177.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/chen_long1024/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/17.jpg" /><span>chen_long1024</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629522" target="_blank"><img src="http://img.tulaoshi.com/201602/19/e50114845a58edfcff1f4bf0069bad14_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629522.html" target="_blank">CSS教程关于css框架网页设计</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 个人总结了在开发css框架中的一点经验，献丑了。希望大家的讨论能使我们共同进步。:) 1、css框架中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词框架。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从...<a href="http://www.tulaoshi.com/n/20160219/1629522.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/中国城市委员会/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>中国城市委员会</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1616064" target="_blank"><img src="http://img.tulaoshi.com/201602/19/d656db981d5049b6438b73df33d995aa_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1616064.html" target="_blank">DIV + CSS 入门</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 一、什么是DIV+CSS？ “DIV + CSS” 是最新WEB标准的一个典型的应用。一般来说，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）等。结构主要包括例如DIV在内的一系列的HTML(XHTML)标签，表现主要包括CSS（层叠样式表：Cascading Style Sheets），行为主要包括例如对象模型（如W3C DOM）、ECMAScript等。在我们日常所说的“利用DIV + CSS开发”概念中，DIV指的是包...<a href="http://www.tulaoshi.com/n/20160219/1616064.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/一生爱你晓旭/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>一生爱你晓旭</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">9</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1625943" target="_blank"><img src="http://img.tulaoshi.com/201602/19/59682679dc35dc333ed7c9e220c311b9_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1625943.html" target="_blank">css技巧：批量保存div+css图片方法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 由于现在很多div+css中的图片都写在了css里面。直接用浏览器的另存为已经不能完全保存到本地我在网上收集了一些方法，和一些自己的实践，希望对你有所帮助第一：苦力型查看网页源文件，然后找到css路径，直接输入到ie地址框内下载既可。打开css找出里面的图片一个一个下载第二：偷懒型保存到本地css后，在dw中把css中的图片都替换成第三：超级偷懒型 ...<a href="http://www.tulaoshi.com/n/20160219/1625943.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/带毛的棒棒糖/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>带毛的棒棒糖</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">13</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1603254" target="_blank"><img src="http://img.tulaoshi.com/201602/19/66d19a1f2be3f932070e59084b8b42ff_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1603254.html" target="_blank">DIV+CSS相册制作教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 以前用FLASH作过一个FLASH相册—网络版这个效果有点学这个的意思。为了一行了的代码，我已经花了两个晚上来想了，结果下来就是感觉IE有点变态。用正常的想法去作，FIREFOX 等浏览器都没有问题，只有IE不可以。只有加那么一行垃圾代码，IE才能正常显示。以下就是效果： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...<a href="http://www.tulaoshi.com/n/20160219/1603254.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/依栏呵梅妆/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>依栏呵梅妆</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">40</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629553" target="_blank"><img src="http://img.tulaoshi.com/201602/19/4f3c304e8cb89e06160e36221b34295b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629553.html" target="_blank">CSS教程:DIV底部放置文字</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢？ !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" ht...<a href="http://www.tulaoshi.com/n/20160219/1629553.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/home雨印记/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>home雨印记</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1607094" target="_blank"><img src="http://img.tulaoshi.com/201602/19/4cde92e7ef7d9f19066fb23d12f8ed8e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1607094.html" target="_blank">Div+Css视频教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">在线观看: CSS基本概念 CSS初探 - CSS基本知识 - 第1课http://learning.artech.cnhttp://img.warting.com/2007/05/30/20070530.html CSS基本语法与核心概念 - CSS基本知识 - 第2课http://learning.artech.cnhttp://img.warting.com/2007/05/31/20070531.html 设置丰富的文字效果 - CSS基本知识 - 第3课http://learning.artech.cnhttp://img.warting.com/2007/06/01/20070601.html CSS/DIV布局专题讲解 ...<a href="http://www.tulaoshi.com/n/20160219/1607094.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/Jokerxprince/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>Jokerxprince</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1578435" target="_blank"><img src="http://img.tulaoshi.com/201602/17/7767c4d3457dcf801eeba91791bbd41d_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160217/1578435.html" target="_blank">CSS精选教程：2天轻松驾驭DIV+CSS</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/pmsj/" target="_blank">平面设计</a> <a href="http://www.tulaoshi.com/hbsj/" target="_blank">海报设计</a> <a href="http://www.tulaoshi.com/ggsj/" target="_blank">广告设计</a> <a href="http://www.tulaoshi.com/huabaosheji/" target="_blank">画报设计</a> <a href="http://www.tulaoshi.com/qmsj/" target="_blank">签名设计</a> <a href="http://www.tulaoshi.com/fzsj/" target="_blank">服装设计</a> <a href="http://www.tulaoshi.com/mpsj/" target="_blank">名片设计</a> <a href="http://www.tulaoshi.com/huacesheji/" target="_blank">画册设计</a> <a href="http://www.tulaoshi.com/banshisheji/" target="_blank">版式设计</a> <a href="http://www.tulaoshi.com/shangbiaosheji/" target="_blank">商标设计</a></div> <div class="span_em_123"> 很多朋友在刚接触DIV+CSS的时候，都很迷茫，不知道从何学起，看网上的教程吧，理论性的东西太多，越看越糊涂，再说时间上也不允许，也没有那个耐心，其实KwooJan也不喜欢看这种视频教程，很枯燥，很乏味，即使耐着性子看完收获也不大，实用性不大，群上的一些朋友告诉我，他们学习DIV+CSS没有思路，不知道怎么去学，如何去学，希望KwooJan能带着他们一步一步走，从今天开始我将写个教程，打算以例子为主，帮...<a href="http://www.tulaoshi.com/n/20160217/1578435.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/清泉1024/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/15.jpg" /><span>清泉1024</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">25</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630214" target="_blank"><img src="http://img.tulaoshi.com/201602/19/9f44a877c2a848c8cd165543360d3570_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630214.html" target="_blank">css教程:DIV垂直居中的办法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleCSS布局技巧：未知高度div 垂直...<a href="http://www.tulaoshi.com/n/20160219/1630214.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/°花火残世″/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/14.jpg" /><span>°花火残世″</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1483286" target="_blank"><img src="http://img.tulaoshi.com/201601/29/0000fdaba82ee4d7eff9c43bf3a24212_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160129/1483286.html" target="_blank">Div+CSS布局入门教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/html/" target="_blank">Html</a> <a href="http://www.tulaoshi.com/cssbuju/" target="_blank">CSS布局</a> <a href="http://www.tulaoshi.com/divcss/" target="_blank">Div+CSS</a> <a href="http://www.tulaoshi.com/xhtml/" target="_blank">XHTML</a></div> <div class="span_em_123"> 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是...<a href="http://www.tulaoshi.com/n/20160129/1483286.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/扯疼的笑/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/26.jpg" /><span>扯疼的笑</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">14</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1604824" target="_blank"><img src="http://img.tulaoshi.com/201602/19/44beb8813a855d1b05b80344e6a42f64_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1604824.html" target="_blank">Div CSS实例教程：页面制作方法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。一、框架页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。二、布局（以下用#ID表示页面元素） #Head和#Foot里的就不说了，具体查看...<a href="http://www.tulaoshi.com/n/20160219/1604824.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/古府夜风/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>古府夜风</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1626438" target="_blank"><img src="http://img.tulaoshi.com/201602/19/d828492fa3b0e0f59dfb202ded8b9204_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1626438.html" target="_blank">CSS框架的利与弊</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出CSS框架的建议。效果是很明显的。当然，CSS框架有利也有弊，最近也看了一些相关的文章。一些感想，与大家分享。 CSS框架之利： 1、开发效率的提高。如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架...<a href="http://www.tulaoshi.com/n/20160219/1626438.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/穰东婚车出租/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/18.jpg" /><span>穰东婚车出租</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1578772" target="_blank"><img src="http://img.tulaoshi.com/201602/17/25680aff42ac7c3c749f90e830b7559c.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160217/1578772.html" target="_blank">CSS教程:语义化标记抛弃DIV标记</A></div> <div class="span_em_123"> 曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的div布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做div-soup 综合症。也许你很熟悉下面的代码: div id = &qu...<a href="http://www.tulaoshi.com/n/20160217/1578772.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/dfcxys/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>dfcxys</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">20</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1618172" target="_blank"><img src="http://img.tulaoshi.com/201602/19/71058854b680d44247657dc4c569d5c1_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1618172.html" target="_blank">div css网页布局入门</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换...<a href="http://www.tulaoshi.com/n/20160219/1618172.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/___末世微凉/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>___末世微凉</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1606681" target="_blank"><img src="http://img.tulaoshi.com/201602/19/601da81039cef70a8e61cf03a74e8a8e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1606681.html" target="_blank">什么是DIV+CSS?</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 什么是CSS＋DIV？  CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。 CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 DIV元素是用来为HTML文档内大块（...<a href="http://www.tulaoshi.com/n/20160219/1606681.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ljz2013140/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>ljz2013140</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1606663" target="_blank"><img src="http://img.tulaoshi.com/201602/19/1cfe9e8341dc2737beda139e98dceab2_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1606663.html" target="_blank">Div+CSS布局入门</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我...<a href="http://www.tulaoshi.com/n/20160219/1606663.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/qq1638481651/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>qq1638481651</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">9</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610114" target="_blank"><img src="http://img.tulaoshi.com/201602/19/edfe2da8bd591ce9edb0b133f2699993_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1610114.html" target="_blank">使用div仿javascript模态窗口</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 虽然和本blog的内容无关，但是还是写出来吧，希望对大家有帮助前几天在博客园看到有人说模态窗口在ie7里面显示出现地址栏，其实这本是一件好事，而且ie的模态窗口是ie的函数，ff、opera等都不支持，我评论的原话只是ie7增强的安全特性罢了，这个世界还真奇怪，有人说ie的安全性不强，天天骂微软，还支持ff说什么用了ff就不会被强奸，微软增强了安全性，又有人说这样增加的安全性不好，真是难伺候你要...<a href="http://www.tulaoshi.com/n/20160219/1610114.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/快乐崇拜59/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/14.jpg" /><span>快乐崇拜59</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1604830" target="_blank"><img src="http://img.tulaoshi.com/201602/19/748f21403df056015fff42a602466bc8_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1604830.html" target="_blank">Div+CSS教程：如何闭合浮动元素？</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而...<a href="http://www.tulaoshi.com/n/20160219/1604830.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/念思的那个她/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>念思的那个她</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629707" target="_blank"><img src="http://img.tulaoshi.com/201602/19/6babb8c24dda70410e0fd6fe2f26711c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629707.html" target="_blank">CSS框架的利与弊(下)</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 相关文章： CSS框架的利与弊(上) http://www.webjx.com/CSS/20071207/css_1785.html CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难，前面的基础工作做好了。后面的开发速度会提高很多。 CSS框架之弊： 1、你需要完全的理解整套框架每一个加入项目的人，都需要花一定的时间去完全的理解整套框架及编码规范； 2、你会延续一些...<a href="http://www.tulaoshi.com/n/20160219/1629707.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/小麥矜鋮/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/17.jpg" /><span>小麥矜鋮</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21292.html">上一页</a><a href="/reader/21289.html">21289</a><a href="/reader/21290.html">21290</a><a href="/reader/21291.html">21291</a><a href="/reader/21292.html">21292</a><a href="/reader/21293.html" class="cur">21293</a><a href="/reader/21294.html">21294</a><a href="/reader/21295.html">21295</a><a href="/reader/21296.html">21296</a><a href="/reader/21297.html">21297</a><a href="/reader/21294.html">下一页</a> </div> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="http://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="http://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div>  <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>