JavaScript

對於一些css樣式的巧妙方法進行總結。，css樣式總結針對之前遇到過的一些特殊樣式的實現，我今天做個總結，目的有二：一是將這些方法記錄下來，以便將來需要用到時尋找使用。二為將這些大神們智慧的結晶發揚光大，讓廣大前端程式猿們能夠少走彎路。此貼為更新帖，以後若有好的css樣式技巧，小哥我會不定期更新。　　一、塊元素水平垂直置中（特別鳴謝：鑫生活。鑫哥出品必屬精品！小弟膜拜）　　對於一個塊元素的水平垂直置中，水平置中的方式不必多說，一般用margin:auto;等方法即可實現。而對於垂直置中，儘管有v

背景位移取表徵圖，背景位移表徵圖  通常為了減少用戶端從伺服器下載圖片的次數，提高伺服器的效能，現在比較流行的做法是將多張圖片拼合成一張大圖片，然後再利用background-position屬性截取其中的各個小表徵圖，如菜單，表單或導航的小表徵圖等這種技術稱為CSS Sprite技術，範例程式碼如下：html代碼如下：<!doctype html><html lang="en"><head> <meta

CSS 特殊性、繼承與層疊，css層疊一、特殊性規則選取器的特殊性由選取器本身的組件確定；特殊性由四個部分組成，其初始值為0，0，0，0。1.    對於選取器中的每一個id，記0，1，0，0；2.    對於選取器中的每一個類、偽類、屬性選擇，記0，0，1，0；3.    對於選取器中的每一個元素、虛擬元素，記0，0，0，1；4.    結合符與萬用字元對於選取器的特殊性沒有任何貢獻。 注意：1.

分享幾種移動端標準頭，分享幾種標準頭1. rem單位方式，用法當前像素除以100。<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

前端開發之功能頁展示，前端開發展示1.本次用到的控制項資料按鈕組作為翻頁按鈕

css動畫+照片清晰度動畫，css動畫照片清晰度原始碼：<!DOCTYPE html><html><head><title>donghua</title><meta charset="utf-8"><style type="text/css">.beijing{border: 1px solid black;width: 100%;height: 800px;background: black;}.a1 img{

CSS3的幾個標籤速記3，CSS3標籤速記3transition：CSS3過渡     css3裡很好的一個標籤，可以非常方便的完成需要很多JS才能完成的動態效果例文法：transition：width 2S,height 2S,transform 2S;CSS3動畫@keyframes:使一種樣式逐漸層為另一種樣式的過程 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div

css過渡+3D，css過渡3d<!DOCTYPE html><html><head><title>guodu</title><meta charset="utf-8"><style type="text/css">#wp{ border: 1px solid red; width: 500px; height: 500px;

css書寫步驟，css書寫CSS整體書寫步驟1：CSS RESET 重設2：CSS GLABAL 全域屬性3: CSS分模組屬性，(先寫預設樣式和設計圖相差最大的部分，先大塊布局，後細緻調整)<style>/*CSS RESET 重設*/*{margin:0;padding:0;list-style:none;}img{border:none;}/*CSS GLOBAL 全域*/body{color:#336699; font:14px Arial,'Microsoft Yahei'

CSS3濾鏡！！！，css3濾鏡 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 img { 6 width: 33%; 7 height: auto; 8 float: left; 9 max-width: 235px;10 }11 12 .blur {-webkit-filter: blur(4px);filter: blur(4px);}13

我們為什麼要使用

儲存格內文本顯示超過儲存格寬度的解決辦法，儲存格寬度開發過程中，表格儲存格裡的顯示資料經常超出儲存格的寬度。遇到這種情況一般會這樣處理。1、超出部分顯示省略符號(...)解決辦法：在css中設定  text-overflow: ellipsis;text-overflow：2、換行顯示解決辦法： 在css中設定   white-space:normal;white-space：（1）normal ： 預設 。空白會被瀏覽器忽略。   

HTML5語義標籤的實踐（blog頁面），html5語義　　仿照著用HTML5+CSS3做了一個blog頁面。整體效果布局如如：　　頁面配置是基於html5元素的。所以在開始動手之前先熟悉一下HTML5元素，然後檢查它的語義是否適合你的布局很重要。　　The HTML5

Emmet 真是個好東西，Emmet好東西他的官網：http://docs.emmet.io/給廣大程式員節省時間#page>div.logo+ul#navigation>li*5>a{Item $}生產<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a&

Grunt_1從安裝開始建立一個基本的Grunt，grunt_1建立gruntGrunt的介紹：http://www.gruntjs.net/getting-started檔案架構：https://github.com/zhangsai521314/Grunt1：安裝Git

CSS透明屬性詳解，css詳解.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}上面的幾個屬性分別是:opacity: 0.5; 這是最重要的，因為它是CSS標準.該屬性支援firefox, Safari和 Opera.filter:alpha(opacity=50); 這個是為IE6設的，可取值在0-100，其它三個0到1.-moz-opacity:0.

前端開發之工程首頁，開發之工程首頁1. 基本資料http://v3.bootcss.com/http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html 2. 首頁的組成2.1 導覽列http://v3.bootcss.com/components/#nav2.2 輪播http://v3.bootcss.com/javascript/#carousel2.3 列表框略， （我會說，

軟體工程--介面UI 的原型設計，軟體工程--ui原型經過今天的討論， 我們組初步給出了設計方案。安裝了一晚上的 mockupBuilder 終於繪製了幾份介面的原型圖， 這裡需要吐槽下 mockupBuilder， 這個軟體很好用， 不過網頁版和單機版提供的功能不太一樣， 感覺單機版更全一些， 但是缺點是無法儲存。。。首頁：(初步設想是類似網易雲課堂的首頁風格)移動滑鼠到相應標籤上， 會出現相應的次級標題， 點擊次級標題可以進入學習介面(ps: 學習和登陸註冊頁面由同組另一個同學負責，

CSS 之 margin知識點，cssmargin知識點1.margin的百分比值　　普通元素的百分比maigin相對於容器元素的寬度(width) 進行計算的。　　這裡我們在圖片外面設定一個寬高分別為800 * 600的容器。設定img{ margin: 10%; } 　　結果如下 　　　    　　   結果margin值都是 800 * 10% = 80px; 所以這裡都是相對於容器的寬度計算的 容器的寬度計算

jquery設定表單元素為停用簡單代碼，jquery表單本章節通過簡單的執行個體代碼介紹一下如何將表單元素設定為不可用狀態。代碼執行個體如下：<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.bkjia.com/" /> <title>幫客之家</title>