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

css定义按钮样式

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

我们讲解下HTML5和CSS3,包含知识点HTML5设置链接样式,CSS定义下划线样式,CSS定义类型标识样式,CSS定义按钮样式

HTML5教程

1.CSS设置链接样式,设置a链接下面的下划线

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:hover,a:active {
    text-decoration:undexline;
}
a:link,a:visited {
    text-decoration:none;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">博客</a></li>
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:undexline;
}
a:active {
    text-decoration:undexline;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">博客</a></li>
</ul>
</body>
</html>

demo3 设置超链接的颜色

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link { color: blue; }
a:visited { color: green; }
a:hover,
a:active { color: red; }
</style>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">博客</a></li>
</ul>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link,a:visited {
    text-decoration:none;
}
a:hover,a:acriove {
    text-decoration:undexline;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">博客</a></li>
</ul>
</body>
</html>

2.CSS定义下划线样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link,a:visited {
    text-decoration:none;
}
a:hover,a:acriove {
    text-decoration:undexline;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">博客</a></li>
</ul>
</body>
</html>

demo2 css自定义下划线颜色

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a {
    text-decoration: none;
    font-size:24px;
    color:#666;
}
a:hover {
    background: url(http://freemuban.com/js/cssdemo/line.gif) center 14px repeat-x;
}
</style>
</head>
<body>
<a href="#">一年好景君须记,最是橙黄桔绿时</a>
</body>
</html>

3.css定义类型标识样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
    font: 120%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
    color: #666;
    background: #fff;
}
a:link,a:visited { color: #666; }
a[href^="http:"] {
    background: url(//freemuban.com/js/cssdemo/externalLink.gif) no-repeat right top;
    padding-right: 10px;
}
a[href^="mailto:"] {
    background: url(//freemuban.com/js/cssdemo/email.png) no-repeat right top;
    padding-right: 15px;
}
</style>
</head>
<body>
<p><a href="http://www.google.com/">谷歌</a></p>
<p><a href="http://www.baidu.com/index.php">百度</a></p>
<p><a href="http://www.yahoo.com/">雅虎</a></p>
<p><a href="css-button.htm">本地链接</a></p>
<p><a href="mailto:zhangsan@163.com">freemoban@tom.com</a></p>
</body>
</html>

4.CSS定义按钮样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
    font: 140%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
    color: #666;
    background: #fff;
}
a:link, a:visited {
    display: block;
    width: 6em;
    padding: 0.2em;
    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;
}
</style>
</head>
<body>
<p><a href="#">按钮样式</a></p>
</body>
</html>

demo2 增加背景图片的按钮样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1.4em;
}
a:link, a:visited {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(//freemuban.com/js/cssdemo/button.gif) no-repeat left top;
  text-indent: 50px;
}
a:hover {
 background: #369 url(//freemuban.com/js/cssdemo/button-over.gif) no-repeat left top;
 color: #fff;
}
</style>
</head>
<body>
<p><a href="#">按钮样式</a></p>
</body>
</html>

demo3 增加白色箭头按钮的效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
    font: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
    font-size: 1.4em;
}
a:link,
a:visited {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    color: #000;
    text-decoration: none;
    background: #94B8E9 url(//freemuban.com/js/cssdemo/pixy-rollover.gif) no-repeat left top;
    text-indent: 50px;
}
a:hover {
    background-color: #369;
    background-position: right top;
    color: #fff;
}
</style>
</head>
<body>
<p><a href="#">按钮样式</a></p>
</body>
</html>


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

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