用HTML編寫淘寶頁面

来源:https://www.cnblogs.com/yangkaiming/archive/2018/05/12/9029166.html
-Advertisement-
Play Games

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"/> <link rel="stylesheet" h ...


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/taobao.css"/>
</head>
<!--導航欄-->
<header>
    <nav>
        <span>
            <a href="">親，請登錄</a>
            <a href="">免費註冊</a>
            <a href="">手機逛淘寶</a>
        </span>
        <span>
            <a href="">
                我的淘寶
                <ol>
                    <li>淘寶</li>
                    <li>賬戶</li>
                    <li>清單</li>
                </ol>
            </a>
            <a href="">購物車</a>
            <a href=""><img src="../images/nav-start.png" alt=""/>收藏夾</a>
            <a href="">商品分類</a>
            <a href="">賣家中心</a>
            <a href="">聯繫客服</a>
            <a href=""><img src="../images/nav-ham.png" alt=""/>網站導航</a>
        </span>
    </nav>
</header>
<!--淘寶網-->
<div class="taobaowang">
    <div class="taobaowang-top">
        <img src="../images/logo.png" alt=""/>
        <div>
            <div class="sousuo">
                <div class="baobei">
                    <a href="">寶貝</a>
                    <a href="">天貓</a>
                    <a href="">店鋪</a>
                </div>
                <div class="shuru">

                    <form action="#" method="post">
                        <input type="text" name="username" placeholder=" 家居擺設添欣喜"/><button>搜索</button><span class="gaoji">高級 搜索</span>
                    </form>
                </div>
            </div>
            <div class="xinkuan">
                <a href="">新款連衣裙</a>
                <a href="">四件套</a>
                <a href="">潮流T桖</a>
                <a href="">時尚女靴</a>
                <a href="">短褲</a>
                <a href="">半身裙</a>
                <a href="">男士外套</a>
                <a href="">牆紙</a>
                <a href="">行車記錄儀</a>
                <a href="">新款男靴</a>
                <a href="">耳機</a>
                <a href="">更多></a>
            </div>
        </div>
    </div>
    <div class="taobaowang-bottom">
        <div>
            <p><strong>主題市場</strong>  <img src="../images/menu-item-ham.png" alt=""/></p>

        </div>
        <div>
            <a href="">天貓</a>
            <a href="">聚划算</a>
            <a href="">天貓超市</a>
            <a href="">淘搶購</a>
            <a href="">電器城</a>
            <a href="">司法拍賣</a>
            <a href="">中國製造</a>
            <a class="tese" href="">特色中國</a>
            <a href="">飛豬旅行</a>
            <a href="">智能生活</a>
            <a href="">蘇寧易購</a>
        </div>
    </div>

</div>
<!--主題市場-->
<div class="zhuti">
    <div class="zhongjian">

    <div class="zhuti-left">
        <div>
            <div class="nvzhuang">
                <ul>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>女裝 /</span>
                        <span>男裝 /</span>
                        <span>內衣&nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>鞋靴 /</span>
                        <span>箱包 /</span>
                        <span>配件&nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>童裝玩具 /</span>
                        <span>孕產 /</span>
                        <span>用品&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>家電 /</span>
                        <span>數位 /</span>
                        <span>手機 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>美妝 /</span>
                        <span>洗護 /</span>
                        <span>保健品 &nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>珠寶 /</span>
                        <span>眼鏡 /</span>
                        <span>手錶 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>運動 /</span>
                        <span>戶外 /</span>
                        <span>樂器 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>游戲 /</span>
                        <span>動漫 /</span>
                        <span>影視 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>美食 /</span>
                        <span>生鮮 /</span>
                        <span>零食 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>鮮花 /</span>
                        <span>寵物 /</span>
                        <span>農資 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>房產 /</span>
                        <span>裝修 /</span>
                        <span>建築 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>家居 /</span>
                        <span>家飾 /</span>
                        <span>家紡 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>汽車 /</span>
                        <span>二手車 /</span>
                        <span>用品 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>辦公 /</span>
                        <span>DIY /</span>
                        <span>五金電子&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>百貨 /</span>
                        <span>餐廚 /</span>
                        <span>家庭保健&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>學習/</span>
                        <span>卡捲/</span>
                        <span>本地服務></span>
                    </li>
                </ul>
                <img src="../images/qietu.png" alt=""/>
            </div>
            <div class="tianmao">
                <img src="../images/qietu01.png" alt=""/>
                <img class="yanyuan" src="../images/qietu02.png" alt=""/>
                <div>
                    <img src="../images/little-tmall.png" alt=""/>
                    <span><strong>天貓必逛</strong></span>
                    <span>熱門品牌，天天上天貓！</span>
                </div>
                <div class="xinji">
                    <div>
                        <p>星級好睡眠</p>
                        <p>用新去寵你</p>
                        <a href="">
                            <p>狂歡速搶</p>
                        </a>
                        <img src="../images/01-(2)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>小米超品日</p>
                        <p>平衡車出游熱賣</p>
                        <a href="">
                            <p>關註贏小米6！</p>
                        </a>
                        <img src="../images/01-(88)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>價格直降</p>
                        <p>冰洗爆款返場</p>
                        <a href="">
                            <p>享免息分期</p>
                        </a>
                        <img src="../images/01-(66)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>廚衛大牌管</p>
                        <p>品質放心</p>
                        <a href="">
                            <p>裝修省心</p>
                        </a>
                        <img src="../images/01-(2)_05.gif" alt=""/>
                    </div>
                </div>
                <div class="jinri">
                    <div>
                        <a href="">
                            <p>今日熱賣</p>
                        </a>
                        <img class="yanyuan" src="../images/qietu03.png" alt=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="shudaizi">
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>書呆子</p>
                    <p>書卷氣更迷人</p>
                   <i></i> <img src="../images/qietu23.png" alt=""/>&nbsp<span>人氣248006</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>理想家</p>
                    <p>想要這個家</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人氣2038770</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>水中飛魚</p>
                    <p>你屬魚的吧</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人氣285040</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>韓範小妖精</p>
                    <p>實力了歐巴</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人氣5862134</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>家有萌娃</p>
                    <p>寶貝快長大</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人氣248006</span>
                </div>
            </div>
        </div>
