文章目录
- 需求
- 分析
- 代码
- 注意
需求
制作一个相关链接
分析
代码
- html
<div class="box"><div class="title"><span>相关链接</span></div><div class="links"><span><a href="https://www.baidu.com" target="_blank">网址111</a></span>|<span><a href="https://www.baidu.com" target="_blank">网址222</a></span></div></div>
- css
.box {width: 100%;margin: 10px 0;}.title {height: 42px;margin-top: 10px;background: url("../src/assets/images/dashboard/bg-title.png") no-repeat;/* background: url("@/assets/images/dashboard/bg-title.png") no-repeat; */background-size: 100% 100%;letter-spacing: 5px;display: flex;justify-content: space-between;>span {font-size: 18px;font-family: "YouSheBiaoTiHei";margin-left: 44px;color: #F4FBFF;font-weight: bold;line-height: 33px}}.links {height: 70%;color: #fff;font-size: medium;display: flex;justify-content: center;align-items: center;span {margin: 0 10px;a {text-decoration: underline;text-underline-offset: 5px;/* 设置下划线与文字的距离 */color: inherit;}a:hover {color: #015293;}}}
- 总
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相关链接示例</title><style>body {background-color: #015293;}.box {width: 100%;margin: 10px 0;}.title {height: 42px;margin-top: 10px;background: url("../src/assets/images/dashboard/bg-title.png") no-repeat;/* background: url("@/assets/images/dashboard/bg-title.png") no-repeat; */background-size: 100% 100%;letter-spacing: 5px;display: flex;justify-content: space-between;>span {font-size: 18px;font-family: "YouSheBiaoTiHei";margin-left: 44px;color: #F4FBFF;font-weight: bold;line-height: 33px}}.links {height: 70%;color: #fff;font-size: medium;display: flex;justify-content: center;align-items: center;span {margin: 0 10px;a {text-decoration: underline;text-underline-offset: 5px;/* 设置下划线与文字的距离 */color: inherit;}a:hover {color: #015293;}}}</style>
</head><body><div class="box"><div class="title"><span>相关链接</span></div><div class="links"><span><a href="https://www.baidu.com" target="_blank">网址111</a></span>|<span><a href="https://www.baidu.com" target="_blank">网址222</a></span></div></div>
</body></html>
注意
- a 标签点击后开启新的窗口
a标签打开新窗口 只需要在a标签后面加 target=“_blank”
<a href="index.html" target="_blank">跳转到新窗口打开</a>
扩展：a标签后面加 target=“_self” 是此窗口默认打开 (这个属性是默认的)
<a href="index.html" target="_self">此窗口打开</a>
- a 标签点击后的文字颜色
a {text-decoration: none; /* 去除下划线 */color: inherit; /* 继承父元素颜色 */
}
a:visited {color: inherit; /* 访问后颜色 */
}
a:active {color: inherit; /* 点击时颜色 */
}
a:hover {color: inherit; /* 悬停时颜色 */
}
- a 标签的下划线如何离文字一定距离
a {text-decoration: underline;text-underline-offset: 5px; /* 设置下划线与文字的距离 */text-decoration-thickness: 2px; /* 设置下划线的粗细 */
}
