首頁>網頁設計教程> HTML教程
全部 Dreamweaver教程 Javascript教程 HTML教程 CSS教程 心得技巧 DHTML教程 網頁特效 WEB標準化
HTML教程
  • 詳解window.open被瀏覽器攔截的解決方案

    詳解window.open被瀏覽器攔截的解決方案

    現象最近在做專案的時候碰到了使用window.open被瀏覽器攔截的情況,搞得人無比鬱悶啊,雖然在自己的環境可以對頁面進行放行,但是對用戶來說,不能要求用戶都來通過攔截。何況當出現攔截時,很多小白根本不知道發生了啥,不知道在哪裡看被攔截的頁
    2025-01-17
  • html透過canvas轉換成base64的方法

    html透過canvas轉換成base64的方法

    在H5的行銷活動中,經常產生一張圖片讓用戶分享或儲存,這時候處理方案有兩種。一種是讓後端產生圖片,回傳一個圖片位址給前端展示一種是前端自主合併產生圖片展示,文中主要說明這個方案demo<!--生成后存放的IMG-->
    2025-01-17
  • HTML5 WebGL 實現民航客機飛行監控系統

    HTML5 WebGL 實現民航客機飛行監控系統

    前言前些日子出差,在飛機上看到頭頂的監控面板,除了播放電視劇和廣告之外,還會時不時的切換到一個飛機航行的監控系統,不過整個監控系統讓人感到有一點點的簡陋,所以我就突發奇想製作了一個採用HT for Web 的升級版監控系統,demo 的效
    2025-01-17
  • HTML中利用div+CSS實作簡單的箭頭圖示的程式碼

    HTML中利用div+CSS實作簡單的箭頭圖示的程式碼

    在網頁設計中,我們經常得會用到一些箭頭做為裝飾來點綴我們的網頁,雖然現在很多的網站的設計者們都喜歡以引用字體圖標的形式來實現箭頭的效果,但那樣也會給網頁的載入造成一些影響。今天飛鳥慕魚小編就給大家說一說,在網頁設計中如何利用div加CSS的
    2025-01-17
  • 利用Canvas實現繪畫一個未閉合的進度條的圓環

    利用Canvas實現繪畫一個未閉合的進度條的圓環

    最終效果圖一、定義變數定義半徑,定義圓環厚度,定義圓心位置、定義預設填滿顏色let radius = 75let thickness= 10let innerRadius = radius - thicknesslet x = 75let
    2025-01-17
  • Canvas圖片分割效果的實現

    Canvas圖片分割效果的實現

    之前在逛cssdesignawards時發現了一個把圖片內容分割的效果(網址:https://weareludwig.com),大家可以點進去看看,感覺挺炫酷的,於是自己試著實現了一下,效果還不錯。效果查看https://codepen.i
    2025-01-17
  • HTML5中的Web Notification桌面通知功能的實作方法

    HTML5中的Web Notification桌面通知功能的實作方法

    有的時候我們會在桌面右下角看到這樣的提示:這種桌面提示是HTML5新增的Web Push Notifications 技術。 Web Notifications 技術可讓頁面發出通知,通知將會顯示在頁面之外的系統層面。能夠提供用戶更好
    2025-01-17
  • html5 冒號分隔符號對齊的實現

    html5 冒號分隔符號對齊的實現

    <!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1.0,
    2025-01-17
  • 前端實現背景虛化但內容清晰且自適應的實例程式碼

    前端實現背景虛化但內容清晰且自適應的實例程式碼

    講乾貨,不囉嗦,有時候前端會遇到背景虛化但要求內容清晰的需求,先看效果:以下為具體實現:<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>背景虛化</
    2025-01-17
  • HTML5實現行動端彈幕動畫效果

    HTML5實現行動端彈幕動畫效果

    想法1.把單一內容編輯好,計算自身寬度,確定初始位置2.移動的距離是螢幕寬度3.js動態的加入css動畫函數,將高度、動畫移動時間、動畫延遲時間都用隨機數控製程式碼:html骨架結構(以三個為例,如果覺得介面太長不友好,也可以js動態的生成)
    2025-01-17
  • 關於前端上傳檔案全面基礎掃盲貼(入門)

    關於前端上傳檔案全面基礎掃盲貼(入門)

    前言為什麼分章節寫呢?因為涵蓋的知識點比較多,也可能我力盡詳細介紹,照顧下基礎不好的人,溫故而知新。剛開始的確是打算一篇搞定的,寫道一半發覺已經相當長篇大論了,好多人例如我一進來看到這麼多內容就已經怕了,而且不是每個人都需要了解全部內容,於
    2025-01-17
  • 把富文本的回車轉為br標籤

    把富文本的回車轉為br標籤

    例如:我家孩子在SayABC小班↵跟朋友們一起互幫互助,↵合作競爭,學習更有動力! ↵從簡單的單字到句型和場景對話,↵孩子越來越敢於開口說英語啦! [耶]↵掃碼立即領取外教課[愛
    2025-01-17
  • HTML5自訂屬性的問題分析

    HTML5自訂屬性的問題分析

    問題背景在頁面與js傳值中我們常用到data-id=1的方式,然後透過e.target.dataset.id取id的值今天在取得值時怎麼也取不到問題分析後來發現e對象有currentTarget和target屬性,而dataset就在cu
    2025-01-17
  • Html5 實作微信分享及自訂內容的流程

    Html5 實作微信分享及自訂內容的流程

    最近一個專案有一個微信分享並且需要自訂微信分享內容的需求,因為是第一次接觸到微信分享,所以記錄一下期間遇到的一些問題,以及完成功能的整個流程。以下為大概流程(細節放在各階段)安裝weixin-js-sdk初始化微信分享配置微信分享自定
    2025-01-17
  • 手把手教你用canvas實現為圖片添加平鋪浮水印的實現

    手把手教你用canvas實現為圖片添加平鋪浮水印的實現

    最近專案中遇到一個需求,需要把一張圖片加上平舖的浮水印類似這樣的效果首先想到的是用canvas完成這種功能,因為我之前也沒有接觸過canvas,所以做這個功能的時候,就是一步一步的摸索中學習,過程還挺nice的,接下來跟我一步步來實現這個功
    2025-01-17