为大家提供专业的保定网站制作保定网站建设保定网页设计保定网站策划保定网站推广服务。我们将SEO技术与网站制作******的结合,让您的网站更具竞争力!
服务电话:13171905859
网站制作

网站导航栏列表的基本设计

发布人:管理员   发布时间:2011-12-21
        最常用的一种列表的表达方式就是导航,可以说每个网站中都是具有导航的,而且一个好的导航列表可以给网站增添不少的色彩。
        现在我们就来看看一个简单的列表是如何产生的吧,首先先新建一个页面,然后插入一个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;www.pg-stone.com 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定义一个样式名来定义样式,只需使用派生选择器,从它的父元素处选择即可,这样能大大提高深圳网页设计的效率。
公司地址:保定市复兴路利家世纪城7号楼2-1303 邮编:071051 公司邮箱:384697065@qq.com
服务热线:0312-6770690、15128291748、13171905859 售后电话:13754429971 投诉电话:13171905859
版权所有:【科泉网络】 Copyright © 2010-2018 All Rights Reserved www.pg-stone.com 冀ICP备07500686号