psd切图变换为div+css文件格式

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

PSD转div css网页页面切图示例

第1步:先把把全部标识归置內外边距归置为0,实际上也有1种方式是依据依据BODY里边所用到的HTML标识开展重设为0.你还可以先用*重设为0随后在依据BODY中所应用的标识开展重设.如:大家BODY标识中应用了,div,p那大家的挑选符就写 body,div,p便可以了.不必须写*了.

拷贝编码
编码以下:

*{
margin:0px;
padding:0px;
}

第2步:把大家网页页面总体的情况完成,大家要想的結果內容垂直居中,情况渐变色自始至终铺满显示屏.
这样的话,大家能够为body 加上情况照片.要让基在沿水平方位平铺便可.

拷贝编码
编码以下:

body{
background:url(image/bj.jpg) repeat-x ;
}
 

第3步:根据观查大家能够先把大家网页页面区划变成5绝大多数,随后先为其撰写相应的html编码
HTML编码:

拷贝编码
编码以下:

<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main"></div>
<div id="footer"></div>

根据PS精确测量获知,这5一部分占有950宽,并且垂直居中.大家可使用群组挑选符,先让这5个DIV垂直居中.

拷贝编码
编码以下:

#header,#nav,#banner,#main,#footer{
margin:0px auto;
width:950px;
}

第4步:先进行header头顶部一部分
LOGO:1般这个一部分有两个规定.1点一下LOGO能够回到网站主页.2要留意SEO层面的?因此大家选用了以下HTML编码:
<h1><a href="#">北京杰飞css网页页面切图</a></h1>
那末CSS编号该怎样完成呢?
大伙儿能够能够先想1下。随后在看我下边写CSS编码的,实际上这个地区选用的是CSS以图换字技能。CSS编码以下

拷贝编码
编码以下:

#header h1 a{
background:url(image/logo.jpg);
width:476px;
height:102px;
display:block;
text-indent:⑼999px;
}

好。如今大家接着进行头顶部右边一部分,還是优秀行HTML 编码的撰写

拷贝编码
编码以下:

<ul>
<li><a href=" #">css切图学习培训</a></li>
<li><a href=" #">设为主页</a></li>
<li><a href=" #">添加个人收藏</a></li>
</ul>

CSS编码:

拷贝编码
编码以下:

#header h1{
float:left;
}

大家最先让H1左波动。这样右边UL一部分便可以在同行业显示信息了。

拷贝编码
编码以下:

#header ul{
float:left;
padding:50px 0px 0px 200px;
list-style:none;
}

以便防止难题,可让UL也波动。大伙儿能够试1下,假如不设定波动在IE各版本号,火狐中主要表现的是不是1致

拷贝编码
编码以下:

#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;
}

这时候候的結果以下显示信息:

第5步:进行导航栏实际效果,实际效果表明:电脑鼠标放上情况变为浅蓝色,而且要制做当今页的实际效果。
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>

如今立即撰写导航栏的编码会造成1个难题。假如学过盒实体模型与波动的都应当了解.
导航栏一部分文本跑到header头顶部右边了。如何处理呢?
实际上就该大家全能的消除波动起功效了
CSS编码

拷贝编码
编码以下:

.clear{
clear:both;
}

这时候候为大家<div id="nav"></div>
变为了<div id="nav" class=” clear”></div>
大伙儿如今看1下,是否处理了上边的难题呢。实际上假如大伙儿依照规范的盒实体模型测算,假如测算恰当,不容易出現这个难题。
进行导航栏的CSS款式

拷贝编码
编码以下:

#nav{
padding-top:3px;
}
#nav ul{
list-style:none;
}
#nav ul li{
float:left;
}

默认设置li是占有整行显示信息的,因此根据左波动.使其在1行显示信息。以后在设定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元素变为块状,随后好为其设定宽高情况。这里边也有1个关键点便是line-height:56px,同高宽比56px对应,能够完成甚么实际效果呢。同学们想1下?

拷贝编码
编码以下:

#nav ul li a:hover{
background:#177cb7;
}

如今大家导航栏基础早已进行,可是还少了1个当今情况的导航栏实际效果。如何办呢。
实际上很简易便是为当今所属网页页面的A连接加上1个ID为current的标识。以下:

拷贝编码
编码以下:

<a href="#" id="current">网站主页</a>

接着这个情况和电脑鼠标悬停时是1致的,因此很简易,只必须在电脑鼠标悬停情况后面在加上1个#nav ul li a#current挑选符便可。你进行没

第6步:商品宣传策划banner照片,企业网站的话1般会为1个动漫或是js/jquery的殊效。现阶段我们立即就置放1个照片

拷贝编码
编码以下:

<img src="image/banner.jpg" height="184" src="//img.jbzj.com/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 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%;
}

第8步:內容的行为主体地区编号:根据上边的实际效果的照片,大伙儿能够先想1下HTML怎样撰写。我是应用的DLDD的方法,大伙儿1定要学会这个标识的用法,很常见,描述商品时常常性用到。
如今大家看看HTML编码:

拷贝编码
编码以下:

<div class="news">
<dl class="xuexiao">
<h5>院校简介 <a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" src="//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:⑴0px;
}
</style>
<![endif]-->

在其中里边还涉及到了1些其他专业知识。在后续课程会去解读。