个人中心
gpt4 book ai didi

html - 导航问题

转载 作者：行者123 更新时间：2023-11-28 09:51:08 25 4
gpt4 key购买 nike

我希望有人能帮我导航。目前我将导航中的元素作为列表元素而不是将它们包装在标签中，但现在我将它们包装在标签中我遇到了我不知道如何解决或为什么会发生的问题。这是导航在导航之前的样子。

HTML 

  <nav> <ul>
  <li>Home </li>
  <li> News </li>
  <li>Pre-Order </li> </ul>
  </nav>

  <div class="news">

  <div class="ind"><article class="news"> <h4> Meet Elf At A Store Near You </h4><img class="story" src="year.jpg"/> <p class="story"> Want to meet buddy himself, 
  well now you can. He will be at numerous shopping centres all around the country to meet his fans.
  A list of destinations buddy will be attending will be released soon so you can have time to meet
  the Giant Elf. Feel free to have pictures with him and have a short chat, and dont be worried all elves are 
  friendly... well most!</p> </article></div>

  <div class="ind"><article class="news"> <h4> Elf Set To Be The Chrismas Movie Of The Year </h4> <img class="story" src="year2.jpg"/><p class="story"> With 
  plenty of other christmas movies due for release in december their is alot of competition for buddies
  charming story, but critics have already said Elf is due to be the success story this christmas.
  The Times said "The best christmas movie for many a year" while Total Film had already claimed it was
  a "modern day classic</p> </article></div>

  <div class="ind"><article class="news"> <h4> Pre-Order The DVD </h4> <img class="story" src="dvdnews.jpg"/><p class="story"> We can now announce that
  the DVD is avaible to order on our website. Follow the preorder link to get it delivered for our launch
  date. You can choose from the standard version and the special edition. We suggest you get the 
  special edition to make the most of the christmas feel and prolong Buddys Christmas spirit for
  as long possible.</p></article></div>

  <div class="ind"><article class="news"> <h4> Elf Set For Cinemas </h4> <img class="story" src="cinema.jpg"/><p class="story"> The Movie will now be in cinemas 
  earlier than expected. The date has moved forwards to 11th Decemeber after the incredible amound of interest.
  This will give everyone as much chance to watch it before christmas without the worry out it not being
  sold out. Be sure to book your tickets in advance to avoid dissapointment</p> </article>
  </div></div>


  <footer>
        <div id="social">
        <a href="https://www.facebook.com/ElfMovie"><img class="socialpics" src="facebook.png"/> <a/>
        <a href="https://twitter.com/ElfMovieQuotes"><img class="socialpics2" src="newtwit.png"/> <a/>
        </div>
        <div id="bottomrow">
        <img id="firstfootpic" class="footpic" src="dvdlogo.gif"/>
        <img class="footpic" src="bluray.png"/>
        <img class="footpic" src="universallogo.png"/>
        <img class="footpic" src="cardslogo.png"/> </div>
  </footer>

  </body>
</html>

CSS

body { 
       margin:10px auto;
       width:70%;
       paddding:0px;
       max-width:1000px;
}

header {background-image:url("banner.png");
       background-repeat: no-repeat;
       border-radius:20px;
       width;100%;
       height:200px;

        }

.title {
       height:180px;
       width:180px;
       margin-left:40%;
       margin-top:10px;}

.tagline {z-index:1;
         position:relative;
         bottom:95px;
         color:white;      
         font-weight:900;
         font-size:40px;
         text-align:center;
         color:black;
         font-family:Tw Cen MT;
         letter-spacing:5px; 
      }

.snow {
      width:100%;
      max-height:100px;
      z-index:-1;
      border-radius:20px; }

.cont {
         width:100%;
         height:560px;
         /*background-color:rgb(44,132,255);*/
         background:-moz-linear-gradient(rgb(36,124,250) 60%, white);
         border-radius:20px;
         position:relative;




         }

.pic {
       max-height:600px;
       max-width:900px;
       border-radius:30px;
       min-height:600px;
       min-width:900px; }



 article.drop {
         border-radius:30px;
         margin-bottom:20px;
}

nav {
    width:100%;
    margin-top:-17px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgb(214,20,21);
    height:60px;
    border-radius:10px
}

