鱼C论坛

 找回密码
 立即注册
查看: 3298|回复: 6

这一段怎么实现

[复制链接]
发表于 2020-4-27 16:59:20 | 显示全部楼层 |阅读模式

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

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

x
这个头部怎么制作
POTLILJ1UP}Z@M`4VALE(AO.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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;
}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-4-27 17:34:23 | 显示全部楼层
我是这样写的,怎么才能合并呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-27 23:16:17 | 显示全部楼层
是想让上下栏对齐吗?如果是这个意思就把上下局域栏的内容放在一个li里面br换行就行,例如
<li><a href="index.html">首页</a><br><a>HOME</a>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 就能跳转
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-30 21:24:30 | 显示全部楼层
另外上面有位朋友说用<br>,如果明天产品经理说要上英文下中文,后天说要平行左右结构,那 el 的剪切不就要操作很多次
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 19:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表