如何處理css中的超鏈接？

我已經在html文件中創建了5個超鏈接，但是我想給它們之間的空間我應該怎麼做一點幫助！如何處理css中的超鏈接？

謝謝！

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

來源

2017-02-12 ashu_legacy

請複製你的小提琴至今做了什麼左右.. – Lal

我想給間距之間的多條鏈路幫幫忙！ –

我認爲你正在尋找最簡單的方法是：

.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的選擇器，它的權重比類別爲的選擇器的權重要大，它比HTML容器的選擇器的權重更大。這就是所謂的CSS特異性 CSS-specifity calculator by keegan.st

CSS specifity explained by css-tricks

來源

2017-02-12 16:59:11

thanx！它工作完美。 –

總結他們在一個div和風格的股利與word-spacing: 10px; :)

來源

2017-02-12 16:37:17 Shobhit

儘量避免在您的HTML文件的自定義CSS的樣式，包括他們在您的CSS-文件。您可以在您的CSS文件中使用padding或margin，請參閱此link的差異。

YourHTMLfile.html

<head> 
    <link rel="stylesheet" href="YourStyleFile.css"> 
</head> 

<body> 

    ... 

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

</body>

YourStyleFile.css

.link a { 
    padding: 16px; 
    color: white; 
}

編輯：確保創建CSS-文件，並將其添加到您的HTML你<head>節-文件。他們都必須在同一個目錄中。爲什麼我的代碼可能不適合你的另一個原因是，也許你有另一個CSS文件覆蓋.link類。

來源

2017-02-12 16:55:27 Michael

此代碼無效 –

請嘗試我編輯的版本 – Michael

如何處理css中的超鏈接？

回答

相關問題