Time of Update: 2017-02-28
IE vs FFCSS 相容要點:DOCTYPE 影響 CSS 處理FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行FF: body 設定 text-align 時, div 需要設定 margin:&
Time of Update: 2017-02-28
base.css顧名思義就是基代碼的含義,主要就是重設瀏覽器預設樣式的一個集合吧,在進行css布局時把它加進去將會提高書寫效率,感興趣的朋友可以參考下 複製代碼代碼如下:/***** css set*****/ body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
Time of Update: 2017-02-28
在網站的內容頁中,我在左上方放置了300*250的廣告,利用的是css的浮動<div style=”float:left;margin-right:15px;”>,由於css的特性,這樣設定後,當文章的高度超過了250像素時,文章自動移動到廣告的下面去了,而不是左右兩列分開,如何左右分開呢?那麼我們就給這個div加個縱向的高度<div
Time of Update: 2017-02-28
隨著智能手機的增多,手機網站也可以做的更加個人化,最近在改版自己的手機網站這其中,遇到了網站圖片尺寸問題,手機螢幕都比較小,怎麼讓上傳的規則不一的圖片在手機上顯示的更加美觀呢?那就利用css的強大功能吧。先附上代碼:img {max-width:500px;myimg:expression(onload=function(){this.style.width=(this.offsetWidth >
Time of Update: 2017-02-28
利用css 來進行首行縮排,非常的方便。將文章內容用p標籤包住,然後對<p>標籤添加樣式即可執行個體:<div class="context"><p>第一段</p><p> 第二段</p></div>那麼我們就在css裡添加樣式.context p{ text-align: justify; text-justify:
Time of Update: 2017-02-28
CSS邊距屬性定義元素周圍的空間。通過使用單獨的屬性,可以對上、右、下、左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。——W3School 邊界(margin):元素周圍產生額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的地區。——CSS權威指南 padding稱呼為內邊距,其判斷的依據即邊框離內容本文的距離,而我喜歡CSS權威指南解釋的“補白&rdqu
Time of Update: 2017-02-28
今天通過和一些師弟的交流,發現他們對外邊距合并不是很理解。 其實淺析CSS的外邊距合并的話,是很容易明白是怎麼一回事兒的。但是如果想要深入瞭解margin這個神奇的屬性,那可得費一番功夫了。 我是一個菜鳥,在這裡當然不會解釋得太複雜,在這裡我只是想談談我對外邊距合并的理解。 其實要理解清楚什麼是外邊距合并,最簡單的方法就是自己動手試試。我認為,理解外邊距合并的關鍵就在於理解這句話:“只要接觸,就合并”。 什麼叫“只要接觸,就合并”呢?其
Time of Update: 2017-02-28
在做表單時我們經常遇到讓上下兩個欄位對齊的情況,比如姓名, 手機號碼, 出生地。這樣我們就要用到 text-align, text-justify樣式了。 text-align直接設為justify就行了,text-justify的情況相對比較複雜 IE的取值如下: auto :允許瀏覽器使用者代理程式確定使用的左右對齊法則 inter-word :通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的左右對齊行為對段落的最後一行無效 newspaper :
Time of Update: 2017-02-28
ul li的背景小表徵圖屬性設定一般會有兩種情況:定義在ul裡及li裡,這兩種定義在什麼情況下使用,在下文給出詳細的介紹,經常div+css布局的朋友不妨參考下,希望對大家有所協助 這裡我們分兩種情況列出: ①當標題前的表徵圖是很長的一綹而不是單獨的一個點或者類似表徵圖時,在定義背景圖background要定義在<ul>裡。因為很長,所以放在<li>的外邊<ul>裡
Time of Update: 2017-02-28
clear的值有四個 1.none:允許兩邊都可以有浮動物件; 2.both:不允許有浮動物件; 3.left:不允許左邊有浮動物件; 4.right:不允許右邊有浮動物件。 老實說,我沒真正理解字面上的意思,因為這幾段話是有歧義的,例如clear:right的解釋是“不允許右邊有浮動物件”,我一直以為是清除自身右方(下方)容器的浮動。但其實不是。下面一個一個DEMO的看,希望你能懂left和right到底是清除哪裡的浮動。 一、普通浮動,無清
Time of Update: 2017-02-28
td元素中nowrap屬性的行為與td元素的width屬性有關。如果未設定td寬度,則nowrap屬性起作用的,反之不起作用。我們可以通過為td設定word-break:break-all來實現換行 HTML中td元素的nowrap屬性工作表示禁止儲存格中的文字自動換行。但使用時要注意的是,td元素中nowrap屬性的行為與td元素的width屬性有關。如果未設定td寬度,則nowrap屬性起作用的,如果設定了td寬度,則nowrap屬性不起作用。 通過CSS讓TD自動換行 項目中
Time of Update: 2017-02-28
css 3種類型定位方式,進行控制頁面配置:普通定位,浮動定位,絕對位置。 預設使用普通流技術再頁面中布局元素,希望表現與普通流不同,另外兩個特性position和float 具體執行個體 複製代碼代碼如下:<html> <head> <title> css定位功能探索 </title> <style type="text/css"> #relative{ /*相對定位探索
Time of Update: 2017-02-28
css定義超連結是要有先後順序的。否則,在某些瀏覽器裡面有可能會出現某個樣式不起作用的bug。不能正確顯示想要的效果。 CSS屬性的排列順序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的簡寫。 它們分別表示 A:link 超連結的預設樣式 A:visited 訪問過的(已經看過的)連結樣式 A:hover 滑鼠處於滑鼠移至上方狀態的連結樣式 A:active 當滑鼠左鍵按下時,被啟用(就是滑鼠按下去那一瞬間)的連結樣式。 正常順序如下:
Time of Update: 2017-02-28
建立CSS樣式文本導航條的最簡單解決方案也許就是把所有的連結都放在一行文本裡,這種方法看起來很合理也很直觀。但問題在於把所有的連結都放在一行文本 裡就很難控制連結之間以及前後的空白。所以,為了避免所有的連結都擠在一起,你最後通常都不得不插入一些東西或者非換行的空白字元作為分隔,讓這些文字分 離開來,不至於混在一起。 現在我們正常的做法是應用ul、li標籤把連結作為無序列表(unordered
Time of Update: 2017-02-28
樣式表檔案:.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; bor
Time of Update: 2017-02-28
Cascading Style
Time of Update: 2017-02-28
css當中有許多平時很少用的屬性,但是這些屬性有時候被發掘出來以後就會立刻引起一些人的追逐,首字大寫就是這樣一種效果。最近越來越多的blogger開始在自己的blog中運用這一方法,東西很簡單,下面就來給大家介紹一下用:first-letter偽類來實現這種效果的方法: :first-letter版本:CSS2 相容性:IE5.5+ 文法: Selector : first-letter { sRules
Time of Update: 2017-02-28
這裡引用的是Jorux的“95%的中國網站需要重寫CSS”的文章, 題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字 體,所以無法用瀏覽器字型放大的功能,而國外大多數網站都可以在IE下使用。因為: 1. IE無法調整那些使用px作為單位的字型大小; 2. 國外的大部分網站能夠調整的原因在於其使用了em作為字型單位; 3.
Time of Update: 2017-02-28
float是什嗎?float即為浮動,在CSS中的作用是使元素脫離正常的文檔流並使其移動到其父元素的“最左邊”或“最右邊”。下面解釋下這個定義中的幾個名詞的概念: 文檔流:在html中文檔流即為元素從上至下排列的順序。 脫離文檔流:元素從正常的排列順序被抽離。
Time of Update: 2017-02-28
1、簡介:為何使用表格排版是不明智的? 表格之所以存在於 HTML 中,只是為了一個目的:顯示表格狀的資料。然而此後的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止,表格仍然主導著視覺豐富的網站的設計方式,但它卻阻礙了一種更好的、更有親和力的、更靈活的,而且功能更強大的網站設計方法。 2、概覽:這對我有什麼用處? 我們將告訴你這樣一種工作方式,它會: 使你的頁面載入得更快 降低你的流量費用