如何設計HTMLCSS影像？

我正在嘗試進行此設計：

我要做的是：

我不能在右上角做圓形圖示，Latest顏色從Premium變為Free。你能幫助我嗎？

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
}

.body-bottom>.filter-menu>ul li a:nth-child(2) { /* try */
    color: red;
}

<div class="body-bottom">
    <div class="filter-menu">
           <ul>
               <li><a href="">Latest</a></li>
               <li><a href="">Popular</a></li>
               <li>|</li>
               <li><a href="">Premium</a></li>
               <li><a href="">Free</a></li>
           </ul>
     </div>
</div>

uj5u.com熱心網友回復：

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
  position:relative;
}

.body-bottom>.filter-menu>ul li:nth-of-type(1) a::after{ /* try */
    content:'';
    width:8px;
    height:8px;
  background-color:red;
  position:absolute;
  top:12px;
  right:4px;
  border-radius:50%;
}


.body-bottom>.filter-menu>ul li:nth-of-type(4) a{ /* try */
    color: orange;
}

.body-bottom>.filter-menu>ul li:nth-of-type(5) a{ /* try */
    color: blue;
}

nth-of-type應該將偽類添加到<li>元素中，因為您將它們列為兄弟姐妹。在這種情況下，將其應用于孩子時，它將不起作用。我將點創建為::after偽類，因此沒有額外的 HTML。它必須position:absolute根據鏈接定位它(position:relative)。如果有什么你不明白的，請告訴我。

uj5u.com熱心網友回復：

對于鏈接的紅色。

您的 CSS 在鏈接“a”上使用 nth-child - 當您實際上每個專案中只有一個鏈接時。相反，它應該在串列項中：

    .body-bottom>.filter-menu>ul li:nth-child(2) a {
    color: red;
}

uj5u.com熱心網友回復：

1. 最新后的點與position:absolute
2. 3 和 4 的顏色與類鏈接

.filter-menu>ul li {
    display: inline;
}

.filter-menu>ul li a {
  padding: 15px;
  text-decoration: none;
}
.filter-menu .dark a {
  color: #222429;  
}
.filter-menu .orange a {
  color: orange;  
}
.filter-menu .blue a {
  color: lightblue;  
}
.filter-menu .point {
  position: relative;
}

.filter-menu .point a span{
  position: absolute;
  top: -5px;
  right: 5px;
  font-size: 0.6rem;
  color: orange;
}

<div class="body-bottom">
    <div class="filter-menu">
           <ul>
             <li class="dark point"><a href="">Latest<span>●</span></a></li>
               <li class="dark"><a href="">Popular</a></li>
               <li>|</li>
               <li class="orange"><a href="">Premium</a></li>
               <li class="blue"><a href="">Free</a></li>
           </ul>
     </div>
</div>

uj5u.com熱心網友回復：

你把你的CSS. 令許多開發人員感到驚訝的是，更高的特異性實際上會使CSS速度變慢。CSS從右到左決議，而不是從左到右決議。添加一些類到你的HTML，你會看到樣式變得更高效，更容易撰寫和維護（nth-child不需要）。

:root {
  --orange: #FB9664;
  --teal: #94BAE6;
  --red: #FB4D01;
}

.body-bottom>.filter-menu li {
  display: inline;
}

.body-bottom>.filter-menu a {
  padding: 15px;
  text-decoration: none;
  color: #222429;
  font-weight: bold;
}

.body-bottom .latest {
  position: relative;
}

.body-bottom .latest::after {
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  right: 4px;
  background-color: var(--red);
}

.body-bottom .premium>a {
  color: var(--orange);
}

.body-bottom .free>a {
  color: var(--teal);
}

<div class="body-bottom">
  <div class="filter-menu">
    <ul>
      <li class="latest"><a href="">Latest</a></li>
      <li><a href="">Popular</a></li>
      <li>|</li>
      <li class="premium"><a href="">Premium</a></li>
      <li class="free"><a href="">Free</a></li>
    </ul>
  </div>
</div>

標籤：htmlcss

上一篇：是否有任何csshack可以阻止下拉選單導致溢位？

下一篇：使用display:flex實作表格填充