2017-01-31 20 views
0

私はちょうど写真で私の問題を説明します。 https://snag.gy/jIilU4.jpg このテキスト装飾を離れる解決策はありますか?私はtext-decoration:noneを追加しようとしました。それは私のためには機能しません。私はかなり簡単に説明することができますが、私はCSSでかなり新しいです。CSS3 a:-webkit-any-linkから下線を取り除く方法

body { 
    background-image: url(img/bg.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: top; 
    max-width: 100%; 
    height: auto; 
    background-size: cover; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 

.logo { 
    text-align: center; 
} 

.logo img { 
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px; 
    overflow: hidden; 
    transition-duration: 0.8s; 
    transition-property: transform; 
} 

.logo img:hover { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

.logo a { 
    text-decoration: none; 
} 

#slideshow { 
    margin: 0 auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    display: box; 
    flex-align: center; 
    flex-pack: center; 
} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
} 

HTMLコードがあります:

<!DOCTYPE html> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<head> 

    <title>How to align the items of the flexible element</title> 
    <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
</head> 

<body> 
    <div class="menu"> 
     <ul> 
      <li><a class="active" href="#home">Home</a></li> 
      <li><a href="#contact">Account</a></li> 
      <li><a href="#about">Library</a></li> 
      <li><a href="#about">Download</a></li> 
      <li><a href="#about">Community</a></li> 
      <li><a href="#about">Highscores</a></li> 
      <li><a href="#about">Premium</a></li> 
      <li><a href="#about">Forum</a></li> 
     </ul> 
    </div> 
    <div class="logo"> 
     <a href="/" title="Medivia Online"> 
      <img src="css/img/medivia.png" alt="Medivia Logo"> 
     </a> 
    </div> 

    <div style="width:800px; margin:0 auto;" id="slideshow"> 

     <div> 
      <img src="css/img/chimera.png"> 
     </div> 
     <div> 
      <img src="css/img/queens_follower.png"> 
     </div> 
     <div> 
      <img src="css/img/player_killing.png"> 
     </div> 
     <div> 
      <img src="css/img/general.png"> 
     </div> 
     <div> 
      <img src="css/img/hydra.png"> 
     </div> 
     <div> 
      <img src="css/img/ogre_death.png"> 
     </div> 
     <div> 
      <img src="css/img/raid.png"> 
     </div> 
     <div> 
      <img src="css/img/icenhaal.png"> 
     </div> 

    </div> 

    <script src="js/jquery-3.1.1.min.js"> 
    </script> 
    <script> 
     $("#slideshow > div:gt(0)").hide(); 

     setInterval(function() { 
      $('#slideshow > div:first') 
       .fadeOut(1000) 
       .next() 
       .fadeIn(1000) 
       .end() 
       .appendTo('#slideshow'); 
     }, 3000); 
    </script> 
</body> 
+2

コード全体を投稿してください(htmlがありません) – Chris

答えて

0

cssセレクタに問題があります。あなたは、ul liの前に親クラスやID、メニューに設定したタグは言いません。これらのタグはあなたのhtmlページ上のすべてのul、li、aに影響します。 Read This

body { 
 
background-image: url(img/bg.jpg); 
 
background-repeat: no-repeat; 
 
background-attachment: fixed; 
 
background-position: top; 
 
max-width: 100%; 
 
height: auto; 
 
background-size: cover; 
 
} 
 

 
.menu ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: #333; 
 
} 
 

 
.menu li { 
 
float: left; 
 
} 
 

 
.menu li a { 
 
display: block; 
 
color: white; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
.menu a:hover:not(.active) { 
 
background-color: #111; 
 
} 
 

 
.active { 
 
background-color: #4CAF50; 
 
} 
 

 
.logo { 
 
text-align: center; 
 
} 
 

 
.logo img { 
 
height: auto; 
 
width: auto; 
 
max-width: 300px; 
 
max-height: 300px; 
 
overflow: hidden; 
 
transition-duration: 0.8s; 
 
transition-property: transform; 
 
} 
 

 
.logo img:hover { 
 
transform: rotate(360deg); 
 
-webkit-transform: rotate(360deg); 
 
} 
 

 
.logo a { 
 
text-decoration: none; 
 
} 
 

 
#slideshow { 
 
margin: 0 auto; 
 
position: relative; 
 
width: 240px; 
 
height: 240px; 
 
padding: 10px; 
 
display: box; 
 
flex-align: center; 
 
flex-pack: center; 
 
} 
 

 
#slideshow > div { 
 
position: absolute; 
 
top: 10px; 
 
left: 10px; 
 
right: 10px; 
 
bottom: 10px; 
 
}
<!DOCTYPE html> 
 
<meta charset="utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<head> 
 

 
<title>How to align the items of the flexible element</title> 
 
<link rel="stylesheet" type="text/css" href="css/styles.css" /> 
 
</head> 
 

 
<body> 
 
<div class="menu"> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a></li> 
 
     <li><a href="#contact">Account</a></li> 
 
     <li><a href="#about">Library</a></li> 
 
     <li><a href="#about">Download</a></li> 
 
     <li><a href="#about">Community</a></li> 
 
     <li><a href="#about">Highscores</a></li> 
 
     <li><a href="#about">Premium</a></li> 
 
     <li><a href="#about">Forum</a></li> 
 
    </ul> 
 
</div> 
 
<div class="logo"> 
 
    <a href="/" title="Medivia Online"> 
 
     <img src="css/img/medivia.png" alt="Medivia Logo"> 
 
    </a> 
 
</div> 
 

 
<div style="width:800px; margin:0 auto;" id="slideshow"> 
 

 
    <div> 
 
     <img src="css/img/chimera.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/queens_follower.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/player_killing.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/general.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/hydra.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/ogre_death.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/raid.png"> 
 
    </div> 
 
    <div> 
 
     <img src="css/img/icenhaal.png"> 
 
    </div> 
 

 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script> 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    setInterval(function() { 
 
     $('#slideshow > div:first') 
 
      .fadeOut(1000) 
 
      .next() 
 
      .fadeIn(1000) 
 
      .end() 
 
      .appendTo('#slideshow'); 
 
    }, 3000); 
 
</script> 
 
</body>

+0

どちらが選ばれるのか見てみましょう...:D – Gezzasa

+1

@Gezzasa私は緑のチックを待っていますか?私はちょうど答えを与える。今度別の質問に移動します:) –

+0

まあ、私は.logo aをターゲットにしようとしましたが、メニューdivだけが変更されました。 – serengeti

2

あなたはdiv要素ではなく、リンク(タグ)をターゲットとしています。

.logo a{ 
    text-decoration: none; 
} 
+0

.logoをターゲットにしようとしましたが、メニューdivのみが変更されました。 – serengeti

+0

'.logo a'を指定したときにメニューがどのようにターゲットにされたか分かりません。私は何か不足しているか、あなたのCSSマークアップが壊れています。 – Gezzasa

0

CSSの選択が間違っています。ハイパーリンクは "a"タグなので、ページ全体から削除したい場合は、{...}を使用するか、特定のセクション(例:.logo a {...})を使用します。

関連する問題