divcss布局实例之(完整切图篇)

divcss布局实例之(完整切图篇)

今天我要带领大家使用DIV+CSS切一个普通企业网站的首页,同时也是考量大家对之前所学CSS知识的一个理解程度。

首先大家先看一下咱们要完成的网页切图图片如下所示:

divcss布局实例

我们先分析一下这个网页布局,大的部分我们可以分为头部,导航部分,BANNER部分,然后是主体内容区,最后是尾部,如下图。而在主体内容区域按照布局是一个典型的两列布局,然后在左侧内容区域又分为一个两列布局。我们可以把它理解为两列套两列divcss布局实例之(完整切图篇)

然后在开始动手编代码:

第一步:大家可能都知道我们的HTML标记在没有添加任何样式的时候,默认是有间距的,所以我们要先把把所有标记归置内(padding)外(margin)边距归置为0.

很多人采用的一种方法就是根据根据BODY里面所用到的HTML标记进行重置为0.

还有一种偷懒的办法你也可以先用*(代表所有)重置为0,最后等你完成所有了HTML编码在根据BODY中所使用的标记进行重置。

如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了.

代码如下:
*{
margin:0px;
padding:0px;
}

第二步: 我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕.
这样的话,我们可以为body 添加背景图片.要让其在沿水平方向平铺即可.

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

其实这个地方还应该在加一个内容就是背景图片居顶平铺显示。那么咱们也不知道网页到底有高。剩下的部分怎么办。多数部分是。取渐变背景最下方的颜色进行填充。那么写法就如下:

background:颜色值,背景图片,位置,是否平铺

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

代码如下:
<div id=”header”></div>
<div id=”nav”></div>
<div id=”banner”></div>
<div id=”main”></div>
<div id=”footer”></div>

通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用CSS群组选择符,先让这五个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代码如下

咱们采用的是:使用text-indent的负值,将内容移出容器

代码如下:

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

这时候的结果如下显示:

divcss布局实例之(完整切图篇)

 

总结:其实通过这边的讲解大家应该不难发现。这就是一个典型的两列布局。只不过内容换成了一个是H1,一个是UL。他们两个标记都是块元素。所以直接使用FLOAT属性即可

第五步:完成导航效果,效果说明:鼠标放上背景变成浅蓝色,并且要制作当前页的效果。
HTML代码:

代码如下:
<ul>
<li><a href=”#“>HTML</a></li>
<li><a href=”#“>CSS基础</a></li>
<li><a href=”#“>CSS布局</a></li>
<li><a href=”#“>CSS实例</a></li>
<li><a href=”#“>HACK</a></li>
<li><a href=”#“>业界新闻</a></li>
<li><a href=”#“>CSS视频</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选择符即可。你完成没
divcss布局实例之(完整切图篇)

第六步:产品宣传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” alt=”杰飞logo”/></dt>
<dd>杰飞学校特色:实行家教式教学模式,小班教学的完美结合可随到随学,可预约上课,可完全根据学员实际情况教学,保证学会为止……</dd>
</dl>
<dl class=”xinwen”>
<h5>学校新闻<a href=”#”><img src=”image/more.jpg”/></a></h5>
<dd><a href=”#”>浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>
<dd><a href=”#”>浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>
<dd><a href=”#”>浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>
<dd><a href=”#”>浅谈平面设计中配色方案</a><span>2013-4-14</span></dd>
</dl>
</div>
接着是最下边产品部分的HTML编码:
<div class=”product clear”>
<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;
}
接着是栏目名称:因为这两个效果是一样的。所以直接使用群组选择符把两个都选择编写就可以了。
#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 #ccc;
}
#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;
}
让其距顶部空出一定距离。
#main .product h5 a{
padding-left:510px;
}
#main .product ul li{
float:left;
padding-left:10px;
}
让LI进行左浮动即可。
最后一步:完成底部:
HTML代码:
<div id=”footer” class=”clear”>
<p>联系我们:北京市石景山区皓月写字楼328室;联系电话:010-88685956;15910646335(陈老师)</p>
</div>
CSS代码:
#footer{
background:#d1dce3;
height:50px;
line-height:50px;
text-align:center;
}
到此我们已经完成了一个页面的切图。
几个错误:头部标记在IE6中有下面表现。所以通过下边代码解决一下:

<!–[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]–>
其中里面还涉及了一些别的知识。在后续课程会去讲解。

您可能对以下内容感兴趣

divcss布局实例之(完整切图篇)》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注