2017-04-06 56 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; 
} 

對於當前的鏈接,你爲什麼不給這個.current類添加一些樣式?

.current { 
    color: green; 
} 

至於去到不同的頁面,如果你正在做這個經典的HTML鏈接,CSS方式,您只需爲每個頁面不同的.html文件。所以其中一個鏈接可以是<a href="about.html">About</a>