CSS超链接
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS与超链接
Logo
❖动态超链接:三种状态
•a:link{} 第一次显示超连接的当前状态 •a:hover{} 鼠标移过时超连接的状态 •a:visited{} 已访问的超连接的状态
❖多种超链接
a.a1:link{}
CSS与超链接
Logo
❖按钮超链接
上面和左边的边框颜色与下面和右边的边框颜色 互换
❖浮雕超链接
背景颜色的变换
CSS与超链接
❖纵向导航菜单及二级弹出菜单
Logo
分析这种类型的菜单需要新建哪些样式？
Logo
❖步骤（事先须熟悉项目列表的标签元素） ：
❖1.定义一个ID为menu的层，并在里面输入 项目列表的内容，定义样式如下；
#menu { width: 100px; border: 1px solid #ccc; }
Logo
4.给所有的项目内容建立超练级，并设置：
#menu ul li:hover ul { display: block; }
❖2.定义项目列表的样式如下：
#menu ul { margin: 0px; padding: 0px; list-style-type: none; }
Logo
❖ #menu ul li {
❖
line-height: 26px;
❖
background-color: #eee;
❖
height: 26px;
❖
}
Logo
Logo
❖3.在原OL的基础上加入一个子OL，即二级 弹出菜单并建立相应的样式
在#menu ul li 加入position: relative; #menu ul li ul { display: none; border: 1px solid #ccc; position: absolute; left: 100px; top: 0px; width: 100px;}
❖
padding-top: 0px;
❖
padding-right: 8px;
❖
padding-bottom: 0px;
❖
pHale Waihona Puke dding-left: 8px;❖
border-bottom-width: 1px;
❖
border-bottom-style: solid;
❖
border-bottom-color: #ccc;
Logo
❖动态超链接:三种状态
•a:link{} 第一次显示超连接的当前状态 •a:hover{} 鼠标移过时超连接的状态 •a:visited{} 已访问的超连接的状态
❖多种超链接
a.a1:link{}
CSS与超链接
Logo
❖按钮超链接
上面和左边的边框颜色与下面和右边的边框颜色 互换
❖浮雕超链接
背景颜色的变换
CSS与超链接
❖纵向导航菜单及二级弹出菜单
Logo
分析这种类型的菜单需要新建哪些样式？
Logo
❖步骤（事先须熟悉项目列表的标签元素） ：
❖1.定义一个ID为menu的层，并在里面输入 项目列表的内容，定义样式如下；
#menu { width: 100px; border: 1px solid #ccc; }
Logo
4.给所有的项目内容建立超练级，并设置：
#menu ul li:hover ul { display: block; }
❖2.定义项目列表的样式如下：
#menu ul { margin: 0px; padding: 0px; list-style-type: none; }
Logo
❖ #menu ul li {
❖
line-height: 26px;
❖
background-color: #eee;
❖
height: 26px;
❖
}
Logo
Logo
❖3.在原OL的基础上加入一个子OL，即二级 弹出菜单并建立相应的样式
在#menu ul li 加入position: relative; #menu ul li ul { display: none; border: 1px solid #ccc; position: absolute; left: 100px; top: 0px; width: 100px;}
❖
padding-top: 0px;
❖
padding-right: 8px;
❖
padding-bottom: 0px;
❖
pHale Waihona Puke dding-left: 8px;❖
border-bottom-width: 1px;
❖
border-bottom-style: solid;
❖
border-bottom-color: #ccc;