这一段怎么实现
这个头部怎么制作 <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> .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;
} 我是这样写的,怎么才能合并呢 是想让上下栏对齐吗?如果是这个意思就把上下局域栏的内容放在一个li里面br换行就行,例如
<li><a href="index.html">首页</a><br><a>HOME</a>
<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 就能跳转 另外上面有位朋友说用<br>,如果明天产品经理说要上英文下中文,后天说要平行左右结构,那 el 的剪切不就要操作很多次
页:
[1]