如何修复代码以便显示项目符号（图像提供的代码）？

时间：2017-10-17 19:17:05

标签： html css html5 css3

我试图在上面的列表中添加项目符号，但它们不会显示。
列表的图像我试图添加项目符号
enter image description here
 这是我试图改变的css代码：

.arch ul {
    list-style-type: circle;
    margin-left: 1.5em; 
    list-style-position: inside; 
    }

这是我的完整代码供参考：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Birdwatching</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
      <style>
html
{ height: 100%;
          }

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #F0EFE2 url(ff.jpg) repeat;
  color: #000;
  width: 97%;
  min-width: 800px;
  margin:0 auto;
          }

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif;
  color: #7E2451;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;}

h2
{ font: normal 175% 'century gothic', arial, sans-serif;}

h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: normal 120% arial, sans-serif;}

h5, h6
{ font: italic 95% arial, sans-serif;
  padding: 0 0 15px 0;}

nav ul {
    background: url(transparent.png);
    width: 100%;
    height: 52px;
    text-align: center;
    padding: 0;
    margin: 0;
       }

nav ul li {  
    display: inline; 
    } 

nav ul li a { 
    text-decoration: none; 
    color: #fff;
    letter-spacing: 0.2em;
    font: normal 100% arial, sans-serif;
    text-align: center;
    display: inline-block; 
    margin: 5px;
    padding: 9px 26px 9px 26px;
    text-transform: uppercase;
    } 

 nav ul li a:hover { 
    color: #000; 
    background-color: #fff;
    } 

.dropdown {
   display:inline-block;
   position: relative;
}

.dropdown-content {
  background: #f9f9f9;
  min-width: 160px;
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  left: 50%;
  transform: translateX(-50%);
}

.dropdown-content a {
  color: black; 
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align:left;
}

.dropdown-content a:hover {
    background: #7E2451;
    /background: #bada55;
    left:auto;
    right:0;
    margin-right:-10px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
 main
{ width: 854px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 0 24px 20px 20px;
  background: transparent url(transparent_light.png) repeat;} 

 #first_half article
{ text-align: left;
  float: left;
 width: 595px;
    /width:60%;
    height: 50pc;

  padding: 0;}

#first_half article ul
{ margin: 2px 0 22px 0px;}

#first_half article ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em;} 

#first_half aside
{ float: right;
  width: 210px;
    /width: 25%;
  /padding: 0 15px 20px 15px;
    padding: 0;
  height: 50pc;
          }

#first_half aside ul
{ width: 198px; 
  padding: 4px 0 0 0; 
  margin: 4px 0 30px 0;}

#first_half aside li
{ list-style: none; 
  padding: 0 0 7px 0; }

#first_half aside li a, #first_half .sidebar li a:hover
{ padding: 0 0 0 40px;
  display: block;
  background: transparent url(link.png) no-repeat left center;} 

#first_half aside li a.selected
{ color: #7E2451;
  text-decoration: none;} 

#promo_area  article {
            float:left;
    width: 25%;
      /height: 50pc;
            padding:15px 0;
            border-top:  dashed #7E2451;
            border-bottom:  dashed #7E2451;

            /background:#fff; 
            text-align: center;
        color: #fff;

        }
        #promo_area article .inner, .inner2 {
            margin: 0 53px;
            /padding:10px;
            /background:#e5e8ed;
            /background: url(transparent.png);

            /border-radius: 25px;
            box-shadow: 10px 10px 5px #888888;
            text-align: center;
              /  color: #fff;

        } 
        #promo_area article p {
            font-family:'Open Sans Condensed';
            font-weight:300;
            font-size:1em;
            line-height:1.5em;
            /color:#616161;
               / color: #fff;

        }
        /* HOVER STYLES */
        div#pop-up1, #pop-up2, #pop-up3, #pop-up4 {
            visibility: hidden;
            position: absolute;
            /width: 120px;
          /  padding: 10px;
            /background: #e5e8ed;
            background: url(transparent.png);
                  width: 160px;
    /background-color: #555;
    color: #fff;
    /text-align: center;
    /border-radius: 6px;
    padding: 15px ;
              /  z-index: 1;
   / margin-left: -80px;
            /color: white;
           / color: #000000;
            /border: 3px solid #196CE8; /*#f7923a;*/
            font-size: 90%;
            /border-radius: 25px;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
        }

          #pop-up1 {
              left: 25%;
              /top: 0%;
          }

          #pop-up2   {
              right: 35%;
              /top: 0%;
          }
          #pop-up3 {
              right: 27%;
              /top: 0%;
          }
          #pop-up4 {
             right: 7%;
              /top: 0%; 
          }

        /#trigger1:hover #pop-up1 {
            display: block;
            opacity: 1;
          }
        #promo_area article .inner:hover + div {
            display: block;
            visibility: visible;

        }
        #promo_area article .inner2:hover + div {
            display: block;
            visibility: visible;
        }
