今天小编跟大家讲解下有关psd切图转换为div+css格式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关psd切图转换为div+css格式 的相关资料，希望小伙伴们看了有所帮助。
PSD转div css网页切图示例
第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 复制代码代码如下: *{ margin:0px; padding:0px; } 第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕. 这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可. 复制代码代码如下: body{ background:url(image/bj.jpg) repeat-x ; }
第三步：通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码 HTML代码: 复制代码代码如下: <div id="header"></div> <div id="nav"></div> <div id="banner"></div> <div id="main"></div> <div id="footer"></div> 通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中. 复制代码代码如下: #header,#nav,#banner,#main,#footer{ margin:0px auto; width:950px; } 第四步：先完成header头部部分 LOGO：一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的 所以我们采用了如下HTML代码： <h1><a href="#">北京杰飞css网页切图</a></h1> 那么CSS编码该如何实现呢 大家可以可以先想一下。然后在看我下边写CSS代码的 其实这个地方采用的是CSS以图换字技巧。CSS代码如下 复制代码代码如下: #header h1 a{ background:url(image/logo.jpg); width:476px; height:102px; display:block; text-indent:-9999px; } 好。现在我们接着完成头部右侧部分 还是先进行HTML 代码的编写 复制代码代码如下: <ul> <li><a href="https://www.aidi.net.cn//web/ #">css切图培训</a></li> <li><a href="https://www.aidi.net.cn//web/ #">设为首页</a></li> <li><a href="https://www.aidi.net.cn//web/ #">加入收藏</a></li> </ul> CSS代码： 复制代码代码如下: #header h1{ float:left; } 我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。 复制代码代码如下: #header ul{ float:left; padding:50px 0px 0px 200px; list-style:none; } 为了避免问题 可以让UL也浮动。大家可以试一下 如果不设置浮动在IE各版本 火狐中表现的是否一致 复制代码代码如下: #header ul li{ float:left; padding:0px 10px; } 上边代码在火狐和IE8中没有问题 但是在IE6中会出现问题。我们会在后面进行讲解。 #header ul li a{ color:#555; text-decoration:none; font-size:13px; } #header ul li a:hover{ color:#000; text-decoration:underline; } 这时候的结果如下显示：
第五步：完成导航效果 效果说明：鼠标放上背景变成浅蓝色 并且要制作当前页的效果。 HTML代码： 复制代码代码如下: <ul> <li><a href="https://www.aidi.net.cn//web/ #">网站首页</a></li> <li><a href="https://www.aidi.net.cn//web/ #">网站制作</a></li> <li><a href="""">平面设计就业</a></li> <li><a href="">div css培训</a></li> <li><a href="">联系我们</a></li> </ul> 现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道. 导航部分文字跑到header头部右侧了。怎么解决呢? 其实就该我们万能的清除浮动起作用了 CSS代码 复制代码代码如下: .clear{ clear:both; } 这时候为我们<div id="nav"></div> 变成了<div id="nav" class=” clear”></div> 大家现在看一下 是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算 如果计算得当 不会出现这个问题。 完成导航的CSS样式 复制代码代码如下: #nav{ padding-top:3px; } #nav ul{ list-style:none; } #nav ul li{ float:left; } 默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态 达到咱们想要的结果 试验下:让LI具备宽高,然后A设置背景,能不能达到咱们效果,A不让变成块 复制代码代码如下: #nav ul li a{ display:block; width:135px; height:56px; line-height:56px; color:#fff; text-align:center; text-decoration:none; font-size:14px; } display:block;让A元素变成块状 然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px 同高度56px对应 可以实现什么效果呢。同学们想一下 复制代码代码如下: #nav ul li a:hover{ background:#177cb7; } 现在我们导航基本已经完成 但是还少了一个当前状态的导航效果。怎么办呢。 其实很简单就是为当前所在页面的A链接添加一个ID为current的标记。如下： 复制代码代码如下: <a href=""id="current">网站首页</a> 接着这个状态和鼠标悬停时是一致的 所以很简单 只需要在鼠标悬停状态后边在添加一个#nav ul li a#current选择符即可。你完成没
第六步：产品宣传banner图片 公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片 复制代码代码如下: <img src="https://www.aidi.net.cn//web/image/banner.jpg"height="184"src="https://img.jbzj.com/file_images/article/201304/psdcutpic/image005.jpg"width="127"/> 右侧导航html代码: 复制代码代码如下: <div class="subMenu"> <h5>培训课程</h5> <ul> <li><a href="https://www.aidi.net.cn//web/ #">网站首页</a></li> <li><a href="">网站制作</a></li> <li><a href="">网站制作</a></li> <li><a href="">网站制作</a></li> <li><a href="">网站制作</a></li> <li><a href="">div css培训</a></li> <li><a href="">div css培训</a></li> <li><a href="">联系我们</a></li> </ul> </div> css代码: 下边这些代码在上边制作过程中都已经说过了。所以直接给出来了 不再讲解。 复制代码代码如下: #main{ padding:10px 0px; } #main .container{ width:674px; margin-right:50px; float:left; } #main .subMenu{ width:226px; float:left; margin-bottom:10px; } #main .subMenu h5{ background:#19577c; height:39px; text-align:center; color:#fff; font-size:15px; line-height:39px; } #main .subMenu ul li{ border-bottom:1px solid #d4d4d4; background:#f1f1f1; } #main .subMenu ul li a{ display:block; color:#000; height:36px; line-height:36px; text-decoration:none; padding-left:60px; background:url(image/li.jpg) no-repeat 40px 50%; } #main .subMenu ul li a:hover{ color:#177cb7; background:url(image/li3.jpg) no-repeat 40px 50%; } 第八步：内容的主体区域编码：通过上边的效果的图片 大家可以先想一下HTML如何编写。我是使用的DLDD的方式 大家一定要学会这个标记的用法 很常用 叙述产品时经常性用到。 现在我们看看HTML代码： 复制代码代码如下: <div class="news"> <dl class="xuexiao"> <h5>学校简介 <a href=""><img src="https://www.aidi.net.cn//web/image/more.jpg"/></a></h5> <dt><img src="https://www.aidi.net.cn//web/image/223.jpg"src="https://img.jbzj.com/file_images/article/201304/psdcutpic/image006.jpg"width="488"/> <!--[if IE 6]> <![endif]--> 上边代码的意思是仅IE6可以识别。这样我们就可以单独为IE6编辑样式了。 复制代码代码如下: <!--[if IE 6]> <style type"text/css"> #header ul li{ width:80px; float:left; padding:0px 10px; } Header头部右侧加宽度值 复制代码代码如下: #main .container dl dt img{ border:1px solid #ccc; } #main .container dl.xuexiao dt{ float:left; width:110px; } #main .container dl.xuexiao dd{ font-size:12px; margin-left:20px; float:right; width:145px; text-indent:2em; } #footer{ margin-top:-10px; } </style> <![endif]--> 其中里面还涉及了一些别的知识。在后续课程会去讲解。
来源：爱蒂网
