css设置超链接样式和css设置列表样式[亲测有效]
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说css设置超链接样式和css设置列表样式[亲测有效],希望能够帮助你!!!。
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第1张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-566a2607ae1c4ae185ef9b186f1ad779.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第1张_编程好6博客")
<style type="text/css">
a:LINK {
color: red;
text-decoration: none;
}
a:VISITED {
color: green;
text-decoration: none;
}
a:HOVER {
background-color: yellow;
text-decoration: none;
}
</style>
<a href="http://www.123.com">超链接</a>
默认的（没添加样式的超链接）
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第2张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-58346567c7b54ac0b7cfc1ea2869e2c4.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第2张_编程好6博客")
加了样式之后默认的
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第3张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-ef54666ea6c24c54929e3569938625cf.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第3张_编程好6博客")
访问之后的超链接
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第4张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-3e7c7f521e5d4fbd9fb45c23ad25ac04.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第4张_编程好6博客")
创建按钮式超链接
<head>
<style type="text/css">
body{
margin: 20px;
}
a{
font-family: Arial;
margin: 5px;
}
a:LINK,a:VISITED {
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#DDD;
text-decoration: none;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:HOVER {
color: #821818;
padding: 5px 8px 3px 12px;
background-color: #CCC;
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="http://www.1234.com">Java</a>
<a href="http://www.1234.com">Php</a>
<a href="http://www.1234.com">.Net</a>
</body>
未被访问和已经访问过的超链接
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第5张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-4adc9676804b4706ab6a5cf2d090a127.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第5张_编程好6博客")
鼠标放上去有按下去的效果
css设置列表样式
设置列表符号
没加样式效果
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第6张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-0111ba2edc6843c2ab1446b8a25b49d5.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第6张_编程好6博客")
<style type="text/css">
ul,ol{
list-style-type: square;
}
</style>
<ul>
<li>主页</li>
<li>我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li>关于我</li>
</ul>
<ol>
<li>主页</li>
<li style="list-style-type: circle;">我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li style="list-style-type: none;">关于我</li>
</ol>
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第7张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-fbd1884acc444454b11d7130c358394e.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第7张_编程好6博客")
设置列表图片符号
<style type="text/css">
ul,ol{
list-style-image: url("../li.png");
}
</style>
</head>
<body>
<ul>
<li>主页</li>
<li>我的博客</li>
<li style="list-style-image: url('../image.png');">我的相册</li>
<li>留言</li>
<li>关于我</li>
</ul>
<ol>
<li>主页</li>
<li>我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li>关于我</li>
</ol>
</body>
效果图
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第8张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-470b085f4c464731b2eccc5274589d40.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第8张_编程好6博客")
创建简单导航菜单
<style type="text/css">
#navigation {
width:120px;
font-family:Arial;
font-size:14px;
text-align:right
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下划线 */
}
#navigation li a{
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
<div id="navigation">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">关于我</a></li>
</ul>
</div>
效果图
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第9张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-d6932ed51e0b4d28b3044d3c7277255d.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第9张_编程好6博客")
<style type="text/css">
#navigation {
font-family:Arial;
font-size:14px;
text-align:center;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下划线 */
float: left;
}
#navigation li a{
width:120px;
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
效果图：
![css设置超链接样式和css设置列表样式[亲测有效]_https://bianchenghao6.com/blog__第10张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-0db1f521d60046ac8d1ebe8e2de768bf.jpg "css设置超链接样式和css设置列表样式[亲测有效]__第10张_编程好6博客")
上一篇
已是最后文章
下一篇
已是最新文章
最新文章
![](https://connect.qq.com/widget/shareqq/index.html?url=https://bianchenghao6.com/blog/author/1&sharesource=qzone&title=css设置超链接样式和css设置列表样式[亲测有效]&pics=https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-566a2607ae1c4ae185ef9b186f1ad779.jpg&summary=css设置超链接样式和css设置列表样式[亲测有效]<styletype="text/css">a:LINK{color:red;text-decoration:none;}a:VISITED{color:green;text-decoration:none;}a:HOVE...&desc=css设置超链接样式和css设置列表样式[亲测有效]<styletype="text/css">a:LINK{color:red;text-decoration:none;}a:VISITED{color:green;text-decoration:none;}a:HOVE...){kind=link}
![](https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://bianchenghao6.com/blog/author/1&sharesource=qzone&title=css设置超链接样式和css设置列表样式[亲测有效]&pics=https://img.mushiming.top/app/bianchenghao6_com/2023-05-25-566a2607ae1c4ae185ef9b186f1ad779.jpg&summary=css设置超链接样式和css设置列表样式[亲测有效]<styletype="text/css">a:LINK{color:red;text-decoration:none;}a:VISITED{color:green;text-decoration:none;}a:HOVE...){kind=link}
