CSS

在曾經的 淘寶UED 招聘 中有這樣一道題目：“使用純CSS實現未知尺寸的圖片(但高寬都小於200px)在200px的正方形容器中水平和垂直置中。”當然出題並不是隨意，而是有其現實的原因，垂直置中是 淘寶 工作中最常遇到的一個問題，很有代表性。題目的痛點在於兩點：垂直置中；圖片是個置換元素，有些特殊的特性。至於如何解決，下面是一個權衡的相對結構乾淨，CSS簡單的解決方案：  代碼如下複製代碼 .box

針對ie的最佳化　　有些時候，您需要對ie瀏覽器的bug定義一些非凡的規則，這裡有太多的css教程技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發布的ie7 beta版裡是否更好的支援css，這兩種方法都是最安全的。　　1、注釋的方法　　(a)在ie中隱藏一個css定義，您可以使用子選取器(child selector):html>body p { /* 定義內容 */ } 　　(b)下面這個寫法只有ie瀏覽器可以理解（對其他瀏覽器都隱藏）：* html p { /*

本文章就單獨講一下關於css教程 div 橫向置中寫法的用法，並且在ie,ie7,firefox相容問題。橫向置中(centering)　　這是一個簡單的技巧，但是值得再說一遍，因為我看見太多的新手問題都是問這個：css如何橫向置中？您需要定義元素的寬，並且定義橫向的margin，假如您的布局包含在一個層(容器)中，您可以這樣定義使它橫向置中：#wrap { width:760px; /* 修改為您的層的寬度 */ margin:0 auto; }

自動換行的css教程代碼與方法 對於div,p等區塊層級元素正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義的寬度之後自動換行html< id="wrap">正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義< /div >css#wrap{white-space:normal; width:200px;

方法一：　　針對ie，在子容器添加：　　position:relative;　　針對firefox等就只能使用png　　background:url(images/boxbg.png);　　/*以下只有ie識別*/　　*background:#cccccc;方法二：　　簡單描述一下，也是網上常見的方法。　　構造三個容器　　首先，讓需要透明的容器和不透明容器保持兄弟關係。　　然後，通過父容器控制大小讓兩個兄弟容器通過定位保持一個看似父子的相片順序。　　方法二是規避了透明度的繼承問題，並不是解決了透

　　　　px：pixel，像素，螢幕上顯示的最小單位； 　　　　pt：point，點，是印刷業一個標準的長度單位，1pt＝1/72英寸；

    預設值為： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容地區的左上方。    如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。    如果設定值為 right center，因為 r

一、使用空標籤清除浮動<style type=”text/css”> <!–     *{margin:0;padding:0;}     body{font:36px bold; color:#f00; text-align:center;}     #layout{background:#ff9;}     #left{

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.111cn.net/1999/xhtml"><head><meta

一、css控制ul縮排間距的方法：<style type="text/css">ul{margin-left:-10px;}</style><ul>    <li>www.111cn.net</li></ul>二、css去掉li點的三種方法：方法一：<ul>    <li style="list-style-type:

 代碼如下 複製代碼 自動換行 div{ word-wrap: break-word; word-break: normal; } 強制英文單詞斷行www.111cn.net div{ word-break:break-all;

<html xmlns="http://www.111cn.net/1999/xhtml"><head><title>css div寬度自動隱藏並且顯省略符號</title><meta http-equiv="content-type"

css教程  說明 background-image:url("圖片的網址");  背景圖 background: url(" 圖片的網址 ");  背景  background-color:#色碼;  背景色彩  Exp: 

 代碼如下 複製代碼 <title>css 定義 div邊框代碼</title> <style type="text/css">  .111cn_net {  BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP:

個滾動代碼，其他瀏覽器都滾的好好的，就IE出現錯誤！氣憤！隨想起IE的條件陳述式，如果是IE用第一種滾動方式，如果是其他瀏覽器用另外一種方式；<!--[if IE]> <script type="text/javascript"> new Marquee("ygjy1",0,2,395,300,50,0,0) 

網頁中的一般的PNG圖片可以利用JS代碼實現透明，但是如果使用PNG做背景的話，也就是在<a>懸浮狀態時所用的背景，就不好實現了。雖然網上也可以找到一種批量實現方法，可是那種方法是遍曆整個網頁來實現的，肯定會讓運行速度變慢。這裡公布一個方法，不是原創，也是從網上找到的，它是針對PNG做背景時使用的，代碼如下： .btnO{  background:url(winbg.png) no-repeat;

float元素的父元素不能指定clear屬性MacIE下假如對float的元素的父元素使用clear屬性，四周的float元素布局就會混亂。這是MacIE的聞名的bug，倘若不知道就會走彎路。6. float元素務必指定width屬性很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。另外指定元素時盡量使用em而不是px做單位。7.

    比如這個條件：     margin:3px 3px 0px 3px;     display:block;    想必大家一看就知道是什麼意思了，但通過測試，IE6和IE7瀏覽器，表現得就有區別。IE6表現得就很鬆散，似乎不止3px的左右距離而變成了雙倍距離，即6px；而IE7下，基本正常。    後來在網上學習了一下，將display:

CSS控制網頁H1標籤字型大小，網頁設計中經常使用H1標籤對關鍵字最佳化，可是那大大的字型實在是不爽。那就改掉它吧！使用CSS就可以輕鬆解決下面是解決的方法：<style type="text/css"><!--h1 {font-size: 14px;color: #16387c; display :

 代碼如下複製代碼 <!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-