css设置超链接样式和css设置列表样式

大家好，又见面了，我是你们的朋友全栈君。

<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>

效果图：