</div>
        <div class="zhuti-right">
            <div>
            <img src="../images/login-header.png" alt=""/>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>

</div>

</div>
<!--我常逛的-->
<div class="guangwu">
    <div class="zuiyoubian">
        <div class="diyitiao">
            <img src="../images/tkbktbtc.png" alt=""/>
            <a href="">更多></a>
            <div>
                <img src="../images/01-(11112)_03.gif" alt=""/>
                <span><strong>工作需要放鬆，享受下午時光</strong></span>
                <p>你有吃下午茶的習慣嗎？最早關於下午茶的由來，可以最疏導英國17世紀</p>
            </div>
        </div>
        <div>
            <img src="../images/ybhkho.png" alt=""/>
            <div>
                <img src="../images/01-6666_03.gif" alt=""/>
                <span><strong>丹麥Mat手工皮革隔熱</strong></span>
                <p>皮革質地能隔熱，觸感細膩獨特，造型簡約大方，質感</p>
            </div>
        </div>
        <div>
            <img src="../images/01-6666_07.gif" alt=""/>
            <span><strong>廣東特產紅豆餅糕點</strong></span>
            <p>廣東特產紅豆餅糕點，餡心低而清田，餅皮軟餌酥脆，餡料</p>
        </div>
        <div>
            <img src="../images/01-6666_10.gif" alt=""/>
            <span><strong>廣東特產紅豆餅糕點</strong></span>
            <p>廣東特產紅豆餅糕點，餡心低而清田，餅皮軟餌酥脆，餡料</p>
        </div>
        <div>
            <img src="../images/01-6666_12.gif" alt=""/>
            <span><strong>廣東特產紅豆餅糕點</strong></span>
            <p>廣東特產紅豆餅糕點，餡心低而清田，餅皮軟餌酥脆，餡料</p>
        </div>
        <div>
            <img src="../images/01-6666_13.gif" alt=""/>
            <span><strong>廣東特產紅豆餅糕點</strong></span>
            <p>廣東特產紅豆餅糕點，餡心低而清田，餅皮軟餌酥脆，餡料</p>
        </div>
        <div>
            <img src="../images/01-6666_14.gif" alt=""/>
            <span><strong>廣東特產紅豆餅糕點</strong></span>
            <p>廣東特產紅豆餅糕點，餡心低而清田，餅皮軟餌酥脆，餡料</p>
        </div>


    </div>
    <div class="zuizuobian">
        <div class="guangwu-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>我常逛的</strong></span>
            <a href="">更多></a>
        </div>
        <div class="yidong">
            <div class="guangwu-bottom">
                <img src="../images/qietu05.png" alt=""/>
                <div>
                    <ul>
                        <li><p><strong>熱門TOP</strong></p></li>
                        <li><a href="">童裝新款</a></li>
                        <li><a href="">新生兒禮</a></li>
                        <li><a href="">連衣裙</a></li>
                        <li><a href="">男童外套</a></li>
                        <li><a href="">男童褲子</a></li>
                        <li><a href="">打底褲</a></li>
                        <li><a href="">遮陽帽</a></li>
                        <li><a href="">親子裝</a></li>
                        <li><a href="">兒童T斜</a></li>
                        <li><a href="">演出服</a></li>
                    </ul>
                </div>
            </div>
            <div class="guangwu-bottom-tupian">
                <div>
                    <div class="baosui">
                        <div>
                            <img src="../images/qietu06.png" alt=""/>
                        </div>
                        <div>
                            <img src="../images/qietu06.png" alt=""/>
                        </div>
                    </div>
                    <div class="gaohuitou">
                        <img src="../images/qietu07.png" alt=""/>
                    </div>
                    <div class="tongxie">
                        <img src="../images/qietu08.png" alt=""/>
                    </div>
                </div>
                <div class="qinbaobie">
                    <img src="../images/qietu09.png" alt=""/>
                    <img src="../images/qietu10.png" alt=""/>
                    <img src="../images/qietu11.png" alt=""/>
                </div>
            </div>
        </div>
        <div>
            <div class="guangwu-bottom1">
                <img src="../images/qietu05.png" alt=""/>
                <div>
                    <ul>
                        <li><p><strong>熱門TOP</strong></p></li>
                        <li><a href="">面膜</a></li>
                        <li><a href="">香水</a></li>
                        <li><a href="">化妝品</a></li>
                        <li><a href="">修複面膜</a></li>
                        <li><a href="">洗髮水</a></li>
                        <li><a href="">口紅 bb霜</a></li>
                        <li><a href="">防曬霜</a></li>
                        <li><a href="">手工皂</a></li>
                        <li><a href="">護膚套裝</a></li>
                        <li><a href="">彩妝</a></li>
                    </ul>
                </div>
            </div>
            <div class="guangwu-bottom1-tupian">
                <div>
                    <div class="baosui">
                        <div>
                            <img src="../images/01-(6662)_03.gif" alt=""/>
                        </div>
                        <div>
                            <img src="../images/01-(6662)_03.gif" alt=""/>
                        </div>
                    </div>
                    <div class="gaohuitou">
                        <img src="../images/01-(2222)_03.gif" alt=""/>
                    </div>
                    <div class="tongxie">
                        <img src="../images/qietu08.png" alt=""/>
                    </div>
                </div>
                <div class="qinbaobie">
                    <img src="../images/01-(2888)_07.gif" alt=""/>
                    <img src="../images/qietu10.png" alt=""/>
                    <img src="../images/qietu11.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <div class="tianmaoku">
        <img src="../images/qietu12.png" alt=""/>
    </div>
    <div class="shishangbao">
        <div class="shishang-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>時尚爆料王</strong></span>
            <a href="">更多></a>
        </div>
        <div class="shishang-bottom">
           <div>
               <div class="zuihao">
                   <div><img src="../images/fashion-logo.png" alt=""/></div>
                   <div class="zhenzixian">
                       <div>
                           <img src="../images/pcldmzzi.png" alt=""/>
                           <a href="">
                               <p>軟萌針織衫</p>
                           </a>
                       </div>
                       <div>
                           <img src="../images/bkviblb.png" alt=""/>
                           <div>
                                <img src="../images/nyufvjxt.png" alt=""/>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="border">
                   <div><img src="../images/fashion-logo.png" alt=""/></div>
                   <div>
                       <div>
                           <img src="../images/kbhs.png" alt=""/>
                           <img src="../images/kbhs.png" alt=""/>
                       </div>
                       <div>
                           <img  class="lki" src="../images/xdlm.png" alt=""/>
                           <img src="../images/uvhu.png" alt=""/>
                       </div>
                   </div>
               </div>
           </div>
           <div>
               <div>
                   <div class="zuihao">
                       <div><img src="../images/fashion-logo.png" alt=""/></div>
                       <div class="zhenzixian">
                           <div>
                               <img src="../images/pcldmzzi.png" alt=""/>
                               <a href="">
                                   <p>軟萌針織衫</p>
                               </a>
                           </div>
                           <div>
                               <img src="../images/bkviblb.png" alt=""/>
                               <div>
                                   <img src="../images/nyufvjxt.png" alt=""/>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="border">
                       <div><img src="../images/fashion-logo.png" alt=""/></div>
                       <div>
                           <div>
                               <img src="../images/kbhs.png" alt=""/>
                               <img src="../images/kbhs.png" alt=""/>
                           </div>
                           <div>
                               <img  class="lki" src="../images/xdlm.png" alt=""/>
                               <img src="../images/uvhu.png" alt=""/>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
    <div class="caoliu">
        <img src="../images/qietu13.png" alt=""/>
    </div>


