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)


相关推荐

  • Yolov5更换backbone,与模型压缩(剪枝,量化,蒸馏)

    Yolov5更换backbone,与模型压缩(剪枝,量化,蒸馏)目前支持更换yolov5的backbone主干网络为Ghostnet,以及采用eagleeye的剪枝方法支持对yolov5系列的剪枝。后续,将会添加更多更轻量,更优秀的主干网络,比如swintrans,…

  • 随机森林回归算法_随机森林算法的优缺点

    随机森林回归算法_随机森林算法的优缺点随机森林回归算法原理随机森林回归模型由多棵回归树构成,且森林中的每一棵决策树之间没有关联,模型的最终输出由森林中的每一棵决策树共同决定。随机森林的随机性体现在两个方面:1、样本的随机性,从训练集中随机抽取一定数量的样本,作为每颗回归树的根节点样本;2、特征的随机性,在建立每颗回归树时,随机抽取一定数量的候选特征,从中选择最合适的特征作为分裂节点。算法原理如下:(a)从训练样本集S中随机…

  • java查询数据导出excel并返回给浏览器下载

    java查询数据导出excel并返回给浏览器下载效果图:1.点击导出表按钮2.接着就会出现下图3.点击上图中的确定按钮再接着就会出现下图4.点击上图中的保存按钮接着就会出现下图,浏览器下载完成后的提示5.打开下载好的文件如下图好了,废话不多少,上代码jsp前端代码&lt;divstyle="height:30px;"&gt; &lt;a&gt;时间:&lt;/a&gt;…

  • mysql8.0修改用户密码_sql数据库更改用户登录密码

    mysql8.0修改用户密码_sql数据库更改用户登录密码示例:修改mysql数据库中的user表中的test用户的登录密码。MySQL版本号:8.0.15步骤:登录mysqlmysql-uroot-p输入登录密码使用mysql数据库USEmysql修改密码ALTERUSER’test’@’localhost’IDENTIFIEDWITHmysql_native_passwordBY’新密码’;…

  • redis查数据

    redis查数据

  • python %s%d(古代汉语中字的用法)

    %s格式化字符串print(‘str1%s’%’str2’)&gt;&gt;str1str2#意思是%作为一个替代,将后面的‘str2’字符串加到str1后面案例示范具体用法string="hello"#%s打印时结果是helloprint"string=%s"%string#output:string=hello#…

发表回复

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

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