web_html-day1

時間 2019-11-26

標籤 web html day1 day 欄目 HTML 简体版

原文原文鏈接

概述

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的一套規則，你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。javascript

瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶！(例：djangomoan模版引擎)css

Doctype

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔html

有和無的區別

BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。若是你的頁面添加了那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。java

有，用什麼？

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。web

Meta(metadata information)

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞django

頁面編碼（告訴瀏覽器是什麼編碼）瀏覽器

< meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>ssh

刷新和跳轉ide

< meta http-equiv=「Refresh」 Content=「30″>網站

< meta http-equiv=」Refresh「 Content=」5; Url=http://www.autohome.com.cn「 />

關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

描述

例如：cnblogs

X-UA-Compatible

微軟的IE6是經過XP、Win2003等操做系統發佈出來，做爲佔統治地位的桌面操做系統，也使得IE佔據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，採用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，不少代碼必須調整後，纔可以正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部本身定義的標準拋棄了，而全面的支持W3C的標準，因爲基於對標準完全的變化了，使得原先在早期IE8版本上可以訪問的網站，在IE8中沒法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各類兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。所以，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。爲了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而容許您指定站點所支持的 Internet Explorer 版本。文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。若是您的站點在 Internet Explorer 8 中沒法正確顯示，則能夠更新該站點以支持最新的 Web 標準（首選方式），也能夠強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。經過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，能夠實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來肯定如何顯示該網頁。若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

網頁頭部信息

Link

css

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在頁面中寫樣式

例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>

Script

引進文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

寫js代碼

< script type="text/javascript" > ... </script >

經常使用標籤

標籤通常分爲兩種：塊級標籤和行內標籤

a、span、select 等
div、h一、p 等

各類符號

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默認段落之間是有間隔的！

br 是換行

a標籤

< a href="http://www.autohome.com.cn"> </a>

一、target屬性，_black表示在新的頁面打開

二、錨

H 標籤

H1

H2

H3

H4

H5

H6

select 標籤

Checkbox

redio

password

button

file

提交文件時： enctype='multipart/form-data' method='POST'

textarea

label

ul ol dl

ul.li
ul.li
ul.li

ol.li
ol.li
ol.li

河北省: 邯鄲; 石家莊
山西省: 太原; 平遙

table

fieldset

form 表單

文件:enctype='multipart/form-data' method='POST'

標籤選擇器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 樣式 :
        id 選擇器:
         #i1{
         background-color: #2459a2;
         height: 48px;
         }
         class選擇器: 用的最多
          .c1 {
           -----
          }
          標籤選擇器:
           div{
           -----
           }
           層級選擇器:
            .c1 .c2 div{
                       -----
            }
           組合選擇器(逗號):
            #.c1,.c2,.c3{
            -------
            }
           屬性選擇器:  對選擇到的標籤再經過屬性再進行一次篩選
           .c1[class='liudong']{ width:100px; height:200px; }

           css樣式也能夠如今一個單獨文件裏，進行引用，飲用方法以下：
           <link rel="stylesheet" href="文件名.css" />

        */
    </style>
</head>

background

border

margin

padding

display

display:none

original

none

display:block

display:inline

cursor

css提供的cursor值

pointer || help || wait || move || crosshair

僞造超連接

pointer

自定義(通常不用)

mine

浮動

position

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

透明度

靜態網頁代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style>
        .c1{
            height: 38px;
            background:lavender;
            line-height: 38px;
            cursor: pointer;
        }
        .c2{
            cursor: pointer;
        }
    </style>
