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

最新推荐文章于 2024-05-26 15:00:58 发布
最新推荐文章于 2024-05-26 15:00:58 发布
阅读量2.9w 收藏 65
点赞数 15
分类专栏： CSS 文章标签： css设置超链接样式和css设置列表样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40135955/article/details/89163018
版权

 

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

 

效果图：

 

java对象999
关注
  • 15
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css样式–字体样式和链接样式详解
12-13
1.指定字体：font-family （1）实用通用字体系列： 复制代码代码如下:body {font-family: sans-serif;} （2）制定字体系列： 复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;...
CSS超链接样式详解
大河之犬的博客
10-03 7523
除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式cursor:url(图片地址),属性值;这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作这个“属性值”一般只会用到3个，分别是default、pointer和text。
CSS超链接
weixin_63825009的博客
07-26 1261
1.1设置超链接样式 1.2文本装饰 1.3背景色 链接按钮
css中去除链接样式
最新发布
jht_520的博客
05-26 186
这将去除链接的下划线并继承其父元素的文本颜色。你可以根据需要自定义其他样式，比如修改链接的。这将在鼠标悬停在链接上时。
css常用样式
denglangcheng82460的博客
04-11 487
字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weigh...
css超链接
weixin_46394746的博客
06-03 5269
一、CSS超链接样式 二、CSS超链接样式设置 1、CSS中可以根据超链接元素的状态，设置不同的样式属性 下面为4种超链接状态： a:link - 正常状态，未访问过的超链接状态 a:visited - 已访问过状态，用户已访问过的超链接状态 a:hover - 鼠标放上状态，当用户鼠标放在超链接上时状态 a:active - 点击状态，超链接被点击的那一刻状态。 运用实例 CSS超链接 2、CSS鼠标指针 设置鼠标形状 cursor:pointer; 3、设置超链接的样式（颜色、背景、字体……）
CSS 链接：Link
梁辰兴的博客
09-19 2554
在CSS中，可以通过伪类选择器来设置链接的样式，包括未访问的链接（a:link）、已访问的链接（a:visited）、鼠标悬停在链接上时（a:hover）和链接被点击时（a:active）这四种状态。CSS可以用来设置链接的样式，包括未访问的链接（a:link）、已访问的链接（a:visited）、鼠标悬停在链接上时（a:hover）和链接被点击时（a:active）这四种状态。链接颜色从正常未被访问的红色变为已被访问的绿色，当鼠标悬停在链接上时变为hotpink，最后在链接被点击时变为蓝色。
Dreamweaver小技巧之应用CSS样式表
09-24
4. 在“Selector”栏中输入“a”，表示我们要编辑所有的超链接样式。 5. 在弹出的“CSS 样式定义”对话框中，取消选中“Decoration”下的“Underline”，然后点击“OK”。 6. 为了实现鼠标悬停时链接变色，重复第2步...
CSS之列表样式与链接样式——每天一遍小知识
01-08
列表样式与链接样式一.列表样式类型——list-style-type1.介绍2. 列表图像和位置—— List Image and Position3.列表样式（快速标记）——list-style二.样式表——Styling the Tables1.表属性——Tables Properties2...
7款CSS3鼠标滑过超链接动画特效.zip
07-03
"css样式"标签则直接点明了主题，即这个资源是关于CSS样式的，特别是与超链接相关的CSS3特效。 【文件名称列表】 由于提供的信息只有一个数字"1544"，这可能是一个错误或者遗漏，通常压缩包内的文件名会包含更具体...
CSS3基本样式带习题答案
08-20
CSS3是CSS（层叠样式表）技术的最新版本，自1999年起开始制定，至今已经包含了丰富的模块和功能，极大地提升了网页设计的灵活性和表现力。2001年的W3C工作草案中，CSS3主要分为以下几个模块： 1. **盒子模型**：...
css控制超链接(css超链接样式)
09-25
主要介绍了css控制超链接的方法，也就是css超链接的样式，如给超链接a加上背景图片、给链接加上边框，,需要的朋友可以参考下
CSS样式之语法
weixin_34283445的博客
05-11 87
选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符（selector）：指定样式适用的标签，除指定标签外，样式不起作用 属性：样式的关键字 属性值：描述样式的值； 格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔 选择符 任何HTML元素都可以是一个CSS选择符 选择符仅仅是指向特别样式的元素 如：P {font-size:12pt}当中的选择符是...
【VUE/H5】H5调起数字键盘的坑，及手写移动端键盘代码
热门推荐
LuviaWu的博客
05-07 1万+
h5 调起数字键盘的坑 为了限制只能输入数字，不能输入小数点、加减号，走了敲多的弯路~~（查各种资料，然后各种测试） 现下来看看笔记： HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。 一、 type="number"时 1、只允许输入数字，（兼容ios、安卓）...
web前端html5+css3学习笔记(4)——超链接、列表
m0_52353966的博客
03-18 725
超文本是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。本篇学习超链接标签，可以更深刻理解超文本的内在含义，超链接标签可以实现四种功能；列表有三种分类。
网页设计基础内容总结（四）
m0_67859413的博客
11-03 628
网页设计基础内容总结（四）
css之超链接，盒子模型，定位
qq_2992427261
07-23 2116
css提供了四种a对象的伪类，他表示四种不同的状态， link：没有访问时的状态 visited：已经访问的链接 active：激活链接,单击链接但还没有释放之前的样式 hover：鼠标停留在链接上时 a{ …… } a:link{ …… } avisited{ …… } 注意在这里还有滤镜，动感模糊，透明度处理，阴隐设置，发光效果，x光效果（x...
CSS 3之超链接特效
程序员小白的博客
07-04 1299
通过使用伪类能对超链接进行修饰； 伪类是一种特殊的选择符，能被浏览器自动识别； 最大的用处是在不同状态下能对超链接定义不同的样式效果，是 CSS 3本身定义的一种类； 例子 1： 例子 2：给超链接加入提示内容 将图片作为背景图添加到超链接中，这样超链接能有更加精美的效果； 使用 属性来实现； 例子 2： 例子 3：...
CSS美化超链接样式
honeygirl_的博客
10-30 9246
美化超链接样式 一、使用动态伪类 注意！！！超链接的四种状态样式的排列是固定的，一般不能随意调换 正确的顺序时Link，visited,hover,active 当鼠标经过超链接是，会先执行第一行声明， 但是紧接着第三行声明会覆盖掉第一行和第二行声明的样式， 所以无法看到鼠标经过和被激活时的效果 <style type="text/css"> a:link{color: red;} ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值