今天解决png图片在IE6下的背景透明问题，找到了一个好方法。之前的解决方案会造成错位，使页面变形。现把这个方法公布如下，本人...
DIV+CSS是网站标准(WEB标准)中常用的术语之一，通常为了区别HTML网页设计语言中的表格（table）定位方式，因为XHTML网站设计标准中，用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距等...
A：表现和内容相分离　　　　　　　　B：提高搜索引擎对网页索引效率C：代码简洁，提高页面浏览速度　　　D：易于维护和改版
..《十天学会WEB标准（div+css）》系列教程
新手常见问题
网页资源下载
系统常见问题
常用CSS技巧
友情链接：看到有些网站的代码十分优雅，心想自己什么时候也能写出这么好的代码。其实，这不是一朝一夕能达到的，需要的实践中不断锤炼和提高。我们可以通过分析别人写得好的网页代码来更加快速的提高自己，下面向大家推荐20个基于DIV+CSS标准布局的站点，供大家欣赏和研究。
您可能感兴趣
觉得文章有用就打赏一下文章作者
支付宝扫一扫打赏
微信扫一扫打赏&&&【猪猪-前端】收集了30个div+css网站后台模板，方便大家日常开发使用，简洁易用一贯原则。项目截图猜你喜欢3个牛币请下载代码后再发表评论//css后台模板/css后台模板/10仿windows桌面Ext 2.0系统管理界面 .rar/css后台模板/11简单美观的Ext后台管理系统后台模板 .rar/css后台模板/12仿163网易电子邮箱界面后台模板 .rar/css后台模板/13仿126邮件系统管理后台模板 .rar/css后台模板/14通用后台管理系统模板 .rar/css后台模板/15一个通用信息系统后台模板 .rar/css后台模板/16浅绿色通用css后台模板 .rar/css后台模板/17深圳市城建管理工作平台模板界面 .rar/css后台模板/18办公管理系统后台界面 .rar/css后台模板/19一个漂亮通用的商家信息管理中心后台模板.rar精精精精原精精原原原原原原原原相关分享精最近下载&LV2&LV4&LV2&LV2&LV6&LV8&LV10&LV4&LV8&LV2最近浏览&LV1&LV2&LV3&LV5&LV3&LV4暂无贡献等级&LV4暂无贡献等级&LV1扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友进阶CSS+DIV高手，要熟练掌握这三种元素定位方式，你知道几个？ - 送吗网
进阶CSS+DIV高手，要熟练掌握这三种元素定位方式，你知道几个？
编程小小学生 阅读:4
css中元素的定位复杂的网页布局都是通过各种网页元素灵活定位实现的，网页中的各种元素定位都有自己的特点。今天为大家聊一下css中常使用的三种定位方法。这里说的定位不是table排版的，而是通过DIV+CSS的方法对页面中的块元素的定位。float定位float定位是css排版非常重要的手段，新手肯定要多多练习熟练掌握。float定位属性值有三种left、right和默认值none。设置了元素向左（left）或者者向右（right）浮动时，元素会向父元素的坐车或者者右侧靠近。可以灵活运使用浮动实现复杂的排版效果比方说“文字环绕”和“八仙过海”。另外可以用clear:both属性消除上面对下面的排版影响。下图是一段简单的CSS+DIV代码，A是B、C和D的父元素，B元素用了左float定位，C元素用了有float定位，D元素用了clear:both清理浮动影响。position定位position定位于float一样，也是css排版中经常使用到的，从字面上了解就是指定块元素的位置，它是相对于父元素的位置和相对其余自身应该在的位置。position有static、absolute、inherit、relative和fixed五个值。static是默认值，它表示元素保持在原来的位置上，没有任何移动效果。absolute：它表示元素生成绝对定位，可以设置top、right、bottom、left四个值来调整元素的位置。relative：它表示生成相对定位的元素，相对于其正常位置进行定位。fixed：它表示生成绝对定位的元素，相对于浏览器窗口进行定位，也可以设置top、right、bottom、left四个值来调整元素的位置。inherit：规定从父元素继承 position 属性的值。需要注意的是IE浏览器不支持position定位的inherit属性。下图是一段简单的absolute定位代码。z-index空间位置z-index属性使用于调整定位是重叠快的上下位置，你可以想象为x-y轴，垂直于页面为z轴，z-index值越大他的位置就越往上。z-index值为整数，可以是负数，元素设置了position出现重叠时，为了保证排班效果，需要设置它们的z-index属性值。默认的z-index属性值是0，两个元素z-index都一样将保持原来的空间位置不变。关于css中的元素定位到这，假如你是大神可以忽略这篇文章，每天学习一个知识点，每日寄语-“成功源于不懈的努力。”CSS 进行相对定位 | 基于实例代码分步讲解 一站式学习Java | how2j.cn
相对定位
属性：position
值：relative
属性：position
值： relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
&p &正常文字1&/p&
&p &正常文字2&/p&
&p class=&r& &相对定位的文字3&/p&
&p &正常文字4&/p&
&p &正常文字5&/p&
&p &正常文字1&/p&
&p &正常文字2&/p&
&p class=&r& &相对定位的文字3&/p&
&p &正常文字4&/p&
&p &正常文字5&/p&
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
全屏编辑，再次点击恢复
&p &正常文字1&/p&
&p &正常文字2&/p&
&p class=&r& &相对定位的文字3&/p&
&p &正常文字4&/p&
&p &正常文字5&/p&
&姿势不对,事倍功半!
相对定位的文字3 在原来的位置的基础上，向右移动150个像素，但是又不占用原来的坑。 结合相对定位和绝对定位实现这个效果
&p&正常文字1&/p&
&p&正常文字2&/p&
&div class=&r&&
&div class=&a&&相对定位的文字3(不占坑)&/div&
&p&正常文字4&/p&
&p&正常文字5&/p&
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
全屏编辑，再次点击恢复
&p&正常文字1&/p&
&p&正常文字2&/p&
&div class=&r&&
&div class=&a&&相对定位的文字3(不占坑)&/div&
&p&正常文字4&/p&
&p&正常文字5&/p&
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
使用可以很方便的原来的位置上，移动一下，但是又会占用原来的位置，后面的内容接不上来 。 有时候，希望一个元素在原来的位置上，移动一下，但是又不占用位置，这个时候，就需要绝对定位和相对定位组合使用了。1. 首先对一个div(d1)使用相对定位在当前的位置上，但是什么内容都不放。2. 然后，在这个div(d1)里放一个绝对定位的div(d2),因为绝对定位是以其定位了的父容器来调整位置的，所以就会在这个相对定位的div(d1)的基础上调整位置，看上去就是在原来的基础上调整了位置，并且还不占用坑
&p&正常文字1&/p&
&p&正常文字2&/p&
&div class=&r&&
&div class=&a&&相对定位的文字3(不占坑)&/div&
&p&正常文字4&/p&
&p&正常文字5&/p&
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
全屏编辑，再次点击恢复
&p&正常文字1&/p&
&p&正常文字2&/p&
&div class=&r&&
&div class=&a&&相对定位的文字3(不占坑)&/div&
&p&正常文字4&/p&
&p&正常文字5&/p&
把你的代码复制到下面区域。 如果在线比较不好用，请使用客户端比较软件：
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
理解后，再从头做一遍，把有疑问的地方都捋清楚
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
把这时的想法，思路，研究都记录下来，等全部学完了，再回过头来巩固和理解，学习效果就会很好，知识点掌握得也牢固.
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
HOW2J丶User
答案时间：
答案时间：
答案时间：
mrnineteenth
答案时间：
答案时间：
mrnineteenth
答案时间：
答案时间：
mrnineteenth
答案时间：
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
scotthwang
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
答案时间：
答案时间：
答案时间：
答案时间：
答案时间：
请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
提问之前请
欢庆八一建军节，全场五折，优惠码：81V5
可用于全站通
有效期7.30-8.1}