表单按钮标签的使用

：按钮标签：button

<button type="button|reset|submit">按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览器默认值不同。

二：DIV

1、div就是html —个普通标签，进行区域划分
2、特性：独自占一行
3、独自不能实现复杂效果
4、必须结合CSS样式进行渲染
5、div通常其是块级元素

决点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。

这里我用的是vue框架和element ui组件库写的。主要就是一个点击事件和一个for循环。

HTML

  <div id="app">
    <!-- 导航栏 -->
    <div id="nav">
      <router-link 
	      @click.native="dianji(index)" 
	      :class="{ clk: index==dynamic }"
	      v-for="(item, index) in navArr" 
	      :key="index" 
	      :to="item.path">
	      {{ item.content }}
      </router-link>
    </div>
    <router-view />
  </div>

@click.native和@click差不多，但是router-link会阻止click事件，所有加一个native就可以了。

<script>
export default {
  name: "app",
  data() {
    return {
      // 导航按钮数组
      navArr: [
        { path: "/one", content: "第一个按钮" },
        { path: "/two", content: "第二个按钮" },
        { path: "/three", content: "第三个按钮" },
        { path: "/four", content: "第四个按钮" },
      ],
      dynamic:0, //默认第一个
    };
  },
  methods: {
    // 点击切换导航栏背景色
    dianji: function (index) {
      this.dynamic=index;
    },
  },
};
</script>

css这里我就不写了，就几行代码。

效果图

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点赞收藏 ?留言呐~，谢谢 ~ ~

文通过 CSS 和一个开源包来实现五彩纸屑按钮效果。

1.创建页面框架

使用 html:5 和 div.wrapper>button.btn-confetti 快速创建页面容器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <button class="btn-confetti"></button>
  </div>
</body>
</html>

2.增加基础样式

增加对 body 元素的 grid 布局，同时给它设置了高度 100vh，使子元素水平垂直居中。给 button 按钮增加了渐变背景色，并使用了 transition 动画。注意样式中使用了原生 CSS 嵌套语法。

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.wrapper {
  position: relative;
  .btn-confetti {
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.75em 1.5em;
    border: 0;
    border-radius: 100vmax;
    background: linear-gradient(90deg, #a8ff78 50%, #78ffd6);
    cursor: pointer;
    transition: transform 150ms ease-in-out;

    &:hover {
      transform: scale(1.1);
    }
  }
}

3.实现五彩纸屑

五彩纸屑使用了一个开源的 NPM 包 canvas-confetti，你可以通过 npm i canvas-confetti 快速安装使用，在本 demo 中直接使用的是 CDN 链接。

我们首先给按钮绑定一个点击事件，当按钮被点击时触发五彩纸屑的喷发的效果。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>
<script>
const $confettiBtn=document.querySelector('.btn-confetti');
$confettiBtn.addEventListener('click', ()=> {
  const $canvas=document.createElement('canvas');
  const $wrapper=document.querySelector('.wrapper');

  $canvas.width=600;
  $canvas.height=600;

  $wrapper.appendChild($canvas);

  // 初始化 confetti
  const confettiBtn=window.confetti.create($canvas);

  // 喷发后
  confettiBtn().then(()=> $canvas.remove());
});
</script>

4.效果预览

在线咨询

上一篇：Antv G6 拖拽生成节点
下一篇：成为HTML5大神必备的利器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商