計算機程序設計

項目符號和編號列表HTML

有兩種類型的列表,在HTML的語言:有序和無序。 他們的創作幾乎是一樣的。 即使標籤由一個字符不同。 您還可以創建多級列表,其中可能包括兩個編號和標誌。

這些列表可以隨意轉換。 這一切都取決於你的想像力。 首先,我們考慮標準的列表,如在Word中,然後我們會使其更加完善,使都認不出來。

編號HTML列表

中性有序 HTML列表 可以使用下面的標籤來創建:

<01>

  • 第一項列表

  • 第二項列表

  • 的第三個項目列表

    簡單的列表在這裡的樣子

    根據該標準,在列表中的每個項目必須是在開啟和關閉標籤li的內部。 但是,如果你不把結束標記,結果是完全一樣的。 該處理器是非常聰明的。 在轉換列表中,他分析了開放標籤。 如果他看到一個新的

  • ,然後自動將它們放在的前面。

    因此,該列表可以如下所示進行。

    但從專業的角度不正確。

    項目符號列表

    未編號(或標記)名單是完全一樣的,唯一的,而不是醇書面UL標籤。

    項目符號列表,沒有任何數字或字母-只有不同的人物,這是所謂的標記。

    多級編號列表HTML

    很多人有興趣這樣的機會。 因此,應該注意的是,任何HTML編號列表可以是多級的。 附加層可以是相同的或標記的。

    要創建一個示例中指定上面的列表,你需要編寫以下。

    注意,在該代碼中,與第一示例中,所添加的屬性類型。 多虧了他,你可以指定這兩個編號和標記列表排序的類型。

    對於指定編號的字母或數字的類型,並為其餘病例 - 標記的類型。

    排序選項列表

    如果您使用的是特殊的HTML標籤,編號列表可以是你想要的任何方式。

    您可以指定類型屬性,從表中的任何值。 或課堂式的CSS指定列表樣式類型與所需的排序類型。

    值的翻譯是非常簡單的。 英語的基本夠用的知識。 但是,即使你無法翻譯的單詞“圓”,“廣場”,等等。N.,你可以直觀地看到什麼是當你的類型的屬性指定這些值的結果。

    對於編號列表,你需要使用以下選項:

    • 1 - 阿拉伯數字;
    • A -大寫字母 ;
    • 一個 - 小寫字母;
    • I - 大寫羅馬數字;
    • 我 - 小寫羅馬數字。

    默認情況下,該列表總是與使用 阿拉伯數字。 也就是說,如果你不指定任何東西,就相當於為type =“1”。

    此外,編號列表可以在任意位置開始。 默認 - 1.結論,但如果你想你甚至可以有一百個開始。 要做到這一點,你需要指定任意值起始屬性。

    此外,它可以以相反的順序完成。 要做到這一點,寫顛倒。

    製作列表

    編號HTML列表可以如此美妙安排,你不能馬上猜到這是通常的列表,而不是在Photoshop中製作的圖片。

    以下是名單的美麗的例子。

    如可以從實施例中可以看出,它是可以改變元件本身的外觀和編號。

    您可以創建一個規則列表這樣。

    在CSS樣式,你需要指定OL標籤設計。 請注意,在這種情況下,設置將被應用到所有列出了使用此樣式文件中的所有站點。

    考慮具有圓形檢查列表第一實施例。 返回代碼列表。 有Set類圓形的名單。 與此類需要修補,做出這樣的美女就是這樣。 調用類的你,如你所願。

    現在考慮一個方形設計。

    該風格非常相似。 不同的是,在第一種情況存在通過CSS選項的舍入元件。

    瀏覽器支持

    要明白,不是所有的瀏覽器都支持所有的CSS屬性是很重要的。

    例如,你想在中間編號列表。 HTML代碼是相同的,但結果在舊的瀏覽器可以說是相當不同的。

    這同樣適用於編號的設計。

    正如你所看到的,在周圍的老版本IE瀏覽器的數量的平方沒有出現,因為處理程序不知道新的屬性,讓你做出這樣的登記。

    專業編碼器必須預見和理解,並不是所有的用戶使用現代計算機。 並非所有安裝了Windows 7,8,10,有用戶的百分比誰仍然坐在Windows XP和使用Internet Explorer的舊版本。

    作為一項規則,幾乎所有的現代設計,以提高它們的元素不被支持。 用戶會覺得他並沒有在網站的設計工作。 這一切都搬了出來。 元素聚集在一起。 為了避免這種情況,你需要計算所有的選項。

    有站長視而不見給他們,因為他們的在今天的市場份額越來越少。 但對於專業的欣賞每一位參觀者,尤其是如果它是一個商業網站。

    做適合所有的東西,或考慮在瀏覽器中的所有選項。

  • Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 zhtw.atomiyme.com. Theme powered by WordPress.