Question

我有一页我正在制作而且我被卡住了。响应式导航栏使用<ul><li>，我希望页面下方有不同的样式。在我得到这个之前，我一开始并没有多想它：

我可以更改什么才能使页面中的常规列表项而不是菜单看起来不同？这是page live

这是我的代码

/* General List */
ul.b {
list-style-type: disc;
}

/* Responsive Menu */
#menuBackground {
    background:#5EA5B9;
    width:100%;
    height:50px;
    text-align: center;
 }
#menuContainer {
    text-align: center;
    position: absolute;
    width: 90%;
    z-index: 1;
}
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    vertical-align: top;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:Georgia;
    color:#fff;
    background:#5EA5B9;
    text-decoration:none;
    font-size: 1rem;
}

/*Hover state for top level links*/
li:hover a {
color: #036;     
     background:#fff
}

/*Prevent text wrapping*/
li ul li a {
    width:auto;
    min-width:100px;
    padding:0 20px
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family:Georgia;
    text-decoration:none;
    color:#fff;
    background:#5EA5B9;
    text-align:center;
    padding:16px 0;
    display:none;
    width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
    display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display:block;
    margin:0 auto
}

/*Responsive Styles*/
@media screen and (max-width : 760px) {
    /*Make dropdown links appear inline*/
    ul {
        position:static;
        display:none;
      
      
        white-space: initial;
    }
    
    /*Make all menu links full width*/
    ul li,li a {
        width:100%
    }
    
    /*Display 'show menu' link*/
    .show-menu {
        display:block
    }
}

<ul class="b">
<li> <a href="http://www.atlanticwhalewatch.com/" target="_blank">Whalewatching/Fishing</a></li>
<li> <a href="http://www.islesofshoals.com/" target="_blank">Portsmouth Cruises</a></li>
<li> <a href="http://www.nhstateparks.com/odiorne.html" target="_blank">Odiorne Point State Park</a></li>
<li> <a href="http://www.watercountry.com/" target="_blank">Water Country</a></li>
<li> <a href="http://www.portsmouthchamber.org/" target="_blank">Portsmouth Chamber of Commerce</a></li>
<li> <a href="http://www.casinoballroom.com/" target="_blank">Hampton Beach Casino Ballroom</a></li>
<li> <a href="http://www.childrens-museum.org/cmnh/" target="_blank">The Childrens Museum of New Hampshire</a></li>
<li> <a href="http://www.thekitteryoutlets.com/" target="_blank">The Kittery Outlets</a></li>
</ul>

<p>This is the HTML for the menu</p>

<div id="menuBackground">
    <div id="menuContainer">
        <label for="show-menu" class="show-menu">Show Menu</label>        <input type="checkbox" id="show-menu" role="button" />
        <ul id="menu">
            <li><a href="index.html">Home</a>
            </li>
            <li><a href="accommodations.html">Accommodations</a>
            </li>
            <li><a href="amenities.html">Amenities</a>
            </li>
             <li><a href="rates.html">Rates</a>
            </li>
             <li><a href="links.html">Links</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
         </ul>
    </div>
</div>

Answer 1

将范围分配给您的Css类，以防止它被应用于超出菜单范围的其他页面元素。

#menuContainer li a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:Georgia;
    color:#fff;
    background:#5EA5B9;
    text-decoration:none;
    font-size: 1rem;
}

#menuContainer li:hover a {
color: #036;     
     background:#fff
}

Answer 2

您将For Each ws In Worksheets For Each qt In ws.QueryTables qt.Refresh BackGroundQuery:=False next qt Next ws设为全局样式，导致此问题。分开这两件事

您可以使用导航栏。像这样：

li a { with background etc.}

和Css一样：

<nav> 
  <a></a>
  <a></a>
  <a></a>
</nav>

标签。并保持nav { //some properties } nav li { //properties } nav li > ul li { //properties }样式，因为它是无序列表。那么你将对导航产生不同的影响，对于无序列表会有不同的影响。使用标签进行导航也是一件好事。

在css中作为前缀添加的导航标记将确保当您包含导航标记时，您正在处理导航而不是任何无序列表或有序列表。

Answer 3

您可以在菜单中添加一个类并更新样式表，如下所示。

该样式将仅适用于具有该类的元素。

<强> HTML

<ul id="menu" class="navmenu">
   <li class="navlist"><a href="index.html">Home</a></li>
   <li class="navlist"><a href="accommodations.html">Accommodations</a></li>
</ul>

<强> CSS

.navmenu {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Create a horizontal list with spacing*/
.navlist {
    display:inline-block;
    vertical-align: top;
}

/*Style for menu links*/
.navlist a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:Georgia;
    color:#fff;
    background:#5EA5B9;
    text-decoration:none;
    font-size: 1rem;
}

/*Hover state for top level links*/
.navlist:hover a {
color: #036;     
     background:#fff
}

一页上有2种不同风格的<ul> <li>？

3 个答案: