不同造型

Question

我一個bulding的網站，你可以看到一個有點複雜的局面：http://test.internet.az.pl/panel/lost_password.php

我想在我的文字相同的虛線在這個環節「Powrót下顯示做strony logowania>」

所以，我需要爲了消除它，一個文本，一個空間，一個用於創建3個不同的‘>’圖像符號：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px"> 
     <a class="a" href="index.php">Powrót do strony logowania</a> 
     <a style="border:0px; text-decoration:none" href="index.php"></a> 
     <a href="index.php"><img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px"></a> 
</div> 

有什麼辦法減少此代碼？

Answer 1

是的，在一個錨內使用跨度和img。

事情是這樣的：

<a class="a" href="index.php"> 
    <span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" /> 
</a> 

CSS：

a.a span {border-bottom: 1px dotted;} 
a.a img {border: 0;} 

順便說一句。儘量避免內聯樣式。

Answer 2

不要使用三個<a>標籤，使用<span>的錨點：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px"> 
    <a href="index.php"> 
    <span class="dotted">Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px"> 
    </a> 
</div> 

CSS：

a { /* general anchor rules */ } 
.dotted { border-bottom: 1px dotted; } 

Answer 3

使用span標籤

試試這個代碼：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px"> 
    <a href="index.php"> 
    <span class="dot">Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px"> 
    </a> 
</div> 

CSS：

a{ 
text-decoration: none; 
color: white; 
} 
.dot{ border-bottom: 1px dotted; } 
.dot:hover{ border-bottom: none; }