css 链接变颜色 （加边框设置样式）

最新推荐文章于 2024-09-26 11:08:49 发布
最新推荐文章于 2024-09-26 11:08:49 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ios0213/article/details/51408137
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.wrap{
width:90%;
height:1000px;
border:2px solid #CCC;
margin:0 auto;
}
.wrap_01{
height:900px;
margin:0px 10px 0px 10px;
background-color:#EFEFEF;
}
.footer{
height:40px;
background-color:#B6B6B6;
margin:10px 10px;
}
ul{
margin:0 auto;
padding-top:30px;
list-style-type:none;
}
li{
float:left;
margin-right:69.5px;   <!--这里用外边距--!>
}
a{
text-decoration:none;
font-size:20px;
color:#777777;
font-family: Georgia, "Times New Roman", Times, serif
}
.wrap_01 ul #h:hover{
border-bottom:3px solid #F00;
}
.wrap_01 ul #j:hover{
border-bottom:3px solid #F00;
}


.wrap_01 ul #s:hover{
border-bottom:3px solid #F00;
}


.wrap_01 ul #a:hover{
border-bottom:3px solid #F00;
}
.wrap_01 ul #x:hover{
border-bottom:3px solid #F00;
}
.wrap_01 ul #w:hover{
border-bottom:3px solid #F00;
}
.wrap_01 ul #web:hover{
border-bottom:3px solid #F00;
}
.bottom{
width:100%;
height:50px;
position:fixed;
bottom:0;
background-color:#603;
</style>
</head>


<body>
<div class="wrap">
    <div class="wrap_01">
            <ul>
            <li id="h"><a href=#>HTML/CSS</a></li>
            <li id="j"><a href=#>JavaScript</a></li>
            <li id="s"><a href=#>Server Side</a></li>
            <li id="a"><a href=#>ASP.NET</a></li>
            <li id="x"><a href=#>XML</a></li>
            <li id="w"><a href=#>Web Services</a></li>
            <li id="web"><a href=#>Web Building</a></li>
            </ul>
    </div>
    <div class="footer">
    </div>
</div>
<div class="bottom">
<a href=#>123</a>
    </div>
</body>

</html>



ios0213
关注
专栏目录
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
薇眠winter的博客
08-04 1420
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
CSS 文本字体颜色设置方法(CSS color)
09-25
在CSS中，`color`属性允许你指定文本、链接、边框等元素的颜色。常见的颜色应用场合包括字体颜色、超链接颜色、网页背景颜色和边框颜色。根据W3C标准，颜色可以通过多种方式表示，包括RGB模式、十六进制颜色代码、...
html中图片超链接边框颜色改变颜色,ppt设置超链接颜色 PPT超链接文字点击后变颜色...
weixin_35878683的博客
06-07 1114
ppt怎么设置超链接字体的颜色准备工具/材料：装有windows 10的电脑一台，Microsoft Office 家庭和学生版 2016 ppt软件。点击插入-文本框-横向文本框输入文字内容，调整字体大校然后选中文字，点击插入-超链接。如何设置ppt超链接在点击过后变色变色要保持到ppt放映结束的那种接着在文件里面选择需要插入插连接的地址。插入了超连接之后，点击右上角的颜色选项。接着在弹出来的下...
html中加链接怎么去边框,怎么让点击链接后加个下边框_html/css_WEB-ITnose
weixin_34901693的博客
05-31 300
就像W3C的效果 不用图片做回复讨论(解决方案)a{background:#fff;}a:link, a:visited { background:red;}a{background:#fff;}a:link, a:visited { background:red;} 这个有红色背景 我只要下面有边框这个有红色背景 我只要下面有边框外层加个div，，，div:visited{bord...
第七章 利用CSS和多媒体美化页面
最新发布
whitesandcnm的博客
09-26 1264
你可以使用图片或字体图标替代默认的项目符号。htmlcss/ 移除默认项目符号 // Unicode字符：• /left: 0;/ 自定义符号颜色 // 符号大小 /为表头设置不同的样式，使其更突出。cssth {/ 自定义表头颜色 // 字体颜色 // 字体大小 // 全部大写 /
CSS 边框 背景 超链接
qq_42265536的博客
12-25 2232
边框： 对于一个元素，必须设置    border-width    border-style    border-color border-width : 宽度 border-style : 外观     none        无样式     hidden        与 none 相同，对于表，hidden 用于解决边框冲突     solid        实线     das...
html怎么放边框,html怎么设置边框
weixin_29585583的博客
06-19 1万+
html设置边框的方法：1、通过“border-width”属性设置边框宽度；2、通过“border-style”属性设置边框样式；3、通过“border-color”属性边框颜色。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑HTML 为元素设置边框属性：border，可以为元素这是上右下左四条边框(顺序很重要)取值有三个：1.border-wi...
css 超链接的颜色,用css样式控制超链接颜色显示
weixin_28895791的博客
08-03 3070
用css样式控制超链接颜色显示用css样式控制超链接颜色显示,阅读用css样式控制超链接颜色显示,很多人在网页上实现不同链接有不同的颜色上不知如何处理，如果改a的属性，好像所有的链接的颜色都改了。事实上，采用css样式实现这个效果比较简单。先看一下常用设置：a:link 超链接的普通样式a很多人在网页上实现不同链接有不同的颜色上不知如何处理，如果改a的属性，好像所有的链接的颜色都改了。事实上，采用...
CSS3悬停图片线条边框动画特效
06-24
CSS3的`border`属性可以设置边框的宽度、样式和颜色。例如，我们可以设置一个1像素宽的实线边框： ```css img { border: 1px solid transparent; } img:hover { border: 1px solid #000; } ``` 然而，为了实现...
CSS3鼠标经过个性边框特效
07-24
CSS3允许我们设置边框的颜色、宽度、样式和透明度，比如`border-color`, `border-width`, `border-style`, 和 `border-radius`。通过这些属性，我们可以创建各种复杂的边框效果。例如，`border-radius`可以用来创建...
使用css如何操作Table没有外边框只有内边框
09-25
CSS中的border属性可以用来定义元素边框的宽度、样式和颜色。当设置border为0时，可以隐藏边框，但为了使表格的单元格之间有分隔，可以为单元格（td或th）单独设置边框。 具体实现步骤如下： 1. 首先，在CSS中设置...
qrcodejs-通过链接生成二维码（带边框）.zip
07-08
本文将详细讲解如何使用JavaScript库qrcodejs来通过链接生成带有边框样式的二维码，以便更好地满足用户在视觉效果和功能上的需求。 首先，我们要了解qrcodejs库的基本原理。qrcodejs是一个轻量级的JavaScript库，...
css3邮票样式效果特效代码
03-20
CSS3的`border-image`允许我们将图像设置为边框，并定义如何拉伸或重复图像以适应边框大小。例如： ```css border-width: 边框宽度; border-style: 实线 | 虚线 | 点线等; border-image-source: url('边框图像URL')...
css3系列教程(边框颜色).rar
07-09
在CSS3中，边框颜色（border-color）是样式设计中的一个重要组成部分，它允许开发者为元素的四个边框分别设置不同的颜色，以增加视觉效果和设计的多样性。本系列教程将深入探讨如何有效地利用这一特性来提升网页制作...
CSS3动画属性边框属性等
11-22
**CSS边框属性**允许我们自定义元素的边框样式。`border` 是边框属性的简写，而如 `border-bottom`、`border-left`、`border-right` 和 `border-top` 则分别设置相应边框的完整属性。`border-radius` 提供了圆角边框...
html里面选中a标签有边框出现
热门推荐
u011498933的专栏
05-11 1万+
a标签在使用图片时或者设置属性成block时，点击会多加了蓝色的边框，并且点击后所有a标签都会出现一个虚线框，但是chrome中一直没发现这个问题，所以为了兼容性，还是在css中追加了做这个处理的式样进去： 去边框的方法 1、img标签增加属性： border='0'   border='0' 2、去点击后的虚线的方法，a标签增加属性：outline:none;   outline:n
HTML与CSS实现网页的超链接及美化
qq_64314976的博客
08-18 3376
本篇主要目的了解文本的基本样式，会使用超链接和悬浮状态的伪类选择器。综合应用HTML基本技术、CSS技术和相应的盒子模型概念来设计实践内容，以更简洁、更丰富的效果呈现出来。在原有的盒子模型基础上完成实践内容，理解如何在盒子模型里面插入图片信息，对于要显示的内容应用文本样式。其他布局尽量使用div等元素。超链接使用悬浮状态的伪类表示。...
HTML—— 超链接 行内框架 表格 知识总结。
TKY666的博客
02-24 4474
一、超链接 1. 简述 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 <a> 标签在 HTML 中创建链接 2. 举例 <a href="" target=""> 超链接</a> 实例 ..
图片设置超链接后出现边框的解决方案
T.Y 专栏
11-15 2521
以上这行代码中,含义是:在页面中插入了一张显示大小为宽200像素\高70像素PNG图片,并设置了超链接到http://www.baidu.com这个网址。 但实际应用中,会发现图片显示时会有边框,解决方法是置入一个参数 border="0" 修改后,代码如下:
CSS样式代码实践：透明、边框与渐变效果
这些CSS样式代码案例涵盖了多个方面，包括元素透明度、背景图像、边框样式、页面滚动、渐变效果、鼠标悬停交互以及图像自适应等。 1. 透明度设置：`filter:alpha(opacity=50);` 这行代码使用IE特有的滤镜属性设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值