在chrome和edge瀏覽器打開網頁查看源代碼時，發現代碼沒有自動換行，必須通過下方的滾動條來查看超出屏幕的代碼，很不方便，解決方法如下： 勾選查看源代碼頁面的左上角的換行選項即可 …
首先我們網頁上要想統一字體其實有兩種方法，一種是選擇大家操作系統上都有的默認字體，第二種就是強行在網頁總載入字體文件來實現，但是非常非常不推薦這樣的方式，這樣對頁面的加載造成了負擔，并且沒有必要刻意的 …
首先排除代碼之間的換行符<br>，出現這個問題是因為圖片為內聯元素，有文字特性，默認存在間隙，所以會出現空白部分。 可以將圖片設置為block元素。 img{ display:block; } 還有種方法就是給父級設置fontsize: …
網上流行護眼色的RGB值和顏色代碼 在搜索引擎搜“護眼色”，就會搜出一堆關于保護眼睛的屏幕顏色文章，說的統統是一種顏色，有點像綠豆沙的顏色。方法就是在屏幕設置里， 色調：85；飽和度：123；亮度：205， R: 199; …
方式一：傳統方式，父容器relateive，子元素absolute，然后left:50%,再margin-left:-width/2 <div class="ago"> <div class="mid"></div> </div> .ago{ width:400px; height:200px; backgro …
新浪CDN： <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 其它版本：http://lib.sinaapp.com/?path=/jquery 百度CDN： <script src="http://apps.bdimg.com/ …
禁止鼠標右鍵，把Demo的圖片全都設為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標經過圖片時會出現另存的按鈕。禁止鼠標右鍵的代碼很簡單： <script LANGUAGE="JavaScript"> …
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" hr …
一、position：fixed 鎖定位置（相對于瀏覽器的位置），例如有些網站的右下角的彈出窗口。 示例： 二、position：absolute ??? 絕對位置： 1.外層沒有position：absolute（或relative）；那么div相對于瀏覽器定位， …
在使用swiper過程中，發現a鏈接失效，經過查找分析發現是由于沒有設置一個參數preventClicks，該參數默認的值是ture， 如果需要加入a鏈接需要設置preventClicks的值為false preventClicks:false <script type="te …
效果如圖： 參考代碼如下 p { margin: 4px; } a[href^="http:"] { background: url(images/window.gif) no-repeat left center; padding-left: 18px; } /*匹配所有的有效超鏈接*/ a[href$="pdf"] { background: url( …
考核內容: js 刪除對象屬性的應用 解題思路: 刪除對象屬性 我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性： delete 操作符用于刪除對象的某個屬性；如果沒有指向這個屬性的引用，那它最終會被釋放。 返回值 對 …
bootstrap4示例模板中出現這樣的代碼 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 這行代碼的作用可以讓網頁的寬度自動適應手機屏幕的寬度，但是多了shrink-to- …
這篇文章會記錄我們平時常用到的 CSS 片段，使用這些 CSS 可以幫助我們解決許多實際項目問題中遇到的，歡迎收藏轉載： 清除浮動 浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中 …
動畫效果參考連接：http://www.webhek.com/post/css-loaders.html 效果如下： 以上這些效果都是用一個div加css3動畫實現的，看起來效果似乎不錯。如果不考慮IE9兼容性的話，有一定的使用價值。 css3，canvas等實現的 …
直接上代碼 <style type="text/css"> .title { position: relative; font-size: 32px; color: #fff; height: 45px; line-height: 45px; text-align: center; top: 60px; } .title:before { content: ""; posit …
最近要實現一個類似下面的層疊的效果，需要帶一個hover?緩動效果。 第一反應就是直接使用:before&:after偽元素，配合絕對定位加z-index?輕松實現，實際操作發現并不是這么一回事。 代碼如下 .box{ width:100px; …
jQuery?自?2006?年誕生以來，一個發行了?1.x、2.x、3.x?這三個大版本。而在這三個大版本下又細分了許多小版本?？赡苡行┬』锇椴惶宄@些版本有什么區別？實際開發中應該選用哪個版本？下面我對其做個總結。 一、1 …
iframe設置height為100%無效，實際是因為父空間高度沒有設置的問題。 代碼如下 <body> ?? ?<iframe id="content" src="main.do" name="content" frameborder="0" scrolling="no" height="100%" width="100% …
有些朋友會發現，如果一行內容中有圖片有文字的話，文字往往會自動的底部對齊，影響美觀，那如何讓它們相對于垂直居中呢，很簡單，就是在圖片和文字所在的行中添加CSS屬性：vertical-align:middle;這樣，它們在同一 …
圖片img下方出現空隙，且找不到空隙被哪一個元素占用，無緣無故多了空隙，影響樣式設計，有以下幾種解決方法： 1，給<img>元素添加樣式：display:block; <img style="display: block" src="../img/banner_i …
HTML的頭部內容特別多，有針對SEO的頭部信息，也有針對移動設備的頭部信息。而且各個瀏覽器內核以及各個國內瀏覽器廠商都有些自己的標簽元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要內容，除了平常 …
1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，可以很優雅的解決這個困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY( …