注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

佳速互联,网站建设,网站设计,网站制作

“服务第一”、“卓越管理”、“技术领先”--服务创造价值

 
 
 

日志

 
 
关于我

深圳佳速互联(www.jiasuweb.com)致于帮助企业实现信息化一“站”式解决方案服务。8年来,一直以立足深圳,面向全国,与2000多家具有顶级发展潜力的企业展开了合作,并一直保持良好的合作伙伴关系。

网易考拉推荐
 
 

网页设计中导航栏列表的基本设计  

2011-11-04 13:17:43|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
          前面几章我们介绍了一下布局的基本代码,今天我们来看看网站设计步骤中列表的基本设计。列表的应用是很广泛的,可以说大多数的网站中都有列表,只是表达的方式有些不一样。

 最常用的一种列表的表达方式就是导航,可以说每个网站中都是具有导航的,而且一个好的导航列表可以给网站增添不少的色彩。

 现在我们就来看看一个简单的列表是如何产生的吧,首先先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,也即是会自动插入ul和li,然后修改文字内容为你需要的内容。做好这些以后,你在浏览器中会发现在内容的周围的空隙会很大,而且每一行的前端都是由一个点,这就是标签的默认样式造成的。

 显然这样的效果我们是很不满意的,那么我就需要调整它的效果。首先要在视图中,选中我们要编辑的内容,在点击下端的ul新建CSS的规则,在其中就可以定义一下我们创建的列表的方框与列表属性。接下来就要调整一下列表的全局,也就是文字设计、字体大小,间距等。在CSS样式面板中点击新建,在弹出的窗口中选择标签,名称选择body,在这里就可以调整内容的样式了。如果想要调整列表的边框及背景,那么给li定义一下CSS规则就可以了,做法同上。

 接下来就是把这个列表中的内容,加上链接。这个就不多说,大家都知道。同时定义a的状态和鼠标划过的状态。在CSS中创建一个a规则,并调整当鼠标划过链接文字时的颜色。在这里就要涉及到伪类,在这里直接调用就好。

 对于CSS的初学者,大多数人都不知道使用子选择器,这样会影响效率。这是后就可以使用派生选择器,就可以减少大量的class的定义。这个代码如下:

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

 #menu ul和#menu ul li即为派生选择器,如果我们把前边的#menu去掉,那么将是对ul标签重定义,重定义的属性将应用到全局,而前边加上#menu后,将是定义ID为menu元素内ul的样式,设置它的样式只对#menu下的ul生效,不对它之后的ul生效,这个有点像编程中的局部变量,而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li,派生选择器可以使我们不用再给每个li定义一个样式名来定义样式,只需使用派生选择器,从它的父元素处选择即可,这样能大大提高效率。


本文关键字:导航列表CSS的规则
  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017