PSD转div css网页切图示例css
第一步:先把把全部标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也能够先用*重置为0而后在根据BODY中所使用的标记进行重置.如:咱们BODY标记中使用了,div,p那咱们的选择符就写 body,div,p就能够了.不须要写*了.
html
复制代码
代码以下:
*{
margin:0px;
padding:0px;
}
第二步:把咱们网页总体的背景实现,咱们想要的结果内容居中,背景渐变始终铺满屏幕.
这样的话,咱们能够为body 添加背景图片.要让基在沿水平方向平铺便可.
复制代码
代码以下:
body{
background:url(image/bj.jpg) repeat-x ;
}
第三步：经过观察咱们能够先把咱们网页划分红为五大部分,而后先为其编写相应的html代码
HTML代码:
jquery
复制代码
代码以下:
<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代码：
web
复制代码
代码以下:
<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的状态，达到我们想要的结果 试验下:让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元素变成块状，而后好为其设置宽高背景。这里面还有一个要点就是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 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%;
}
第八步：内容的主体区域编码：经过上边的效果的图片，你们能够先想一下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: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:-10px;
}
</style>
<![endif]-->
其中里面还涉及了一些别的知识。在后续课程会去讲解。