nav ul li{
           float:left;
           padding:0px 95px;
           list-style:none;
           color:white;
           margin-top:13px;
           font-family:Tw Cen MT;
           font-weight:bold;
           font-size:2em;
           transition:color 0.5s linear 0s;
           text-decoration:none;
           list-style-type:none;
           }

nav ul li :nth-child(1) {
    border-right:1px solid white} 


nav ul li :nth-child(2) {
    border-right:1px solid white} 

nav ul li :hover {
    color:lightgreen;
  }

article.drop { 
        width:29%;
        height:325px;
        display:inline;
        float:left;
        padding:15px;
        color:transparent;
        font-family:Tw Cen MT;
        margin-left:8px;
        -moz-transition-duration:2s;
        max-height:500px;
        color:transparent;
        position:relative;
        z-index:100;




       }

.art1 {background-color:green;
       }       

.art2 {background-color:rgb(214,20,21);
       }

.art1, .art2 {
       margin-top:10px }


.pic1 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
} 

.pic2 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
 } 

.pic3 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
}

.pic1:hover {
            transform:scale(1.025) }

.pic2:hover {
            transform:scale(1.025) }

.pic3:hover {
            transform:scale(1.025) }

h2 {
         padding:10px;
         margin-top:-10px;
         color:white;} 

article.drop:hover {

        height:500px; 
        width:29%;
        display:inline;
        float:left;
        padding:15px;
        color:white;
        font-family:Tw Cen MT;
        margin-left:8px;



        }

footer {
       background-color:rgb(36,124,250);
       height:250px;
       width:100%;
       float:clear; 
       border-radius:5px}

h3 {
   position:absolute;
   top:700px;

}

.footpic {
         float:left;
         width:100px;
         height:60px;
         padding:55px;
         margin-top:30px
         }

#firstfootpic {
              margin-left:40px; 
              }

aside.artbot {

             position:absolute;
             top:400px;
             left:0px; 

             }

p.artbot {
         color:blue;
         font-family:Tw Cen MT; 
         margin:0 auto;
         margin-left:10px;
         -moz-column-count:3;
         -moz-column-gap:70px;
         -moz-column-rule-width:10px;
         text-align:justify;
         margin-left:50px;
         width:90%;
         font-weight:500;
         text-transform:capitalize;
         }


.socialpics {
            width:80px;
            height:60px;
            margin-top:20px;
            margin-left:-15px;
             }

.socialpics2 {width:80px;
            height:70px;
            margin-top:20px;
            float:right
              }

.cb {
    height:80px;
    width:60px;
    position:absolute;
    top:400px;
    left:290px}

.cb2 {
    height:80px;
    width:60px;
    position:absolute;
    top:400px;
    left:600px}

    body {width:70%;
     font-family:Tw Cen MT}


div.news {
      background-color:rgb(214,20,21);
      /*background-image:url(wallpaper.jpg);*/
      width:100%;
      height:1200px;
      color:white;
      padding:30px;
      box-sizing:border-box;
      border-radius:10px;
      border:1px solid white
       }

article.news {           
             width:100%;
             height:260px;
             background-color:rgb(214,20,21);
             box-sizing:border-box;
             position:relative;
             top:-25px;
             border-radius:10px;
             opacity:0.85;
             ;
             }    

article.news:hover {           
             transform:scale(1.025);
             opacity:1;
             }    

h4 {
   color:white;
   width:100%;
   background-color:green;
   padding:10px;
   box-sizing:border-box;
   border-radius:10px;
   text-align:center;



  }

p.story {
        width:50%;
        padding-left:40px;
        padding-top:10px;
        font-size:1.1em;
        margin-top:42px
 }

img.story {
          height:180px;
          width:300px;
          float:right;
          margin-right:40px;
          border-radius:5px;
          }

div.ind {
        margin-bottom:0px;}

footer {
       margin-top:0px }

