Xhtml+css實踐水平置中的設計方法

有個疑惑已久的問題,前段時間做CSS+div布局時候,發現水平讓一個元素置中十分容易margin:0 auto;然而要做到垂直置中卻沒有找到可行的方案,以下是新發現的解決方案,整理如下: CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

xhtml+css實踐中,margin值為負數的理解

之前沒有認真研究過這個問題,今天終於弄明白了,一般來說,拿div來做比方,一個區塊層級元素的MARGIN一般我們設定成正數,這個時候MARGIN的大小是從BORDER邊框外圍線開始向外擴充算的,而當設定成為負數的時候,則是像內擴充算的,如果對於行內元素,要是該行內元素要緊跟一個元素的時候,則,水平方向上,它的位置將在MARGIN擴充的終點邊框開始。代碼:<div style="margin-right:-100px; background-color:#CCCCCC;

利用JS從父頁面給IFRAME的子頁面調用CSS樣式檔案。

CodeCode highlighting produced by Actipro CodeHighlighter

常用的 css hack執行個體

注意順序:#menu {  line-height: 23px; }/* firefox 瀏覽器實行這句定義 */ #menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對IE8來hack*/#menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對IE7來hack*/#menu { _line-height: 23px; }/*ie6 瀏覽器優先實行這句定義*/或者寫成一句#menu {

[Flex]用編程的方式來寫CSS – LESS的應用(一)

詳細請看:http://s.k-zone.cn/less1我是一個Flex開發人員,因此就無法避免與HTML、Javascript、CSS打交道。 如果使用HTML + Javascript的話,我一般採用JQuery的方式,畢竟對於像我這樣“半吊子”的Web開發人員來說,JQuery是一個非常不錯的選擇。但是對於CSS來說,就不是那麼方便了,只能一點一點的寫CSS。無意中發現了一個比較有意思的應用:LESS。那麼什麼是LESS呢?簡言之:使用編程的方法是來寫CSS。舉例說明:CSS方式:#he

CSS 字型系列

文章目錄 CSS 字型系列 CSS 字型系列混亂的字型命名問題設定字型屬性是樣式表的最常見的用途之一。不過,儘管字型選擇很重要,但是目前還沒有一種辦法能確保在 Web 上一致地使用字型,因為沒有一種統一描述字型和字型的變形的方法。例如,字型 Times、Times New Roman 和 TimesNR 可能很類似,甚至完全相同,不過使用者代理程式怎麼能知道這一點呢?創作人員可能在一個文檔中指定字型為

CSS屬性總結篇

捲軸1.overflow內容溢出時的設定(設定被設定對象是否顯示捲軸)overflow-x水平方向內容溢出時的設定overflow-y垂直方向內容溢出時的設定以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。2.scrollbar-3d-light-color立體捲軸亮邊的顏色(設定捲軸的顏色)scrollbar-arrow-color上下按鈕上三角箭頭的顏色scrollbar-base-color捲軸的基本顏色scrollbar-dark-shadow-co

javascript動態處理css(摘錄)

有很多提供動態建立 style 節點的方法,但是大多數都僅限於外部的 css 檔案。如何能使用程式產生的字串動態建立 style 節點,我搞了2個小時。靜態外部 css 檔案文法:@import url(style.css);動態外部 css 檔案載入的方法有如下:第一種:var style = document.createElement('link');style.href = 'style.css';style.rel = 'stylesheet';style.type =

用戶端(CSS)解決自動截取字串長度,並以…代替

通常的我們在讀取文章標題的時候,遇到字元過多,都是通過程式在SERVER端截取一定的字元數,然後添加...來實現標題長度截取的。其實我們也可以通過CSS來控制。 實列如下:.title{ width:200px; white-space:nowrap;   word-break:keep-all;   overflow:hidden;   text-overflow:ellipsis;}可用span或div引用,例如:<span

