css操纵超连接(css超连接款式)

2021-03-08 00:47 jianzhan

1、伪类

CSS操纵元素的某种情况---偽类(用于向一些挑选器加上独特的实际效果)
偽类的英语的语法:元素标识 偽类名字{特性:特性值;}

2、超连接
a:link:未浏览的连接
a:hover:电脑鼠标挪动到连接上
a:active:电脑鼠标按下连接
a:visited:已浏览的连接
假如在点一下之后再回到到该网页页面也有1些实际效果的话 就依照该次序给连接加上情况 L V H A


拷贝编码
编码以下:

<style type="text/css">
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#6F0;}
a:hover{text-decoration:underline; color:#00F;}
a:active{text-decoration:overline; color:#F00;}
a.web:visited{text-decoration:none; color:#000;}
</style>
</head>
<body>
<div id="link">
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>" class="web">网页页面设计方案</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">平面设计方案</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网站前端开发</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">动漫设计方案</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">手机软件开发设计</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网页页面营销推广</a>
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">我会闪</a>
</div>
</body>

 
 3、:focus{特性:特性值}设定目标在变成键入聚焦点时的款式(IE6/7不适用)


拷贝编码
编码以下:

<style type="text/css">
input{
width:200px;
height:25px;
border:2px solid #FF0;
}
input:focus{
background:#9FF;
}
</style>
</head>
<body>
<label>客户名: <input type="text" name="username"/></label>
<label>密 码: <input type="text" name="pwd"/></label>
</body>

 
4、训练

1.给连接再加边框


拷贝编码
编码以下:

<style type="text/css">
a{
font-size:36px;
}
a:link{
color:#009;
text-decoration:none;
border-bottom:2px solid #F00;
line-height:150%;
/*line-height:是以便和下划线分开点*/
}
</style>
</head></p> <p><body>
<a href="#">PHP.COM汉语网</a>
</body>

 

2.在超连接选用情况图像加上记号(给超连接a再加情况照片便可)


拷贝编码
编码以下:

<style type="text/css">
a:link{
color: #f00;
padding-left:13px;
background:url(fasfas.gif) no-repeat left center;
text-decoration:none;
}
a:visited{
color:#900;
padding-left:13px;
background:url(das.gif) no-repeat left center;
text-decoration:none;</p> <p>}
<!--将visited改成hover能够完成电脑鼠标波动的实际效果-->
</style>
</head></p> <p><body>
<p>PHP100.COM汉语网,<a href="<a href="http://www.baidu.com">PHP</a">www.baidu.com">PHP</a</a>>資源共享资源站</p>
</body>

 
7.建立按钮和旋转


拷贝编码
编码以下:

<style type="text/css">
a {
Display: block;
Width: 140px;
Padding: 3px;
height:30ox
Line-height: 30px;
Background-color: #94b8e9;
Border: 1px solid black;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
background-color: #369;
color:#fff;
}
</style>
</head>
<body>
<a href="http:\\www.baidu.com">PHP100.COM汉语网</a>
</body>

 
8.纯 css 专用工具提醒


拷贝编码
编码以下:

<style type="text/css">
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;
}
</style>
</head>
<body>
<p><a href="#">PHP.COM<span>PHP官方网站</span></a></p>
<p>
<a href="<a href="http://www.anfsdfasdybufdsfdasfdd.com/">http://www.anfsdfasdybufdsfdasfdd.com/</a>" class="tooltip">Andy Budd<span> (This website
rocks) </span></a> is a web developer based in Brighton England.
</p>
</body>