2021-01-29 h5+css 伸缩导航栏

最新推荐文章于 2023-08-02 12:57:56 发布

卷毛崽

最新推荐文章于 2023-08-02 12:57:56 发布

阅读量972

点赞数

分类专栏： H5+CSS 文章标签： html css3 html5

本文链接：https://blog.csdn.net/qq_42221321/article/details/113370808

版权

本文介绍了如何使用HTML5和CSS3创建伸缩导航栏，涵盖了vh单位、calc计算、背景渐变、flex布局、过渡效果等知识点，并提供页面代码和实际效果展示。

摘要由CSDN通过智能技术生成

1、参考资料

快捷生成html标签参考如下
.navbar>input:checkbox+span2+ul>li5
在这里插入图片描述

Vh:相对于视框的高度：视框高度是100Vh；“视区”所指为浏览器内部的可视区域大小，window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。多用于流体布局

calc同时还可以进行运算的方式：
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算

background: linear-gradient(#99f,#f99);}

justify-content:定义flex子项在flex容器的当前行的横轴方向上的对齐方式
align-items:定义flex子项在flex容器的当前行的纵轴方向上的对齐方式

body,.navbar,.navbar ul{
   
  /*合在一起写，都需要弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar input {
   
    width:40px;
    height:40px;
    /* 不透明度，0为透明 */
    opacity: 0;
    /* 鼠标移入变小手 */
    cursor: pointer;
}

transition: transform 0.3s ease-in-out,top 0.3s ease-in-out 0.3s;

ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。

void关键字是javascript当中非常重要的关键字，该操作符指定要计算或运行一个表达式，但是不返回值。

例子1：javascript:void(0)，当点击超级链接时，什么都不发生,即"死链接”

<ul>
	<li><a href="javascript:void(0)">收藏</a></li>
	<li><a href="javascript:void(0)">点藏</a></li>
	<li><a href="javascript:void(0)">投币</a></li>
	<li>

关注