华为云大前端学习之旅（二）

华为云大前端学习之旅（二）

一、案例效果

这个是导航栏最终的效果，下面我们开始一起码代码。

二、布局拆分

导航栏可以拆分为上面的三个部分，下面我就就开始一起愉快的码代码。

三、布局代码

整体框架和logo部分代码

要点解析：

• 创建一个a标签，设置a标签背景填充或者包含一个img 标签

背景方式：

HTML代码：

<div class="nav">
	<!--页面导航区域-->
	<div class="logo">
		<a href="#">
			<!-- 使用背景设置&使用IMG 标签 -->
			<!--<img src="./Images/logo.svg" alt="logo">-->
		</a>
	</div>
</div>

CSS代码：

<style>
	.nav{
        /* 设置两边空隙*/
		padding: 0 20px;
         /* 设置高度*/
		height: 60px;
         /* 设置外边框阴影*/
		box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
	}
	.logo a{
        /* 浮动在后面设置区域2时候需要开启 */
        /*float: left;*/
		display: block;
         /* 垂直居中 */
		margin: 10px 0;
		width: 110px;
		height: 40px;
		background: url("./Images/ia_100000008.svg") no-repeat;
		background-size: contain;
        /* 清楚下划线，保证垂直居中 */
        text-decoration: none
	}
</style>

效果图：

使用图片方式：

HTML代码：

<div class="nav2">
   <!--页面导航区域-->
   <div class="logo2">
      <a href="#">
         <!-- 使用图片-->
         <img src="./Images/logo.svg" alt="logo">
      </a>
   </div>
</div>

CSS代码：

.nav2{
   padding: 0 20px;
   /**/
   height: 60px;
   box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
}

.logo2 a{
			width: 110px;
			height: 40px;
			display: inline-block;
			margin: 10px 0;
			/*text-decoration: none*/
			background-color: #95dc84;
		}
		.logo2 img{
			width: 110px;
			/*height: 40px;*/
		}

效果图：

注意点：

• 不要忘记清楚a 标签的下划线，如果没有清楚，效果如下图

• 如果使用图片格式，图片在指定宽度后会自动的进行缩放，造成宽度不能完全填充a 标签，在A 标签有背景的时候，会出现如上图所出现的情况。

• 如果想要解决这种情况，可以是IMG 标签浮动，同时通过margin 进行居中。