想做好前端切图,你需要知道这几点

DIV+CSS切图注意事项:

1. *确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。

2. *利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

3. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

4. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

5. float的div一定要闭合。
例如:(其中floatA、floatB的属性已经设置为float:left;)
程序代码

<div ID=”floatA” ></div> 
<div ID=”floatB” ></div> 
<div ID=”NOTfloatC” ></div>

这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 程序代码
<div class=”floatB”></div> 
<div class=”NOTfloatC”></div>

之间加上 程序代码
<#div class=”clear”></#div>

这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
程序代码
.clear{ clear:both;}

6. 为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
程序代码

.colwrapper{ 
overflow:hidden; 
zoom:1; 
margin:5px auto;
 
}

7. margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<div id=”imfloat”></div>
相应的css为 程序代码

#IamFloat{ 
  float:left; 
  margin:5px;/*IE下理解为10px*/ 
  display:inline;/*IE下再理解为5px*/
 
}

8. 关于高度的问题
如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。
常见兼容问题:

图片垂直水平居中

<!DOCTYPE  HTML>
 
<html lang="zh-cn">
 
<head>
 
<title>页面标题</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<link rel="stylesheet" TYPE="text/css"  href="css/common.css" media="all" />
 
</head>
 
<body>
 
    <div class="picture">
 
        <img src="img01.png" />
 
    </div>
 
</body>
 
</html>
.picture{
 
       display: table-cell;
 
       width:240px;
 
       height:240px;
 
       text-align:center;
 
       vertical-align:middle;
 
       border: 1px solid #ccc;
 
}

注意:图片垂直水平居中display: table-cell;元素会作为一个表格单元格显示(类似 <td> 和 <th>)

vertical-align:middle;text-align:center;三个属性缺一不可

child的用法

first-child: 选择第一个子元素(这个伪类在CSS2里就有)

last-child: 选择最后一个子元素

nth-child(2n) 定义偶数li的样式

nth-child(2n+1) 选择奇数行

nth-child(odd)  同上

nth-child(2n)   选择偶数行

nth-child(even) 同上

内容不够长 底部不居底

<style TYPE="text/css">
 
html,body {margin: 0;padding:0; height: 100%;}
 
#container {min-height:100%;height: auto !important;height: 100%; /*IE6不识别min-height*/position: relative;}
 
#header {background: #ff0;padding: 10px;}
 
#page {width: 960px;margin: 0 auto;padding-bottom: 120px;/*等于footer的高度*/}
 
#footer {position: absolute;bottom: 0;width: 100%;height: 60px;/*脚部的高度*/ background: #6cf;clear:both;}
 
/*=======主体内容部分=======*/
 
#left {width: 220px;float: left;margin-right: 20px;background: lime;}
 
#content {background: orange;float: left;width: 480px;margin-right: 20px;}
 
#right{background: green;float: right;width: 220px;}
 
</style>
 
<div ID="container">
 
<div ID="header">Header Section</div>
 
<div ID="page" class="clearfix">
 
<div ID="left">Left Sidebar</div>
 
<div ID="content">Main content</div>
 
<div ID="right">Right sidebar</div>
 
</div>
 
<div ID="footer">Footer Section</div>
 
</div>

注意书写格式的问题:
一定要注意缩进。对齐。要有良好的编程 习惯。

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号