现在这是带有标签的，它们呈现不同。1.它们都出现在不同的线路上。2. 尽管输入了“无”，但仍无法删除要点3. 3个链接有border right，但应该只是前两个。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="order.css">
  <link rel="stylesheet" type="text/css" href="news.css">
  </head>
  <body>
 <header> 
  </header>

  <nav> <ul>
  <li> <a href="index.html"> Home </a> </li>
  <li> <a href="news.html"> News </a></li>
  <li> <a href="order.html"> Pre-Order </a></li> </ul>
  </nav>

  <div class="news">

  <div class="ind"><article class="news"> <h4> Meet Elf At A Store Near You </h4><img class="story" src="year.jpg"/> <p class="story"> Want to meet buddy himself, 
  well now you can. He will be at numerous shopping centres all around the country to meet his fans.
  A list of destinations buddy will be attending will be released soon so you can have time to meet
  the Giant Elf. Feel free to have pictures with him and have a short chat, and dont be worried all elves are 
  friendly... well most!</p> </article></div>

  <div class="ind"><article class="news"> <h4> Elf Set To Be The Chrismas Movie Of The Year </h4> <img class="story" src="year2.jpg"/><p class="story"> With 
  plenty of other christmas movies due for release in december their is alot of competition for buddies
  charming story, but critics have already said Elf is due to be the success story this christmas.
  The Times said "The best christmas movie for many a year" while Total Film had already claimed it was
  a "modern day classic</p> </article></div>

  <div class="ind"><article class="news"> <h4> Pre-Order The DVD </h4> <img class="story" src="dvdnews.jpg"/><p class="story"> We can now announce that
  the DVD is avaible to order on our website. Follow the preorder link to get it delivered for our launch
  date. You can choose from the standard version and the special edition. We suggest you get the 
  special edition to make the most of the christmas feel and prolong Buddys Christmas spirit for
  as long possible.</p></article></div>

  <div class="ind"><article class="news"> <h4> Elf Set For Cinemas </h4> <img class="story" src="cinema.jpg"/><p class="story"> The Movie will now be in cinemas 
  earlier than expected. The date has moved forwards to 11th Decemeber after the incredible amound of interest.
  This will give everyone as much chance to watch it before christmas without the worry out it not being
  sold out. Be sure to book your tickets in advance to avoid dissapointment</p> </article>
  </div></div>


  <footer>
        <div id="social">
        <a href="https://www.facebook.com/ElfMovie"><img class="socialpics" src="facebook.png"/> <a/>
        <a href="https://twitter.com/ElfMovieQuotes"><img class="socialpics2" src="newtwit.png"/> <a/>
        </div>
        <div id="bottomrow">
        <img id="firstfootpic" class="footpic" src="dvdlogo.gif"/>
        <img class="footpic" src="bluray.png"/>
        <img class="footpic" src="universallogo.png"/>
        <img class="footpic" src="cardslogo.png"/> </div>
  </footer>

  </body>
</html>

CSS

body { 
       margin:10px auto;
       width:70%;
       paddding:0px;
       max-width:1000px;
}

header {background-image:url("banner.png");
       background-repeat: no-repeat;
       border-radius:20px;
       width;100%;
       height:200px;

        }

.title {
       height:180px;
       width:180px;
       margin-left:40%;
       margin-top:10px;}

.tagline {z-index:1;
         position:relative;
         bottom:95px;
         color:white;      
         font-weight:900;
         font-size:40px;
         text-align:center;
         color:black;
         font-family:Tw Cen MT;
         letter-spacing:5px; 
      }

.snow {
      width:100%;
      max-height:100px;
      z-index:-1;
      border-radius:20px; }

.cont {
         width:100%;
         height:560px;
         /*background-color:rgb(44,132,255);*/
         background:-moz-linear-gradient(rgb(36,124,250) 60%, white);
         border-radius:20px;
         position:relative;




         }

.pic {
       max-height:600px;
       max-width:900px;
       border-radius:30px;
       min-height:600px;
       min-width:900px; }



 article.drop {
         border-radius:30px;
         margin-bottom:20px;
}

nav {
    width:100%;
    margin-top:-17px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgb(214,20,21);
    height:60px;
    border-radius:10px
}

nav ul li a{
           float:left;
           padding:0px 95px;
           list-style:none;
           color:white;
           margin-top:13px;
           font-family:Tw Cen MT;
           font-weight:bold;
           font-size:2em;
           transition:color 0.5s linear 0s;
           text-decoration:none;
           list-style-type:none;
           }

nav ul li a :nth-child(1) {
    border-right:1px solid white} 


nav ul li a:nth-child(2) {
    border-right:1px solid white} 

nav ul li a:hover {
    color:lightgreen;
  }

article.drop { 
        width:29%;
        height:325px;
        display:inline;
        float:left;
        padding:15px;
        color:transparent;
        font-family:Tw Cen MT;
        margin-left:8px;
        -moz-transition-duration:2s;
        max-height:500px;
        color:transparent;
        position:relative;
        z-index:100;




       }

