mozilla
您的搜尋結果

    Layout

    本文是 CSS Getting Started 教學第十二部分,這裡會教你一些改變頁面布局(layout)的方法,我們會用之前的範例來練習。

    說明:布局 (Layout)

    你可以用CSS來讓你的頁面布局產生多種酷炫的效果,在這裡我們僅簡單介紹幾個改變頁面布局的方法。

    當你想要讓你設計的布局在不同的瀏覽器瀏覽時看起來差不多,你的樣式表(stylesheet)將需要更複雜的設計,來迎合各瀏覽器默認的樣式表以及布局引擎(layout engine),但這個課題不在我們基礎教學的範疇裡。

    文件結構化

    如果你想要改變你的文件的布局,你需要先將你的文件結構化。

    標記語言(markup language)通常都會有個通用標籤能夠建立文件的結構,在HTML裡你可以用 <div> 來建立文件結構。

    範例

    看一下你的範例文件,在"Numbered paragraphs"標題下的項目並沒有一個容器將他們包住,他們是散的而且沒有結構性。

    因此你並不能用樣式表去將這些項目用一個大框框包住,因為目前並沒有一個結構去包果這些小項目。

    這時我們試著用 <div> 將這些小項目包住,然後給它一個識別用的id,注意這個id必須是不重複的。

    <h3>Numbered paragraphs</h3>
    <div id="numbered">
      <p>Lorem ipsum</p>
      <p>Dolor sit</p>
      <p>Amet consectetuer</p>
      <p>Magna aliquam</p>
      <p>Autem veleum</p>
    </div>
    

    現在我們就可以用"numbered"的id去更改布局樣式了。

    ul, #numbered {
      border: 1em solid #69b;
      padding-right:1em;
    }
    

    結果看起來就像下面這樣:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    Size units

    So far in this tutorial, you have specified sizes in pixels (px). These are appropriate for some purposes on a display device like a computer screen. But when the user changes the font size, your layout can look wrong.

    For many purposes it is better to specify sizes as a percentage or in ems (em). An em is nominally the size of the current font (the width of a letter m). When the user changes the font size, your layout adjusts automatically.

    Example

    The border on the left of this text has its size specified in pixels.

    The border on the right has its size specified in ems.

    In your browser, change the size of the font to see how the border on the right adjusts but the border on the left does not:

    RESIZE ME PLEASE
    More details

    For other devices, other length units are appropriate.

    There is more information about this in a later page of this tutorial.

    For full details of the values and units that you can use, see Values in the CSS Specification.

    Text layout

    Two properties specify how the content of an element is aligned. You can use them for simple layout adjustments:

    text-align
    Aligns the content. Use one of these values: left, right, center, justify
    text-indent
    Indents the content by an amount that you specify.

    These properties apply to any text-like content in the element, not only to actual text. Remember that they are inherited by the element's children, so you might have to explicitly turn them off in the children to avoid surprising results.

    Example

    To center headings:

    h3 {
      border-top: 1px solid gray;
      text-align: center;
    }
    

    Resulting in:

    (A) The oceans

    In an HTML document, the content that you see below a heading is not structurally contained by the heading. So when you align a heading like this, the tags below the heading do not inherit the style.

    Floats

    The float property forces an element to the left or right. This is a simple way to control its position and size.

    The rest of the document's content normally flows around the floated element. You can control this by using the clear property on other elements to make them stay clear of floats.

    Example

    In your sample document, the lists stretch across the window. You can prevent this by floating them to the left.

    To keep the headings in place, you must also specify that they stay clear of floats on their left:

    ul, #numbered {float: left;}
    h3 {clear: left;}
    

    The result looks like:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    (A little padding is needed on the right of the boxes, where the border is too close to the text.)

    Positioning

    You can specify an element's position in four ways by specifying the position property and one of the following values.

    These are advanced properties. It is possible to use them in simple ways—that is why they are mentioned in this basic tutorial. But using them for complex layouts can be difficult.

    relative
    The element's position is shifted relative to its normal position. Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.
    fixed
    The element's position is fixed. Specify the element's position relative to the document window. Even if the rest of the document scrolls, the element remains fixed.
    absolute
    The element's position is fixed relative to a parent element. Only a parent that is itself positioned with relative, fixed or absolute will do. You can make any parent element suitable by specifying position: relative; for it without specifying any shift.
    static
    The default. Use this value if you need to turn positioning off explicitly.

    Along with these values of the position property (except for static), specify one or more of the properties: top, right, bottom, left, width, height to identify where you want the element to appear, and perhaps also its size.

    Example

    To position two elements on top of each other, create a parent container in your document with the two elements inside it:

    <div id="parent-div">
      <p id="forward">/</p>
      <p id="back">\</p>
    </div>
    

    In your stylesheet, make the parent's position relative. There is no need to specify any actual shift. Make the children's position absolute:

    #parent-div {
      position: relative;
      font: bold 200% sans-serif;
    }
    
    #forward, #back {
      position: absolute;
      margin:0px; /* no margin around the elements */
      top: 0px; /* distance from top */
      left: 0px; /* distance from left */
    }
    
    #forward {
      color: blue;
    }
    
    #back {
      color: red;
    }
    

    The result looks like this, with the backslash on top of the forward slash:

    /

    \

     
    More details

    The full story on positioning takes up two complex chapters in the CSS Specification: Visual formatting model and Visual formatting model details.

    If you are designing stylesheets to work in many browsers, then you also need to take into account differences in the way browsers interpret the standard, and perhaps bugs in particular versions of particular browsers.

    Action: Specifying layout

    1. Change your sample document, doc2.html, and stylesheet, style2.css, using the examples above in the sections Document structure and Floats.
    2. In the Floats example, add padding to separate the text from the right border by 0.5 em.
    Challenges

    Change your sample document, doc2.html, adding this tag to it near the end, just before </body>.

    <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
    

    If you did not download the image file earlier in this tutorial, download it now, and place it in the same directory as the other sample files:

    Image:Yellow-pin.png

    Predict where the image will appear in your document. Then refresh your browser to see if you were correct.

    Add a rule to your stylesheet that places the image in the top right of your document.

    Refresh your browser and make the window small. Check that the image stays in the top right even when you scroll your document:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

     

    Yellow map pin

     See a solution to this challenge.

    What next?

    You have just about covered all the topics in this basic CSS tutorial. The next page describes more advanced selectors for CSS rules, and some specific ways that you can style tables.

    Document Tags and Contributors

    Contributors to this page: georgelin422
    最近更新: georgelin422,