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

  • 栏目:公司新闻 时间:2021-05-07 18:19 分享新闻到:
<返回列表


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


短视頻,自新闻媒体,达人种草1站服务 第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 > 大伙儿如今看1下,是否处理了上边的难题呢。实际上假如大伙儿依照规范的盒实体模型测算,假如测算恰当,不容易出現这个难题。

进行导航栏的CSS款式

#nav{

  padding-top:3px;

  }

#nav ul{

 

  list-style:none;

  }

#nav ul li{

  float:left;

  }

默认设置li是占有整行显示信息的,因此根据左波动.使其在1行显示信息。以后在设定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 alt= 北京杰飞电脑上学习培训 title= 北京杰飞电脑上学习培训 /

必要的特性是alt务必再加。更换文字,当照片不可以一切正常载入,也有便是以便提升。

小窍门:

由于数次用到UL。都必须加上默认设置圆点。因此在*里边写上list-style:none;.这样其它地区就无需写了。实际上包括文本色调尺寸等,假如许多地区也是1样。一样能够申明到*挑选符里。

第7步:进行內容地区

思路:大家能够把內容地区区划为两一部分:1一部分是左边导航栏,1一部分为关键內容地区。这样我先为开展HTML编号:

div > 检测

/div

如今大家先看1下右边导航栏的結果图

右边导航栏html编码:

div > h5 学习培训课程 /h5

ul

    li a href= # id= current 网站主页 /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= #l div css学习培训 /a /li

  li a href= #l 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%;

  }

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

如今大家看看HTML编码:

div >   dl >     h5 院校简介  a href= # img src= image/more.jpg / /a /h5

  dt img src= image/223.jpg alt= 杰飞logo / /dt

  dd 杰飞院校特点:推行家教式课堂教学方式,小班课堂教学的完善融合可随到随学,可预定上课,可彻底依据学生具体状况课堂教学,确保学会为止 /dd

  /dl

  dl >     h5 院校新闻 a href= # img src= image/more.jpg / /a /h5

  dd a href= # 浅谈平面设计方案中配色计划方案 /a span 2013⑷⑴4 /span /dd

  dd a href= # 浅谈平面设计方案中配色计划方案 /a span 2013⑷⑴4 /span /dd

  dd a href= # 浅谈平面设计方案中配色计划方案 /a span 2013⑷⑴4 /span /dd

  dd a href= # 浅谈平面设计方案中配色计划方案 /a span 2013⑷⑴4 /span /dd

  /dl

/div

接着是最下边商品一部分的HTML编号:

div > h5 精品课程 a href= # img src= image/more.jpg / /a /h5

ul

  li a href= # img src= image/css.gif / /a /li

  li a href= # img src= image/css.gif / /a /li

  li a href= # img src= image/css.gif / /a /li

  li a href= # img src= image/css.gif / /a /li

/ul

/div

如今刚开始进行CSS编码的撰写:

首选是院校简介与新闻,实际上细心观查这两个也是多列合理布局,因此设置宽,并设定左波动:

#main .container dl{

  width:300px;

  float:left;

  }

接着是栏目名字:由于这两个实际效果是1样的。因此立即应用群组挑选符把两个都挑选撰写便可以了。

#main .container dl h5,#main .product h5{

  border-bottom:1px #000 solid;

  margin-bottom:15px;

  font-size:17px;

  }

 

#main .container dl h5 a{

  padding-left:170px;

  }

先进行左边院校简介,让简介浮在照片右方:

#main .container dl dt{

  float:left;

  width:110px;

  }

#main .container dl dt img{

  border:1px solid #c;

  }

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

  }

独立设定新闻的DD标识

#main .container dl.xinwen dd{

  height:22px;

  line-height:22px;

  background:url(image/li.jpg) no-repeat 0 50%;

  } 

#main .container dl.xinwen dd a{

  color:#000;

  text-decoration:none;

  padding-left:20px;

  }

#main .container dl.xinwen dd  span{

  padding-left:25px;

  } 

#main .container  dl.xuexiao{

  margin-right:40px;

  }

如今大家刚开始进行商品的CSS编码:

#main .product{

  padding-top:20px;

  }

让其距顶部空出1定间距。

#main .product h5 a{

  padding-left:510px;

  }

#main .product ul li{

  float:left;

  padding-left:10px;

  }

让LI开展左波动便可。

最终1步:进行底部:

HTML编码:

div id= footer > p 联络大家:北京市石景山区皓月写字楼328室;联络电話:010⑻8685956;335(陈老师) /p

/div

CSS编码:

#footer{

  background:#d1dce3;

  height:50px;

  line-height:50px;

  text-align:center;

  }

到此大家早已进行了1个网页页面的切图。

