返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

css鼠标指针样式和文档类型提示设置

2020-04-21 文章标签: css 按钮 教程 浏览次数:

我们讲解下HTML5和CSS3,包含知识点HTML5基本链接样式应用,鼠标指针样式,文档类型提示

HTML5教程

在浏览网页经常看到删除线,下滑线还有其他少见的下划线。我们看看有哪些

css基本链接样式应用

1.基本链接样式应用,包含,普通链接,无下划线链接,双划线链接,删除线链接,另类下划线的原理,定制下划线色彩,定制下划线距离,定制下划线长度和对齐方式,定制双下划线定义块状链接,定义按钮风格的链接,定义特效链接,静态背景切换链接,动态背景切换链接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
.left {
    float: left;
    width: 45%;
}
.right {
    float: right;
    width: 45%;
}
h1 { text-align: center; }
li {
    margin: 1em;
    font-size: 12px;
}
a {
    font-family: "宋体";
    font-size: 16pt;
    text-decoration: none
}
.t1 {
    color: #CC0000;
    text-decoration: underline
}
.t2 {
    text-decoration : none;
    color: #006699;
}
.t3 {
    color: #006600;
    text-decoration: underline overline
}
.t4 {
    color: #0066FF;
    text-decoration: line-through
}
.t5 {
    border: 1px #FF0000 solid;
    height: 20px;
    color: #000099
}
.t6 {
    border: #FF0000 solid;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 1px
}
.t7 {
    border: #FF0000 solid;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 1px;
    padding-bottom: 5px
}
.t8 {
    border: #FF0000 solid;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 1px;
    width: 200px;
    text-align: center
}
.t9 {
    border: #FF0000 double;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 3px
}
.t10 {
    border: 1px #FFFF00 solid;
    color: #FFFF00;
    clip: height;
    background-color: #990000;
    height: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
width: 130px;
}
.t11 {
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
    background-color: #D9DEE8;
    height: 25px;
    width: 150px;
    text-align: center;
    border: #D9DEE8;
    border-style: outset;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px
}
.t12 {
    text-decoration : none;
    color: #006699;
    height: 25px;
    width: 130px;
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    border: 1px #0000CC solid;
    filter: Blur(Add=1, Direction=45, Strength=2);
    text-align: center
}
.t13 {
    color: #FFFF00;
    text-decoration: none;
    height: 25px;
    width: 120px;
    font-family: "宋体";
    font-size: 12px;
    background-image: url(bk3.gif);
    padding-top: 6px;
    padding-left: 5px;
    text-align: center
}
.t13:hover {
    color: #FFFFFF;
    text-decoration: none;
    background-image: url(bk4.gif);
    height: 25px;
    width: 120px;
    padding-top: 6px;
    padding-left: 5px;
    text-align: center
}
.t14 {
    color: #FFFF00;
    text-decoration: none;
    height: 25px;
    width: 120px;
    font-family: "宋体";
    font-size: 12px;
    background-image: url(bk1.gif);
    padding-top: 5px;
    padding-left: 5px
}
.t14:hover {
    color: #000000;
    text-decoration: none;
    background-image: url(bk2.gif);
    height: 25px;
    width: 120px;
    padding-top: 5px;
    padding-left: 5px
}
.t1:hover {
    color: #0000FF;
    text-decoration: underline
}
.t2:hover {
    text-decoration : underline;
    color: #339900;
}
.t3:hover {
    color: #9900CC;
    text-decoration: none
}
.t4:hover {
    color: #FF0099;
    text-decoration: none
}
.t5:hover {
    border: 1px #0000FF solid;
    height: 20px;
    color: #CCCC00
}
.t6:hover {
    border: solid;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 1px;
    border-color: #00FF00 #00FF00 #00FF33 #00FF33
}
.t7:hover {
    border: #FF0000 solid;
    height: 0px;
    color: #990000;
    border-width: 0px 0px 1px;
    padding-bottom: 2px
}
.t8:hover {
    border: #FF0000 solid;
    height: 0px;
    color: #336600;
    border-width: 0px 0px 1px;
    width: 170px;
    text-align: center
}
.t9:hover {
    border: #FF0000 double;
    height: 0px;
    color: #0066FF;
    border-width: 0px 0px 5px
}
.t10:hover {
    border: 1px #0000FF solid;
    color: #333333;
    clip: height;
    background-color: #C8D8F0;
    height: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 130px 0px;
}
.t11:hover {
    border-right: #99ccff 1px outset;
    padding-right: 2px;
    border-top: #99ccff 1px outset;
    padding-left: 2px;
    padding-bottom: 2px;
    border-left: #99ccff 1px outset;
    padding-top: 2px;
    border-bottom: #99ccff 1px outset;
    background-color: #c8d8f0;
    height: 25px;
    width: 150px;
    text-align: center;
}
.t12:hover {
    text-decoration : none;
    color: #006699;
    height: 25px;
    width: 130px;
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    border: 1px #0000CC solid;
    filter: Blur(Add=1, Direction=45, Strength=1);
    text-align: center
}
</style>
</head>
<body>
<h1>CSS链接样式</h1>
<div class="left">
    <h2>初级链接样式</h2>
    <ol>
        <li><a href="#" class="t1">普通链接</a></li>
        <li><a href="#" class="t2">无下划线链接</a></li>
        <li><a href="#" class="t3">双划线链接</a></li>
        <li><a href="#" class="t4">删除线链接</a></li>
    </ol>
    <h2>进阶链接样式</h2>
    <ol>
        <li><a href="#" class="t5">另类下划线的原理</a></li>
        <li><a href="#" class="t6">定制下划线色彩</a></li>
        <li><a href="#" class="t7">定制下划线距离</a></li>
        <li><a href="#" class="t8">定制下划线长度和对齐方式</a></li>
        <li><a href="#" class="t9">定制双下划线</a></li>
    </ol>
