精通CSS與HTML設計模式第一章（輕鬆搞定CSS）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

精通CSS與HTML設計模式第一章（輕鬆搞定CSS）
精通CSS與HTML設計模式第二章（HTML設計模式）
精通CSS與HTML設計模式第三章（CSS選擇符與繼承）
精通CSS與HTML設計模式第四章（CSS選擇符與繼承）
精通CSS與HTML設計模式第六章（盒型模型屬性）
精通CSS與HTML設計模式第八章（盒型模型屬性）
精通CSS與HTML設計模式第九章（定位：進階）
精通CSS與HTML設計模式第十章（分割內容）
精通CSS與HTML設計模式第十一章（對齊內容）

一、HTML元素分類 註：紅色表示現不熟悉的

塊狀元素：

html,div, map,dt,form hr, body h1—h6 dl ,dd

p, blockquote（表示引用的語句）

pre（預定義，保留空格，換行等寬字型常用來呈現電腦代碼）

表格元素

table td th tbody

thead tfoot

內嵌元素 註：width屬性對內嵌元素不起作用

strong cite（表示引用張三） em(表示強調張三) var（張三）; dfn（張三）; code（張三）; kbd（張三）; smp（張三）; ins（張三）; del（表示已刪除張三）

sub（張三）； sup（張三）; abbr（UN 在某些瀏覽器中滑鼠放上後顯示title）注1：目前測試Firefox，IE，Google,遨遊都支援此屬性（abbr）

<em>	把文本定義為強調的內容。
<strong>	把文本定義為語氣更強的強調的內容。
<dfn>	定義一個定義項目。
<code>	定義電腦代碼文本。
<samp>	定義樣本文本。
<kbd>	定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與電腦相關的文檔或手冊中。
<var>	定義變數。您可以將此標籤與 <pre> 及 <code> 標籤配合使用。
<cite>	定義引用。可使用該標籤對參考文獻的引用進行定義，比如書籍或雜誌的標題。

列表元素

ul ol dl

例一

以圖片代替文字時，若圖片未載入任然可以顯示文字文本替換

文本替換Heading2

不顯示顯示

代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>文本替換</title>
    <style type="text/css">

       #h2{
            position: relative;
            border: solid 1px;
            width:250px;
            height:76px;
            overflow:hidden;
        }
        #h2 span
        {
            position: absolute;
            border: solid 1px;
             width:250px;
             height:76px;
             left:0;
             top:0;


        }
    </style>
     <script type="text/javascript" language="javascript">
       function ViewImage(){
           var select1=document.getElementById("select1");
           var index= select1.selectedIndex;
         var slvalue= select1.options[index].value;
          if(slvalue=="no"){
             document.getElementById("h2").childNodes[1].style.backgroundImage="url('')";
          }
          else{
            document.getElementById("h2").childNodes[1].style.backgroundImage="url(\"Images/heading2.jpg\")";
          }

       }
    </script>
</head>
<body style="margin:0; padding:0">
    <form id="form1" runat="server">
    <h1 style="border: solid 1px">
        文本替換</h1>
   <h2 id="h2" >標題2<span></span></h2>
    <select id="select1" onchange="ViewImage()"><option value="no">不顯示</option><option value="yes" >顯示</option></select>
    </form>
</body>
</html>

例二

大寫字母以圖片性質進行顯示

字母下沉

Magin，首字母是個圖片並且已經大寫下沉，若首字母圖片不顯示則顯示字母！

代碼

<h1>
        字母下沉</h1>
    <p class="pMagin_Left">
        <span class="letter">M<span class="imageLeft"></span></span>agin，11首字母是個圖片並且已經大寫下沉，若首字母圖片不顯示則顯示字母！
    </p>

例三

層疊樣式的優先順序（錯誤修正：import——important）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More