华为云大前端学习之旅(二)
【摘要】 华为云前端学习之旅
华为云大前端学习之旅(二)
一、案例效果
这个是导航栏最终的效果,下面我们开始一起码代码。
二、布局拆分
导航栏可以拆分为上面的三个部分,下面我就就开始一起愉快的码代码。
三、布局代码
整体框架和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 进行居中。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)