您的位置:首页 > Web前端 > CSS

HTML导航CSS样式详解

2020-07-28 09:11 281 查看

HTML导航CSS样式详解

导航的最终样式:

  1. 可以看到我们的导航栏分为左边logo和右边的导航(字),两边距离网页边框相同,背景为灰色,我们可以简单分为以下模块:
    我们将导航栏作为一个大盒子,里面嵌套一个盒子让它居中,再绿色盒子里面放入一个小盒子分别装logo图片和一个无序列表ul装文字导航。
  2. 代码结构如下:
<nav class="clear">
<div id="logo">
<img src="../day05/web-img/logo.png" alt="">
</div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">服务</a></li>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
</ul>
</nav>

3.CSS样式:
首先我们将nav背景色改成灰色,两边留白;padding为内边距。

nav{
/*让两边留白部分相同,为15%*/
padding: 0 15%;
background-color: #797777;
}

让logo和ul分别左右浮动:

#logo img{
float: left;
/*font-size: 0;*/
height: 65px;
}
nav>ul{
float: right;
}

改变ul内部li元素的样式;list-style是去掉默认样式;float是为了让li元素横着向左排列。

nav>ul>li{
list-style: none;
float: left;
/*list-style: none;*/
width: 85px;
height: 65px;
/*字体垂直居中*/
line-height: 65px;
/*字体水平居中*/
text-align: center;
}

有不懂得留言~

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: