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

这一段怎么实现

这个头部怎么制作

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 的剪切不就要操作很多次
页: [1]
查看完整版本: 这一段怎么实现