psd切图转换为div+css格式
作者：佚名
字体：[ ] 来源：互联网 时间：04-17 15:43:14
先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY，里面所用到的HTML标记进行重置为0
PSD转div css网页切图示例
第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 代码如下: *{ margin:0 padding:0 } 第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕. 这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可. 代码如下: body{ background:url(image/bj.jpg) repeat- } &
第三步：通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的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:0 width:950 } 第四步：先完成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:476 height:102 display: text-indent:-9999 } 好。现在我们接着完成头部右侧部分，还是先进行HTML 代码的编写 代码如下: &ul& &li&&a href=" #"&css切图培训&/a&&/li& &li&&a href=" #"&设为首页&/a&&/li& &li&&a href=" #"&加入收藏&/a&&/li& &/ul& CSS代码： 代码如下: #header h1{ float: } 我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。 代码如下: #header ul{ float: padding:50px 0px 0px 200 list-style: } 为了避免问题，可以让UL也浮动。大家可以试一下，如果不设置浮动在IE各版本，火狐中表现的是否一致 代码如下: #header ul li{ float: padding:0px 10 } 上边代码在火狐和IE8中没有问题，但是在IE6中会出现问题。我们会在后面进行讲解。 #header ul li a{ color:#555; text-decoration: font-size:13 } #header ul li a:hover{ color:#000; text-decoration: } 这时候的结果如下显示：
第五步：完成导航效果，效果说明：鼠标放上背景变成浅蓝色，并且要制作当前页的效果。 HTML代码： 代码如下: &ul& &li&&a href=" #"&网站首页&/a&&/li& &li&&a href=" #"&网站制作&/a&&/li& &li&&a href="#&网站制作&/a&&/li& &li&&a href="#&&office培训&/a&&/li& &li&&a href="#"&平面设计就业&/a&&/li& &li&&a href="#"&div css培训&/a&&/li& &li&&a href="#"&联系我们&/a&&/li& &/ul& 现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道. 导航部分文字跑到header头部右侧了。怎么解决呢? 其实就该我们万能的清除浮动起作用了 CSS代码 代码如下: .clear{ clear: } 这时候为我们&div id=&nav&&&/div& 变成了&div id=&nav& class=& clear&&&/div& 大家现在看一下，是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算，如果计算得当，不会出现这个问题。 完成导航的CSS样式 代码如下: #nav{ padding-top:3 } #nav ul{ list-style: } #nav ul li{ float: } 默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态，达到咱们想要的结果 试验下:让LI具备宽高,然后A设置背景,能不能达到咱们效果,A不让变成块 代码如下: #nav ul li a{ display: width:135 height:56 line-height:56 color:# text-align: text-decoration: font-size:14 } display:让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="image/banner.jpg" height="184" src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg" width="127" /& 右侧导航html代码: 代码如下: &div class="subMenu"& &h5&培训课程&/h5& &ul& &li&&a href=" #"&网站首页&/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="#l"&联系我们&/a&&/li& &/ul& &/div& css代码: 下边这些代码在上边制作过程中都已经说过了。所以直接给出来了，不再讲解。 代码如下: #main{ padding:10px 0 } #main .container{ width:674 margin-right:50 float: } #main .subMenu{ width:226 float: margin-bottom:10 } #main .subMenu h5{ background:#19577c; height:39 text-align: color:# font-size:15 line-height:39 } #main .subMenu ul li{ border-bottom:1px solid #d4d4d4; background:#f1f1f1; } #main .subMenu ul li a{ display: color:#000; height:36 line-height:36 text-decoration: padding-left:60 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="image/more.jpg"/&&/a&&/h5& &dt&&img src="image/223.jpg" src="http://files.jb51.net/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:80 float: padding:0px 10 } Header头部右侧加宽度值 代码如下: #main .container dl dt img{ border:1px solid # } #main .container dl.xuexiao dt{ float: width:110 } #main .container dl.xuexiao dd{ font-size:12 margin-left:20 float: width:145 text-indent:2 } #footer{ margin-top:-10 } &/style& &![endif]--& 其中里面还涉及了一些别的知识。在后续课程会去讲解。
大家感兴趣的内容
12345678910
最近更新的内容顶牛前端-专注DIV+CSS前端切片服务
顶牛公司旗下divcss.cc专门从事前端外包服务。顶牛公司主要从事前端培训与切片服务核心成员成就职于北上广大型互联网公司，现受国家“大众创业、万众创新”号召，以及当地政府大力支持，顶牛公司低成本为您提供高品质服务
Web网站切图
Web网站切图
兼任各大主流浏览器，纯手写代码，价格优惠
手机站/iOS/安卓切图
手机站/iOS/安卓切图
H5手机站切图、安卓/iOS界面切图、响应式开发
JS/JQuery/Css动画
JS/JQuery/Css动画
常规的JS效果全部免费
高端UI设计
高端UI设计
为您量身定制原创UI设计
150元起/页
合理的报价方案，为您降低成本，获得高品质服务。
公司专业的前端技术团队，并且持续协助您优化调试。
1对1产品经理
非普通客服，专业的产品经理更懂您！为您提供优质客服与售后服务。
兼容性保障
专业测试人员，兼任各大浏览器。
在约定的时间内高品质交付，并且争取提前交付。
满意后付款
支付少量定金，满意后支付尾款，或去我们淘宝企业店铺担保交易
全力协助您的项目装载，协助各类细节优化调试。
长期合作更优惠
期待与您建议长期的合作关系，技术也会更懂您的需求！
顶牛前端-DIV+CSS切图服务流程
专业产品经理为您提供1对1的售前与售后服务，专业人员更懂您的需求！
沟通需求，效果确定价格和时间
1.常规的鼠标经过效果，幻灯片效果如果没有特殊的需求，会按照常规的样式去做。
2.如果有特殊效果需求，H5效果、自适应效果、特殊的js样式需要告知客服。
3.我们会在约定的时间内完成，非常着急的一定要告知客服，我们会安排加班加点。
签约合同或走担保交易可开发票
1.2000元以下小额切图一般不签合同，需要也可以请告知我们客服人员。
2.有特别需求也可以走淘宝担保交易。
3.通过网站交易可以享受更多积分，积分和兑换精品礼品哦。可开发票。
代码全部手写，严格执行标准规范
1.资深前端技术为您手工写作代码，标记清晰。
2.兼容性好，测试各大主流浏览器，持续协助您优化细节需求。
3.各类JS效果，可以根据您的需求定制，需要提前与我们客服沟通。
成交后持续为您提供售后服务
1.交付完成后，我们仍然提供后续的技术支持、兼容性优化调整等细节服务。
2.在后续细节工作量不是太大的修改调整，我们能不收取费用的都尽量免费协助。
3.提供一对一的客服与技术人员为您服务，沟通更加流畅，效果高，服务好。
长期合作，价格优惠，送豪礼！
1.长期合作，页面比较多的，都会按照优惠的价格报价。
2.通常也会优先给您安排到较快的档期，尽快完成切图需求。
3.提供发票的同时还可以给您赠送相应的积分和兑换豪礼哦！
沟通需求，确定价格
签约或淘宝担保交易
纯手工写代码
持续的售后服务
长期合作送豪礼
为什么选择顶牛前端为您提供DIV+CSS前端外包服务
divcss.cc为顶牛机构旗下专业的前端外包网站，公司化运作，更加规范值得信赖
顶牛公司拥有10多名前端技术人员，核心成员拥有7年以上前端经验，在淘宝、猪八戒等多平台提供前端外包服务。
您可去货比三家，我们熟知行业的报价，因为我们本身成本更低（租金等），政府还有大力度的扶持。可以给您更优惠的报价。
公司化运作，您的切片成品公司会统一管理，定期删除本地存档，和成员签约保密协议，严保您的样式代码。
DIV+CSS切图案例展示
案例征得客户同意后才会展示在本页，更多案例直接跳转到客户网站
顶牛前端-最新资讯
divcss切图外包服务相关资讯与技术解决方案
切图网最新改版升级最大看点就属客户案例了！完全切图样式，让您一览到底，也更方便参考案例！
顶牛切图网改版升级了!!!这次改版升级更有效的帮助客户了解我们网站、我们团队!还有更多的案例帮助客户
客户对我们的评价
为了满足客户担保交易的要求，我们最近开通了淘宝企业店铺，一样优惠的价格，高品质服务，可开发票
顶牛为我省去了很多人力，我的企业过去雇佣了很多美工，但是她们切出来的图总是各种问题，无法保证服务的稳定性和持续性。现在借助顶牛的服务，完全符合我的要求，又快又好又准时，为我节省了人力成本。……PHOTOSHOP针对DIV+CSS的切图方法
1、打开网页设计图（PSD格式），先将其页面上的图片全部切下来。
切图步骤：打开Photoshop，选择工具箱中的移动工具，勾选右上方的自动选择图层，选中要切取的图片层，在图层窗口右击选中图层前的眼睛，选“显示/隐藏其他所有图层”，将其他图层隐藏，选择你所要切的图片范围，按住ctrl＋shift＋c复制图层，ctrl＋n新建文件，ctrl＋v粘贴，新建的文件就是你切出来的图片，文件——存储为web格式——选择gif格式或png格式。
注意：标题背景、导航栏背景是规则图形和均匀颜色时，一般将其切成1像素的切片。ctrl＋n新建文件，ctrl＋v粘贴，新的文件就是1像素的切片，保存为navBg.png或titleBg.png。
注意：（1）切下来的图片，如果是按钮图片、logo、背景图片、导航栏背景等网页样式图片，一般设置为gif格式，网页中其他修饰性图片或包含颜色较多的图片可保存为jpg格式并放置在名为“style”的文件夹中。
（2）图片基本命名规则：logo.gif，导航栏背景navBg.png，底部footerBg.png，recommend块的背景图recommandBg.png。
2、切图完毕，开始添加代码。推荐使用Dreamweaver软件，主要使用css＋div实现，div的id名要求为网页上显而易见的名字，并最简化。css要求为外部样式表，语法符合规范并实现最简化。网页不要有冗余代码。整个流程下来，你的文件夹里的文件主要有：一个css，一个html网页，一个名为style的图片文件夹。
注意：（1）第一步中，为1像素的切片在css中添加背景时，可用：#nav { background:url(style/navBg.png) bottom
repeat-x;}来表示。（2）Div基本命名规则：最大的容器——container，头部——header，导航栏——sidebar，主体——content，底部——footer。
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。首先在这里吐槽下，由于自己学的是前端，去到第一间公司让我做的事就是每天都布局div+css，所以没学到什么，转到第二间公司做前端的就我一个人，而我就真的只是做前端，甚至可以说就是用txt文本去写的，
CSS中list-style-type: none是什么意思？我是新手，刚开始学习div+css这语句什么意思，
求推荐几本 关于页面布局(div+css布局/自适应布局/响应式)方面的书籍，不需要多一到两本好书就可以了。
我是做php/div+css的,准备每天抽出些时间学习IOS开发,主要是想做获取网站数据的应用[类似OSCHINA现在的APP]
身边没有这方面的朋友,而培训都灰常的贵.所以得自学了
问,没有C语言基础,新接触IOS开发,英文水平有限.
要读哪本书?
首先在这里吐槽下，由于自己学的是前端，去到第一间公司让我做的事就是每天都布局div+css，所以没学到什么，转到第二间公司做前端的就我一个人，而我就真的只是做前端，甚至可以说就是用txt文本去写的，压根没粘到后台一点边，然后现在要我做这个用ajax验证提交的
比如div~p和div+p
这个都是向下查找对应的元素。
那么~和+的反义词是什么呢？怎么向上查找呢？
div+css中 父容器用position:relative定义，子容器用position:absolute定义 。父容器不能高度自适应
&div style=&position:relative& class=&div1&&
要做的效果如上图
我想做一个导航，背景是用一张
要做的效果如上图
我想做一个导航，背景是用一张
我用myeclipse做了一个网页，没有涉及后台的操作，全是页面。用到css+div+js，
现在想把jsp转化为html,怎么弄呀？
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title& &/title&
html + css + js 的前端三剑客，用了也挺久了。特别喜欢javascript，但似乎一直 都误解了css，一开始以为只要学会写div { height:20 }，css就会写了。
但是有人说过学习CSS要把它当成一门语言来学，这么久的开
&pre class=&brush: toolbar: auto-links:&& &!--css代码--& * {padding:0;
margin:0;}
margin:0 a
如下图所示，点击“提示”，动态创建一个div后，现在要求点击页面任意其他地方可以关闭该div ，请教下该如何处理？
![screenshot](https://oss-cn-/yqfiles/c12db283d00c
&!DOCTYPE HTML&
&meta charset=&utf-8&&
&meta name=&renderer& content=&webkit|ie-comp|ie
&!DOCTYPE HTML&
&html lang=&ru-RU&&
&meta charset=&UTF-8&&
&style type=&text/css&&
通过一下代码，现在得到的结果是dialog先居中，然后再通过iframe的宽高改变了dialog大小，这样我的dialog就没法居中了，要怎么办才能居中呢？怎样让load()方法执行完后程序再执行下一步？
var iframeBoxHeight =
默认载入会加上这些样式.等到后面AJAX动态刷新以后.下面这段就不起作用了.求怎么用live绑定下面这段啊?
$.each($(&.{$this-&prefix}allElder&),function(index,value){
我想做个类似腾讯微博那种判断字数的demo，现在键盘输入都可以获取字数了，但是鼠标右键菜单中剪切和粘贴文本域中的内容不知道要怎么处理，用body的mousedown也不行，还必须事后单击下鼠标按键才能执行，请大家指点一下。。。