这一段怎么实现

dtspsmine · 发表于 2020-4-27 16:59:20

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

这个头部怎么制作

dtspsmine · 发表于 2020-4-27 17:32:54

<div class="header">
<div class="nav">
      <ul>
      <li><img src="images/img_nav-logo.png" alt=""></li>
      <li>
         <a href="index.html">首页</a>
      </li>
      <li>
         <a href="index.html">咨询</a>
      </li>
      <li>
         <a href="index.html">电竞比分</a>
      </li>
      <li>
         <a href="index.html">赛事直播</a>
      </li>
      <li>
         <a href="index.html">H币商城</a>
      </li>
      <li>
         <a href="index.html">APP</a>
      </li>
      <li>
         <a href="index.html">你好请<span>登录</span></a>
      </li>
      </ul>
   <div class="s">
      <ul>
      <li>HOME</li>
      <li>NEWS</li>
      <li>SCORE</li>
      <li>ESPORTS LIVE</li>
      <li>STORE</li>
      <li>DOWNLOAD APP</li>
      <li>登录后可进入个人中心</li>
      </ul>
   </div>
</div>
  </div>

dtspsmine · 发表于 2020-4-27 17:33:25

.nav {
height: 90px;
width: 100%;
background: #ffffff;
}
.nav a{
color: #B69B72;
font-size: 16px;
}
.nav li{
list-style: none;
float: left;
line-height: 90px;
padding: 0 28px;
}
.s{
font-size: 10px;
float: left;
color: #B69B72;
}

dtspsmine · 发表于 2020-4-27 17:34:23

我是这样写的，怎么才能合并呢

fcq07216 · 发表于 2020-4-27 23:16:17

是想让上下栏对齐吗？如果是这个意思就把上下局域栏的内容放在一个li里面br换行就行，例如
<li><a href="index.html">首页</a><br><a>HOME</a>

sukiwhip · 发表于 2020-4-30 20:45:07

<body>
  <div class="header">
    <div class="nav">
      <ul>
        <li><img src="images/img_nav-logo.png" alt=""></li>
        <li>
          <a href="index.html">首页</a>
          <span class="s">HOME</span>
        </li>
        <li>
          <a href="index.html">咨询</a>
          <span class="s">NEWS</span>
        </li>
        <li>
          <a href="index.html">电竞比分</a>
          <span class="s">SCORE</span>
        </li>
        <li>
          <a href="index.html">赛事直播</a>
          <span class="s">ESPORTS LIVE</span>
        </li>
        <li>
          <a href="index.html">H币商城</a>
          <span class="s">STORE</span>
        </li>
        <li>
          <a href="index.html">APP</a>
          <span class="s">DOWNLOAD APP</span>
        </li>
        <li>
          <a href="index.html">你好请<span>登录</span></a>
          <span class="s">登录后可进入个人中心</span>
        </li>
      </ul>
    </div>
  </div>
</body>

<style>
  .nav {
    width: 100%;
    background: #ffffff;
  }

  .nav a {
    color: #B69B72;
    font-size: 16px;
    text-decoration: none;
  }

  .nav li {
    list-style: none;
    float: left;
    line-height: 20px;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }

  .nav li:hover{
    background-color: black;
  }

  .s {
    font-size: 10px;
    float: left;
    color: #B69B72;
  }
</style>

你的布局思维错了，如果按你这样分两列的话，后面加上 click 事件，你就每一列都要加 event，而不是点一整个 li 就能跳转

sukiwhip · 发表于 2020-4-30 21:24:30

另外上面有位朋友说用<br>，如果明天产品经理说要上英文下中文，后天说要平行左右结构，那 el 的剪切不就要操作很多次

账号		自动登录	找回密码
密码			立即注册