考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > CSS/HTML > 文章内容
  

网页设计DIV+CSS:WEB打印实例教程(9)

 [ 2016年1月13日 ] 【

  关于 dis play:block;line -height:28px 大家可以去参阅一下手册,我就不多讲了。

  效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在 css.css 中添加以下代码:

  #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}

  #menu ul li a:hover{}

  这个也不多说了,没什么好说的了,最后的效果如下:

  这一节到这里就完毕了

  这一节里面,主要就是想告诉大家如何使用好 borde r 和 cle ar 这两个属性。

  首先,如果你曾用过 table 制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要 制作一个很小的图片来填充,其实我们还有更简单的办法,只要在中加入这么一段就可以了, 你可以试试:

  

  大家可以再次参考手册,然后你就能明白 dashed、solid、dotted...等的作用,利用它们你可以制作出许 多效果来,实线、虚线、双线、阴影线等等。

  

  以上代码便可以实现设计草图中的 banner,在 css.css 中加入以下样式:

  #banner {

  background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/

  w idth:730px; /*设定层的宽度*/

  margin:auto; /*层居中*/

  height:240px; /*设定高度*/

  border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/

  clear:both /*清除浮动*/

  }

  通过 border 很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度

  变得更快。

  另一个要说明的就是 clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性: clear:left/right。在这里添加 clear:both 是由于之前的 ul、li 元素设置了浮动,如果不清除则会影响 banner 层位置的设定。

本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved