长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。 下面我们来做一个三栏液态布局（three-column liquid layout） 首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150p...
DIV CSS布局实例：CSS标签切换代码，通俗说就是滑动门的制作教程，很不错的实例，希望对你学习CSS布局有帮助。 http://www.ij2ee.com/ DIV CSS布局实例：CSS标签切换代码 * {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}a {behavior:url(xuxian.htc)}.woaicss {width:438px; height:300px; overflow:hidden; margin:50px auto;}.woaicss_title {width:438px; height:30px; backgrou...
转自： http://blog.onlygrape.com/divcss-4/257 CSS命名规范 一．文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css； 二．常用类/ID命名规范 页 眉：header内 容：content容 器：container页 脚：footer版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu标 志：logo标 语：banner标 题：title侧边栏：sidebar图 标：Icon注...
关于用DIV+CSS来制作列表的时候,大家最常用的是用ul和li来编写,但是这样用出现两个比较麻烦的地方： 1、如果用UL还布局，右边一栏比较麻烦； 2、文字外边的边框自适应比较麻烦； 3、很可能要定死高度； 所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的： 1、布局合理一些； 2、将来扩展很方便； 3、CSS一定很少； 试着写了写，看一看还行！在可控范围内！ 布局...
SEO主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在Google等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有哪些影响呢? 一、精简网页代码 使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。 代码精简所带来的直接好处有两点：一是提高Spider爬行效率，能在最短的时间内爬完整个页面，这样对收...
自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，由于事先不知道具体高度，只能根据内容的增减自适应高度，很多情况下要求两列（或三列）Div的高度相同，以前用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。一般的做法，大都采用背景图填充或 JS 脚本控制的方法使各Div高度相同，这里看到一个解决方法，记录如下： 它主要是采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合方式，示例代码如下： ...
2010年08月19日 星期四 上午 10:04 常见的左右两列div+css布局分为以下两种：一、左右定宽布局： 在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。 常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一...
http://asp.snowstop.net/blog/?id=227&date=2007-11 div+css布局无法避免的冗余标签 完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。 总结而言，div布局必须用到冗余标签的地方主要有三个： 一是背景图和背景色，当内层元素的css属性全部为“float:left”时，外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套...
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。 在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码： /*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited {font-size:12px;text-decoration:none;}a:hover{} /*页面层容器*/#container {width:800px;margin:10p...
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 （市面上主要用到的IE6 IE7 FF）height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 一、CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐，用下面的一种感觉最安全) 随着IE7对!im...
这是在网页设计师上看到的一篇文章，很适合入门div＋css布局的人看，转了过来收藏，hoho～～ 你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpaddi...
书名：DIV+CSS网页布局从入门到精通 作者：朱印宏、邓艳超 作者QQ：364077976、406964280 博客：http://yuzhongwusan.cnblogs.com/ ，博客将随时解答读者因阅读本书而产生的问题，以及本书不足之处的修改，读者可在博客中留下您的问题以便方便我们答复。 CSS技术交流群：41091270、23038424、6879926、10780586、54430674、23660353、34678498 作者电邮：zhuyinhong@css8.21cn、 xiaoquer521@163.com ...
一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下： 此处显示 id "side" 的内容此处显示 id "main" 的内容 div创建完成后，开始创建css样式表，代码如下： #side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300p...
看到、遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。 我们看下面的图片： 这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我们看下面的分析图片： ...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 ...