</head>
<body style="margin: 0;padding: 5px 15px">
    <div class="c1" >
        <div style="width: 1500px;margin: 0 auto">
            <div style="font-family: 幼圓;color:dimgray;float: left;">*收藏網站</div>
            <div style="float: right;">
                <a href="登錄.html" style="font-family: 幼圓;color:dimgray">登錄&nbsp;</a>
                <a href="註冊.html" style="font-family: 幼圓;color:dimgray">註冊&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">個人訂單&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">個人收藏&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">VIP會員俱樂部&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">客服服務&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">關注&nbsp;</a>
                <a style="font-family: 幼圓;color:dimgray">手機版&nbsp;</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style="width: 800px;margin: 0 auto;">
            <div style="float: left;">
                <img src="圖片/t.png" title="要知感恩" alt="要感恩">
            </div>
            <div style="float: right">
                <div style="height: 50px;width: 500px; overflow:hidden;zoom: 1;margin-top: 10px;"> <!--把浮動撐起來 -->
                    <input type="text" name="aa" value="請搜索" style="width: 240px;height: 27px;padding: 0;margin:0;float: left;font-family: 華文仿宋"/>
                    <input type="submit" name="bb" value="" style="width: 61px;height: 31px;padding: 0;margin: 0;float: left; background: #dddddd url(圖片/x.png)"/>
                    <span type="text"class="c2" style="color:dimgray;width: 140px;height: 35px;margin: 0;float: right">
                        <a style="font-family: 幼圓;line-height: 30px;padding: 2px;">購物車<a style="color:red">2</a>件</a>
                    </span>
                    <br />
                    <p style="color: #BEBEBE;">熱門搜索：火龍果&nbsp;瓜子</p>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div  class="c1"style="background-color: crimson;padding: 5px 15px;">
        <div style="width: 1500px;height:40px;line-height:40px;margin: 0 auto;">
            <div style="float: left">
                <a style="color:#fff;font-weight: bold;width: 220px;height: 40px;display: inline-block" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">所有商品分類&nbsp;&nbsp;</a>
                <a href="http://jd.com" style="color:#fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">首頁&nbsp;&nbsp;</a>
                <a style="color:#fff;font-weight: bold;" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">網上超市&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">水果超市&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">超級餐廳&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">生活娛樂&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究院&nbsp;&nbsp;</a>
            </div>
            <div style="float: right">
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究院&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究所&nbsp;&nbsp;</a>
                <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">論壇&nbsp;&nbsp;</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div style="width: 1500px;height: auto;margin:0 auto;">
        <div style="width: 220px;float: left;">
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">南方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">荔枝&nbsp;火龍果&nbsp;....</span>
            </div>
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">北方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">櫻桃&nbsp;獼猴桃&nbsp;...</span>
            </div>
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">西方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">酸梅&nbsp;桃、杏&nbsp;...</span>
            </div>
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">東方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
            </div>
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">東方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
            </div>
            <div style="width: 220px;height: 60px;border: 1px solid gainsboro;">
                <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">東方水果</span>
                <br />
                <span style="font-family: 幼圓;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
            </div>
            <br />
            <div  style="width: 220px;height: 30px;background-color:beige; border: 1px solid gainsboro;"class="c2">
                <span style="color:mediumslateblue;line-height: 30px;padding: 15px;font-weight: bold"class="c2">熱銷排行榜</span> <!-- font-weight: bold 加粗-->
            </div>
            <div  style="width: 220px;height: 20px; border: 1px solid gainsboro;">
                <span >content</span>
            </div>
        </div>

        <div style="width: 1270px;float: right"><br /><br />
            <div style="font-family: 幼圓;width: 220px;height: 20px;">福特&gt;蒙迪歐&gt;2.0T</div><br />
            <div style="font-family: 幼圓;border:1px solid gainsboro;width: 1000px;height: 40px;line-height: 35px;border-top: 2px solid red;border-bottom: 0"><!-- border-bottom: 0 下邊框爲0-->
                <b>您的選擇：</b>&nbsp;獼猴桃
            </div>
            <div style="font-family: 幼圓;border:1px solid gainsboro;width: 1000px;height: 40px;line-height: 35px;border-bottom: 0;border-top: 1px dotted gainsboro"><!-- border-top: 1px dotted gainsboro上邊線給虛線 -->
                <b>&nbsp;&nbsp;材質：</b>&nbsp;獼猴桃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;獼猴桃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;獼猴桃
            </div>
            <div style="font-family: 幼圓;border:1px solid gainsboro;width: 1000px;height: 40px;line-height: 35px;border-bottom: 0;border-top: 1px dotted gainsboro">
                <b>&nbsp;&nbsp;產地：</b>&nbsp;北方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北方
            </div>
            <div style="font-family: 幼圓;border:1px solid gainsboro;width: 1000px;height: 40px;line-height: 35px;border-top: 1px dotted gainsboro">
                <b>&nbsp;&nbsp;口感：</b>&nbsp;爽口&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;倍甜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上癮
            </div>
                <p style="font-family: 幼圓;width: 1000px;height:5px;text-align: center;line-height: 5px"class="c2">更多選項&nbsp;&nbsp;!</p>
            <div  style="background-color:lavender;border:1px solid gainsboro;width:1000px;height: 25px;line-height:25px;">
                <div style="float: left">
                    排序：&nbsp;&nbsp;
                    <span style="color: blue;font-family: 幼圓"class="c2">價格</span>&nbsp;&nbsp;
                    <span style="color: blue;font-family: 幼圓"class="c2">銷量</span>&nbsp;&nbsp;
                    <span style="color: blue;font-family: 幼圓"class="c2">最新</span>
                </div>
                <div  style="width:250px;height: 25px;line-height: 25px;float: right">
                    <div style="border-right:1px solid gainsboro;float: left">
                        <span style="color: red;"class="c2">
                            <b style="font-family: 幼圓">共xx件商品</b>
                        </span>
                    </div>
                    <div style="float: left">
                        <span style="color: blue">
                            <b>1/998</b>
                        </span>
                    </div>
                    <div style="float: right;margin-right: 30px;margin-top: 2px"><!-- margin-top: 2px 給上邊距兩個像素-->
                        <img src="圖片/zy.png" />
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>
            <div style="margin:0;padding:0;width:980px;padding:10px;">
                <ul style="margin:0;padding:0">
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;"> <!-- text-align: center;根據行內元素設定居中-->
                        <img src="水果/水果10.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:20px;color:black;padding: 5px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果2.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果3.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold"class="c2" >-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="width:100%;height:10px;float:left;"></li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;">
                        <img src="水果/水果4.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果5.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果6.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果7.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="width:100%;height:10px;float:left;"></li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;">
                        <img src="水果/水果8.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0">
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                    <li style="margin:0;padding:0;height:300px;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                        <img src="水果/水果9.png" style="width:225px;height:230px;">
                        <span style="font-family: 幼圓;display:inline-block;width:235px;height:30px;">歐凱隆&nbsp;景德鎮骨瓷歐凱隆</span>
                        <span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">￥980</span>
                        <div style="display:inline-block;width: 45%;margin: 0;">
                            <span style="display:inline-block;height: 10px;font-weight: bold;" class="c2">-</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                            <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                            <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2">買</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

View Code

更多相關文章...

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。