华为云大前端学习之旅(二)

举报
@Wu 发表于 2021/07/03 14:48:56 2021/07/03
【摘要】 华为云前端学习之旅

华为云大前端学习之旅(二)

一、案例效果

image-20210701213638129.png

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

二、布局拆分

image-20210701214051647.png

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

三、布局代码

整体框架和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>

效果图:

image-20210703141148953.png

使用图片方式:

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;*/
		}

效果图:

image-20210703142216452.png

注意点:

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

image-20210703141954697.png

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

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。