/@import url(https://fonts.googleapis.com/css?family=Roboto:300);

/.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  /position: relative;
  /z-index: 1;
  /background: url(transparent_light.png);
   /  background: white;

  max-width: 360px;
  /margin: 0 auto 100px;
  padding: 15px 15px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #7E2451;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #7E2451;
  text-decoration: none;
}

.arch ul {
    list-style-type: circle;
    margin-left: 1.5em; 
    list-style-position: inside; 
    } 

.arch li a { 
    text-decoration: none; 
    color: black;
    letter-spacing: 0.2em;
    font: normal 100% arial, sans-serif;
    /text-align: center;
    /display: inline-block; 
   margin: 5px;
    /padding: 9px 26px 9px 26px;
    /text-transform: uppercase;
    display:inline;
    /display: list-item;
          }
.arch li a:hover { 
    text-decoration: underline; 
    } 
</style>

</head>
  <body>
    <header>
      <h1>Model United Nations Deforestation Conference</h1>
      <img src="dove.png" alt="a simple dove logo">

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#">Get started</a>
                <div class="dropdown-content">
                    <a href="#">Preparation</a>
                    <a href="#">D-Day</a>
                    <a href="#">Useful Resources</a>
                </div>
            </li>
          <li class="dropdown"><a href="#">Gallery</a>
            <div class="dropdown-content">
                    <a href="#">MUN 2015</a>
                    <a href="#">MUN 2016</a>
                    <a href="#">MUN 2017</a>
                </div>
            </li>
          <li class="dropdown"><a href="#">Contact Us</a>
            <div class="dropdown-content">
                    <a href="#">Ask A Question</a>
                    <a href="#">Contact Information</a>
                    <a href="#">Map</a>
                </div>
            </li>
          <li class="dropdown"><a href="#">Forum</a>
            <div class="dropdown-content">
                    <a href="#">About</a>
                    <a href="#">Sign-Up</a>
                    <a href="#">Community</a>
                </div>
            </li>
        </ul>
      </nav> 
    </header>

      <main>
        <section id = "first_half">
      <article>
        <h2>Welcome</h2>

        <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>

        <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
        <h2>Rocking the free web</h2>

        <p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>

        <p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
      </article>
                 <aside>
    <h2>Login</h2>

<div class="login-page">
  <div class="form">
    <form class="login-form">
      <input type="email" placeholder="email"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#">Create an account</a></p>
    </form>
  </div>
</div>
    <h2> Archives </h2>
            <ul class = "arch">
                <li><a href = "#">MUN 2010  </a></li>
                <li><a href = "#">MUN 2011  </a></li>
                <li><a href = "#">MUN 2012  </a></li>
                     </ul>
        </aside>
          </section>
          <section id="promo_area">
            <article>
                <div class="inner">
                    <div class="picDiv"><span id="trigger1"><img alt="paris" src="Paris.jpg" width="100" height="100" /></span></div>
                </div>

                <!-- HIDDEN / POP-UP DIV -->
                <div id="pop-up1">
                    <span>MUN in Paris 2013.</span>
                </div>
            </article>

            <article>
                <div class="inner">
                    <div class="picDiv"><span id="trigger2"><img alt="Russia" src="russia.jpg" width="100" height="100" /></span></div>
                </div>

                <!-- HIDDEN / POP-UP DIV -->
                <div id="pop-up2">
                    <span>MUN in Russia 2014</span>
                </div>
            </article>
            <article>
                <div class="inner2">
                    <div class="picDiv"><span id="trigger3"><img alt="Dubai" src="dubai.jpg" width="100" height="100" /></span></div>
                </div>

                <!-- HIDDEN / POP-UP DIV -->
                <div id="pop-up3">
                    <span>MUN in Dubai 2015</span>
                </div>
            </article>
            <article>
                <div class="inner2">
                    <div class="picDiv"><span id="trigger4"><img alt="Japan" src="japan.jpg" width="100" height="100" /></span></div>
                </div>

                <!-- HIDDEN / POP-UP DIV -->
                <div id="pop-up4">
                    <span>MUN in Japan 2016</span>
                </div>
            </article>
        </section><!--end promo_area-->
      </main>
    </body>
</html>

2 个答案:

答案 0 :(得分：1)

第一个问题是，您定位的.arch ul应该是ul.arch，同时还有一个list-style: none;规则应用于您的#first_half aside li，这样就无法显示要点。

答案 1 :(得分：0)

您需要更改

import certifi

到

#first_half aside li
{ list-style: none; 
  padding: 0 0 7px 0; }

JSFiddle上的完整示例here

相关问题
最新问题