<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Rising Sun

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

    #

    翻譯自:In Search of the Holy Grail
    原文:http://www.alistapart.com/articles/holygrail
    這個翻譯的頁面版權(quán)歸greengnn所有,轉(zhuǎn)載請注明出處
    第一步:創(chuàng)建一個結(jié)構(gòu)

    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 */
    }

    我們的布局現(xiàn)在看起來是這樣的

    uploads/200602/13_074820_diagram_01.gif


    圖1——創(chuàng)建框架

    第二步:增加內(nèi)容元素

    在第一步基礎(chǔ)上增加內(nèi)容元素<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的可用空間,現(xiàn)在的布局變成了這樣

    uploads/200602/13_074922_diagram_02.gif


    圖2:增加內(nèi)容元素

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

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

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

    看看效果

    uploads/200602/13_075000_diagram_03.gif


    圖3——left移動完成一半

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

    上一步,left還需要左移200px,就可以了,所以就采用相對定位,將他再向左推200px,就達(dá)到了想要的效果。讓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 */
    }

    好了,現(xiàn)在元素們都正確歸位了。

    uploads/200602/13_075115_diagram_05.gif


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

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

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

    這些大小調(diào)整是根據(jù)上面已經(jīng)定義的寬度來的,你調(diào)整的時候也要根據(jù)自己的實際情況。

    現(xiàn)在增加padding

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

    當(dāng)然不能只增加left就算完事,要給一系列元素都必須加上,也要調(diào)整增加padding,帶來的新的bug,調(diào)整如下
    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可以讓用戶使用瀏覽器來調(diào)整自己需要的字體大小)
    但是不能混合使用,選擇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,代碼調(diào)整如下
    <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 閱讀(243) | 評論 (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 閱讀(225) | 評論 (0)編輯 收藏

    初試javax.mail

    最近在項目中用到發(fā)送郵件的功能,由于以前沒有接觸過,找了很多資料才終于把它弄出來,今天寫下這些,算是做個總結(jié)吧。
    1、首先定義一個郵件的數(shù)據(jù)結(jié)構(gòu)類
    public class EmailData() {
         String from   = null;  //發(fā)件人
         String[] recipients = null;  //收件人,可以多個
         String subject   = null;  //郵件主題
         String content   = null;  //郵件內(nèi)容
         String contentType  = null;  //郵件內(nèi)容格式(文本或html)
         String fileName  = null;  //附件文件名(目前只提供一個附件)
     
         //下面是相應(yīng)的setter/getter方法,省略..
    }
    2、發(fā)送不帶附件的郵件(包括文本格式和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();
         //設(shè)置郵件服務(wù)器地址,連接超時時限等信息
         props.put("mail.smtp.host", "10.30.1.233"); //10.30.1.233郵件服務(wù)器
         props.put("mail.smtp.connectiontimeout", "10000"); //
      props.put("mail.smtp.timeout", "10000");   //
        
         //創(chuàng)建缺省的session對象
         Session session = Session.getDefaultInstance(props, null);
     
         //創(chuàng)建message對象
         Message msg = new MimeMessage(session);
     
         //設(shè)置發(fā)件人和收件人
         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);
      
      //設(shè)置郵件標(biāo)題,中文編碼
         subject = MimeUtility.encodeText(new String(subject.getBytes(), "GB2312"), "GB2312", "B");
         msg.setSubject(subject);
        
         //設(shè)置郵件內(nèi)容,區(qū)分文本格式和HTML格式
         if (contentType == null || contentType.equals("text")) {
          msg.setText(content);
      } else if (contentType.equals("html")) {
       //給消息對象設(shè)置內(nèi)容
       BodyPart bodyPart1 = new MimeBodyPart(); //新建一個存放信件內(nèi)容的BodyPart對象
       mdp.setContent(content, "text/html;charset=gb2312");//給BodyPart對象設(shè)置內(nèi)容和格式/編碼方式
       Multipart mmp = new MimeMultipart();//新建一個MimeMultipart對象用來存放BodyPart對象(事實上可以存放多個)
       //設(shè)置郵件附件
       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作為消息對象的內(nèi)容
      }
         
         //設(shè)置郵件發(fā)送時間
            msg.setSentDate(new java.util.Date());
            //調(diào)用抽象類的靜態(tài)方法send()發(fā)送郵件
         Transport.send(msg);
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

     創(chuàng)建一個地址非常簡單

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

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

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

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

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

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

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

     message.addRecipient(type,address);

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

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

     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設(shè)置用戶名、密碼,來訪問受保護的資源,這里的資源一般指的是郵件服務(wù)器。
     
     Authenticator也是一個抽象類,你需要自己編寫子類已備應(yīng)用。你需要實現(xiàn)getPasswordAuthentication()方法,并返回一個PasswordAuthentication實例。你必須在 session被創(chuàng)建時, 注冊你的 Authenticator。這樣,當(dāng)需要進行認(rèn)證是,你的Authenticator就可以被得到。

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

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

      Transport.send(message);

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

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

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

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

     在連接到一個 Store 后,你可以得到一個 Folder,當(dāng)然,這個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 閱讀(1572) | 評論 (0)編輯 收藏

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

    顏色

    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

    方便的記憶方法是順時針,上右下左。具體應(yīng)用在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;

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

    • 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)

    取消默認(rèn)的圓點和序號可以這樣寫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 閱讀(336) | 評論 (1)編輯 收藏

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

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

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

    一.使用css縮寫

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

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

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

    三.區(qū)分大小寫

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

    class和id的值在HTML和XHTML中也是區(qū)分大小寫的,如果你一定要大小寫混合寫,請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。

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

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

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

    可以寫成

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

    這樣可以節(jié)省一些字節(jié)。

    五.默認(rèn)值

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

    * {
    margin:0;
    padding:0;
    }

    六.不需要重復(fù)定義可繼承的值

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

    七.最近優(yōu)先原則

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

    Update: Lorem ipsum dolor set

    在CSS文件中,你已經(jīng)定義了元素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定義

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

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

    在頁面代碼中,我們可以這樣調(diào)用

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

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

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

    CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節(jié)約大量的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更加簡潔、更加容易閱讀。

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

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

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

    可以寫為

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

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

    十一.組選擇器(Group selectors)

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

    例如:定義所有標(biāo)題的字體、顏色和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; }

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

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

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

    十三.清除浮動

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

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

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

    上面那一種clear方法更適合你,要看具體的情況,這里不再展開論述。另外關(guān)于float的應(yīng)用,一些優(yōu)秀的文章已經(jīng)說得很清楚,推薦你閱讀:《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; 規(guī)則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ,第二個text-align:left;是將#warp中的文字居左。

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

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

    @import url("main.css");

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

    @import "main.css";

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

    十六.針對IE的優(yōu)化

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

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

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

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

    十七.調(diào)試技巧:層有多大?

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

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

    十八.CSS代碼書寫樣式

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

    selector1,
    selector2 {
    property:value;
    }

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

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

    最后,關(guān)閉的大括號}單獨寫一行。

    空格和換行有助與閱讀。

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

    未標(biāo)題.gif
    posted @ 2006-11-15 14:16 brock 閱讀(185) | 評論 (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()


    程序?qū)憣懲俗詈唵蔚臇|西 <%=g_user%>?
    posted @ 2006-10-19 10:56 brock 閱讀(166) | 評論 (0)編輯 收藏

    在導(dǎo)出數(shù)據(jù)生成excel時,定義excel單元格格式為文本。
    最好拿你的導(dǎo)出代碼貼出來看看,主要是生成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);
    // 準(zhǔn)備完成
    // 建樣式
    // 標(biāo)題字
    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);
    // 數(shù)據(jù)行
    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 );
    // 樣式結(jié)束
    // 置標(biāo)題
    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);
    // 完成標(biāo)題
    // 行信息
    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);
    // 表數(shù)據(jù)
    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);
    }

    }

    // 全局調(diào)
    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 );
    // 調(diào)整結(jié)束
    // 輸出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 閱讀(399) | 評論 (0)編輯 收藏

    僅列出標(biāo)題
    共15頁: First 上一頁 7 8 9 10 11 12 13 14 15 下一頁 
    主站蜘蛛池模板: 国产精品自拍亚洲| 国内外成人免费视频| 亚洲AV成人精品日韩一区| 亚洲AV乱码久久精品蜜桃| 日日操夜夜操免费视频| 无码人妻久久一区二区三区免费 | 亚洲国产精品无码久久一线| 日韩免费福利视频| 日本一卡精品视频免费| 免费无码国产V片在线观看| 四虎必出精品亚洲高清| 99人中文字幕亚洲区| 中文字幕亚洲不卡在线亚瑟| 四虎永久在线精品免费观看地址| 国产高清免费视频| 国产精品免费大片| 国产精品午夜免费观看网站 | 成人午夜18免费看| 在线观看免费视频资源| 久久精品成人免费网站| 四虎国产精品成人免费久久 | A在线观看免费网站大全| 99视频免费观看| 国产午夜成人免费看片无遮挡 | 亚洲2022国产成人精品无码区| 免费AA片少妇人AA片直播| 成人嫩草影院免费观看| 亚洲高清一区二区三区| 久久91亚洲精品中文字幕| 日韩免费无码一区二区视频| 一级毛片免费观看不卡视频| 一区二区三区免费在线观看| 亚洲第一成年免费网站| 亚洲av无码成h人动漫无遮挡| 久久亚洲高清综合| 国产精品免费一级在线观看| 国产在线a免费观看| 午夜视频在线免费观看| 国产一级一毛免费黄片| 亚洲精品国产日韩无码AV永久免费网| 久久久久亚洲精品无码网址色欲 |