个人中心
gpt4 book ai didi

javascript - 如何创建不受某些 css 样式影响的新

  • 转载 作者：太空狗 更新时间：2023-10-29 14:14:17 24 4
    gpt4 key购买 nike

    我有一个包含一些元素的菜单栏，但我想添加一个具有相同样式的注册/登录元素，但它在右侧对齐并且不会影响中心的其他元素。基本上，我有一个名为“登录/注册”的元素，我希望它不影响其他元素，并且拥有自己的独立类，同时仍然是菜单栏的一部分......非常感谢任何帮助。谢谢!

    /*Some Fonts Here:*/

    @font-face {
      font-family: Rusty;
      src: url('BrushScriptStd.otf');
    }
    * {
      font-family: Rusty;
      font-weight: Lighter;
    }
    .background {
      background-image: url(0.jpg);
      background-attachment: fixed;
      background-size: 100% auto;
      background-color: f7f7f7;
      background-repeat: no-repeat;
      background-position: center top;
    }
    /*Start of menu code*/

    .menubar {
      height: 2.8vw;
      opacity: 0.85;
      background-color: #CCCCCC;
    }
    .clearfix:after {
      display: block;
      clear: both;
    }
    .menu-wrap {
      width: 50%;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
      background: #3e3436;
    }
    .menu {
      width: 100%;
      margin: 0px auto;
      text-align: center;
    }
    .menu li {
      margin: 0px;
      list-style: none;
      font-family: 'Ek Mukta';
    }
    .menu a {
      transition: all linear 0.15s;
      color: #919191;
    }
    .menu li:hover > a,
    .menu .current-item > a {
      text-decoration: none;
      color: rgba(189, 34, 34, 1);
    }
    .menu .arrow {
      font-size: 0.95vw;
      line-height: 0%;
    }
    .menu > ul > li {
      float: middle;
      display: inline-block;
      position: relative;
      font-size: 1.2vw;
    }
    .menu > ul > li > a {
      padding: 0.7vw 5vh;
      display: inline-block;
      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
    }
    .menu > ul > li:hover > a,
    .menu > ul > .current-item > a {
      background: #2e2728;
    }
    .menu li:hover .sub-menu {
      opacity: 1;
    }
    .sub-menu {
      z-index: 99999;
      width: 100%;
      padding: 0px 0px;
      position: absolute;
      top: 100%;
      left: 0px;
      opacity: 0;
      transition: opacity linear 0.15s;
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
      background: #2e2728;
      z-index: -5;
    }
    .sub-menu li {
      display: block;
      font-size: 1.2vw;
    }
    .login {
      width: 100%;
      margin: 0px relative;
      text-align: right;
    }
    .sub-menu li a {
      padding: 10px 10px;
      display: block;
    }
    .sub-menu li a:hover,
    .sub-menu .current-item a {
      background: #3e3436;
      z-index: 99;
      postition: absolute;
    }
    /*End of menu code*/

    .Rusty {
      font-family: "Rusty";
      color: rgba(189, 34, 34, 1);
      line-height: 1.2;
      text-align: center;
      text-shadow: 0px 13px 21px rgba(0, 0, 0, 0.35);
    }
    .content {
      margin: auto;
      width: 80%;
      background-color: #CCCCCC;
      padding: 10px;
      height: 100%;
    }
    <html>

    <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget">
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="script.js"></script>
      <link rel="shortcut icon" href="favicon.ico">
      <title>RG - Home</title>
    </head>

    <body class="background">
      <!--Begginning of menubar-->
      <div class="menubar">
        <nav class="menu">
          <ul class="clearfix">
            <li><a href="aboutme.html">About Me <span class="arrow">&#9660;</span></a>
              <!--Here is the dropdown menu-->
              <ul class="sub-menu">
                <li><a href="#">Gaming</a>
                </li>
                <li><a href="#">Programming</a>
                </li>
                <li><a href="#">YouTube</a>
                </li>
                <li><a href="#">Other</a>
                </li>
              </ul>
              <!----------------------->
            </li>
            <li><a href="schedule.html">Schedule</a>
            </li>
            <li class="current-item">
              <a href="#">
                <p class="rusty">RedstoneGaming</p>
              </a>
            </li>
            <li><a href="equipment.html">Equipment</a>
            </li>
            <li><a href="contact.html">Contact Me</a>
            </li>
            <li><a href="login.html">Login/Sign Up</a>
            </li>
          </ul>
        </nav>
      </div>
      <!--End of menubar-->
      <div class="content">
        <div style="height: 7vh;" align="center">
          <h1 style="font-size: 3vw;" class="rusty">Colortone | Am I colorblind?! | W/Voiceless </h1>
          <iframe style="height:300%; width:auto;" src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2 align=" center "></iframe></div>
    		</div>
    	</body>
    </html>

    最佳答案

    只需将 class 添加到登录元素并对其应用一些 CSS。

    HTML:

    <li class="login"><a href="login.html">Login/Sign Up</a></li>

    CSS:

    .menu > ul > .login {
        position: absolute;
        top: 0;
        right: 0;
    }

    关于javascript - 如何创建不受某些 css 样式影响的新 <li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34243725/

    24 4 0
    文章推荐： html - 使 Font Awesome 图标成为表单的提交
    文章推荐： java - 从图像中提取文本
    文章推荐： html - CSS 选择器 - 如何选择第一个和最后一个 div
    文章推荐： javascript - 处理溢出的 Reveal JS 幻灯片的最佳方法
    太空狗
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com