</div>





<!--熱賣單品-->
<div class="remai">
    <div class="remai-top">
        <img src="../images/fire.png" alt=""/><span><strong>熱賣單品</strong></span>
    </div>
    <div class="remai-center">
        <ul>
            <li><a href="">客廳燈</a></li>
            <li><a href="">床墊</a></li>
            <li><a href="">沙發墊</a></li>
            <li><a href="">衣櫃</a></li>
            <li><a href="">電腦架</a></li>
            <li><a href="">沙發</a></li>
            <li><a href="">涼席</a></li>
            <li><a href="">男內褲</a></li>
            <li><a href="">蚊帳</a></li>
            <li><a href="">拉桿箱</a></li>
            <li><a href="">鞋櫃</a></li>
            <li><a href="">防曬衣</a></li>
            <li><a href="">窗帘</a></li>
            <li><a href="">運動鞋</a></li>
            <li><a href="">涼鞋男</a></li>
            <li><a href="">夾克</a></li>
            <li><a href="">電風扇</a></li>
            <li><a href="">牛仔褲</a></li>
            <li><a href="">電腦桌</a></li>
            <li><a href="">t學男</a></li>
            <li><a href="">男T恤</a></li>
            <li><a href="">男包</a></li>
            <li><a href="">真絲裙</a></li>
        </ul>
    </div>
    <div class="remai-bottom">
        <div>
            <div>
                <div class="zhenpibao">
                    <img src="../images/qietu14.png" alt=""/>
                    <div>
                        <p>$798.00</p>
                        <p>月銷2筆</p>
                        <a href="">真皮時尚</a>
                        <a href="">高檔皮包</a>
                        <a href="">頭層牛皮包</a>
                        <a href="">歐美時尚鱷魚紋</a>
                        <a href="">氣質女包</a>
                    </div>
                </div>
                <div class="pibao-top">
                    <div >
                        <img src="../images/qietu15.png" alt=""/>
                        <div>
                            <p>$799.00</p>
                            <p><img src="../images/qietu16.png" alt=""/>月銷9筆
                            </p>
                        </div>
                    </div>
                    <div class="xiaohai">
                        <img src="../images/qietu15.png" alt=""/>
                        <div>
                            <p>$799.00</p>
                            <p><img src="../images/qietu16.png" alt=""/>月銷9筆
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="zhenpibao">
                        <img src="../images/qietu14.png" alt=""/>
                        <div>
                            <p>$546.00</p>
                            <p>月銷27筆</p>
                            <a href="">井口尼龍面料</a>
                            <a href="">防潑水</a>
                            <a href="">香港品牌女包</a>
                            <a href="">輕盈</a>
                        </div>
                    </div>
                    <div class="pibao-top">
                        <div>
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$149.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月銷320筆
                                </p>
                            </div>
                        </div>
                        <div class="xiaohai">
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$728.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月銷58筆
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="zhenpibao">
                        <img src="../images/qietu14.png" alt=""/>
                        <div>
                            <p>$198.00</p>
                            <p>月銷446筆</p>
                            <a href="">優質橡膠材料製作的大時尚的</a>
                            <a href="">行走的時候解壓力很好</a>
                        </div>
                    </div>
                    <div class="pibao-top">
                        <div>
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$128.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月銷202筆
                                </p>
                            </div>
                        </div>
                        <div class="xiaohai">
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$19.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月銷9206筆
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="remai-last">
        <img src="../images/add-two.png" alt=""/>
        <img src="../images/add-three.png" alt=""/>
        <img src="../images/ad-one.png" alt=""/>
    </div>
