设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 这一段怎么实现
返回列表 发新帖
查看: 4269|回复: 6

这一段怎么实现

[复制链接]
sukiwhip
发表于 2020-4-30 20:45:07 | 显示全部楼层
  1. <body>
  2.   <div class="header">
  3.     <div class="nav">
  4.       <ul>
  5.         <li><img src="images/img_nav-logo.png" alt=""></li>
  6.         <li>
  7.           <a href="index.html">首页</a>
  8.           <span class="s">HOME</span>
  9.         </li>
  10.         <li>
  11.           <a href="index.html">咨询</a>
  12.           <span class="s">NEWS</span>
  13.         </li>
  14.         <li>
  15.           <a href="index.html">电竞比分</a>
  16.           <span class="s">SCORE</span>
  17.         </li>
  18.         <li>
  19.           <a href="index.html">赛事直播</a>
  20.           <span class="s">ESPORTS LIVE</span>
  21.         </li>
  22.         <li>
  23.           <a href="index.html">H币商城</a>
  24.           <span class="s">STORE</span>
  25.         </li>
  26.         <li>
  27.           <a href="index.html">APP</a>
  28.           <span class="s">DOWNLOAD APP</span>
  29.         </li>
  30.         <li>
  31.           <a href="index.html">你好请<span>登录</span></a>
  32.           <span class="s">登录后可进入个人中心</span>
  33.         </li>
  34.       </ul>
  35.     </div>
  36.   </div>
  37. </body>

  39. <style>
  40.   .nav {
  41.     width: 100%;
  42.     background: #ffffff;
  43.   }

  45.   .nav a {
  46.     color: #B69B72;
  47.     font-size: 16px;
  48.     text-decoration: none;
  49.   }

  51.   .nav li {
  52.     list-style: none;
  53.     float: left;
  54.     line-height: 20px;
  55.     padding: 0 28px;
  56.     display: flex;
  57.     flex-direction: column;
  58.     cursor: pointer;
  59.   }

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

  65.   .s {
  66.     font-size: 10px;
  67.     float: left;
  68.     color: #B69B72;
  69.   }
  70. </style>
复制代码


你的布局思维错了，如果按你这样分两列的话，后面加上 click 事件，你就每一列都要加 event，而不是点一整个 li 就能跳转
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2020-4-30 21:24:30 | 显示全部楼层
另外上面有位朋友说用<br>，如果明天产品经理说要上英文下中文，后天说要平行左右结构，那 el 的剪切不就要操作很多次
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-10-26 04:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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