2017-04-06 10 views
-3

どのように私は、いくつかのコンテンツと歴史がそのようないくつかの他のコンテンツを持っていたかの家のような複数ページのためにナビゲートするためにCSS

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body { 
 
background-image: url("http://intro-webdesign.com/CSS/assignment- 
 
2/images/flywheel.jpg"); 
 
background-size:900px 250px; 
 
background-repeat: no-repeat; 
 
background-color: #cccccc; 
 
padding:10px; 
 
margin:10px 0px 0px 0px; 
 
} 
 
a:link { 
 
text-decoration: none; 
 
background:white; 
 
border-radius: 5px; 
 
-webkit-border-radius:10; 
 
padding:20px 50px; 
 
    margin-left:50px; 
 
} 
 
.left 
 
{ 
 
margin:150px 900px 0px 2px; 
 
width:20px; 
 
padding:20px; 
 
border:30px; 
 
height:150px; 
 
background-color:#669900; 
 
padding-top: 50px; 
 
padding-right: 30px; 
 
padding-bottom: 50px; 
 
padding-left: 30px; 
 
} 
 
.right 
 
{ 
 
margin:0px 900px 0px 2px; 
 
width:200px; 
 
padding:20px; 
 
height:150px; 
 
background-color:#669900; 
 
padding-top: 50px; 
 
padding-right: 30px; 
 
padding-bottom: 50px; 
 
padding-left: 30px; 
 
} 
 
.bottom 
 
{ 
 
margin:0px 900px 2px 2px; 
 
width:200px; 
 
padding:20px; 
 
height:150px; 
 
background-color:#669900; 
 
padding-top: 50px; 
 
padding-right: 30px; 
 
padding-bottom: 50px; 
 
padding-left: 30px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    <h1><font color="white">llo World!</h1> 
 
<nav> 
 
\t \t  <a href="#">Home</a> 
 
\t \t  <a href="#" class = "current">Team</a> 
 
\t \t  <a href="#">History</a> 
 
\t \t  <a href="#">USA ultimate</a> 
 
\t  </nav> 
 
     <img class="left" 
 
    src="https://hiphappy.files.wordpress.com/2011/04/people-playing.jpg"> 
 
      <img class="right" 
 
    src="https://previews.123rf.com/images/yanlev/yanlev1203/yanlev1 
 
    20300149/12968910-group-of-young-people-playing-volleyball-on-the-beach- 
 
    Stock-Photo.jpg"> 
 
     <img class="bottom" 
 
    src="https://aos.iacpublishinglabs.com/question/aq/1400px-788px/how- 
 
    many-people-play-video-games_71f31bc8e3ca06e9.jpg? 
 
    domain=cx.aos.ask.com" 
 
</body> 
 
</html>

で写真をナビゲートすることができます.... 現在のページへのリンク他のリンクとは異なるスタイルにする必要があります。 画像はページの一部になります。異なるナビゲートされたもののための異なるページを得る方法。

+2

です。申し訳ありませんが、これは少し不明です。あなたは何を達成しようとしていますか? – itamar

+0

家のようなページをナビゲートしたいのですが、そのようなコンテンツと履歴が違う... –

答えて

0

あなたが背景画像で何をしたいか正確にわからない...それを切り取る?

body { 
    background-size: cover; 
} 

現在のリンクについては、現在のクラスにいくつかのスタイルを追加してみませんか?あなたはこの古典的なhtmlのやっている場合は、別のページに行くリンクについては

.current { 
    color: green; 
} 

は、CSSの方法は、あなたは、単にページごとに異なる.htmlファイルを必要としています。したがって、リンクの1つは<a href="about.html">About</a>

関連する問題