Rising Sun

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            148 隨筆 :: 0 文章 :: 22 評論 :: 0 Trackbacks

          #

          翻譯自:In Search of the Holy Grail
          原文:http://www.alistapart.com/articles/holygrail
          這個翻譯的頁面版權歸greengnn所有,轉載請注明出處
          第一步:創建一個結構

          xhtml開始于header, footer, and container
          <div id="header"></div>

          <div id="container"></div>

          <div id="footer"></div>

          CSS先定義container,給將要加入的sideleft,和sideright留下個位置
          #container {
           padding-left: 200px; /* LC width */
           padding-right: 150px; /* RC width */
          }

          我們的布局現在看起來是這樣的

          uploads/200602/13_074820_diagram_01.gif


          圖1——創建框架

          第二步:增加內容元素

          在第一步基礎上增加內容元素<div id="header"></div>

          <div id="container">
           <div id="center" class="column"></div>
           <div id="left" class="column"></div>
           <div id="right" class="column"></div>
          </div>

          <div id="footer"></div>

          然后分別定義widths和float 讓元素排列在一條線上,還有清除footer的浮動對齊
          #container .column {
           float: left;
          }
          #center {
           width: 100%;
          }
          #left {
           width: 200px; /* LC width */
          }
          #right {
           width: 150px; /* RC width */
          }
          #footer {
           clear: both;
          }

          這里給center元素定義了100% width,讓它占滿montainer的可用空間,現在的布局變成了這樣

          uploads/200602/13_074922_diagram_02.gif


          圖2:增加內容元素

          第三步:把left放到正確的位置

          要把left放到正確的位置,我們分兩步

          1.讓left和center在同一水平線#left {
           width: 200px; /* LC width */
           margin-left: -100%;
          }

          看看效果

          uploads/200602/13_075000_diagram_03.gif


          圖3——left移動完成一半

          2.用相對定位,把left繼續移動到正確的位置#container .columns {
           float: left;
           position: relative;
          }
          #left {
           width: 200px; /* LC width */
           margin-left: -100%;
           right: 200px; /* LC width */
          }

          上一步,left還需要左移200px,就可以了,所以就采用相對定位,將他再向左推200px,就達到了想要的效果。讓left距離他右邊元素center 200px后,行了,left終于到自己位置上了。

          uploads/200602/13_075037_diagram_04.gif


          圖4——left到了自己的位置

          第四步:讓right也到自己的正確的位置上

          從上圖看,我們只需要把right推倒container的padding-right里面,看看怎么做
          #right {
           width: 150px; /* RC width */
           margin-right: -150px; /* RC width */
          }

          好了,現在元素們都正確歸位了。

          uploads/200602/13_075115_diagram_05.gif


          圖5——right到了自己正確的位置

          第五步:解決bug讓布局更完美
          如果瀏覽器類型變更,center就變得比left小了,完美的布局就被打破,我們給body 設置一個min-width
          來解決這個問題,因為IE不支持他,所以不會有負面影響,調整如下
          body {
           min-width: 550px; /* 2x LC width + RC width */
          }

          這時在IE6(完全打開的窗口)下,left元素距離左側又太遠了,再調整
          * html #left {
           left: 150px; /* RC width */
          }

          這些大小調整是根據上面已經定義的寬度來的,你調整的時候也要根據自己的實際情況。

          現在增加padding

          內容文字貼著容器的邊,相信你看得時候,不會很舒服,調整一下
          #left {
           width: 180px; /* LC fullwidth - padding */
           padding: 0 10px;
           right: 200px; /* LC fullwidth */
           margin-left: -100%;
          }

          當然不能只增加left就算完事,要給一系列元素都必須加上,也要調整增加padding,帶來的新的bug,調整如下
          body {
           min-width: 630px; /* 2x (LC fullwidth +
           CC padding) + RC fullwidth */
          }
          #container {
           padding-left: 200px; /* LC fullwidth */
           padding-right: 190px; /* RC fullwidth + CC padding */
          }
          #container .column {
           position: relative;
           float: left;
          }
          #center {
           padding: 10px 20px; /* CC padding */
           width: 100%;
          }
          #left {
           width: 180px; /* LC width */
           padding: 0 10px; /* LC padding */
           right: 240px; /* LC fullwidth + CC padding */
           margin-left: -100%;
          }
          #right {
           width: 130px; /* RC width */
           padding: 0 10px; /* RC padding */
           margin-right: -190px; /* RC fullwidth + CC padding */
          }
          #footer {
           clear: both;
          }

          /*** IE Fix ***/
          * html #left {
           left: 150px; /* RC fullwidth */
          }
          header和footer的padding可以隨意增加,這里就不提了,還有長度單位用em更具親和力(em可以讓用戶使用瀏覽器來調整自己需要的字體大小)
          但是不能混合使用,選擇em和px的時候明智些,察看效果

          元素等高問題
          采用http://www.positioniseverything.net/articles/onetruelayout/equalheight
          有人翻譯過來的:http://www.blueidea.com/tech/web/2006/3210.asp
          里提到的方法,就不具體解釋了。
          #container {
           overflow: hidden;
          }
          #container .column {
           padding-bottom: 20010px; /* X + padding-bottom */
           margin-bottom: -20000px; /* X */
          }
          #footer {
           position: relative;
          }

          再解決opera 8的bug,代碼調整如下
          <div id="footer-wrapper">
           <div id="footer"></div>
          </div>
          * html body {
           overflow: hidden;
          }
          * html #footer-wrapper {
           float: left;
           position: relative;
           width: 100%;
           padding-bottom: 10010px;
           margin-bottom: -10000px;
           background: #fff; /* Same as body
           background */
          }
          posted @ 2007-06-14 10:00 brock 閱讀(246) | 評論 (0)編輯 收藏

          <style>
          body{
          margin:0 auto;
          }
          #ddd{
          margin:0 auto;
          padding: 3px;
          background:#00FFCC;
          border:solid 1px;
          height: 300px;
          }
          #ddd h4{
          margin:0px;
          background:#6666FF;
          line-height:20px;

          }
          #ddd ul{
          margin:0px;
          padding: 3px;
          list-style:none;
          }
          #ddd ul li {

          float:left;
          }

          #ddd a:visited{
          background:#999999 url(../Mcredits.gif);
          }
          #ddd a:link{
          background:#999999 url(../credits.gif);
          }
          #ddd a:hover{
          background:#ff0000;
          }

          #leftmenu
          {
              position: absolute;
              left: 0px;
              width: 400px;
              height: auto;
              background-color: WhiteSmoke;
              padding-top: 0px;
          }

          #leftmenu h3
          {
              font-size: 11.5;
              margin: 0px;
              margin-top: 10px;
              padding-bottom: 2px;
              padding-left: 3px;
              border-top: solid 1px Gainsboro;
              padding-top: 3px;
          }

          #leftmenu ul
          {
          list-style:none;

              margin: 0px;
              padding-left: 5px;
              margin-left: 5px;
              margin-bottom: 10px;
              font-size: 11.5;
          }
          #leftmenu ul li
          {
          margin:0px;
          float:left;
          }

          #leftmenu a
          {
              padding: 1px;
              text-decoration: none;
          }

          #leftmenu a:active, #leftmenu a:visited, #leftmenu a:link
          {
          }

          #leftmenu a:hover
          {
              font-style: italic;
          }


          </style>
          posted @ 2007-06-13 18:13 brock 閱讀(228) | 評論 (0)編輯 收藏

          初試javax.mail

          最近在項目中用到發送郵件的功能,由于以前沒有接觸過,找了很多資料才終于把它弄出來,今天寫下這些,算是做個總結吧。
          1、首先定義一個郵件的數據結構類
          public class EmailData() {
               String from   = null;  //發件人
               String[] recipients = null;  //收件人,可以多個
               String subject   = null;  //郵件主題
               String content   = null;  //郵件內容
               String contentType  = null;  //郵件內容格式(文本或html)
               String fileName  = null;  //附件文件名(目前只提供一個附件)
           
               //下面是相應的setter/getter方法,省略..
          }
          2、發送不帶附件的郵件(包括文本格式和html兩種格式)
          public void postMail(EmailData emailData)
           throws MessagingException,Exception {
            
           String from   = emailData.getFrom();
           String[] recipients = emailData.getRecipents();
           String subject   = emailData.getSubject();
           String content   = emailData.getContent();
           String contentType = emailData.getContentType();
           String fileName  = emailData.getFileName();
           
              if (recipients != null && recipients.length > 0) {

               Properties props = new Properties();
               //設置郵件服務器地址,連接超時時限等信息
               props.put("mail.smtp.host", "10.30.1.233"); //10.30.1.233郵件服務器
               props.put("mail.smtp.connectiontimeout", "10000"); //
            props.put("mail.smtp.timeout", "10000");   //
              
               //創建缺省的session對象
               Session session = Session.getDefaultInstance(props, null);
           
               //創建message對象
               Message msg = new MimeMessage(session);
           
               //設置發件人和收件人
               InternetAddress addressFrom = new InternetAddress(from);
               msg.setFrom(addressFrom);  
               InternetAddress[] addressTo = new InternetAddress[recipients.length];
               for (int i = 0; i < recipients.length; i++){
                   addressTo[i] = new InternetAddress(recipients[i]);
               }
               msg.setRecipients(Message.RecipientType.TO, addressTo);
            
            //設置郵件標題,中文編碼
               subject = MimeUtility.encodeText(new String(subject.getBytes(), "GB2312"), "GB2312", "B");
               msg.setSubject(subject);
              
               //設置郵件內容,區分文本格式和HTML格式
               if (contentType == null || contentType.equals("text")) {
                msg.setText(content);
            } else if (contentType.equals("html")) {
             //給消息對象設置內容
             BodyPart bodyPart1 = new MimeBodyPart(); //新建一個存放信件內容的BodyPart對象
             mdp.setContent(content, "text/html;charset=gb2312");//給BodyPart對象設置內容和格式/編碼方式
             Multipart mmp = new MimeMultipart();//新建一個MimeMultipart對象用來存放BodyPart對象(事實上可以存放多個)
             //設置郵件附件
             BodyPart bodyPart2 = new MimeBodyPart(); 
             FileDataSource fileDataSource = new FileDataSource(fileName);
             bodyPart2.setDataHandler(new DataHandler(fileDataSource));       
             bodyPart2.setFileName("=?GB2312?B?"+enc.encode(fileName.getBytes())+"?=");
             
               
             Multipart multipart = new MimeMultipart();
             multipart.addBodyPart(bodyPart1);
             multipart.addBodyPart(bodyPart2);
             
             mmp.addBodyPart(mdp);//將BodyPart加入到MimeMultipart對象中(可以加入多個BodyPart)
             msg.setContent(mmp);//把mm作為消息對象的內容
            }
               
               //設置郵件發送時間
                  msg.setSentDate(new java.util.Date());
                  //調用抽象類的靜態方法send()發送郵件
               Transport.send(msg);
              }
          }

          3、發送帶附件的郵件稍微復雜一些,跟發送普通郵件的區別主要如下:
             //設置郵件內容
             BodyPart bodyPart1 = new MimeBodyPart();
             bodyPart1.setDataHandler(new DataHandler( new MailDataSource(content,"text/html")));
             
             //設置郵件附件
             BodyPart bodyPart2 = new MimeBodyPart(); 
             FileDataSource fileDataSource = new FileDataSource(fileName);
             bodyPart2.setDataHandler(new DataHandler(fileDataSource));       
             //需要對附件文件名稱進行轉碼,不然會出現亂碼
             bodyPart2.setFileName("=?GB2312?B?"+enc.encode(fileName.getBytes())+"?=");
                  
             Multipart multipart = new MimeMultipart();
             multipart.addBodyPart(bodyPart1);
             multipart.addBodyPart(bodyPart2);

             //將Multipart加入到信件
             newMessage.setContent(multipart);

          4、以下是轉載的關于java mail的介紹
          Session
          --------------------------------------------------------------------
           Session 定義了一個基本的郵件會話,任何工作都是基于這個Session的。Session 對象需要一個 java.util.Properties 對象來得到類似 郵件服務器,用戶名,密碼這樣的信息。
           
           Session 的構造函數是私有的,你可以通過 getDefaultInstance() 方法來取得一個單一的可以被共享的默認session 如:

            Properties props = new Properties();
            // 填寫一些信息
            Session session = Session.getDefaultInstance(props,null);

           或者,你可以使用 getInstance() 方法來創建一個唯一的 session如:

            Properties props = new Properties();
            // 填寫一些信息
            Session session = Session.getInstance(props,null);
           
           在這兩種方法中 其中的 null 參數是一個 Authenticator 對象,在這里沒有被使用的,所以就是null
           
           在大多數案例中,使用一個共享session 已經做夠了。

          Message
          ----------------------------------------------------------------
           一旦你創建了Session對象,那么下面要做的就是創建 message 來發送。Message 是一個抽象類,在大部分應用中你可以使用它的子類 javax.mail.internet.MimeMessage 。MimeMessage 是一個理解在不同RFCs中定義的MIME類型以及headers的e-mail message&nbsp;。 Message headers 必須使用 US-ASCII 字符集。

           可以用如下的方法創建一個 Message 
            MimeMessage message = new MimeMessage(session);
           我們注意到,這里需要用session對象作為構造函數的參數。當然,還有其它的構造函數,比如從用RFC822格式化過的輸入流來創建message。

           一旦你得到了 message ,你就可以來設置它的各個部分(parts)。設置內容(content)的基本的機制是使用setContent() 方法。

            message.setContent("Email Content. ","text/plain");

           如果,你能夠明確你的使用MimeMessage來創建message 并且只是使用普通的文本(plain text) 那么你也可以使用 setText() 方法,setTest()方法只需要設置具體的內容,它默認的MIME類型是 text/plain
            
            message.setText("Email Content. ");
           
           對于普通文本類型的郵件,有一種機制是首選( message.setText("Email Content. "))的設置內容的方法。如果要創建其它類型的message ,比如 HTML類型的message  那么還是需要使用前者 ( message.setContent("Email Content. ","text/html"); )

           設置主題(subject ),使用setSubject() 方法
            
            message.setSubject(" Subject ");

          Address 
          ----------------------------------------------------------------
           
           當你已經創建Session 以及 Message,并且已經為message 填充了內容,那么接下來要做的就是給你的郵件添加一個地址(Address)。 就像Message一樣,Address也是一個抽象類,我們可以使用它的一個子類javax.mail.internet.InternetAddress 。

           創建一個地址非常簡單

            Address address = new InternetAddress("suixin@asiainfo.com");

           如果,你希望在出現郵件地址的地方出現一個名稱,那么你只需要再多傳遞一個參數。

            Address address = new InternetAddress("suixin@asiainfo.com","Steve");

           你需要為 message 的from以及 to 字段創建address對象。為了識別發送者,你需要使用setFrom() 和 setReplyTo() 方法。
            
            messge.setFrom(address);

           如果你的message 需要顯示多個 from 地址,可以使用 addFrom() 方法

            Address address[] = {....};
            message.addFrom(address);

           為了辨識message 的收件人,你需要使用 setRecipient() 方法。這個方法除了address參數之外,還需要一個Message.RecipientType 。

           message.addRecipient(type,address);

           Message.RecipientType有幾個預先定義好的類型
           
           Message.RecipientType.TO  收件人
           Message.RecipientType.CC  抄送
           Message.RecipientType.BCC  暗送

           如果你的一封郵件,需要發送給你的老師,并還要給你的幾個同學,那么你可以這樣

           Address toAddress = new InternetAddress("teacher@17288.com");
           Address[] ccAddress = {new InternetAddress("schoolmate1@17288.com"),new InternetAddress("schoolmate2@17288.com")};

           message.addRecipient(Message.RecipientType.To, toAddress);
           message.addRecipient(Message.RecipientType.CC, ccAddress);
           
           JavaMail 沒有提供電子郵件地址有效性的檢測。這些超越了JavaMail API的范圍。

          Authenticator
           
           通過Authenticator設置用戶名、密碼,來訪問受保護的資源,這里的資源一般指的是郵件服務器。
           
           Authenticator也是一個抽象類,你需要自己編寫子類已備應用。你需要實現getPasswordAuthentication()方法,并返回一個PasswordAuthentication實例。你必須在 session被創建時, 注冊你的 Authenticator。這樣,當需要進行認證是,你的Authenticator就可以被得到。

            Properties props = new Properties();
            //設置屬性
            Authenticator auth = new YourAuthenticator();
            Session session = Session.getDefaultInstance(props, auth);
           
          Transport
          ----------------------------------------------------------------

           發送消息最后的一步就是使用Transport類,你可以通過兩種方法來進行發送。
           Transport 是一個抽象類,你可以調用它靜態的send() 方法來發送

            Transport.send(message);

           或者,你可以為你使用的協議從session中取得一個指定的實例,

            Transport transport = session.getTransport("smtp");
            transport.sendMessage(message, message.getAllRecipients());
            transport.close();

          Store and Folder
           
           這兩個類重要用于取得信息。在創建了Session之后,需要連接到一個 Store ,你需要告訴Store  你使用的是什么協議。

            // Store store = session.getStore("imap");
            Store store = session.getStore("pop3");
            store.connect(host, username, password);

           在連接到一個 Store 后,你可以得到一個 Folder,當然,這個Floder必須是打開的。

            Folder folder = store.getFolder("INBOX");
            folder.open(Folder.READ_ONLY);
            Message message[] = folder.getMessages();

           如果使用POP3那么,INDEX是唯一可用的文件夾。如果使用的是IMAP,你就可以使用其它的文件夾。 

          posted @ 2007-04-29 10:33 brock 閱讀(194) | 評論 (0)編輯 收藏

          <!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; charset=gb2312" />
          <title>written by misshjn</title>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          function test(value){
              var opt = document.getElementById("ss").innerHTML.toString();
              var re = new RegExp(value,"g");
              opt = opt.replace(/<OPTION|<\/OPTION>| selected|value/g,"").match(/=.*?>/g).toString().replace(/=|>/g,"").replace(re,"┢").replace(/[^,┢]/g,"").indexOf("┢");
              document.getElementById("ss").getElementsByTagName("option")[opt].selected = true;
          }
          function randomselect(){
              document.getElementById("ss").getElementsByTagName("option")[Math.floor(Math.random()*document.getElementById("ss").getElementsByTagName("option").length)].selected = true;
          }
          //-->
          </SCRIPT>
          </head>
          <body>
          <!--
          <select id="ss">
          <option value="1998">1998年</option>
          <option value="1999">1999年</option>
          <option value="2000">2000年</option>
          <option value="2001">2001年</option>
          <option value="2002">2002年</option>
          <option value="2003">2003年</option>
          <option value="2004">2004年</option>
          <option value="2005">2005年</option>
          </select>
          -->

          <SCRIPT LANGUAGE="JavaScript">
          <!--
          var opts;
          for (i=1900; i<2008; i++){
              opts +="<option value='"+i+"'>第 "+i+" 年</option>";
          }
          document.write("<select id='ss'>"+opts+"</select>");
          //-->
          </SCRIPT>

          <input type="button" value="選中 value=2001 的選項" onclick="test('2001')">
          <input type="button" value="隨機選擇" onclick="randomselect()">
          </body>
          </html>
          posted @ 2007-04-18 10:43 brock 閱讀(1574) | 評論 (0)編輯 收藏

          使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。css縮寫的主要規則如下:

          顏色

          16進制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:
          #000000可以縮寫為#000;#336699可以縮寫為#369;

          盒尺寸

          通常有下面四種書寫方法:

          • property:value1; 表示所有邊都是一個值value1;
          • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
          • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
          • property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left

          方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下:
          margin:1em 0 2em 0.5em;

          邊框(border)

          邊框的屬性如下:

          • border-width:1px;
          • border-style:solid;
          • border-color:#000;

          可以縮寫為一句:border:1px solid #000;

          語法是border:width style color;

          背景(Backgrounds)

          背景的屬性如下:

          • background-color:#f00;
          • background-image:url(background.gif);
          • background-repeat:no-repeat;
          • background-attachment:fixed;
          • background-position:0 0;

          可以縮寫為一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

          語法是background:color image repeat attachment position;

          你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器默認值,默認值為:

          • color: transparent
          • image: none
          • repeat: repeat
          • attachment: scroll
          • position: 0% 0%

          字體(fonts)

          字體的屬性如下:

          • font-style:italic;
          • font-variant:small-caps;
          • font-weight:bold;
          • font-size:1em;
          • line-height:140%;
          • font-family:"Lucida Grande",sans-serif;

          可以縮寫為一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

          注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值。

          列表(lists)

          取消默認的圓點和序號可以這樣寫list-style:none;,

          list的屬性如下:

          • list-style-type:square;
          • list-style-position:inside;
          • list-style-image:url(image.gif);

          可以縮寫為一句:list-style:square inside url(image.gif);

          posted @ 2006-12-30 11:05 brock 閱讀(342) | 評論 (1)編輯 收藏

          • 原文作者:Roger Johansson
          • 作者簡介:住在瑞典哥德堡,1994年開始接觸和參與web設計,456 Berea Street是他的住址,因此采用這個名字作為他的個人主頁域名
          • 原文出處:www.456bereastreet.com
          • 原文發表時間:2005年3月15日
          • 阿捷說明:此文原名"CSS tips and tricks",有2篇,我將它們合并翻譯在本文中。
          作者Roger Johansson照片

          最近,經常有朋友問我一些工作中遇到的CSS問題。他們總是不能很好的控制CSS,影響CSS的效率發揮。我來分析總結一下錯誤所在,幫助大家更加容易使用CSS。

          本文總結了我開始使用CSS布局方法以來所有的技巧和兼容方案,我愿意把這些與你分享,我會重點解釋一些新手容易犯的錯誤(包括我自己也犯過的),如果你已經是CSS高手,這些經驗技巧可能已經都知道,如果你有更多的,希望可以幫我補充。

          一.使用css縮寫

          使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫語法總結》,這里就不展開描述。

          二.明確定義單位,除非值為0

          忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100",但是在CSS中,你必須給一個準確的單位,比如:width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。

          三.區分大小寫

          當在XHTML中使用CSS,CSS里定義的元素名稱是區分大小寫的。為了避免這種錯誤,我建議所有的定義名稱都采用小寫。

          class和id的值在HTML和XHTML中也是區分大小寫的,如果你一定要大小寫混合寫,請仔細確認你在CSS的定義和XHTML里的標簽是一致的。

          四.取消class和id前的元素限定

          當你寫給一個元素定義class或者id,你可以省略前面的元素限定,因為ID在一個頁面里是唯一的,而clas s可以在頁面中多次使用。你限定某個元素毫無意義。例如:

          div#content { /* declarations */ }
          fieldset.details { /* declarations */ }

          可以寫成

          #content { /* declarations */ }
          .details { /* declarations */ }

          這樣可以節省一些字節。

          五.默認值

          通常padding的默認值為0,background-color的默認值是transparent。但是在不同的瀏覽器默認值可能不同。如果怕有沖突,可以在樣式表一開始就先定義所有元素的margin和padding值都為0,象這樣:

          * {
          margin:0;
          padding:0;
          }

          六.不需要重復定義可繼承的值

          CSS中,子元素自動繼承父元素的屬性值,象顏色、字體等,已經在父元素中定義過的,在子元素中可以直接繼承,不需要重復定義。但是要注意,瀏覽器可能用一些默認值覆蓋你的定義。

          七.最近優先原則

          如果對同一個元素的定義有多種,以最接近(最小一級)的定義為最優先,例如有這么一段代碼

          Update: Lorem ipsum dolor set

          在CSS文件中,你已經定義了元素p,又定義了一個class"update"

          p {
          margin:1em 0;
          font-size:1em;
          color:#333;
          }
          .update {
          font-weight:bold;
          color:#600;
          }

          這兩個定義中,class="update"將被使用,因為class比p更近。你可以查閱W3C的《 Calculating a selector’s specificity》 了解更多。

          八.多重class定義

          一個標簽可以同時定義多個class。例如:我們先定義兩個樣式,第一個樣式背景為#666;第二個樣式有10 px的邊框。

          .one{width:200px;background:#666;}
          .two{border:10px solid #F00;}

          在頁面代碼中,我們可以這樣調用

          <div class="one two"></div>

          這樣最終的顯示效果是這個div既有#666的背景,也有10px的邊框。是的,這樣做是可以的,你可以嘗試一下。

          九.使用子選擇器(descendant selectors)

          CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼:

          <div id="subnav">
          <ul>
          <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
          <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
          <li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
          </ul>
          </div>

          這段代碼的CSS定義是:

          div#subnav ul { /* Some styling */ }
          div#subnav ul li.subnavitem { /* Some styling */ }
          div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
          div#subnav ul li.subnavitemselected { /* Some styling */ }
          div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

          你可以用下面的方法替代上面的代碼

          <ul id="subnav">
          <li> <a href="#"> Item 1</a> </li>
          <li class="sel"> <a href="#"> Item 1</a> </li>
          <li> <a href="#"> Item 1</a> </li>
          </ul>

          樣式定義是:

          #subnav { /* Some styling */ }
          #subnav li { /* Some styling */ }
          #subnav a { /* Some styling */ }
          #subnav .sel { /* Some styling */ }
          #subnav .sel a { /* Some styling */ }

          用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

          十.不需要給背景圖片路徑加引號

          為了節省字節,我建議不要給背景圖片路徑加引號,因為引號不是必須的。例如:

          background:url("images/***.gif") #333;

          可以寫為

          background:url(images/***.gif) #333;

          如果你加了引號,反而會引起一些瀏覽器的錯誤。

          十一.組選擇器(Group selectors)

          當一些元素類型、class或者id都有共同的一些屬性,你就可以使用組選擇器來避免多次的重復定義。這可以節省不少字節。

          例如:定義所有標題的字體、顏色和margin,你可以這樣寫:

          h1,h2,h3,h4,h5,h6 {
          font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
          color:#333;
          margin:1em 0;
          }

          如果在使用時,有個別元素需要定義獨立樣式,你可以再加上新的定義,可以覆蓋老的定義,例如:

          h1 { font-size:2em; }
          h2 { font-size:1.6em; }

          十二.用正確的順序指定鏈接的樣式

          當你用CSS來定義鏈接的多個狀態樣式時,要注意它們書寫的順序,正確的順序是::link :visited :hover :active。抽取第一個字母是"LVHA",你可以記憶成"LoVe HAte"(喜歡討厭)。為什么這么定義,可以參考Eric Meyer的《Link Specificity》。

          如果你的用戶需要用鍵盤來控制,需要知道當前鏈接的焦點,你還可以定義:focus屬性。:focus屬性的效果也取決與你書寫的位置,如果你希望聚焦元素顯示:hover效果,你就把:focus寫在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。

          十三.清除浮動

          一個非常常見的CSS問題,定位使用浮動的時候,下面的層被浮動的層所覆蓋,或者層里嵌套的子層超出了外層的范圍。

          通常的解決辦法是在浮動層后面添加一個額外元素,例如一個div或者一個br,并且定義它的樣式為clear: both。這個辦法有一點牽強,幸運的是還有一個好辦法可以解決,參看這篇文章《How To Clear Floats Without Structural Markup》(注:本站將盡快翻譯此文)。

          上面2種方法可以很好解決浮動超出的問題,但是如果當你真的需要對層或者層里的對象進行clear的時候怎么辦?一種簡單的方法就是用overflow屬性,這個方法最初的發表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被廣泛討論。

          上面那一種clear方法更適合你,要看具體的情況,這里不再展開論述。另外關于float的應用,一些優秀的文章已經說得很清楚,推薦你閱讀:《Floatutorial》、《Containing Floats》和《Float Layouts

          十四.橫向居中(centering)

          這是一個簡單的技巧,但是值得再說一遍,因為我看見太多的新手問題都是問這個:CSS如何橫向居中?你需要定義元素的寬,并且定義橫向的margin,如果你的布局包含在一個層(容器)中,就象這樣:

          你可以這樣定義使它橫向居中:

          #wrap {
          width:760px; /* 修改為你的層的寬度 */
          margin:0 auto;
          }

          但是IE5/Win不能正確顯示這個定義,我們采用一個非常有用的技巧來解決:用text-align屬性。就象這樣:

          body {
          text-align:center;
          }
          #wrap {
          width:760px; /* 修改為你的層的寬度 */
          margin:0 auto;
          text-align:left;
          }

          第一個body的text-align:center; 規則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ,第二個text-align:left;是將#warp中的文字居左。

          十五.導入(Import)和隱藏CSS

          因為老版本瀏覽器不支持CSS,一個通常的做法是使用@import技巧來把CSS隱藏起來。例如:

          @import url("main.css");

          然而,這個方法對IE4不起作用,這讓我很是頭疼了一陣子。后來我用這樣的寫法:

          @import "main.css";

          這樣就可以在IE4中也隱藏CSS了,呵呵,還節省了5個字節呢。想了解@import語法的詳細說明,可以看這里《centricle’s css filter chart

          十六.針對IE的優化

          有些時候,你需要對IE瀏覽器的bug定義一些特別的規則,這里有太多的CSS技巧(hacks),我只使用其中的兩種方法,不管微軟在即將發布的IE7 beta版里是否更好的支持CSS,這兩種方法都是最安全的。

          • 1.注釋的方法
            • (a)在IE中隱藏一個CSS定義,你可以使用子選擇器(child selector):
              html>body p {
              /* 定義內容 */
              }
            • (b)下面這個寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)
              * html p {
              /* declarations */
              }
            • (c)還有些時候,你希望IE/Win有效而IE/Mac隱藏,你可以使用"反斜線"技巧:
              /* \*/
              * html p {
              declarations
              }
              /* */
          • 2.條件注釋(conditional comments)的方法

            另外一種方法,我認為比CSS Hacks更加經得起考驗就是采用微軟的私有屬性條件注釋(conditional comments)。用這個方法你可以給IE單獨定義一些樣式,而不影響主樣式表的定義。就象這樣:

            <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="ie.css" />
            <![endif]-->

          十七.調試技巧:層有多大?

          當調試CSS發生錯誤,你就要象排版工人,逐行分析CSS代碼。我通常在出問題的層上定義一個背景顏色,這樣就能很明顯看到層占據多大空間。有些人建議用border,一般情況也是可以的,但問題是,有時候border 會增加元素的尺寸,border-top和boeder-bottom會破壞縱向margin的值,所以使用background更加安全些。

          另外一個經常出問題的屬性是outline。outline看起來象boeder,但不會影響元素的尺寸或者位置。只有少數瀏覽器支持outline屬性,我所知道的只有Safari、OmniWeb、和Opera。

          十八.CSS代碼書寫樣式

          在寫CSS代碼的時候,對于縮進、斷行、空格,每個人有每個人的書寫習慣。在經過不斷實踐后,我決定采用下面這樣的書寫樣式:

          selector1,
          selector2 {
          property:value;
          }

          當使用聯合定義時,我通常將每個選擇器單獨寫一行,這樣方便在CSS文件中找到它們。在最后一個選擇器和大括號{之間加一個空格,每個定義也單獨寫一行,分號直接在屬性值后,不要加空格。

          我習慣在每個屬性值后面都加分號,雖然規則上允許最后一個屬性值后面可以不寫分號,但是如果你要加新樣式時容易忘記補上分號而產生錯誤,所以還是都加比較好。

          最后,關閉的大括號}單獨寫一行。

          空格和換行有助與閱讀。

          posted @ 2006-12-30 11:04 brock 閱讀(295) | 評論 (0)編輯 收藏

          未標題.gif
          posted @ 2006-11-15 14:16 brock 閱讀(187) | 評論 (0)編輯 收藏

          <script language="JavaScript">
          function open_window() {
          window.frames["ifr"].location.reload();
          }
          </script>
          <iframe src="

          <a href="#" onclick="open_window();">刷新</a>




          window.opener.location.href=window.opener.location.href


          window.opener.location.href=window.opener.location.href
          就是彈窗的父頁面重定向到自己
          window.opener.location..reload()


          程序寫寫忘了最簡單的東西 <%=g_user%>?
          posted @ 2006-10-19 10:56 brock 閱讀(167) | 評論 (0)編輯 收藏

          在導出數據生成excel時,定義excel單元格格式為文本。
          最好拿你的導出代碼貼出來看看,主要是生成excel時代碼

          --------------------------------------------------------------------------------

          參考一下.
          <% @?page?contentType = " text/html;?charset=gb2312 " %>
          <% @?page? import = " java.io.* " %>
          <% @?page? import = " org.apache.poi.hssf.util.HSSFColor " %>
          <% @?page? import = " org.apache.poi.hssf.util.Region " %>
          <% @?page? import = " org.apache.poi.hssf.usermodel.* " %>
          <%
          // 初始化
          // 工作簿
          HSSFWorkbook?wb = new ?HSSFWorkbook();
          // 工作表
          HSSFSheet?sheet = wb.createSheet();
          wb.setSheetName(
          0 , " Excel演示! " ,HSSFWorkbook.ENCODING_UTF_16);
          // 準備完成
          // 建樣式
          // 標題字
          HSSFFont?font_Header = wb.createFont();
          font_Header.setFontName(
          " headerFont " );
          font_Header.setFontHeightInPoints((
          short ) 12 );
          HSSFCellStyle?cellStyle_Header
          = wb.createCellStyle();
          cellStyle_Header.setAlignment(HSSFCellStyle.ALIGN_CENTER);
          cellStyle_Header.setFont(font_Header);
          // 通用行
          HSSFCellStyle?cellStyle_Normal = wb.createCellStyle();
          cellStyle_Normal.setAlignment(HSSFCellStyle.ALIGN_LEFT);
          // cellStyle_Normal.setBorderBottom(HSSFCellStyle.BORDER_THIN);
          // cellStyle_Normal.setBorderLeft(HSSFCellStyle.BORDER_THIN);
          // cellStyle_Normal.setBorderRight(HSSFCellStyle.BORDER_THIN);
          // cellStyle_Normal.setBorderTop(HSSFCellStyle.BORDER_THIN);
          // 表格頭
          HSSFCellStyle?cellStyle_Column = wb.createCellStyle();
          cellStyle_Column.setAlignment(HSSFCellStyle.ALIGN_CENTER);
          cellStyle_Column.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
          cellStyle_Column.setBorderBottom(HSSFCellStyle.BORDER_THIN);
          cellStyle_Column.setBorderLeft(HSSFCellStyle.BORDER_THIN);
          cellStyle_Column.setBorderRight(HSSFCellStyle.BORDER_THIN);
          cellStyle_Column.setBorderTop(HSSFCellStyle.BORDER_THIN);
          cellStyle_Column.setFillPattern(HSSFCellStyle.BIG_SPOTS);
          cellStyle_Column.setFillBackgroundColor((
          short )HSSFColor.WHITE.index);
          cellStyle_Column.setFillForegroundColor(HSSFColor.GREY_25_PERCENT.index);
          // 數據行
          HSSFCellStyle?cellStyle_Cell = wb.createCellStyle();
          cellStyle_Cell.setAlignment(HSSFCellStyle.ALIGN_LEFT);
          cellStyle_Cell.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
          cellStyle_Cell.setBorderBottom(HSSFCellStyle.BORDER_THIN);
          cellStyle_Cell.setBorderLeft(HSSFCellStyle.BORDER_THIN);
          cellStyle_Cell.setBorderRight(HSSFCellStyle.BORDER_THIN);
          cellStyle_Cell.setBorderTop(HSSFCellStyle.BORDER_THIN);
          cellStyle_Cell.setWrapText(
          true );
          // 樣式結束
          // 置標題
          HSSFRow?row = sheet.createRow(( short ) 0 );
          HSSFCell?cell
          = row.createCell(( short ) 0 );
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " Excel演示! " );
          sheet.addMergedRegion(
          new ?Region( 0 ,( short ) 0 , 0 ,( short ) 5 ));
          cell.setCellStyle(cellStyle_Header);
          // 完成標題
          // 行信息
          row = sheet.createRow(( short ) 1 );
          cell
          = row.createCell(( short ) 0 );
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " FieldName " );
          cell.setCellStyle(cellStyle_Normal);
          cell
          = row.createCell(( short ) 1 );
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " FieldValue " );
          sheet.addMergedRegion(
          new ?Region( 1 ,( short ) 1 , 1 ,( short ) 2 ));
          cell.setCellStyle(cellStyle_Normal);
          cell
          = row.createCell(( short ) 3 );
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " FieldName " );
          cell.setCellStyle(cellStyle_Normal);
          cell
          = row.createCell(( short ) 4 );
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " FieldValue " );
          sheet.addMergedRegion(
          new ?Region( 1 ,( short ) 4 , 1 ,( short ) 5 ));
          cell.setCellStyle(cellStyle_Normal);
          // 表數據
          for ( int ?mIndex = 2 ;mIndex < 10 ;mIndex ++ )
          {
          row
          = sheet.createRow(( short )mIndex);
          for ( int ?nIndex = 0 ;nIndex < 6 ;nIndex ++ )
          {
          cell
          = row.createCell(( short )nIndex);
          cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
          cell.setCellValue(
          " 00.00 " );
          cell.setCellStyle(cellStyle_Cell);
          }

          }

          // 全局調
          sheet.setHorizontallyCenter( true );
          for ( int ?kIndex = 0 ;kIndex < 10 ;kIndex ++ )
          {
          sheet.setColumnWidth((
          short )kIndex,( short ) 4500 );
          }

          sheet.setMargin(HSSFSheet.BottomMargin,(
          double ) 0.5 );
          sheet.setMargin(HSSFSheet.LeftMargin,(
          double ) 0.1 );
          sheet.setMargin(HSSFSheet.RightMargin,(
          double ) 0.1 );
          sheet.setMargin(HSSFSheet.TopMargin,(
          double ) 0.5 );
          // 調整結束
          // 輸出Excel
          OutputStream?outData = null ;
          outData
          = response.getOutputStream();
          response.setContentType(
          " application/vnd.ms-excel " );
          wb.write(outData);
          outData.flush();
          response.flushBuffer();
          // 完成
          %>
          posted @ 2006-09-19 15:59 brock 閱讀(404) | 評論 (0)編輯 收藏

          僅列出標題
          共15頁: First 上一頁 7 8 9 10 11 12 13 14 15 下一頁 
          主站蜘蛛池模板: 区。| 夏河县| 闸北区| 两当县| 贵定县| 西乌| 华宁县| 苗栗市| 阜阳市| 边坝县| 台东县| 巨鹿县| 辉南县| 北川| 曲阳县| 竹北市| 桃源县| 山丹县| 乐至县| 循化| 姜堰市| 鞍山市| 保定市| 青海省| 长沙县| 娄烦县| 富民县| 甘南县| 阿克苏市| 类乌齐县| 木兰县| 商丘市| 卢龙县| 汝阳县| 山阴县| 旌德县| 武陟县| 大新县| 大厂| 汉阴县| 鹤庆县|