CSS

selector :first-child 這個是後代選取器. 怪異, 注意避免而不是理解.selector:first-child 當前 selector 選中的元素集合中的第一個元素selector:last-child當前 selector 選中的元素集合中的最後一個元素.但是有問題, :last-child 不生效.應該是:1 當前 selector 的父元素 parent2 parent所有子項目, [a,b,c]3 子項目的集合的第一個元素, 如果是 selector4 設定樣式,

CSS中transform 屬性允許你修改CSS可視化模型的座標空間。通過transform，可以讓元素進行移動（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。 如果該屬性有一個非none值, 將會產生一個層疊上下文. 在這種情況下 對象將作為它包含的 position: fixed 元素的包含塊（a containing block）。文法/* Keyword values */transform: none;/* Function values

原始css：border屬性border-color:邊框顏色border-width:邊框寬度border-style:邊框樣式none : 　無邊框。與任何指定的border-width值無關hidden : 　隱藏邊框。IE不支援dotted : 　在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為點線。否則為實線（常用）dashed : 　在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為虛線。否則為實線（常用）solid :

執行個體設定彈性盒對象元素的順序：p#myRedp {order:2;}p#myBluep {order:4;}p#myGreenp {order:3;}p#myPinkp {order:1;}<!DOCTYPE html><html><head><meta charset="utf-8"><title>手冊網(www.shouce.ren)</title><style>#main {

1、利用marginp { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}分析：top: 50%; left: 50%;讓元素的左上在父元素中垂直水平置中margin-top: -50px; margin-left:

compass 是sass的一個工具庫compass在sass 的基礎上封裝了一系列有用的模組，用來補充和豐富sass的工能，安裝：compass是用 ruby語言開發的，所以安裝它之前必須安裝ruby。命令：gem install compass項目初始化：要建立一個你的Compass 項目，如果項目的名字叫 myproject compass create myproject會在當前的目錄下產生這個目錄，裡面有config.rb檔案，還有兩個子目錄sass 和 stylesheets

從sass到PostCSS 多年來我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext外掛程式來嘗試處理樣式.我愛死了現在就可以使用將來的CSS特性,相對於之前我用的工具,它們更順手一些.我的個人網站就是嘗試新特性的最好的測試地.第一步是列出我Sass用法的清單.我需要知道我使用了哪些特性,並且確信新特性在postCSS中有替代品.以下是我正在這個項目中使用的特性：部分引用（partial

一般地，置中絕對位置元素，left:50%;top:50%;再margin負值或者通過transform也可達到效果。今天發現另一個技巧，利用，top,left,right,bottom取值0，再magin:auto,即可實現置中。原因：<div class='box> <div class='jz'></div></div>div.box{ position: relative; height: 300px;

在圍觀Drupal官方主題的時候，發現了一個有意思的非標準CSS選取器-webkit-font-smoothing，於是上手把玩了一番。如何使用css3字型平滑顯示呢

此處僅列舉幾種個人認為易模糊不清的情形。html結構如下：<p class="parent"> <p class="child"> 測試行高 </p></p>父元素為數字，子項目未設.parent{ font-size: 12px; ine-height: 1; }.child{ font-size: 16px; }父元素parent為

我們都知道，要做WD（web designer）,首先得伺侯好幾個瀏覽器:IE6,IE7,Firefox.一般的頁面，都只要求在IE6,IE7,Firefox下正常工作就行了。但是實際上，瀏覽器遠遠不止這幾個,Firefox分為Firefox 1.5,Firefox 2,Firefox 3幾個主要版本，IE7,IE6中也各有好幾個系列,另外除開這兩個主流廠商的產品之外，還有Opera,Konqueror,Netscape,chrome等一系列。 　　這些瀏覽器，各有各的一套，往往在這裡運行正常，

因為公司項目需要用到懶載入來提高網站載入速度，所以將非首屏渲染必需的css檔案進行動態載入操作。接下來通過本文給大家分享實現代碼，需要的朋友參考下一、方法引用來源和應用此動態載入css方法 loadCss，剝離自Sea.js，並做了進一步的最佳化（最佳化代碼後續會進行分析）。因為公司項目需要用到懶載入來提高網站載入速度，所以將非首屏渲染必需的css檔案進行動態載入操作。二、最佳化後的完整代碼/** @function 動態載入css檔案* @param {string} options.url

這篇文章主要介紹了css3加js做一個簡單的3D行星運轉效果執行個體代碼,效果非常炫酷，有想去的可以瞭解一下。前幾天在園子裡看到一篇關於CSS3D行星運轉的文章，感覺這個效果也太酷炫了，於是自己也就心血來潮的來嘗試的做了一下。因為懶得去用什麼外掛程式了，於是就原生的JS寫，效果有點粗超，還有一些地方處理的不是很好，如果有好的建議萬望留言告知，不勝感謝。好了不說廢話了，下面附上代碼。HTML部分<p class="path-Saturn">

JS實現最近做項目的時候需要實現一個字元逐個出現的打字效果，在網上一搜有個不錯的jQuery外掛程式Typed.js，效果很贊<p class="element"></p><script src="typed.js"></script><script> $(function(){ $(".element").typed({ strings:

CSS的很多其他屬性大多容易理解，比如字型，文本，背景等。有些CSS書籍也會對這些簡單的屬性進行大張旗鼓的介紹，而偏偏忽略了對一些難纏的屬性講解，有避重就輕的嫌疑。CSS中主要難以理解的屬性包括盒型結構，以及定位。正如positioniseverything，本文將主要講述關於position的理解，力求讓您看完本文後對position有著最全面的認識。position的四個屬性值：relativeabsolutefixedstatic下面分別講述這四個屬性。<p

css塊級標籤，行內標籤，行內塊標籤的轉換 在基礎1中，我詳細講了css的常見屬性，幾種不同的選取器，在此基礎之上我們來進一步地認識它們的特性從而更好地學習和掌握相關開發技能。HTML標籤的分類

　　本篇主要介紹float屬性：定義元素朝哪個方向浮動。目錄：1. 頁面配置方式：介紹文檔流、浮動層以及float屬性。2. float:left ：介紹float為 left 時的布局方式。3. float:right ：介紹float為 right 時的布局方式。4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時的布局方式。 1. 頁面配置方式頁面配置方式，主要包含：文檔流、浮動層、float屬性。1.1

本文預設你已經看過了我的上一篇文章 p+css圖片列表布局（一），接下來我們來實現複雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出display:inline-block的布局樣本。和上一篇介紹的一樣，第一步也是給父容器li元素定義一個寬度li { list-style: none; display: inline-block; width: 33.3%; /*三列圖片排列*/ text-align: center; /*內容置中*/

關於CSS中定位布局的相對定位-relative相對定位一個最大特點是：自己通過定位跑開了還佔用著原來的位置，不會讓給他周圍的諸如文字資料流之類的對象。相對定位也比較獨立，做什麼事它自己說了算，要定位的時候，它是以自己本身所在位置位移的（相對對象本身位移）。相對定位常與絕對位置結合用，一般是給父級設定相對定位方式，子級元素就可以相對它進行方便的絕對位置了<!DOCTYPE html><html lang="en"><head>

這或許是最常用的置中方法。如果知道了各個元素的大小，設定等於寬高一半大小的負margin值（如果沒有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會使塊元素置中。需要注意的是，這是按照預想情況也能在工作在IE6-7下的唯一方法。CSS Code複製內容到剪貼簿.is-Negative { width: 300px; height: 200px;