用CSS设置超链接与导航菜单.ppt
《用CSS设置超链接与导航菜单.ppt》由会员分享,可在线阅读,更多相关《用CSS设置超链接与导航菜单.ppt(30页珍藏版)》请在三一文库上搜索。
1、,用CSS设置 链接与导航菜单,1 制作丰富的超链接特效,在HTML语言中,超链接是通过标记来实现的,链接的具体地址则是利用标记的href属性,代码如下: 百度,a /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ ,2 创建按钮式超链接,首先跟所有HTML页面一样,建立最简单的菜单结构,本例使用和上面实例相同的HTML结构,代码如下:, Home East West North South , a display:block; /*设置为块级元素*/ font-family: Arial; /* 统一设置所有样式 */ font-size: .8e
2、m; text-align:center; margin:3px; ,a:link, a:visited /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #DDD; text-decoration: none; border-top: 1px solid #EEEEEE;/* 边框实现阴影效果 border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #71
3、7171; ,a:hover /* 鼠标经过时的超链接 */ color:#821818; /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#CCC; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换,实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; ,图 最终效果,3 制作荧光灯
4、效果的菜单,图 荧光灯效果菜单,3.1 创建HTML框架,首先,从编写基本的HTML文件开始,搭建出这个菜单的基本框架,HTML代码如下。, Home Contact Us Web Dev Web Design Map ,3.2 设置容器的CSS样式,(1)现在设置菜单div容器的整体区域样式,设置菜单的宽度、背景色,以及文字的字体和大小。 在HTML文件的head部分增加CSS样式表代码如下。, #menu font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#00
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 设置 超链接 导航 菜单
链接地址:https://www.31doc.com/p-2091951.html