Question

基本上我遇到的问题是我有一些影响导航栏和滑块的CSS，因为它们都在使用，实际上导航栏正在工作但是滑块受到影响。

我对编码还很陌生，所以我不知道具体搜索什么来解决这个问题，非常感谢任何帮助。

HTML受到影响。

＆＃13;

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
    </li>
    <li>
      <img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
    </li>
  </ul>
</div>

＆＃13;

NAV BAR 

<!--section1-->

<section id="top" class="Back to top">
    
    <img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">

<div class="top-bar-container">
  <div class="top-bar">
  </div>
    <nav class="nav-bar">
      <ul>
        <li><a href="#content" class="selected">About</a></li>
          <li><a href="#photos" >Gallery</a></li>
          <li><a href="#menu">Menu</a></li>
          <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>

    </div>

<div class="header-container">
  <div class="header">
      
    </h3>
      
      <h4>

＆＃13;

NAV BAR CSS：

＆＃13;

.top-bar-container .top-bar {
  width: 800px;

}
.top-bar-container .top-bar .logo {
  float: left;
}
.top-bar-container .top-bar .logo span {
  color: #27AD60;

}
.top-bar-container .nav-bar {
  float: right;
}
.top-bar-container .nav-bar ul li {
  list-style-type: none;
  display: inline-block;
  padding: 21px 27px;
  font-size:15px;

  }
.top-bar-container .nav-bar ul li a:not(.active) {
  text-decoration: none;
  color: white;
}
.top-bar-container .nav-bar .active {
  color: white;
  text-decoration: none;
  padding-top:34px;
}

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}
ul li a {
  display: block;
  padding: 16px;
  color: grey;
  text-decoration: none;
  position: relative;
}
ul li a:hover, ul li a.selected{
  color:white;
}
ul li a.selected:before, ul li a:hover:before {
  content: '';
  width: 100%;
  position: absolute;
  top: -19px;
  left: 0;
  height: 3px;
  background: white;
}

h3{
      
    font-size: 121.5%;
  line-height: 2.;
   font-family: 'PT Sans', sans-serif;
  text-align: center;

}

＆＃13;

Answer 1

您的问题是CSS选择器的描述性不够。 ul和li将定位两个HTML部分。

您可以将它们更改为类或ID，以便选择器更具描述性。

我建议阅读CSS选择器，因为它会使HTML和CSS变得更容易。

CSS影响导航栏和滑块

1 个答案: