html - 如何处理CSS中的超链接?

标签 html css web hyperlink

我在 html 文件中创建了 5 个超链接,但我想在它们之间留出空间 我该怎么做,有点帮助!

谢谢!

<body>
<div class="back">

    <div class="image">
        <img src="comp.jpg" alt="background image" style="width:100%; height:100%">

    </div>
    <h3 class="name" style="color: #d9d9d9">
        ASHUTOSH KUMAR SINGH
    </h3>

    <div class="link" align="middle">
        <a href="about.html" style="color: white">About</a>
        <a href="contact.html" style="color: white">Contact</a>
        <a href="skill.html" style="color: white">Skills</a>
        <a href="mywork.html" style="color: white">My Work</a>
        <a href="blog" style="color: white">Blog</a>

    </div>
<div class="myimg" align="middle">
    <div class="circle" align="middle">

    </div>
    <img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>

</div>
 </div>

这是我的CSS文件:在下面的代码中我创建了一类链接,其中我 级联它。我想在它们之间留出一些相等的空间,这样看起来就很整齐。

html,body{
    margin:0;
}

div.link{
font-size: 25px;
    position: fixed;
    /*text-space: 100;*/
    margin-top:500px;
    margin-left: 250px;
}
.back{
    height: 100%;
    width: 100%;
margin: 0;
 }

.image{
    position: fixed;

}
.myimg{
    position: absolute;
    margin-top:100px;
    margin-left: 500px;
}
.myimage{

    border: 2px solid rgba(114, 114, 114, 0.55);
    border-radius: 100%;
}
.circle{
    border: 2px ;
    border-radius: 100%;
    background-color: black;
}
.name{
    position: fixed;
    margin-top:420px;
    margin-left: 530px;
}

最佳答案

我认为您正在寻找的最简单的方法是:

.link a {margin-right:10px;}

唯一的问题是,所有链接元素现在从第一个到最后一个都具有右边距。 如果您想排除最后一个没有边距的元素,请添加附加内容:

.link a:last-child{margin-right:0px;}

记住,在CSS中你可以完美地嵌套CSS选择器

html body .back .link a{some-css-rule}

顺便说一句,选择器越具体,浏览器分析它们时就越重要)

<div class="some_class" id="some_id" style="color:grey;">sometext</div>

#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}

颜色将为灰色,因为内联选择器比具有 ID 的选择器具有更大的权重,后者比具有类的选择器具有更大的权重,后者比具有 ID 的选择器具有更大的权重html 容器。 这称为 CSS 特异性 CSS-specifity calculator by keegan.st

CSS specifity explained by css-tricks

关于html - 如何处理CSS中的超链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42189990/

相关文章:

jquery - 无法将图像固定到 Bootstrap 导航栏的顶部

asp.net - 所有 GridView 的通用 CSS 样式

javascript - Navigator.share 在 Angular 中不起作用,但在 codepen 中的测试中起作用

html - 将不同的标签与 HTML/CSS 中的下拉框对齐

javascript - 如何使用 2 个数组创建具有键和值的新数组?

javascript - 从js更改背景颜色

Java - 从需要登录的网站读取数据

php - 将位置变量从 Javascript 传递到 PHP 函数

css - 我应该如何覆盖 anchor 标记中 div 的悬停样式?

jquery - 日期选择器不工作