刚开始用html和css编码，但我坚持通过导航栏使图片可见(Just started coding in html and css but i'm stuck at making the p

编程入门行业动态更新时间:2024-10-18 12:31:38

刚开始用html和css编码，但我坚持通过导航栏使图片可见(Just started coding in html and css but i'm stuck at making the picture seeable through the navigation bar)

正如你在上面看到的，我无法通过导航栏看到图片。请记住，我刚开始，我没有经验。这是我得到的，不知道从哪里去。

<body> <nav> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="sights.html">Sights</a></li> <li><a href="sakura.html">Sakura</a></li> </ul> </nav> </body> body{ background-image:url(pic1.jpg); } * { padding:0; margin:0; } nav { height:70px; text-align:center; background-color:rgba(255, 10, 173, 0.27); padding:20px; } nav li { display:inline-block; margin:0; padding-top:20px; } nav li a { text-decoration:none; color:#FFF; padding-left:150px; padding-right:150px; padding-top:20px; padding-bottom:20px; font-family:arial; text-align:center; background-color:rgba(170, 19, 120, 1); } nav li a:hover, .active { background-color:rgba(255, 77, 181, 0.87); }

我希望它看起来像这样

As you saw above i can't get the picture seeable through the navigation bar. Keep in mind i just started and i got no experience. This is what i got and don't know where to go from here.

HTML:

CSS:

body { background-image: url(pic1.jpg); } * { padding: 0; margin: 0; } nav { height: 70px; text-align: center; background-color: rgba(255, 10, 173, 0.27); padding: 20px; } nav li { display: inline-block; margin: 0; padding-top: 20px; } nav li a { text-decoration: none; color: #FFF; padding-left: 150px; padding-right: 150px; padding-top: 20px; padding-bottom: 20px; font-family: arial; text-align: center; background-color: rgba(170, 19, 120, 1); } nav li a:hover, .active { background-color: rgba(255, 77, 181, 0.87); }

Here is a screenshot of the expected output: