div css布局技巧

Question

我工作两个月了，但是DIV+CSS布局很臭！1、我布局的网页，在DW设计里面全是乱的！这是什么原因啦！2、兼容性总是要调很久！想问一下！IE6\7\8和FF之间的兼容怎么调啊！最实用的哪种！3、我布局很慢，有没有什么可以提高速度的啦！3、DIV怎么命名好一点儿啊！我以前都是用拼音命名的。5、HTML做好再加链接啦？还是边做边加啦？有没有好方法啊！哎总之我的方法不对！小妹在这里请帮大家帮一下我！给我说一些好的方法！在这里面谢谢大家了！

Answer 1

　　DIV CSS网站布局的八个小技巧：

　　1.若有疑问立即检测。

　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用。请注重，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

　　2.使用浮动功能时记得适当清除指令。
　　浮动是个危险的功能，未必会产生所期望的结果。假如碰到浮动元素延伸到外围容器的边框或者其他不正常情况，先确定的做法是正确的。

　　3.边界重合时利用padding或border来避免。
　　可能会为了一点不应该出现的空间而焦头烂额，或者需要一点点空间时，怎样都挤不出来。假如有用到margin，那么很轻易产生边界的重合。

　　4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度。
　　Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但假如母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。

　　5.DIV CSS网站布局时不要依靠min-width/min-height。
　　Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到想要的结果。

　　6.若有疑问，先减少百分比。
　　有时候某些错误会使50%50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。

　　7.记住“TRBL”写法。
　　DIV CSS网站布局中border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界，右边1像素，以此类推。记住“TRBL”，就不会弄错次序了。

　　8.只要不是零的值，都要指定单位。
　　CSS需要对每个font，margin等各种值指定单位。

　　

Answer 2

1.不用去在意编辑器里是什么样子,直接看各浏览器运行效果更实在.
2.DIV+CSS要兼容各浏览器就得用各个浏览器的 huck来解决.
如:
根据CSS的优先性,注意顺序。
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
3.布局要终于原作肯定就比较慢,另外跟你对整个页面板块划分有点关系.思路清晰比较重要.
4.命名规则 只要能让自己,别人看明白就好了.别自己做的都不认识是什么.
5.连接 你只要带上href属性就可以了. 方便按照要求调整样式.
再然后 就经常看css2.0/3.0手册 熟悉下javascript对做效果很有帮助
最好是学jquery就更靠谱了..

忘了还有2个插件很有必要.不知道你用不用
火狐的 firebug 和IE的 Developer Toolbar(IE8自带此功能) 这两东西对布局很有帮助本回答被提问者采纳

Answer 3

百度搜索 前沿CSS视频教程 看完之后 你什么都会了，我就按那个学的。非常好。兼容问题 你去52CSS里边有教程

Answer 4

做网页设计就是要有耐心，这东西也不能着急啊，要做网页还是用纯div+css代码比较好，不要看dw的设计效果，要使用在ie/ff预览那个工具。至于兼容性问题最好用%来定义宽度。否则很难看上去差不多，div的名字还是以他的使用用途命名比较好，也方便以后察看代码，连接什么时候加都行。看你的喜好了，但是href属性还是在设置连接时就加上的好。

Answer 5

CSS是前端三要素之一，通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。对于每一个参加杭州Web前端学习的人来说，CSS是他们必须要掌握的技能之一，不仅要牢记理论知识，还要熟练应用。
1、文字居中兼容
正常处理文字上下居中的手段是让元素height和line-height相等，但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。
解决方法：
1）判断系统环境（安卓/IOS）分别作微调；
2）font-size、height、width全部放大为2倍，利用transform进行缩放

2、图片自适应占位方式
当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会再图片加载完成后出现闪烁的情况。
CSS中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。因此对于宽高比例固定的情况，可以利用padding-top/bottom用于图片自适应占位，解决页面闪烁的问题。
如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。

3、使用currentColor来简化CSS
设置border-color、background-color等颜色的时候，可以使用currentColor[与当前元素的字体颜色相同]来简化CSS。
.div{
color: rgba(0,0,0,.85);
font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}

4、曲线阴影的实现
多个阴影重叠，就是正常阴影+曲线阴影。
正常情况下，有个矩形有正常的阴影，作为主投影，这时候再定义一个有一定弧度圆角的圆角矩形，然后放在正常矩形的下面，并露出一点点底部有弧度的阴影，这样的话就可以形成曲线投影的效果。

5、翘边阴影的实现
利用:before和:after，加上绝对定位的性质，可以形成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形，这个时候再和原来的矩形重叠，则可产生翘边效果。