.art1 {background-color:green;
       }       

.art2 {background-color:rgb(214,20,21);
       }

.art1, .art2 {
       margin-top:10px }


.pic1 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
} 

.pic2 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
 } 

.pic3 {width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid white;
}

.pic1:hover {
            transform:scale(1.025) }

.pic2:hover {
            transform:scale(1.025) }

.pic3:hover {
            transform:scale(1.025) }

h2 {
         padding:10px;
         margin-top:-10px;
         color:white;} 

article.drop:hover {

        height:500px; 
        width:29%;
        display:inline;
        float:left;
        padding:15px;
        color:white;
        font-family:Tw Cen MT;
        margin-left:8px;



        }

footer {
       background-color:rgb(36,124,250);
       height:250px;
       width:100%;
       float:clear; 
       border-radius:5px}

h3 {
   position:absolute;
   top:700px;

}

.footpic {
         float:left;
         width:100px;
         height:60px;
         padding:55px;
         margin-top:30px
         }

#firstfootpic {
              margin-left:40px; 
              }

aside.artbot {

             position:absolute;
             top:400px;
             left:0px; 

             }

p.artbot {
         color:blue;
         font-family:Tw Cen MT; 
         margin:0 auto;
         margin-left:10px;
         -moz-column-count:3;
         -moz-column-gap:70px;
         -moz-column-rule-width:10px;
         text-align:justify;
         margin-left:50px;
         width:90%;
         font-weight:500;
         text-transform:capitalize;
         }


.socialpics {
            width:80px;
            height:60px;
            margin-top:20px;
            margin-left:-15px;
             }

.socialpics2 {width:80px;
            height:70px;
            margin-top:20px;
            float:right
              }

.cb {
    height:80px;
    width:60px;
    position:absolute;
    top:400px;
    left:290px}

.cb2 {
    height:80px;
    width:60px;
    position:absolute;
    top:400px;
    left:600px}

    body {width:70%;
     font-family:Tw Cen MT}


div.news {
      background-color:rgb(214,20,21);
      /*background-image:url(wallpaper.jpg);*/
      width:100%;
      height:1200px;
      color:white;
      padding:30px;
      box-sizing:border-box;
      border-radius:10px;
      border:1px solid white
       }

article.news {           
             width:100%;
             height:260px;
             background-color:rgb(214,20,21);
             box-sizing:border-box;
             position:relative;
             top:-25px;
             border-radius:10px;
             opacity:0.85;
             ;
             }    

article.news:hover {           
             transform:scale(1.025);
             opacity:1;
             }    

h4 {
   color:white;
   width:100%;
   background-color:green;
   padding:10px;
   box-sizing:border-box;
   border-radius:10px;
   text-align:center;



  }

p.story {
        width:50%;
        padding-left:40px;
        padding-top:10px;
        font-size:1.1em;
        margin-top:42px
 }

img.story {
          height:180px;
          width:300px;
          float:right;
          margin-right:40px;
          border-radius:5px;
          }

div.ind {
        margin-bottom:0px;}

footer {
       margin-top:0px }

我确信这是一个非常简单的解决方案，但目前我只是看不出我做错了什么。

最佳答案

看起来您只是将 a 附加到您的 li 选择器，而没有预料到某些指定的样式实际上应该应用于 li 本身，即 float:left;

如果没有演示很难断言，但以下内容可能会有所帮助:

nav ul li{ /* <--- you need to seperate out the styles which apply to the li specifically*/
      float:left;
      list-style:none;
      margin-top:13px;
}
nav ul li a{
      padding:0px 95px;
      display:block;
      color:white;
      font-family:Tw Cen MT;
      font-weight:bold;
      font-size:2em;
      transition:color 0.5s linear 0s;
      text-decoration:none;
}
nav ul li:nth-child(1) {
    border-right:1px solid white
} 


nav ul li:nth-child(2) {
    border-right:1px solid white
} 

nav ul li a:hover {
    color:lightgreen;
}

关于html - 导航问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25079669/

25 4 0
文章推荐： javascript - 如何使用javascript替换字符串中所有匹配的纯文本字符串(但不是标签或属性)？
文章推荐： json - Swift 4 以变量为关键解析 json
文章推荐： jQuery 悬停/点击类
文章推荐： php - 在 php echo 中打印 javascript 变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com