</div>
</div>
<!--消費者保障-->
<div class="xiaofeizhe">
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>消費者保障</span>
        <p>
            <a href="">保障範圍</a>
            <a href="">退貨款流程</a>
            <a href="">服務中心</a>
            <a href="">更多特色服務</a>
        </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>新手上路</span>
       <p>
            <a href="">新手專區</a>
            <a href="">消費警示</a>
            <a href="">交易安全</a>
            <a href="">24小時線上幫助</a>
            <a href="">免費開店</a>
       </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>付款方式</span>
        <p>
            <a href="">快捷支付</a>
            <a href="">信用卡</a>
            <a href="">餘額寶</a>
            <a href="">螞蟻花唄</a>
            <a href="">貨到付款</a>
        </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>淘寶特色</span>
        <p>
            <a href="">手機淘寶</a>
            <a href="">旺旺/旺信</a>
            <a href="">大眾評審</a>
        </p>
    </div>
</div>
<!--頁腳-->
<div class="green">
    <a href="">
    <p>我常逛的</p>
    </a>
    <a href="">
        <p>時尚</p>
    </a>
    <a href="">
        <p>品質</p>
    </a>
    <a href="">
        <p>特色</p>
    </a>
    <a href="">
        <p>實惠</p>
    </a>
    <a href="">
        <p>猜你喜歡</p>
    </a>
    <a href="">
        <p>反饋</p>
    </a>
    <a href="">
    <p>恐怖舉報</p>
    </a>
</div>
<footer>
    <div>
        <ul class="zuihou">
            <li>阿裡巴巴集團</li>
            <li>淘寶網</li>
            <li>天貓</li>
            <li>聚划算</li>
            <li>全球速賣通</li>
            <li>阿裡巴巴國際交易市場</li>
            <li>1688</li>
            <li>阿裡媽媽</li>
            <li>飛豬</li>
            <li>阿裡雲計算</li>
            <li>yunOs</li>
            <li>阿裡通信</li>
            <li>一淘</li>
            <li>萬網</li>
            <li>高德</li>
            <li>US</li>
            <li>友盟</li>
            <li>蝦米</li>
            <li>阿裡星球</li>
            <li>釘釘</li>
            <li>支付寶</li>
            <li>優酷</li>
            <li>土豆</li>
            <li>阿裡健康</li>
            <li>阿裡影業</li>
            <li>阿裡體育</li>
            <li>網商銀行</li>
        </ul>
    </div>
    <div>
        <div>
            <a href="">關於淘寶</a>
            <a href="">合作伙伴</a>
            <a href="">營銷中心</a>
            <a href="">廉正舉報</a>
            <a href="">聯繫客戶</a>
            <a href="">開放平臺</a>
            <a href="">誠徵英才</a>
            <a href="">聯繫我們</a>
            <a href="">網站地圖</a>
            <a href="">法律聲明隱私政策</a>
            <a href="">知識產權</a>
            <span class="foter">@2003-2017 Taobao.com 版權所有</span>
        </div>
        <div class="zhean">
            <span>網路文化經營許可證: 浙網文[2013]0268-027</span>
            <span>正直電信業務經營許可證： 浙B2-20080224</span>
            <span>信息網路傳播視聽節目許可證：1109364號</span>
            <span>互聯網違法和不良信息舉報電話：0571-81683755 blxxjb@alibaba-inc。com</span>
            <p>浙江網安備 33010002000078</p>
        </div>
    </div>
    <img src="../images/footer-img.png" alt=""/>
