—— DIV+CSS网页切图 ——

免费送体验金psd切图转换为div+css格式

  第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了.

  第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕.

  这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可.

  第三步:通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码

  通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中.

  LOGO:一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的?所以我们采用了如下HTML代码:

  大家可以可以先想一下。然后在看我下边写CSS代码的,其实这个地方采用的是CSS以图换字技巧。CSS代码如下

  为了避免问题,可以让UL也浮动。大家可以试一下,如果不设置浮动在IE各版本,火狐中表现的是否一致

  上边代码在火狐和IE8中没有问题,但是在IE6中会出现问题。我们会在后面进行讲解。

  第五步:完成导航效果,效果说明:鼠标放上背景变成浅蓝色,并且要制作当前页的效果。免费送体验金

  现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道.

  大家现在看一下,是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算,如果计算得当,不会出现这个问题。

  默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态,达到咱们想要的结果 试验下:让LI具备宽高,然后A设置背景,能不能达到咱们效果,A不让变成块

  display:block;让A元素变成块状,然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px,同高度56px对应,可以实现什么效果呢。同学们想一下?

  其实很简单就是为当前所在页面的A链接添加一个ID为current的标记。如下:

  接着这个状态和鼠标悬停时是一致的,所以很简单,只需要在鼠标悬停状态后边在添加一个#nav ul li a#current选择符即可。你完成没

  第六步:产品宣传banner图片,公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片

  css代码: 下边这些代码在上边制作过程中都已经说过了。所以直接给出来了,不再讲解。

  第八步:内容的主体区域编码:通过上边的效果的图片,大家可以先想一下HTML如何编写。我是使用的DLDD的方式,大家一定要学会这个标记的用法,很常用,叙述产品时经常性用到。

  上边代码的意思是仅IE6可以识别。这样我们就可以单独为IE6编辑样式了。

Copyright © 2002-2021 免费送体验金网络科技有限公司 版权所有 网站地图