樣式表CSS的問題-有解無憂

我正在嘗試像這樣設計我的目錄：樣式表 CSS 的問題

但是，我使用此代碼來設定目錄樣式：

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
#title {
  text-align: center;
}
#title_box{
  background-color: #cfc ;
  padding: 10px ;
  border: 1px solid green ;
}
#navigation_bar {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}
.navigation_title {
    font-weight: 700;
    text-align: center;
}

#navigation_bar li, #navigation_bar ul, #navigation_bar ul li{
    list-style: outside none none !important;
}

這是 HTML 代碼：

<div id="table_container">
    <p class="table_title">Contents</p>
    <ul class="table_list">
        <li><a href="#First_table"> Introduction </a>
        <li><a href="#Second_table"> ARPANET </a>
        <li><a href="#Third_table"> TCP/IP </a>
        <li><a href="#Fourth_table"> Introduction of Ethernet </a>
        <li><a href="#Fifth_table"> Internet for public </a>
        <li><a href="#Sixth_table"> Introduction of HTTP </a
    </li>
    </ul>

但是，我的目錄如下所示：

樣式表 CSS 的問題

我哪里做錯了？

uj5u.com熱心網友回復：

您必須使用<ol>tag 而不是<ul>編號串列。
如果您希望從所有超鏈接<a>標簽中洗掉下劃線，您需要a{text-decoration: none;}在您的 css 中添加。
使用 CSS 自定義字體大小、顯示、邊距等。我猜你忘記在這里粘貼那些相關的 CSS。

下面是示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid</title>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    #title {
      text-align: center;
    }
    
    #title_box {
      background-color: #cfc;
      padding: 10px;
      border: 1px solid green;
    }
    
    #navigation_bar {
      background: #f9f9f9 none repeat scroll 0 0;
      border: 1px solid #aaa;
      display: table;
      font-size: 95%;
      margin-bottom: 1em;
      padding: 20px;
      width: auto;
    }
    
    .navigation_title {
      font-weight: 700;
      text-align: center;
    }
    
    #navigation_bar li,
    #navigation_bar ul,
    #navigation_bar ul li {
      list-style: outside none none !important;
    }
    
    a {
      text-decoration: none;
    }
    
    li::marker,
    li a {
      color: #80b9e6;
    }
  </style>
</head>

<body>
  <div id="table_container">
    <p class="table_title">Contents</p>
    <ol class="table_list">
      <li><a href="#First_table"> Introduction </a></li>
      <li><a href="#Second_table"> ARPANET </a></li>
      <li><a href="#Third_table"> TCP/IP </a></li>
      <li><a href="#Fourth_table"> Introduction of Ethernet </a></li>
      <li><a href="#Fifth_table"> Internet for public </a></li>
      <li><a href="#Sixth_table"> Introduction of HTTP </a></li>
    </ol>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

尋找這樣的東西（大約）？

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#table_container {
  display: inline-block;
  padding: 15px 20px;
  background: #F9F9F9;
  border: 2px solid #e3e3e3;
}

.table_title {
  text-align: center;
  margin-top: 0;
}

#table_list {
  counter-reset: item;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#table_list li,
#table_list li a {
  color: #61aade !important;
}

#table_list li:before {
  content: counter(item) ' ';
  counter-increment: item
}

#table_list li a {
  text-decoration: none;
}

<div id="table_container">
  <p class="table_title">Contents</p>
  <ol id="table_list">
    <li><a href="#First_table">Introduction</a></li>
    <li><a href="#Second_table">ARPANET</a></li>
    <li><a href="#Third_table">TCP/IP</a></li>
    <li><a href="#Fourth_table">Introduction of Ethernet</a></li>
    <li><a href="#Fifth_table">Internet for public</a></li>
    <li><a href="#Sixth_table">Introduction of HTTP</a></li>
  </ol>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397284.html

標籤：html css

上一篇：CSSGridgrid-auto-rows：100%子級溢位父級

下一篇：無法使影像適合影像庫中的父div大小