</footer>
</body>
</html>

以下是css樣式表

/*導航欄*/
body{
    background-color: #f1f1f1;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
header{
    width: 100%;
    height: 36px;
    margin: 0 auto;
    background-color: #f5f5f5;
}
header a{
    font-size: 14px;
    padding-right: 16px;
}
header>nav>span:first-child>a:first-child{
    color: red;
}
header>nav{
    width: 1190px;
    height: 36px;
    margin: 0 auto;
    /*overflow: hidden;*/
}
header>nav>span{
    margin-right:20px ;
    font-size: 16px;
    line-height: 36px;
}
header>nav>span:first-child{
    float: left;
}
header>nav>span:first-child>a:not(:first-child){
    color: black;
}
header>nav>span:last-child{
    float: right;
}
header>nav>span:last-child>a{
    color: black;
    padding-left: 16px;
}
header>nav>span:last-child>a:hover{
    color: red;
}
header>nav>span:last-child>a:nth-child(5){
    border-left: 1px solid gainsboro;
}
header img{
    padding-right: 10px;
}
ol{
    width: 46px; ;
    padding: 0 ;
    display: none;
    left: 16px;
    text-align: center;
    background-color: red;
}
ol>li{
    border: 1px solid white;
    color: white;
}
nav>span:last-child>a:first-child:hover ol{
    display: block;
    position: absolute;
    z-index: 2;
}
header>nav>span:last-child>a:first-child{
    position: relative;
}
 ol>li{
    width: 46px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    transition: all 1s;
    transform: rotateY(180deg);
}

nav>span:last-child>a:first-child:hover li{
    transform: none;
}
nav>span:last-child>a:first-child:hover:hover>li:first-child{
    transition-delay: 300ms;
}
nav>span:last-child>a:first-child:hover:hover>li:nth-child(2){
    transition-delay: 600ms;
}
nav>span:last-child>a:first-child:hover:hover>li:nth-child(3){
    transition-delay: 900ms;
}
/*淘寶網*/
.taobaowang{
    width: 100%;
    height: 193px;
    background-color: #ffffff;
}
.taobaowang-top{
    width: 1190px;
    height: 128px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 28px;
}
.taobaowang-top>img{
    width: 190px;
    height: 100px;
    float: left;
    margin-right: 70px;
    overflow: hidden;
}
.baobei>a{
    color: red;
    font-size: 14px;
    width: 50px;
    height: 28px;
    line-height: 28px;
    margin: 0 auto;
    padding: 7px 8px;
    margin-right: 0;
}
.baobei>a:hover{
    background-color: #ff5502;
    color: white;
}
.shuru{
    width: 622px;
    height: 38px;
    border: 1px solid orangered;
    margin-left:270px ;
}
form>input{
    width:498px ;
    height:28px;
    border: 1px solid orangered;
    padding-left: 34px;
    color: gray;
    padding-top: 8px;
}
form>button{
    font-size:20px ;
    height: 39px;
    width: 88px;
    background-color: #ff5502;
    color: white;
    border: 1px solid orangered;
    position: relative;
}
.gaoji{
    height:42px ;
    width: 38px;
    margin: 0 auto;
    position: absolute;
    margin-left:10px;
}
.gaoji:hover{
    color: orangered;
}
.xinkuan>a{
    color: gray;
    margin-right:6px ;
    font-size: 12px;
    margin-top:8px ;
}
.xinkuan>a:hover{
    color: #ff5502;
}
.xinkuan>a:last-child{
    margin-left: 30px;
}
.taobaowang-bottom{
    width: 1190px;
    height: 36px;
    margin: 0 auto;

}
.taobaowang-bottom>div:first-child{
    width: 190px;
    height: 36px;
    overflow: hidden;
    float: left;

}
.taobaowang-bottom>div:first-child>p{
    color: white;
    background-color: orangered;
    font-size: 18px;
    line-height: 36px;
    padding-left: 6px;
    width: 190px;
    float: left;
}
.taobaowang-bottom>div:first-child>p>strong{
    margin-right: 80px;
}
.taobaowang-bottom>div:last-child>a{
    color: black;
    font-size: 16px;
    margin-left: 20px;
    font-weight: 700;
    line-height: 36px;
}
.taobaowang-bottom>div:last-child>a:nth-child(3){
    border-right: 1px solid gainsboro;
    padding-right: 16px;
}

.tese{
    border-right: 1px solid gainsboro;
    padding-right: 16px;
}
.taobaowang-bottom>div:last-child>a:nth-child(-n+3){
    color: #ff5502;
}
/*主題市場*/
.zhuti{
    width: 100%;
    height: 700px;
    margin: 0 auto;
    background-color: #f1f1f1;
    overflow: hidden;
}
.nvzhuang{
    width: 190px;
    height:520px ;
    background-color: #ff5502;
    float: left;
}
.tiammao img{
    margin-right: 10px;
}
.jinri>div>a>p{
    margin-left: 12px;
}
.zhongjian{
    width: 1190px;
    height: 620px;
    margin: 0 auto;
}
.nvzhuang span{
    color: white;
    font-size: 12px;
    font-weight: 800;
    margin:10px 0px ;
}
.nvzhuang>ul>li>span:first-child{
    margin-left: 8px;
}
.nvzhuang>ul>li{
    margin-bottom: 9px;
}
.tianmao{
    width: 701px;
    height: 513px;
    margin: auto;
    background-color: white;
    margin-right: 282px;
}
.tianmao>div:nth-child(3)>span:nth-child(3){
    color: gray;
    font-size: 14px;
}
.tianmao>div:nth-child(3)>span:nth-child(2){
    color: black;
    font-size: 16px;
}
.tianmao>div:nth-child(3){
    border-bottom: 3px solid red;
    width: 520px;
}
.tianmao>div:nth-child(3)>span:nth-child(3):hover{
    color: blue;
}
.tianmao>div:nth-child(3)>span{
     text-shadow: 2px 3px 3px green;
}
.xinji>div:first-child{
    float: left;
}
.xinji>div:first-child>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:first-child>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:first-child>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:first-child>a>p:hover{
    color: red;
}
.xinji>div:nth-child(2){
    float: left;
}
.xinji>div:nth-child(2)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(2)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(2)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(2)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(2)>img{
    height: 130px;
 }
.xinji>div:nth-child(3){
    float: left;
}
.xinji>div:nth-child(3)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(3)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(3)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(3)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(3)>img{
    height: 130px;
}
.xinji>div{
    overflow: hidden;
}

.xinji>div:nth-child(4){
    float: left;
}
.xinji>div:nth-child(4)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(4)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(4)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(4)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(4)>img{
    height: 130px;
    padding-right: 0;
}
.jinri{
    float: left;
}
.zhuti-left{
    overflow: hidden;
}
.yanyuan{
    width:152px ;
    margin-left: 12px;
}
.shudaizi{
    margin-top: 18px;
    height:88px;
    width: 908px;
    background-color: white;
}
.shudaizi>div:first-child>img{
    float: left;
    width: 68px;
}
.shudaizi>div:first-child>div>p:first-child{
    color: brown;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:first-child>div>p:nth-child(2){
    font-size: 14px;
    color: burlywood;
}
.shudaizi>div:first-child>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:first-child>div{
    float: left;
}
.shudaizi>div:nth-child(2)>img{
    float: left;
    width: 70px;
}
.shudaizi>div:nth-child(2)>div>p:first-child{
    color: darkgreen;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(2)>div>p:nth-child(2){
    font-size: 14px;
    color: green;
}
.shudaizi>div:nth-child(2)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(2)>div{
    float: left;
}
.shudaizi>div:nth-child(3)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(3)>div>p:first-child{
    color: #73a6f6;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(3)>div>p:nth-child(2){
    font-size: 14px;
    color: #96b0f6;
}
.shudaizi>div:nth-child(3)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(3)>div{
    float: left;
}
.shudaizi>div:nth-child(4)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(4)>div>p:first-child{
    color: #aa7dc7;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(4)>div>p:nth-child(2){
    font-size: 14px;
    color: #8879c8;
}
.shudaizi>div:nth-child(4)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(4)>div{
    float: left;
}
.shudaizi>div:nth-child(5)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(5)>div>p:first-child{
    color: darkred;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(5)>div>p:nth-child(2){
    font-size: 14px;
    color: red;
}
.shudaizi>div:nth-child(5)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(5)>div{
    float: left;
}
.zhuti-right{
    width: 294px;
    height: 600px;
    float: right;
}













/*我常逛的*/
.guangwu{
    width: 1190px;
    height: 940px;
    margin: 0 auto;
}
.guangwu-top{
    height:50px ;
    width: 890px;
    text-align: center;
}
.guangwu-top>a{
    float: right;
    line-height: 30px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    background-color: white;
    margin-top: 10px;
    border-radius: 20px;
    color: black;
}
.guangwu-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 20px;
}
.guangwu-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.guangwu-bottom>div{
    background-color: #ff3286;
    width: 100px;
    height: 264px;
}
.guangwu-bottom>div>ul>li>p>strong{
    font-size: 16px;
    color: white;
}
.guangwu-bottom>div>ul>li>a{
    font-size: 14px;
    color: white;
    background-color: #ff5b9f;
    padding: 0 6px;
}
.guangwu-bottom>div>ul>li:not(:first-child){
    margin-top: 2px;

}
.guangwu-bottom>div>ul>li{
    margin-left: 10px;
}
.guangwu-bottom>div>ul>li:first-child{
    padding-top: 8px;
}
.guangwu-bottom>div>ul>li>a:hover{
    color: blue;
}
.guangwu-bottom{
    float: left;
}
.guangwu-bottom-tupian{
    width: 334px;
    height: 360px;
    border: 2px solid #ffc0d9;
    background-color: white;
    float: left;
    margin-right: 12px;
}
.baosui{
    float: left;
    border-right: 1px solid gainsboro;

}
.baosui>div>img{
    height: 99px;
    width: 92px;
}
.gaohuitou{
    float: left;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.tongxie{
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.qinbaobie>img:first-child{
    float: left;
    padding: 7px;
    border-right: 1px solid gainsboro;
}
.qinbaobie>img:nth-child(2){
    border-bottom: 1px solid gainsboro;
}

.guangwu-bottom1>div{
    background-color: #6349b3;
    width: 100px;
    height: 264px;
}
.guangwu-bottom1>div>ul>li>p>strong{
    font-size: 16px;
    color: white;
}
.guangwu-bottom1>div>ul>li>a{
    font-size: 14px;
    color: white;
    background-color: #826ec2;
    padding: 0 6px;
}
.guangwu-bottom1>div>ul>li:not(:first-child){
    margin-top: 2px;
}
.guangwu-bottom1>div>ul>li{
    margin-left: 10px;
}
.guangwu-bottom1>div>ul>li:first-child{
    padding-top: 8px;
}
.guangwu-bottom1>div>ul>li>a:hover{
    color: green;
}
.guangwu-bottom1{
    float: left;
}
.guangwu-bottom1-tupian{
    width: 334px;
    height: 360px;
    border: 2px solid #cfc7e7;
    background-color: white;
    float: left;
}
.baosui{
    float: left;
    border-right: 1px solid gainsboro;
}
.baosui>div>img{
    height: 99px;
    width: 92px;
}
.gaohuitou{
    float: left;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.tongxie{
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.qinbaobie>img:first-child{
    float: left;
    padding: 7px;
    border-right: 1px solid gainsboro;
}
.qinbaobie>img:nth-child(2){
    border-bottom: 1px solid gainsboro;
}
.tianmaoku{
    width: 880px;
    margin: 0 auto;
    height: 100px;
    float: left;
}
.zuizuobian{
    float: left;
}
.tianmaoku>img{
    margin: 26px 0px;
}
.guangwu-bottom{
    border-bottom: 1px solid darkred;
    padding-bottom: 10px;
}
.guangwu-bottom-tupian{
    border-bottom: 1px solid red;
    margin-bottom: 10px;
}


.zuihao{
    float: left;
}
.lki{
    width: 110px;

}
.zuiyoubian{
    width: 290px;
    height: 928px;
    margin: 0 auto;
    float: right;
    background-color: white;
}
.shishangbao{
    width:890px ;
    height:300px ;
    margin: 0 auto;
    /*float: left;*/
}
.shishang-bottom{
    background-color: white;
    height: 254px;
    width: 902px;
}
.border>div:nth-child(2)>div>img{
border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
height: 107px;
}
.border>div:first-child>img{
    border-bottom: 1px solid gainsboro;
}
.border{
    float: left;
}
.shishang-top{
    height:50px ;
    width: 890px;
    text-align: center;
    overflow: hidden;
}
.shishang-top>a{
    float: right;
    line-height: 30px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    background-color: white;
    margin-top: 10px;
    border-radius: 20px;
    color: black;
}
.shishang-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 20px;
}
.shishang-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.zhenzixian>div:first-child{
    float: left;
    margin-right: 10px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
    padding-left: 10px;
}
.zhenzixian>div:last-child>img{
    border-bottom: 1px solid gainsboro;
    padding-bottom: 6px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
}
.zhenzixian>div:last-child>div>img{
    padding-top: 6px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
}
.zhenzixian>div>a>p{
    color: white;
    background-color: #ff0256;
    width:90px ;
    height: 40px;
    text-align: center;
}

.zhenzixian>div>a>p:hover{
    color: purple;
}
.zhenzixian>div:last-child{
    float: left;
}
.shishangbao{
    float: left;
}
.caoliu>img{
    margin-top: 32px;
}









/*熱賣單品*/
.remai{
    height:650px ;
    width: 1190px;
    margin: 0 auto;
    background-color: white;
}
.remai-top{
    height:50px ;
    width: 1190px;
    text-align: center;

}
.remai-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 16px;
}
.remai-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.remai-center{
    width: 1190px;
    height: 36px;
    margin: 0 auto;

}
.remai-bottom{
    border-top: 1px solid gainsboro;
    padding-top: 8px;
    padding-left: 20px;
}
.remai-center>ul>li{
    float: left;
    color: black;
    font-size: 12px;
    border-right: 1px solid gainsboro;
    padding: 0 9px

}
.remai-center>ul>li:first-child{
    padding-left: 20px;
}
.remai-center>ul>li>a:hover{
    color: red;
}
.zhenpibao{
    float: left;
    width: 224px;
    height: 400px;
    border-right: 1px solid gainsboro;
}
.zhenpibao>div>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
}
.zhenpibao>div>a{
    color: black;
    font-size: 12px;
    margin-right: 5px;
    margin-top: 8px;
}
.pibao-top>div>div>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
}
.pibao-top>div>div>p:last-child:hover{
    color: blue;
}
.zhenpibao>img{
    border-left: 1px solid gainsboro;
}
.pibao-top{
    float: left;
    padding-left: 10px;
}
.xiaohai{
    border-top: 1px solid gainsboro;
    padding-top: 8px;
}
.remai-last>img{
    border-top: 1px solid gainsboro;
    padding-top: 10px;
}
.remai-bottom a:hover{
    color: purple;
}
/*消費者保障*/
.xiaofeizhe{
    height: 223px;
    width: 1190px;
    margin: 0px auto;
    background-color: #f1f1f1;
    margin-top: 10px;
}
.xiaofeizhe>div:first-child{
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:first-child>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:first-child>img{
    margin-bottom: 10px;
}
.xiaofeizhe>div:nth-child(2){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(2)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(2)>img{
    margin-bottom: 10px;
}

.xiaofeizhe>div:nth-child(3){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(3)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(3)>img{
    margin-bottom: 10px;
}

.xiaofeizhe>div:nth-child(4){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(4)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(4)>img{
    margin-bottom: 10px;
}
/*頁腳*/
footer{
    width: 100%;
    height: 246px;
    margin: 0 auto;
    background-color: #ffffff;
}
footer>div:first-child{
    width: 1190px;
    height: 68px;
    margin: 0 auto;
    border-bottom: 1px solid gainsboro;
}
.zuihou>li{
    float: left;
    font-size: 14px;
    margin:10px 20px 0px 0;
    padding-right: 10px;
    color: gray;
}
.zuihou>li:hover{
    color: red;
}
.zuihou>li:not(:last-child){
    border-right: 1px solid gainsboro;
}
footer>div:nth-child(2){
    width: 1190px;
    height: 86px;
    margin: 0 auto;
}
footer a,span,p{
    color: gray;
    font-size: 14px;
    margin-right: 10px;
}
footer a:hover{
    color: blue;
}
.foter{
    border-left: 1px solid gainsboro;
    padding-left: 40px;
}
.zhean>span{
    border-right: 1px solid gainsboro;
    padding-right: 5px;
}
.zhean>span:nth-child(3){
    color: gainsboro;
}
.zhean>p{
    color: gainsboro;
}
footer>img{
    width: 1190px;
    margin: 12px auto;
    padding-left: 88px;
    background-color: white;
}
/*.green p{*/
    /*height: 400px;*/
    /*width: 50px;*/
    /*position: fixed;*/
    /*right: 15px;*/
    /*bottom: 80px;*/
    /*text-align: center;*/
    /*color: goldenrod;*/
/*}*/
.green{
    height: 400px;
    width: 50px;
    position: fixed;
    right: 15px;
    bottom: 100px;
    text-align: center;
}
.green>a:first-child>p{
    background-color: #ff4302;
    color: white;
    font-size: 14px;
}
.green>a:nth-child(2)>p{
    background-color: white;
    color: red;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(3)>p{
    background-color: white;
    color: blue;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(4)>p{
    background-color: white;
    color: green;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(5)>p{
    background-color: white;
    color: brown;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(6)>p{
    background-color: white;
    color: red;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(7)>p{
    background-color: white;
    color: black;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(8)>p{
    background-color: white;
    color: black;
    padding: 15px 5px;
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • git常用命令備忘
    一.分支相關 1.基本命令 # 列出所有本地分支 $ git branch # 列出所有遠程分支 $ git branch -r # 列出所有本地分支和遠程分支 $ git branch -a # 新建一個分支，但依然停留在當前分支 $ git branch [branch-name] # 新建一個 ...
  • 高性能Javascript總結
    一、載入和運行 Javascript代碼執行會阻塞其他瀏覽器處理過程、充分利用webpack或gulp工具對文件打包壓縮，減少js文件的數量，從而減少http請求的次數，以提高網頁應用的實際性能。 二、數據訪問 經典電腦科學的一個問題是確定數據應當存放在什麼地方、以實現最佳的讀寫效率。數據存儲在哪 ...
  • CSS屬性速查表
    [1]佈局類 [2]盒模型 [3]文本類 [4]修飾類 [5]stylelint ...
  • 一個簡單的彈出框組件
    個人寫這個彈出框的原因就一個，就是能給我帶來可復用，追求新，要簡單，可擴展。要達到炫酷有點難度，分析後還是決定以功能為主，因為是用jq和animation實現的彈出框組件，所以看起來難度不大，簡稱co-dialog。 演示效果DEMO 靈感來源，因為工作中用到dialog，發現UI設計的彈出框的風格 ...
  • 上傳圖片立即顯示
    之前一個已經工作的同學問我上傳圖片立即顯示怎麼實現，這個問題雖然不難，但我還是要去打開電腦找到項目，點開一個個目錄；這時候博客的作用就顯露出來了。。 話不多說，進入正題： 先看看效果 只需要在js中添加如下代碼就可以實現了 這段代碼主要是讀取你選中的圖片文件，先生成圖片，然後再把生成的文件以base ...
  • 小程式開發知識點及坑點總結
    知識點 1.小程式裡面，點擊頁面頂部的返回按鈕的時候，返回的那個頁面不會刷新。頁面直接跳轉返回都可以傳參跳轉。需要做處理的時候，在onshow的時候接收參數並處理即可。 2.<!--?xml version="1.0" encoding="UTF-8"?--> 頁面有彈層時，阻止下麵的頁面滾動。 這 ...
  • 初入ES6隨筆
    初入ES6隨筆 var c = a => console.log(a) let a1 = 1; //只在塊兒狀作用域生效的變數聲明 const a2 = 1; //常量聲明，值不可改變，快兒狀作用域 解構賦值語法 let [a3, b3, c3] = [1, 2, 3]; //數組解構賦值 let ...
  • 用HTML編寫漫威頁面
    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"/> <link rel="stylesheet" h ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類