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

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

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

    gembin

    OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

    HBase, Hadoop, ZooKeeper, Cassandra

    Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

    There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

    About Me

     

    CSS設計:創(chuàng)建圓角邊框一種嘗試

    可能你曾經聽過類似下面的言論:

    “用CSS設計的站點往往是箱子般四四方方的,并且都是非常死板的棱角。有圓角邊框嗎?”

    圓角設計現在就在這里了:)。本篇教程中將示范如何完成一個可以靈活應用于動態(tài)內容布局的“圓角邊框”。

    ●The markup
    注意在下面的示例代碼中,XHTML 斷行標記“<br />”被嵌入樣本段落中。 

    <h2>Article header</h2>  
    <p> A few paragraphs of article text.<br />  
    A few paragraphs of article text. </p>  
    <p> A few paragraphs of article text.<br />  
    A few paragraphs of article text. </p>  
    <p> A paragraph containing author information </p>


    ●The hooks
    如果我們需要完全控制頁面布局,就必須利用CSS來影響足夠多的元素:

    首先,將整個文章的內容包含在一個“div”容器內、并適當按主體內容、標題……分段包含于各自的"div"容器內。

    <div class="Article">
      <h2>Article header</h2>

      <div class="ArticleBody">
        <p>
          A few paragraphs of article text.<br />
          A few paragraphs of article text.
          </p>

        <p>
          A few paragraphs of article text.<br />
          A few paragraphs of article text.
          </p>
        </div>
      <div class="ArticleFooter">
      <p>
        A paragraph containing author information
        </p> 
        </div>
      </div>



    從代碼中可以看出,至少需要5個“容器”類代碼,為了構成我們需要的圓角矩形,還需要做幾個圓角圖片。

    ●The design
    首先來看看最終的外觀:如圖2

    “我需要邊界和拐角看起來和這個類似”,同時他告訴我們:“文章也許有不同的寬度和高度、而且他還不能肯定文章需要什么樣的背景”,事實上、他也不能確定邊框到底是什么樣式。“能否給我們提供一種便與修改的開放式方式來管理邊框呢?”他問到。

    ●The process
    我 們已經將整個文章包含于“DIV”內,應用于左上角、頂端和左邊。Header元素是默認的塊級元素,我們將利用塊級元素“繼承”特性來設置寬度。使用 <h2>元素控制右上角頁面布局。文章頁腳部分也使用了一個“ div ”來確定布局包含的段落來確定右下角布局。

    左、上以及左上角部分:

    右邊以及右上角部分:

    底部,以及左下角:

    右下角部分:

    右邊部分:

    ●The styles
    接下來, 為包含整個文章的DIV容器設置邊框和相對寬度:


    div.Article {
      width:35%;
      border: 1px solid red; }
    div.Article h2 {
      border: 1px solid blue; }
    div.ArticleBody {
      border: 1px solid black; }
    div.ArticleFooter {
      border: 1px solid blue; } 
    div.ArticleFooter p {
      border: 1px solid magenta; }


    從上圖中可以看到“類”:" ArticleBody "控制的“DIV”前后存在缺口(編者注:上下沒有緊密結合,有距離)。先忽略這個問題,繼續(xù)修改完善樣式表。

    以下是引用:
    body { 
      background: #cbdea8; 
      font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif; 
      } 
    div.Article { 
      background:  
        url(images/custom_corners_topleft.gif) 
      top left no-repeat; 
      width:35%; 
      } 
    div.Article h2 { 
      background:  
        url(images/custom_corners_topright.gif)  
      top right no-repeat; 
      } 
    div.ArticleBody { 
      background:  
        url(images/custom_corners_rightborder.gif)  
      top right repeat-y; 
      } 
    div.ArticleFooter { 
      background:  
        url(images/custom_corners_bottomleft.gif)  
      bottom left no-repeat; 
      } 
    div.ArticleFooter p { 
      background:  
        url(images/custom_corners_bottomright.gif)  
      bottom right no-repeat; 
      } 

    還好,比我們想像的要好,不過顯而易見,我們需要為各自元素添加“padding”,以保證邊框布局看起來更好一些。其次,上面提到的缺口問題也會得到解決。形成“缺口”的原因是插入“段落”時回車所至。應盡量避免使用<P>元素從而繞過這個問題。

    假定一個回車符等于“1.5em”,相當于我們指定了“line-height”行高,因此我先為ArticleBody和ArticleFooter容器設置 margin-top:-2em;。測試結果是大多數標準瀏覽器中都能正確地顯示,

    至于為什么設置 margin-top:-2em;,這個數值是經過不斷的測試調整之后確定的。

    繼續(xù)完善樣式表:

    以下是引用:
    div.Article { 
      background:  
        url(images/custom_corners_topleft.gif)  
      top left no-repeat; 
      width:35%; 
      } 
    div.Article h2 { 
      background:  
        url(images/custom_corners_topright.gif)  
      top right no-repeat; 
      font-size:1.3em; 
      padding:15px; 
      margin:0; 
      } 
    div.ArticleBody { 
      background:  
        url(images/custom_corners_rightborder.gif)  
      top right repeat-y; 
      margin:0; 
      margin-top:-2em; 
      padding:15px; 
      } 
    div.ArticleFooter { 
      background:  
        url(images/custom_corners_bottomleft.gif)  
      bottom left no-repeat; 
      } 
    div.ArticleFooter p { 
      background:  
        url(images/custom_corners_bottomright.gif)  
      bottom right no-repeat; 
      display:block; 
      padding:15px; 
      margin:-2em 0 0 0; 
      } 

    ●Backward compatibility?
    向后兼容性:如果使用 Netscape 4.x 瀏覽器觀察這個例子的話,你會注意 到頁面露出一點空白。還沒有什么好辦法解決這個問題,NS 4.x 不能解釋類似 media = " all ",所以,一種代替的解決方案是隱藏不能 被瀏覽器正確執(zhí)行的式樣,,盡管這個方法比較麻煩,例如將字體大小規(guī)范從 ems 改為 pxs 。如果你需要向后兼容,就必需這么做。
    ●The real world
    真實的世界:“Yeah,但是我們想要看真實的應用”,我們預先考慮到這個問題并提供了一個結構關系更加復雜的示例圖

    ●Limitations
    局限性:如果你注意的話,利用這種方法,需要提供合適的左上角/右上角……圖形。如果右上角圖片是透明的,那么在它之下的左上角圖片就會顯示出來,同理底部也一樣。

    另外一個利用CSS構建圓角矩形的實例:

    (英文網站) 
    http://www.vertexwerks.com/tests/sidebox/

    posted on 2008-03-26 14:12 gembin 閱讀(1258) 評論(0)  編輯  收藏 所屬分類: CSSHTML

    導航

    統(tǒng)計

    常用鏈接

    留言簿(6)

    隨筆分類(440)

    隨筆檔案(378)

    文章檔案(6)

    新聞檔案(1)

    相冊

    收藏夾(9)

    Adobe

    Android

    AS3

    Blog-Links

    Build

    Design Pattern

    Eclipse

    Favorite Links

    Flickr

    Game Dev

    HBase

    Identity Management

    IT resources

    JEE

    Language

    OpenID

    OSGi

    SOA

    Version Control

    最新隨筆

    搜索

    積分與排名

    最新評論

    閱讀排行榜

    評論排行榜

    free counters
    主站蜘蛛池模板: 亚洲国产高清美女在线观看| 亚洲成年人啊啊aa在线观看| 亚洲日韩精品A∨片无码| 免费夜色污私人影院网站电影| 毛片基地免费视频a| 国产成人精品亚洲2020| 成人片黄网站A毛片免费| 亚洲一卡一卡二新区无人区| 在线观看免费为成年视频| 亚洲GV天堂无码男同在线观看| 全免费a级毛片免费看无码| 亚洲国产成人AV网站| 亚洲国产中文v高清在线观看| 精品在线免费视频| 国产亚洲精品a在线观看| 中文字幕免费不卡二区| 亚洲综合免费视频| 色播在线永久免费视频| 又粗又长又爽又长黄免费视频| 亚洲女初尝黑人巨高清| 100部毛片免费全部播放完整| 亚洲色偷偷色噜噜狠狠99| 亚洲av无码成人精品区在线播放| 伊人免费在线观看| 久久亚洲春色中文字幕久久久| 免费无码A片一区二三区| 黄色免费网站在线看| 久久精品国产精品亚洲蜜月| 国产精品成人免费福利| 国产亚洲综合久久| 亚洲高清视频在线观看| 大地资源二在线观看免费高清| 又硬又粗又长又爽免费看 | 亚洲高清视频免费| 宅男666在线永久免费观看| 久久精品视频免费| 亚洲日本VA中文字幕久久道具| 亚洲色婷婷一区二区三区| 曰批全过程免费视频在线观看 | 亚洲乱码中文字幕手机在线 | 性色av无码免费一区二区三区|