<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>純CSS和Javascript實現的遮罩層</title> <style> #cover {
我們這裡詳細講解一下CSS盒子模型，什麼是盒子模型以及如何使用。 CSS 盒模型 網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的，請看：如果是 Firebug 使用者的話(基本和前端有關的都會用到 Firebug 吧 – 糖伴西紅柿)，就會很熟悉下面的圖表了。這個圖表很好地展示了作用於頁面上任意盒子的數值。注意以上兩個例子中，margin 都是白色的。Margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關的其他內容，因此
css-內聯（行內）元素、塊元素、margin、paddingblock元素的特點： 總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度預設是它的容器的100%，除非設定一個寬度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。inline元素的特點： 和其他元素都在一行上； 高，行高及頂和底邊距不可改變；
.fl-pic{ overflow:hidden; width:750px; //可見元素的寬度 height:50px; } .fl-pic ul{ width:3500px;//讓LI能夠在一行，如果小了，LI會換行； } .fl-pic ul li{ float:left; width:100px; height:50px; }<div class="fl-pic"> <ul>
在項目架構中，首先要引用很多css和js檔案，80%的使用者回應時間都是浪費在前端。而這些時間主要又是因為下載圖片、樣式表、JavaScript指令碼、flash等檔案造成的。減少這些資源檔的Request請求數將是提高網頁顯示效率的重點。這裡好像有個矛盾，就是如果我減少了很多的圖片，樣式，指令碼或者flash，那麼網頁豈不是光禿禿的，那多難看呢？其實這是一個誤解。我們只是說盡量的減少，並沒有說完全不能使用。減少這些檔案的Request請求數，我們這裡主要針對js和css檔案進行最佳化，使用Co
CSS屬性：marker-offset marker-offset : auto | length 取值： auto : 預設值。瀏覽器自動化佈建間距 length : 由浮點數字和單位標識符組成的長度值。可為負值。 說明：設定或檢索標記容器和主容器之間水平補白。即兩個容器靠近的一邊的間距。作用於 display 屬性值為 marker 的元素。對應的指令碼特性為 markerOffset 。 樣本： li:before { display: marker; marker-offset:
傳回值:Object{top,left}offset()概述 擷取匹配元素在當前視口的相對位移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。樣本描述: 擷取第二段的位移HTML 程式碼:<p>Hello</p><p>2nd Paragraph</p>jQuery 代碼:var p = $("p:last"); var offset = p.offset(); p.html( "left: " +
今天在google reader上看到一篇博文，然後在問了組裡的幾位同事之後才發現自己曾經一直對css selector的理解存在著誤區。據說老外的文章中很早就提到了關於css selector是優先順序演算法，只是到了國內被部分人員翻譯之後，誤解了其中的含義，導致現在很多人以為css選擇符的優先順序運算是將ID名、類名等等全部相加後做比較的。
1 字型樣式 {font:font-style font-variant font-weight font-size font-family} 2 字型類型 {font-family:"字型1","字型2","字型3",...} 3 字型大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} 4
1. link標籤是屬於xhtml範疇，而@import則是css2.1中特有的。link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel串連屬性等，@import就只能載入CSS了。 2. 載入的順序的區別，link載入的css時，是一種並行(沒有嘗試是否是這樣)載入CSS方式，而@import則在整個頁面載入完成後才載入。3. 相容性的區別，因@import是CSS2.1才特有的，所以對於不相容CSS2.1的瀏覽器來說，無效。4.
組件開發時，通常會有配有一個css檔案資源。但是在實用時，為了減少請求數，這個css有可能被合并在頁面的css中。那麼，寫組件時是否需加要載這個css呢？應對策略：組件的css前加一個.js_xcomponent_css_loaded的規則，來標識該組件對應的css是否已載入。而在組件的js裡，作一個判斷，如果css未預先載入（包括獨立預先載入、或被包含在其它的css檔案中一起預先載入），則進行載入。典型代碼如下：<html><head><link
之前我寫過一篇關於CSS透明度的文章，抱怨CSS對一個元素設定透明度後，導致它裡面的元素也跟著透明了。最近我發現，其實這樣挺好的。有時候我們想要一個背景半透明文字不透明的效果，比如一個“資訊警告框”，但當我們給這個元素加上opacity屬性後，發現背景和他裡面的所有東西都半透明了，導致辨認困難。如果你硬揪著opacity不放，你會發現用opacity來實現背景半透明文字不透明的效果很困難。於是，像我一樣，覺得W3C關於透明度的設定真是蛋疼。其實，是我們理解錯了。如果要背景半透明文字不透明這種效果
.cf:after { content:""; clear: both; display:table;}.content{ width:1020px; margin:0 auto; box-shadow:0 10px 30px rgba(0,0,0,0.3); background:#FFFFFF; border-radius:5px; border:1px solid #E53351;} .sub_colum{ float:right; width:30%;
寬度自適應：就是元素的寬度根居裡面的內容來變化;一、寬度自適應的元素水平置中： 1.寬度自適應的元素可以是：絕對位定、浮動元素、行內元素。而我們通常布局，肯定不會用行內元素，所以會選擇，絕對位置或浮動。 2.置中：這裡我們應該會想到1/2、50%、一半等這些東西。 中：黑色為body，深綠色需要在body中水平置中，並且寬度是自適應的。亮綠色，是一個多餘的DIV，就是為了讓深綠色的DIV水平置中。 以下是實現代碼： pos元素的float:left或都用position:absol
<form action="" name="" id="" role="search" method="get"> <fieldset class="search"> <label class="assistive-text" for="s">Search</label> <input type="search" name="s" id="" class="">
1.要求：如中的，三欄目布局，中間的MAIN是自適應瀏覽器的寬度，左LEFT固定寬200PX，右RIGHT固定寬200PX;.right,.left{height:300px;width:200px;}.right{ float:right;background:#000000;}.left{ float:left;background:#009933;}.main{background:#F60; height:300px;} <div
.outer { display:table; width:578px; overflow:hidden; background: #eee; height: 42px;}.middle {display:table-cell; vertical-align:middle; margin-left 10px;} /*下面的CSS是針對IE7，IE6*/<!--[if lte IE
盒子標籤和屬性對照CSS文法 (不區分大小寫)Javascript文法
周末的時候公司到一個學校做一場活動，活動中間有抽獎環節，抽獎是按照會議室坐位編號來的，就是把編有座位號的紙條折起來放在一個抽獎箱中。如何快速設計並列印出這些編號呢？這個問題難倒了我們美女設計。她是用設計軟體的重製方法，快速鍵通常是ctrl+d或ctrl+alt+d。如果重製的每個圖形一樣，那樣通過這個重製辦法再加上分布與排序功能可以快速做到，但是中間的號碼是變化的，這樣重製好了樣板還要一個一個地改中間的數字，麻煩。適好此時我靈機一動，用以下方法實現了，現拿出來與大家分享（方法實用，因為無須高品質
塊元素一般都從新行開始，它可以容納內嵌元素和其他塊元素,常見塊元素是段落標籤'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。 如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設配置模式，把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和css based
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
