Question

＆＃13;

<!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>
		      <a href="#">Home</a>
		      <a href="#" class  = "current">Team</a>
		      <a href="#">History</a>
		      <a href="#">USA ultimate</a>
	    </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>

＆＃13;

如何浏览像家一样的多个页面有一些内容和历史有一些像这样的其他内容.... 指向当前页面的链接的样式应与其他链接的样式不同。图像现在应该是页面的一部分。如何为不同的导航事物获取不同的页面。

Answer 1

不确定你想要用背景图像做什么...裁剪它？我认为你的意思是让它看起来很漂亮：

body {
    background-size: cover;
}

对于当前链接，为什么不在这个.current类中添加一些样式？

.current {
    color: green;
}

至于进入不同页面的链接，如果你这样做是经典的html，css方式，你只需要为每个页面提供不同的.html文件。因此，其中一个链接可以是<a href="about.html">About</a>

如何在css中导航图片

1 个答案: