Time of Update: 2017-01-13
1、DIV置中body {text-align: center;} div {margin-right: auto; margin-left: auto;}說明:對於IE,在父元素定義“text-align: center;”就可以了對於FF等其他瀏覽器,僅這樣不能置中,需在子項目中定義“margin-right: auto; margin-left: auto;”。2、背景置中 body {background:url(#) #fff
Time of Update: 2017-01-13
首先我們選擇一幅帶有半透明點的png圖片,頁面的背景色是#660,觀察在ie6/7/8下的表現。因為ie6不支援半透明點,所以就變成了灰色<style>body {background: #660}div{ position:absolute; filter: alpha(opacity=20); width: 256px; height:
Time of Update: 2017-01-13
1. 使用doctype你應該在一直每個html檔案的頭部都使用doctype,並且我們推薦使用strict 版本,比如:<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">或者,對於xhtml使用:<!doctype html public "-//w3c//dtd xhtml 1.0 strict/
Time of Update: 2017-01-13
文章提供三種關於文章標題過長了,控制顯示為略號方法,下面有三款css教程式控制制省略符號方式顯示(ie、ff)代碼,後兩款都相容ie,firefox。div{width:200px;/*容器的基本定義*/height:200px;background-color:#eee;}/* ie下的樣式 */ p span{display: block;width:200px;/*對寬度的定義,根據情況修改*/overflow: hidden;white-space:
Time of Update: 2017-01-13
代碼如下 複製代碼 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Time of Update: 2017-01-13
先看一個例子: html:111cn.net代碼如下:<ul> <li></li> <li></li> </ul>css:111cn.net代碼如下:ul { margin:0; padding:10px; list-style:none; background-color:#006699; } ul li { width:100px; height:100px; float:left; margin-right:10px;
Time of Update: 2017-01-13
這種方法,在 content 元素外插入一個 div。設定此 div height:50%; margin-bottom:-contentheight;。content 清除浮動,並顯示在中間。<div id="floater"><div id="content"> Content here</div></div>#floater {float:left; height:50%;
Time of Update: 2017-01-13
記得以前用table進行網頁布局時對於左右二列多行時覺得很麻煩,現在用css +div 來實現,我們只要設定大div的總寬,然后里面要排列的div只要二個寬度不大小總和小大div 總就會了,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Time of Update: 2017-01-13
翻轉的CSS 由三奇,又名Halikidiki : 2005年1月19 現在正在一個我自己,我敢肯定,所有網頁設計師在某個時候在其設計壽命想改變一個映像到另一個時,滑鼠輾過(通常使用的聯絡)
Time of Update: 2017-01-13
見過這些名單的CSS菜單?花式決策嗎?當然你!好吧,這是一個方便的教程如果你想創造一個快速的CSS菜單,並能夠控制其外觀。 第1步在您的HTML網頁,建立一個專區,並建立一個無序列表中區,像這樣:<div> <ul id="nav"> <li><a href="home.htm">Home</a></li> <li><a
Time of Update: 2017-01-13
css 分頁這是本人在給客戶開發網站時要用到了,所以我把它拿出來新手們學學,我們這裡只是css分頁效果而不是用伺服器指令碼那種分頁了,這種只是做出一種漂亮的效果來哦,下面我們先看看效果圖片吧.就是這種效果,像dz論壇一樣的分頁效果吧,那我是如何?的呢,我們就來看看原始碼與樣式吧. <div class="jogger"> &
Time of Update: 2017-01-13
以下附常見中文字型的英文名:華文細黑:STHeiti Light [STXihei] 華文黑體:STHeiti 華文楷體:STKaiti 華文宋體:STSong 華文仿宋:STFangsong ?? Pro:LiHei Pro Medium ?? Pro:LiSong Pro Light ?絲?w:BiauKai ?果??瀉塚?pple LiGothic Medium ?果???宋:Apple LiSung Light 新?明?:PMingLiU ?明?:MingLiU
Time of Update: 2017-01-13
當完成一項前端的工作之後,許多人都會忘記該項目的結構與細節。然而代碼並不是馬上就能完全定型,在餘下的時間裡還有不斷的維護工作,而這些工作也許不會是你自己完成。所以,結構優良的代碼能很大程度上最佳化它的可維護性。下面列出五種提高CSS檔案可維護性的方法,也就是一種較好的CSS樣式指南。1.分解你的樣式對於小項目,在寫代碼之前,按頁面結構或頁面內容將代碼分為幾塊並給予注釋。例如,可以分別將
Time of Update: 2017-01-13
《網站設計評論》專題文章可以隨意轉載,轉載請註明:“出處:藍色理想
Time of Update: 2017-01-13
我去,這個標題好長,想了半天還是這麼個大長標題。其實本文的內容簡單來說就是在 Retina 螢幕下,一般的圖片會顯得不清晰,所以我們就要 2X 的圖片來縮放到 50%(因為物理解析度不會變)來保證清晰度。後來出現的字型表徵圖解決了 2X 放大的問題,但是一些複雜的圖片還是無法用字型表徵圖代替,於是我們又回到了 2X 圖片的問題。2X 圖片多了之後又會影響載入速度,在普通圖片的時候我們可以用 CSS Sprites 比較完美的解決,但一張圖片放好幾個 2X 圖片定位座標的時候又會有一個縮放的問題,
Time of Update: 2017-01-13
/**default css style**/html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }li { display: list-item }head { display: none }table {
Time of Update: 2017-01-13
單行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }兩行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center;} #content-top {
Time of Update: 2017-01-13
1、什麼是BFCBFC(Block Formatting Context,區塊層級元素格式化上下文)是 W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。通俗講,BFC就是一種布局方式,在建立了 BFC後,其子項目會一個接一個地放置:盒子們自所在的 containing block 頂部起,水平方向上一個接一個撐滿整個寬度,垂直方向上他們的起點是包含塊的頂部,兩個相鄰的元素之間的垂直距離取決於 ‘margin’
Time of Update: 2017-01-13
這是純粹的css技巧,沒有使用任何ja指令碼或者flash, 並且它可以在大多數瀏覽器上正常工作(IE6需要支援透明PNG的hack) 這是完美的標題設計,你不必使用photoshop,這將大量節省你的頻寬和時間. 你可以對任何網頁字型使用這種效果,而且字型大小大小也是可變的.他是如何工作的?這個技巧很簡單.我們只是簡單的使用了1px寬的透明png覆蓋在了文本上. 代碼如下複製代碼 <h1><span></span>CSS
Time of Update: 2017-01-13
css教程 ie6 position:fixed (固定定位)通過position:absolute的解決方案,完全使用position:absolute來解決固定定位問題。因為其他的瀏覽器都支援絕對位置,在ie6,7,8,9,ff,chrome中均測試通過。注意一點:不能給外包含的元素mod-test設定高度,不然的話,是沒有捲軸的。而應該在裡面設定一個容器,它設定一個高度 <!doctype html public "-//w3c//dtd xhtml 1.0