原创 JavaScript 條件語句和循環語句

if條件語句 主要用於範圍值的判斷 語法: 1、條件成立時執行,條件不成立時什麼也不做 if(條件) { 條件成立時要執行的代碼 }; 2、條件成立時執行,執行if內的代碼,條件不成立時,執行else內的代碼 if(條件)

原创 CSS3 移動端開發技巧

媒體查詢 @media:媒體查詢;可以針對不同的媒體類型定義不同的樣式 only:指定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器 screen:用於電腦屏幕,平板電腦,智能手機等 and前後一定要有空格 <!D

原创 基於CSS3實現垂直輪播

效果圖 方法:使用動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title> <link

原创 CSS3 常用技巧

hover使用技巧 可以設置自己或後代元素的屬性 可以設置自己之後兄弟元素的屬性 不能設置祖先元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

原创 CSS3 元素居中

元素水平居中 text-align: center;:設置行內元素、行內塊級元素水平居中 margin: 0 auto;:設置塊級元素水平居中 行高垂直居中法 適用於單行,有父元素有固定高度 line-height: 3

原创 CSS3 過渡和動畫

過渡初識 過渡:元素從一種樣式變換爲另一種樣式時爲元素添加的效果 必須要觸發一個事件才能實現過渡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

原创 基於CSS3實現閃光條效果

效果圖 方法一:使用轉換中的傾斜轉換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title>

原创 CSS3 矢量圖標及背景精靈

矢量圖標淺解 矢量圖:根據幾何特性來繪製圖形。它的特點是放大後圖像不會是真,和分辨率無關 位圖:是由稱作像素(圖片像素)的單個點組成的,放大後,會變成馬賽克 矢量圖標引用 矢量圖標和字體的用法一樣 font-cla

原创 基於CSS3實現元素寬度向兩側延伸

效果圖 方法一:使用轉換中的角度轉換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title>

原创 CSS3 彈性盒子模型

彈性盒子:flex佈局 彈性盒子是一種佈局方式 特點:改變元素的排列方式 採用flex佈局的元素:稱爲flex容器,簡稱“容器”。它的所有子元素自動成爲容器成員,成爲flex項目(簡稱“項目”) 彈性盒子中的項目可以是塊級元

原创 CSS3 轉換

2D位移轉換 參考點(基點)在元素的中心點 相對自身參考點進行位移 位移設置成百分比後,是自身元素尺寸的百分比,元素的尺寸是否固定不會影響百分比的計算 transform: translateX(-150px); X軸:正

原创 基於CSS3實現水平輪播

效果圖 方法:使用動畫實現功能;鼠標懸停可以實現暫停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</t

原创 HTML5 佈局元素

元素類型 塊級元素 獨佔一行,不和其他元素待在一起 可以設置寬高 用來對網頁進行佈局,承載內容 行內元素 不會獨佔一行,可以和其他元素待在一行 不可以設置寬高,寬高由裏面的內容決定 行內塊級元素 不會獨佔一行,可

原创 HTML5 列表和表格

無序列表 列表中各個元素在邏輯上沒有先後順序,沒有級別之分 無序列表中,列表項之間屬於並列關係 每個列表項獨佔一行 無序列表是使用最廣泛的列表 無序列表語法: <ul>無序列表開始 <li></li>每一個列表項 </u

原创 HTML5 文本元素

標題元素 h1-h6標籤可以用來定義標題;標題標籤有強調作用,有確切的語義,h1-h6逐漸遞減 h1標籤在同一個頁面只能使用一次,h2-h6可以多次使用 標題標籤會獨佔一行,屬於塊級元素 段落元素 p標籤用來標記一