相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。 很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑: 以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修...
上一篇现在看起来好像没什么营养，呵呵，今天努力。 首先说一下“盒子模型” ，在css里认为div是一个盒子。。。盒子？什么意思？呵呵 看看下边的图吧： 这里把我们用到了好几个CSS属性，在上一篇里介绍过，看到了吧CSS骗了我好久啊，我一直以为width，height是div的宽和高，没想到啊，没想到，它们只是content的宽和高。这就是div全部的大小控制了。不过这里要注意body也是一个大的盒子，要是默认不设置margin的话，会和窗口四周...
SEO主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在Google等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有哪些影响呢? 一、精简网页代码 使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。 代码精简所带来的直接好处有两点：一是提高Spider爬行效率，能在最短的时间内爬完整个页面，这样对收...
CSS滚动条 今天忽然想起我的博客签名要更新了，但是我也想保留历史签名，于是参考了淘宝的一些装修的店铺，修改了一下CSS，做了个漂亮的DIV+CSS的滚动条，实现了内嵌的效果。不用iframe的。 CSS代码如下 #about { float: left; display: inline; margin-top: 30px; width: 500px; font-size: 14px; } #about p { color: #FFF; font-size: 14px; line-height: 1.4em; SCROLLBAR-FACE-COLOR: #666666; Z-INDEX: 1; SC...
自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，由于事先不知道具体高度，只能根据内容的增减自适应高度，很多情况下要求两列（或三列）Div的高度相同，以前用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。一般的做法，大都采用背景图填充或 JS 脚本控制的方法使各Div高度相同，这里看到一个解决方法，记录如下： 它主要是采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合方式，示例代码如下： ...
网页设计div+css之id与class使用原则 id的使用原则 先来说说id，id具有唯一性，其使用原则也是依据这一特性建立的。id是不能重复的，所以在XHTML的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。这些根据制定的规范命名为#logo , #nav , #content , #copyright 等等，本着其唯一性的原则园子建议定义id尽量在外围使用。 class的使用原则 class在CSS的定义中具有普遍性。...
2010年08月19日 星期四 上午 10:04 常见的左右两列div+css布局分为以下两种：一、左右定宽布局： 在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。 常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一...
１. 解决边距问题，通常可以在不同的div加上border:1px solid #333;属性。由此来查看，是哪个层被撑开了。 ------------------------------------- ie中最常见的会被撑开的问题，是 因为ff的float属性会乱，所以我们在每个带有float属性的层排列最后，会加这么一个层，用来将ff的float属性关闭。 但是这个层放在ie6里就会占据一定的间距。解决方案是： -----------------------------------------------------------------...
http://asp.snowstop.net/blog/?id=227&date=2007-11 div+css布局无法避免的冗余标签 完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。 总结而言，div布局必须用到冗余标签的地方主要有三个： 一是背景图和背景色，当内层元素的css属性全部为“float:left”时，外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套...
今天客户电话打过来说他IE浏览器更新到IE8.0打开刚做的网站发现错位，靠左明明是居中的，但是之前小蔡也碰到过同样的问题，所以我根本不担心。一般写DIV+CSS都基本经过IE6.0，IE7.0还有火狐浏览器测试过了，因为用的人比较多都没发生错位情况，用IE8来打开网站，发现错位很严重，包括首页，列表页，文章页等，都严重的错位。 之后两天没敢用IE8.0打开网站，我多么希望现在用IE8的人不会太多，就不会有太多人发现网站错位问题。后...
一、CSS文件及样式命名 1、CSS文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 2、CSS样式命名规范 本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如： 头部样...
假如没有了IE6，div+css道路又会如何走？ 曾几何时，前端开发，前端重构者都为IE6的BUG而痛不欲生，最经典不支持PNG透明等等，还有很多很多的令人费解的问题，估计很多像我一样从事前端开发的朋友都了解IE6的种种BUG了，那前端开发者，你有没有想过，假如没有IE6，div+css道路将会发现什么变化呢？或者说没有IE6，你的工作将会发生如何变化呢？先不提这些，我们来看看，假如没有IE6，网页重构会发生哪些变化？ 1，支持...
任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。 css文件名命名规范 模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css 补丁：mend.css 打印：print.css 页面结构元素div命名规范 头：header 内容：content/c...
当我们写好了页面大致的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，IE8，FF兼容问题 那我来说说吧，做了差不多一年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的没去研究过1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如margin-left:10px !import...