摘要：宋体超链接边框宋体派生超链接宋体属性选择器超链接宋体动态超链接宋体图像翻转超链接宋体工具提示宋体给链接加上边框宋体在文章段落中加上超级链接宋体用背景图象添加记号宋体利用派生来影响链接宋体利用图片作为下划线
1. 超链接边框
2. 派生超链接
3. 属性选择器超链接
4. 动态超链接
5. 图像翻转超链接
6. CSS 工具提示
1.给链接加上边框
A:link {
Color: #f00;
Text-decoration: none;
Border-bottom: 1px dashed #333;
Line-height: 150%;
}
2.在文章段落中加上超级链接
A:link {
Color: #f00;
Text-decoration: none;
Border: 1px solid #333;
Background: #ccc;
Padding: 2px;
Line-height: 150%;
}
3. 用背景图象添加记号
A:link {
Color:#f00;
Padding: 0 15px 0 0;
Background:url(images/arrow.gif) no-repeat right center;
}
A:visited {
Color:#999;
Padding: 0 15px 0 0;
Background:url(images/checkmark.gif) no-repeat right center;
}
4.利用派生来影响链接
P a:link, p a:visited, p a:hover, p a:active {
Color:#f00;
}
Ul a{
Color:#000;
}
5.利用图片作为下划线
A:link, a:visited {
Color: #666;
Text-decoration:none;
Background: url(images/underline1.gif) repeat-x left bottom;
}
A:hover, a:active {
Background:url(images/underline1-hover.gif);
}
6.突出显示不同类型的链接
.external {
Background:url(images/externalLink.gif) no-repeat right top;
Padding-right: 10px;
}
7.使用属性选择器来做链接
a[href^="http:"] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href^="mailto:"] {
background:url(images/email.png) no-repeat right top;
padding-right: 13px;
}
8.创建按钮和翻转
a {
Display: block;
Width: 6em;
Padding: 02.em;
Line-height: 1.4;
Background-color: #94b8e9;
Border: 1px solid black;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
background-color: #369;
color:#fff;
}
9.具有图象的翻转
a {
Display: block;
Width: 200px;
Height: 40px;
Line-height: 40px;
Background-color: #94b8e9;
Color: #000;
Text-decoration: none;
Text-indent:50px;
Background: #94b8ea url(images/button.gif) no-repeat left top;
}
A:hover {
Background: #369 url(images/button_over.gif) no-repeat left top;
Color: #fff;
}
9.以访问链接样式
ul {
list-style:none;
}
li {
margin: 5px 0;
}
li a {
display: block;
width: 300px;
height: 30px;
line-height: 30px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/visited.gif) no-repeat left top;
text-indent: 10px;
}
li a:visited {
background-position: right top;
}
10.纯 css 工具提示
rocks) is a web developer basedin Brighton England.
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win */
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
1CSS构造超链接给链接加上边框
CSS构造超链接给链接加上边框
2在文章段落中加上超级链接
在文章段落中加上超级链接 在文章段落中加上超级链接1在文章段落中加上超级链接2在文章段落中加上超级链接3
3用背景图象添加记号1
在文章段落中加上超级链接 在文章段落中加上超级链接1在文章段落中加上超级链接2在文章段落中加上超级链接3
3用背景图象添加记号2.html
用背景图象添加记号 用背景图象添加记号1用背景图象添加记号2用背景图象添加记号3
4利用派生来影响链接
利用派生来影响链接 利用派生来影响链接1利用派生来影响链接2利用派生来影响链接3
5利用图片作为下划线
利用图片作为下划线 利用图片作为下划线1利用图片作为下划线2利用图片作为下划线3
6突出显示不同类型的链接
突出显示不同类型的链接 突出显示不同类型的链接1突出显示不同类型的链接2突出显示不同类型的链接3突出显示不同类型的链接2
7使用属性选择器来做链接
使用属性选择器来做链接
8创建按钮和翻转
创建按钮和翻转
9按钮具有图象的翻转
按钮具有图象的翻转
10以访问链接样式
按钮具有图象的翻转
11纯 css 工具提示一段文字1
纯 css 工具提示
11纯 css 工具提示一张图片2
纯 css 工具提示
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1036.html
摘要：将构造函数的作用域赋值给新的对象因此指向了这个新对象。以这种方式定义的构造函数是定义在对象在浏览器是对象中的。构造函数在不返回值的情况下，默认会返回新对象实例。在创建子类型的实例时，不能向超类型的构造函数中传递参数。 创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象，但是这些方式有明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始...
摘要：效果如上图所示，主要用到的伪类，以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单，就一个。的关键字与之类似的还有一个新的颜色属性。实际上，这是中有史以来第一个变量，虽然功能很有限，但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示，主要用到CSS3的...
摘要：效果如上图所示，主要用到的伪类，以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单，就一个。的关键字与之类似的还有一个新的颜色属性。实际上，这是中有史以来第一个变量，虽然功能很有限，但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示，主要用到CSS3的...
阅读 713·2023-04-25 19:43
阅读 3907·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00
具提示纯 css 工具提示