几个不正确:头顶部标识在IE6中有下面主要表现。因此根据下边编码处理1下:

!--[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 #c;

  }

#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些其他专业知识。在后续课程会去解读。

来源于:


分享新闻到:

更多阅读

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

公司新闻 2021-05-07
短视頻,自新闻媒体,达人种草1站服务第1步:先把把全部标识归置內外边距归置为0,实际上也有...
查看全文

网站提升者在承揽提升每日任务时应当遵

公司新闻 2021-05-06
短视頻,自新闻媒体,达人种草1站服务 伴随着愈来愈多的企业与公司必须SEO,这导致了现如今...
查看全文

网站要想得到获胜 务必全方向科学研究市

公司新闻 2021-05-03
短视頻,自新闻媒体,达人种草1站服务社会发展实际一直填满着挑戰,不管大家从业的是哪个...
查看全文
返回全部新闻


区域站点: 南丰县如何创建小程序   南宫市免费制作小程序   囊谦县自助下单小程序怎么做   南和县h5小程序   南华县如何创建小程序   南江县免费制作小程序   南京市自助下单小程序怎么做   南靖县h5小程序   南康市如何创建小程序   南乐县免费制作小程序   南陵县自助下单小程序怎么做   南宁市h5小程序   南平市如何创建小程序   南皮县免费制作小程序   南市区自助下单小程序怎么做   南通市h5小程序   南投县如何创建小程序   南雄市免费制作小程序   南溪县自助下单小程序怎么做   南阳市h5小程序   南漳县如何创建小程序   南召县免费制作小程序   南郑县自助下单小程序怎么做   那坡县h5小程序   那曲县如何创建小程序   纳雍县免费制作小程序   讷河市自助下单小程序怎么做   内黄县h5小程序   内江市如何创建小程序   内丘县免费制作小程序   内乡县自助下单小程序怎么做   嫩江市h5小程序   聂荣县如何创建小程序   尼玛县免费制作小程序   尼木县自助下单小程序怎么做   宁安市h5小程序   宁波市如何创建小程序   宁城县免费制作小程序   宁德市自助下单小程序怎么做   宁都县h5小程序   宁国市如何创建小程序   宁海县免费制作小程序   宁化县自助下单小程序怎么做   宁晋县h5小程序   宁陵县如何创建小程序   宁明县免费制作小程序   宁南县自助下单小程序怎么做   宁强县h5小程序   宁陕县如何创建小程序   宁武县免费制作小程序   宁乡市自助下单小程序怎么做   宁阳县h5小程序   宁远县如何创建小程序   农安县免费制作小程序   磐安县自助下单小程序怎么做   盘锦市h5小程序   盘山县如何创建小程序   磐石市免费制作小程序   盘州市自助下单小程序怎么做   蓬安县h5小程序   澎湖县如何创建小程序   蓬莱市免费制作小程序   彭山县自助下单小程序怎么做   蓬溪县h5小程序   彭阳县如何创建小程序   彭泽县免费制作小程序   彭州市自助下单小程序怎么做   偏关县h5小程序   平安县如何创建小程序   平昌县免费制作小程序   平定县自助下单小程序怎么做   屏东县h5小程序   平度市如何创建小程序   平果县免费制作小程序   平和县自助下单小程序怎么做   平湖市h5小程序   平江县如何创建小程序   平乐县免费制作小程序   平凉市自助下单小程序怎么做   平利县h5小程序   平罗县如何创建小程序   平陆县免费制作小程序   屏南县自助下单小程序怎么做   平泉市h5小程序   屏山县如何创建小程序   平顺县免费制作小程序   平塘县自助下单小程序怎么做   平潭县h5小程序   平武县如何创建小程序   萍乡市免费制作小程序   平乡县自助下单小程序怎么做   平阳县h5小程序   平遥县如何创建小程序   平阴县免费制作小程序   平邑县自助下单小程序怎么做   平远县h5小程序   平舆县如何创建小程序   皮山县免费制作小程序   普安县自助下单小程序怎么做   浦北县h5小程序   浦城县如何创建小程序   普洱市免费制作小程序   普格县自助下单小程序怎么做   浦江县h5小程序   普兰县如何创建小程序   普宁市免费制作小程序   莆田市自助下单小程序怎么做   迁安市h5小程序   乾安县如何创建小程序   潜江市免费制作小程序   潜山市自助下单小程序怎么做  

友情链接: H5建站 h5答题模板 微信公众号h5制作 h5转小程序 手机版 装修知识 软件下载 果树种植 深圳新闻 图片压缩 教育系统

Copyright © 2002-2020 自助下单小程序怎么做_h5小程序_如何创建小程序_免费制作小程序_微信小程序店铺 版权所有 (网站地图) 备案号:粤ICP备10235580号