html代码:
{
<!-- 导航栏 -->
<div class="nav">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="nav_text">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">学习路线</a>
</li>
<li>
<a href="#">知识库</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li>
<a href="#">更多</a>
</li>
<li>
<a href="#">登录</a>
</li>
</ul>
</div>
</div>
<!-- 主题部分 -->
<div class="main_content">
<div class="theme">
<p class="l1">ALWAYS <br>BE A!</p>
<p class="l3">小A智能创新团队</p>
<p class="l4">LOOK FORWARD TO <br>YOU COMING</p>
</div>
<div class="pic">右边</div>
</div>
}
css部分:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
/* 版心 */
.w {
width: 1200px;
margin: auto;
}
/* 导航栏 */
.nav {
background-color: #fff;
height: 105px;
border-bottom: 2px solid #ccc;
}
.nav img {
float: left;
display: block;
width: 200px;
height: 60px;
margin:26px 88px 26px 278px ;
}
.nav_text ul li {
float: left;
margin:36px 74px 36px 0;
}
.nav_text ul li a {
display: inline-block;
font-size: 22px;
height: 67px;
color: #737373;
}
.nav_text ul li:hover a {
color: #0f9cf5;
border-bottom: 5px solid #ffd155;
}
输出结果:
所以想问问ALWAYS BE A 为啥会靠右显示以及怎么解决这个问题。蟹蟹!