表單按鈕標(biāo)簽的使用

：按鈕標(biāo)簽：button

<button type="button|reset|submit">按鈕標(biāo)簽一般很少使用，提供“普通|重置|提交”功能，不同的瀏覽器默認(rèn)值不同。

二：DIV

1、div就是html —個(gè)普通標(biāo)簽，進(jìn)行區(qū)域劃分
2、特性：獨(dú)自占一行
3、獨(dú)自不能實(shí)現(xiàn)復(fù)雜效果
4、必須結(jié)合CSS樣式進(jìn)行渲染
5、div通常其是塊級(jí)元素

決點(diǎn)擊導(dǎo)航欄點(diǎn)擊哪個(gè)，哪個(gè)就高亮變色，其他恢復(fù)原狀。

這里我用的是vue框架和element ui組件庫(kù)寫的。主要就是一個(gè)點(diǎn)擊事件和一個(gè)for循環(huán)。

HTML

  <div id="app">
    <!-- 導(dǎo)航欄 -->
    <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會(huì)阻止click事件，所有加一個(gè)native就可以了。

<script>
export default {
  name: "app",
  data() {
    return {
      // 導(dǎo)航按鈕數(shù)組
      navArr: [
        { path: "/one", content: "第一個(gè)按鈕" },
        { path: "/two", content: "第二個(gè)按鈕" },
        { path: "/three", content: "第三個(gè)按鈕" },
        { path: "/four", content: "第四個(gè)按鈕" },
      ],
      dynamic:0, //默認(rèn)第一個(gè)
    };
  },
  methods: {
    // 點(diǎn)擊切換導(dǎo)航欄背景色
    dianji: function (index) {
      this.dynamic=index;
    },
  },
};
</script>

css這里我就不寫了，就幾行代碼。

效果圖

沒了，結(jié)束了，是不是很簡(jiǎn)單吶，如有問題，歡迎留言。
如果此篇博文對(duì)您有幫助，還請(qǐng)動(dòng)動(dòng)小手點(diǎn)贊收藏 ?留言吶~，謝謝 ~ ~

文通過 CSS 和一個(gè)開源包來(lái)實(shí)現(xiàn)五彩紙屑按鈕效果。

1.創(chuàng)建頁(yè)面框架

使用 html:5 和 div.wrapper>button.btn-confetti 快速創(chuàng)建頁(yè)面容器。

<!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.增加基礎(chǔ)樣式

增加對(duì) body 元素的 grid 布局，同時(shí)給它設(shè)置了高度 100vh，使子元素水平垂直居中。給 button 按鈕增加了漸變背景色，并使用了 transition 動(dòng)畫。注意樣式中使用了原生 CSS 嵌套語(yǔ)法。

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.實(shí)現(xiàn)五彩紙屑

五彩紙屑使用了一個(gè)開源的 NPM 包 canvas-confetti，你可以通過 npm i canvas-confetti 快速安裝使用，在本 demo 中直接使用的是 CDN 鏈接。

我們首先給按鈕綁定一個(gè)點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)觸發(fā)五彩紙屑的噴發(fā)的效果。

<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);

  // 噴發(fā)后
  confettiBtn().then(()=> $canvas.remove());
});
</script>

4.效果預(yù)覽

在線咨詢

上一篇：Antv G6 拖拽生成節(jié)點(diǎn)
下一篇：成為HTML5大神必備的利器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商