CSS3-设置超链接与导航条
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</body>
未设置CSS样式
2、设置#menu盒子的css样式：
<style>
#menu {
/*设置menu盒子*/
border:1px solid #ccc;
font-family:Arial;
font-size:14px;
font-weight:bold;
width:120px;
padding:8px;
描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。) 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式：
<style>
a{
/* 超链接整体外观 */
font-size:14px;
font-family:“”;
line-height:50px;
padding:20px
}
a:link {
/* 超链接正常状态下的样式 */
color:red; /* 红色 */
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body>
<ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul>
text-decoration:none; /* 无下划线 */
}
a:visited {
/* 访问过的超链接 */
color:black;
/* 黑色 */
text-decoration:none;
}
a:hover {
/* 鼠标指针经过时的超链接 */
color:yellow;
/* 黄色 */
text-decoration:underline;/* 下划线 */
background-color:blue;
}
设置超链接样式后
效果2：制作横向或竖向的荧光灯效果导航条 1、准备代码：
<body> <div id="menu"> <a href="#" id="first"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#" id="last"> Map </a> </div>
1、准备代码：
<body> <div id=“menu”>
<a href="home.htm">Home</a> <a href="east.htm">East</a> <a href="west.htm">West</a> <a href="north.htm">North</a> <a href="south.htm">South</a> </div> </body>
第7课 CSS-4
用css设置超链接与导航条
一、<a>超链接的四种状态
1. 在html语言中，超链接通过<a>标记来实 现的，其默认的显示效果为蓝色加下划线。
2. 利用css可以设置超链接各种状态下的样式， 包括字体、颜色和背景。
3. Css利用伪类选择器设置<a>标记的不同状 态。
超链接有四种状态：活动状态，已被访问状 态，未被访问状态，和鼠标悬停状态。
</body>
5.1 用CSS设置Байду номын сангаас表的符号： list-style-type属性
ie中有效的值：
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha
background:#000;
}
</style>
设置#menu的样式后
3、设置超链接 a 的整体样式：
#menu a {
display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; }
1、设置空心圆的项目符号：
Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */
}
5.2 用CSS设置图片符号及位置： list-style-image和list-style-position
4、设置鼠标悬停状态的CSS样式：
#menu a:hover { color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/
}
5、制作横竖自由转换的导航条
#menu a { display:block; /*用块方式显示行内元素
*/ float：left /*制作横向导航条时需要*/ }
a: link {color: 白色} /* 未访问的链接 */
a:visited {color: 蓝色}
/* 已访问的链接 */
a:hover {color: 红色} /* 鼠标移动到链接上 */
a:active {color: 绿色} /* 选定的链接 */
注意： 1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3. 伪类名称对大小写不敏感。
未设置CSS样式
2、设置#menu盒子的css样式：
<style>
#menu {
/*设置menu盒子*/
border:1px solid #ccc;
font-family:Arial;
font-size:14px;
font-weight:bold;
width:120px;
padding:8px;
描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。) 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式：
<style>
a{
/* 超链接整体外观 */
font-size:14px;
font-family:“”;
line-height:50px;
padding:20px
}
a:link {
/* 超链接正常状态下的样式 */
color:red; /* 红色 */
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body>
<ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul>
text-decoration:none; /* 无下划线 */
}
a:visited {
/* 访问过的超链接 */
color:black;
/* 黑色 */
text-decoration:none;
}
a:hover {
/* 鼠标指针经过时的超链接 */
color:yellow;
/* 黄色 */
text-decoration:underline;/* 下划线 */
background-color:blue;
}
设置超链接样式后
效果2：制作横向或竖向的荧光灯效果导航条 1、准备代码：
<body> <div id="menu"> <a href="#" id="first"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#" id="last"> Map </a> </div>
1、准备代码：
<body> <div id=“menu”>
<a href="home.htm">Home</a> <a href="east.htm">East</a> <a href="west.htm">West</a> <a href="north.htm">North</a> <a href="south.htm">South</a> </div> </body>
第7课 CSS-4
用css设置超链接与导航条
一、<a>超链接的四种状态
1. 在html语言中，超链接通过<a>标记来实 现的，其默认的显示效果为蓝色加下划线。
2. 利用css可以设置超链接各种状态下的样式， 包括字体、颜色和背景。
3. Css利用伪类选择器设置<a>标记的不同状 态。
超链接有四种状态：活动状态，已被访问状 态，未被访问状态，和鼠标悬停状态。
</body>
5.1 用CSS设置Байду номын сангаас表的符号： list-style-type属性
ie中有效的值：
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha
background:#000;
}
</style>
设置#menu的样式后
3、设置超链接 a 的整体样式：
#menu a {
display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; }
1、设置空心圆的项目符号：
Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */
}
5.2 用CSS设置图片符号及位置： list-style-image和list-style-position
4、设置鼠标悬停状态的CSS样式：
#menu a:hover { color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/
}
5、制作横竖自由转换的导航条
#menu a { display:block; /*用块方式显示行内元素
*/ float：left /*制作横向导航条时需要*/ }
a: link {color: 白色} /* 未访问的链接 */
a:visited {color: 蓝色}
/* 已访问的链接 */
a:hover {color: 红色} /* 鼠标移动到链接上 */
a:active {color: 绿色} /* 选定的链接 */
注意： 1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3. 伪类名称对大小写不敏感。