</div>
<div class="right">
    <h2>高级链接样式</h2>
    <ol>
        <li><a href="#" class="t10">定义块状链接</a></li>
        <li><a href="#" class="t11">定义按钮风格的链接</a></li>
        <li><a href="#" class="t12">定义特效链接</a></li>
        <li><a href="#" class="t13">静态背景切换链接</a></li>
        <li><a href="#" class="t14">动态背景切换链接</a></li>
    </ol>
</div>
</body>
</html>

2.鼠标指针样式,鼠标放在文本上会有按钮提示,比如问号提示,帮助,文本,等待,斜箭头,十字,移动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
    margin: 10px 0 0 10px;
    padding: 0px;
}
body {
    font-size: 14px;
    font-family: "宋体";
}
ul { list-style-type: none; }
li {
    float: left;
    margin-left: 2px;
}
a {
    display: block;
    background-color: red;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
}
.help { cursor: help; }
.text { cursor: text; }
.wait { cursor: wait; }
.sw-resize { cursor: sw-resize; }
.crosshair { cursor: crosshair; }
.move { cursor: move; }
</style>
</head>
<body>
<ul>
    <li> <a href="#" class="help">帮助</a></li>
    <li> <a href="#" class="text">文本</a></li>
    <li> <a href="#" class="wait">等待</a></li>
    <li> <a href="#" class="sw-resize">斜箭头</a></li>
    <li> <a href="#" class="crosshair">十字</a></li>
    <li> <a href="#" class="move">移动</a></li>
</ul>
</body>
</html>

3.文档类型提示,有点类似百度文库的页面,需要借助于图片实现

文档类型提示

我们也可以看看这种css的写法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a {
     padding-left: 24px;
     text-decoration:none;
}
span {
    color:#999;
    font-size:12px;
    display:block;
    padding-left: 24px; 
    padding-bottom:6px;   
}
p { margin:4px; }
a[href^="http:"] { /*匹配所有有效超链接*/
}
a[href$="pdf"] { /*匹配PDF文件*/
    background: url(//freemuban.com/js/421/pdf.jpg) no-repeat left center;
}
a[href$="ppt"] { /*匹配演示文稿*/
    background: url(//freemuban.com/js/421/ppt.jpg) no-repeat left center;
}
a[href$="txt"] { /*匹配记事本文件*/
    background: url(//freemuban.com/js/421/txt.jpg) no-repeat left center;
}
a[href$="doc"] { /*匹配Word文件*/
    background: url(//freemuban.com/js/421/doc.jpg) no-repeat left center;
}
a[href$="xls"] { /*匹配Excel文件*/
    background: url(//freemuban.com/js/421/xls.jpg) no-repeat left center;
}
</style>
</head>
<body>
<div id="wrap">
    <p><a href="http://www.baidu.com/name.pdf">移动互联网</a><span><img src="//freemuban.com/js/421/star1.jpg"> 81页 免费</span> </p>
    <p><a href="http://www.baidu.com/name.ppt">什么是移动互联网</a><span><img src="//freemuban.com/js/421/star1.jpg"> 8页 1财富值</span> </p>
    <p><a href="http://www.baidu.com/name.xls">中国移动互联网</a><span><img src="//freemuban.com/js/421/star1.jpg"> 38页 1财富值 </span> </p>
    <p><a href="http://www.baidu.com/name.txt">移动互联网</a> <span><img src="//freemuban.com/js/421/star2.jpg"> 57页 5财富值</span></p>
    <p><a href="http://www.baidu.com/name.doc">移动互联网</a><span><img src="//freemuban.com/js/421/star2.jpg"> 42页 2财富值</span> </p>
</div>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。