在css中将元素的一部分设置为不同的颜色

7eumitmz 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(187)

我试图使这个下拉菜单中的按钮显示的空间下的按钮是相同的颜色。虽然这有点难以用语言来描述，但这就是我想要达到的目标。虽然它的工作原理，这主要是为了它的设计方面。

<head>
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap');
      html,body{
          padding: 0;
          margin: 0;
          background: #121212;
          height: 100%;
      }
      .main{
          height: 100%;
          width: 60%;
          margin:auto;
          background: #121212;
      }
      a,p,h1{
          font-family: 'Libre Franklin', sans-serif;
          color: white;
      }
      header{
          background: #181818;
          width: 100%;
          height: 75px;  
      }
      .headerMain{
          width: 60%;
          height: 100%;
          margin: auto;
          font-size: 40px;
          background-image: url(assets/Logo.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: right;
      }
      .headerMain a {
        color: white;
        text-decoration: none;
        font-size: 35px;
        display: block;
      }

      .headerMain a.icon {
          background: #121212;
          width: 60px;
          height: 55px;
          text-align: center;
          vertical-align: middle;
          padding-top: 20px;
          }

      .headerMain a:hover,i:hover{
        background-color: #282828;

      }

      nav{
          display:none;
          height: 50px;
          margin: 0;    
      }

      nav ul{
          background-color: #181818;
          list-style:none;
          margin:0;
          padding:10px;
          text-align:center;
      }
      nav li{
          display:inline;
      }
      nav a{
          font-weight: 900;
          padding: 10px;
          margin: 0 5px;
      }
      nav a:hover{
          background-color: white;
          color: black
      }
    </style>
</head>
<body>
    <header>
        <div class="headerMain">
            <a class="icon" onclick="dropDownFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <nav id="dropDown" >
        <ul>
            <li><a>Home</a></li>
            <li><a>Shop</a></li>
            <li><a>Gallery</a></li>
            <li><a>Contact</a></li>
        </ul>

    </nav>
    <div class="main">
        <h1>Hello World</h1>
    </div>
    <script>
      function dropDownFunction() {
          var x = document.getElementById("dropDown");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
          }
        }
    </script>
</body>

预期效果：

css

来源：https://stackoverflow.com/questions/76128745/setting-a-part-of-an-element-to-a-different-color-in-css

1条答案

按热度按时间

htrmnn0y1#

您可以使用位于icon元素下面的:after元素。
将background-color设置为与上述icon匹配。
我在nav ul中添加了更多的padding-left，这样第一个项就不会与新的垂直条重叠

.toToggle:after {
    content: '';
    background-color: #121212;
    width: 60px;
    display: inline-block;
    height: 60px;
}

<head>
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap');
      html,body{
          padding: 0;
          margin: 0;
          background: #121212;
          height: 100%;
      }
      .main{
          height: 100%;
          width: 60%;
          margin:auto;
          background: #121212;
      }
      a,p,h1{
          font-family: 'Libre Franklin', sans-serif;
          color: white;
      }
      header{
          background: #181818;
          width: 100%;
          height: 75px;  
      }
      .headerMain{
          width: 60%;
          height: 100%;
          margin: auto;
          font-size: 40px;
          background-image: url(assets/Logo.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: right;
      }
      .headerMain a {
        color: white;
        text-decoration: none;
        font-size: 35px;
        display: block;
      }

      .headerMain a.icon {
          background: #121212;
          width: 60px;
          height: 55px;
          text-align: center;
          vertical-align: middle;
          padding-top: 20px;
          }

      .headerMain a:hover,i:hover{
        background-color: #282828;

      }

      nav{
          display:none;
          height: 50px;
          margin: 0;    
      }

      nav ul{
          background-color: #181818;
          list-style:none;
          margin:0;
          padding: 10px 0 10px 30px;
          text-align:center;
      }
      nav li{
          display:inline;
      }
      nav a{
          font-weight: 900;
          padding: 10px;
          margin: 0 5px;
      }
      nav a:hover{
          background-color: white;
          color: black
      }
    </style>
</head>
<body>
    <header>
        <div class="headerMain">
            <a class="icon toToggle" onclick="dropDownFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <nav id="dropDown" >
        <ul>
            <li><a>Home</a></li>
            <li><a>Shop</a></li>
            <li><a>Gallery</a></li>
            <li><a>Contact</a></li>
        </ul>

    </nav>
    <div class="main">
        <h1>Hello World</h1>
    </div>
    <script>
      function dropDownFunction() {
          var x = document.getElementById("dropDown");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
          }
        }
    </script>
</body>

赞(0）回复(0）举报 2023-05-02

我来回答

在css中将元素的一部分设置为不同的颜色

1条答案

相关问题

热门标签

最新问答