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=" #">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也浮动。大家可以试一下,如果不设置浮动在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=" #">网站首页</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: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的状态,达到咱们想要的结果
#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="image/banner.jpg" alt="北京杰飞电脑培训" title="北京杰飞电脑培训"/>
必要的属性是alt必须加上。替换文本,当图片不能正常加
补充:web前端 , HTML/CSS ,
- 更多html/css疑问解答:
- div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗?
- 用css、jquery做的选项卡效果,有一个小疑问,请高手指点,代码如下:
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用?
- 这个div 的css是如何编写的
- div+css中,div的右边框小于div的高度且居中,除了用背景图片,如何实现?
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势(例子要解释并注释)。
- 我会html css目前正在学js,打算在大三的寒假找个实习,请问应该找哪方面的实习?
- css问题,跪求大大帮忙
- 请教网页设计高手,如下图的这种css代码怎么写?