Js實現動態更改Css樣式之馬鈴薯網開/關燈效果!

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4     <title>開關燈效果</title> 5     <style type="text/css"> 6         body 7         { 8             background: #FFF; 9         }10

CSS學習之margin與padding

文章目錄 說明 CSS margin 屬性margin 屬性是用於在一個聲明中設定四個外邊距的所有屬性的簡寫屬性。說明這個簡寫屬性設定一個元素所有外邊距的寬度,或者設定各邊上外邊距的寬度。區塊層級元素的垂直相鄰外邊距會合并,而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合并。同樣地,浮動元素的外邊距也不會合并。允許指定負的外邊距值,不過使用時要小心。  四個邊距均為10px:h1 {margin: 10px}頂邊距和底邊距為10

CSS多類選擇符測試

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

(經典收藏)三十款最常用css選取器解析

你也許已經掌握了id、class、後台選取器這些基本的css選取器。但這遠遠不是css的全部。下面向大家系統的解析css中30個最常用的選取器,包括我們最頭痛的瀏覽器安全色性問題。掌握了它們,才能真正領略css的巨大靈活性。1.* {margin: 0; padding: 0;}星狀選擇符會在頁面上的每一個元素上起作用。web設計者經常用它將頁面中所有元素的margin和padding設定為0。*選擇符也可以在子選取器中使用。複製代碼運行代碼編輯代碼#container * { border:

CSS小技巧一:用div+css類比表格對角線

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用div+css類比表格對角線</title> <style type="text/css"> * { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0;

CSS小技巧二:導航中滑鼠經過變換文字

 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>導航中滑鼠經過變換文字</title> <style type="text/css"> * { margin:0; padding:0; } .nav { list-style:none; width:500px; height:30px; background:#3

利用float製作相容ie6純css下來菜單,無table、無js

  <!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>利用float製作相容ie6純css下來菜單</title><style type="text/css">* { margin:0; padding:0; }ul { list-style:none; }a:hover { text-decoration:; color:#555

針對IE的CSS hack 全面 實用

  .all IE{property:value\9;}.gte IE 8{property:value\0;}.lte IE 7{*property:value;}.IE 8/9{property:value\0;}.IE 9{property:value\9\0;}.IE 7{+property:value;}.IE 6{_property:value;}.not IE{property//:value;} lte:就是Less than or equal

css布局:三列布局,中間內容優先載入

上周面試前端開發時候,遇到這樣的筆試題目,三列布局,中間內容優先載入,左右兩邊的div寬度都是200px。我首先想到的是方法是:父級div相對定位,中間的div左右邊距都是210px;左右兩邊的div都絕對位置,分別位於左右兩邊。在紙上寫完,我當時覺得沒啥問題啊,但是面試我的考官卻對這樣布局能否實現效果表示懷疑,當然他也不確定,可能他用的是其他方法。我回家後,試了一下,確實沒問題啊。。解決問題的方法又不是只有一個。。<!doctype

面試問題(HTML和CSS方面)

1 IE/Win的 HasLayout 2 浮動 float 的定義。float後元素的display屬性會發生改變嗎?3 CSS 3.0、CSS2.1 中被現代瀏覽器應用了的規則有哪些?4 父元素定義了一個初始高度,如果裡面的img 元素的高度超過了父元素的高度,如何自適應?5 IE的3px bug 問題6 清除浮動有幾種方法?你知道幾種說幾種?7 CSS hack 瞭解嗎?說說。。。8 IE 5.5及IE5的表現與IE6有什麼不同補充:9 用過 Opera 嗎?談談Opera 的表現。。

翻譯《CSS權威指南》第3版第1章有感

    昨晚第一章終於翻譯完了,今天一直在想其中在 1.4.5 注釋 章節提示中的一段文字:One way to create "nested" comments accidentally is totemporarily comment out a large block of a style sheet that already contains acomment. Since CSS doesn't permit nested comments, the "outside"

總頁數: 694 1 .... 211 212 213 214 215 .... 694 Go to: 前往

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.