target的使用:a标签选中

最新推荐文章于 2024-03-17 11:48:44 发布

令月十一

最新推荐文章于 2024-03-17 11:48:44 发布

阅读量1.6k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44234050/article/details/104015503

版权

a标签问题：
a标签点击之后会回到页面顶端，造成极大的不方便。因此使用js中的——href=“javascript：（0）”即可使页面不跳回页面顶端；

target的使用：
target：

URL（href的指向）带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

* {

margin: 0;

padding: 0;

}

.header {

width: 400px;

margin: 250px auto;

text-align:justify;

text-justify:inter-word;

text-align: center;

}

.click a {

width: 50px;

height: 50px;

display: block;

background: red;

margin-top: 50px;

line-height: 50px;

text-decoration: none;

display: inline-block;

border-radius: 50%;

box-shadow: 0px 0px 20px 5px rgba(108, 168, 206, 0.6);

}

.con1:target~.click #ck1,

#con2:target~.click #ck2,

#con3:target~.click #ck3{

background: bisque;

font-size: 20px;

color: blue;

}

.cons {

width: 50px;

height: 50px;

position: relative;

background: blueviolet;

display: inline-block;

}

</style>

</head>

<body>

<div class="header">

<div id="con1" class="cons con1">

</div>

<div id="con2" class="cons">2

</div>

<div id="con3" class="cons">

</div>

<div class="click">

<a href="#con1" id="ck1" class="cs1">1</a>

<a href="#con2" id="ck2">2</a>

<a href="#con3" id="ck3">3</a>

</div>

</div>

</body>

</html>

主要是选中元素之后可以改变点击位的样式，用到了选择器，所以需要将点击位放在链接位之后，同时要将链接位置于最外层，以保证其兄弟可选！

两端对齐demo页面
父容器使用：

display:flex;

justify-content:space-between;

设置弹性盒子的有点：行式布局可控，在ul-li使用中，一单行为一ul，对ul使用flex定性，对内部内容可不添加宽度（图片和a标签添加！），发现一个特点是：当外部使用display：flex；justify-content:space-between；之后，其子元素还需要使用的话就不用在添加justify-content:space-between;了！

今天主要对整体的布局进行了修改，一会对点击时间处理一下，明天对轮播图和整体在修改，这个页面就算整体结束了！！

令月十一

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
target的使用:a标签选中

a标签问题：a标签点击之后会回到页面顶端，造成极大的不方便。因此使用js中的——href=“javascript：（0）”即可使页面不跳回页面顶端；target的使用：target：URL（href的指向）带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。代码<!...
复制链接

扫一扫