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

css设置超链接样式和css设置列表样式<styletype=”text/css”>a:LINK{color:red;text-decoration:none;}a:VISITED{color:green;text-decoration:none;}a:HOVE…

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

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>

 

默认的(没添加样式的超链接)

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

 

加了样式之后默认的

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

 

访问之后的超链接

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

 

 

创建按钮式超链接

<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设置列表样式

鼠标放上去有按下去的效果

 

css设置列表样式

设置列表符号

没加样式效果

css设置超链接样式和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>

 

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

设置列表图片符号

<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设置列表样式

 

创建简单导航菜单

 

 

<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设置列表样式

<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设置列表样式

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161740.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号