大家好，又见面了，我是你们的朋友全栈君。
<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>
默认的（没添加样式的超链接）
加了样式之后默认的
访问之后的超链接
创建按钮式超链接
<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设置列表样式
设置列表符号
没加样式效果
<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>
设置列表图片符号
<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>
效果图
创建简单导航菜单
<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>
效果图
<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>
效果图：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/161740.html原文链接：https://javaforall.net
