典型電商網站的站點導航的佈局結構實現,及運用三種方式實現下拉效果

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/21/12339632.html
-Advertisement-
Play Games

由於jquery2.0及以下不再支持IE6/7/8,因此選擇jquery1.x版本中較新的一個 推薦一個各種插件URL地址的公共庫:https://www.bootcdn.cn/ CDN載入jquery的優點: 1、減輕伺服器壓力 2、速度快 3、可以緩存 缺點: 不穩定(取決於別人的伺服器,因此需 ...


由於jquery2.0及以下不再支持IE6/7/8,因此選擇jquery1.x版本中較新的一個

推薦一個各種插件URL地址的公共庫:https://www.bootcdn.cn/

 

 

CDN載入jquery的優點:

1、減輕伺服器壓力

2、速度快

3、可以緩存

缺點:

不穩定(取決於別人的伺服器,因此需要做防範措施)

措施:

短路操作判斷cdn方式是否載入成功

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //短路操作,如果cdn的jquery沒有引用成功,則會執行後面一句,引入本地jquery
        //括弧中的<\/script>標簽會被當做當前標簽的結束標簽,因此需要轉義
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>

base.css 是一般通用的樣式重置代碼,直接引入即可

/*css reset*/
    /*清除內外邊距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*結構元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表單元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }

    /*重置預設樣式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微軟雅黑, Tahoma, Helvetica, Arial, 宋體, sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }

    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }

/*常用公共樣式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;
        
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

查看PSD設計圖:

信息面板(選框工具框選目標查看尺寸)

 

 

歷史記錄面板

圖層面板

視圖-標尺


 

站點導航編寫

 推薦一個插件:Pixel Perfect

能夠導入網頁設計圖,可以改變透明度,與編寫的頁面進行實時對比

工具介紹:

 

 下載網址:https://www.chromedownloads.net/extensions/938.html

註意如果.crx的插件谷歌瀏覽器無法安裝,就改為.rar或者.zip,然後在擴展程式中安裝

 

 然後在打開的網頁中,右上角,添加設計圖

 

 可以調整透明度什麼的,

滑鼠滾輪左右滾動也可以實時調整透明度

 

 

我的目前是沒辦法重合了,因此筆記本設置了顯示150%,emmm……

index.html

<!DOCTYPE html>
<html lang="zh-CN"><!-- 設置簡體中文 -->
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- css一般放在DOM載入前,防止DOM裸奔 -->
</head>
<body>
    <!-- 導航 -->
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" class="nav-site-login">親,請登錄</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費註冊</a></li>
                <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="fl dropdown">
                    <a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
                    <ul class="dropdown-list dropdown-left">
                        <li class="dropdown-item"><a href="#">已買到的寶貝</a></li>
                        <li class="dropdown-item"><a href="#">我的足跡</a></li>
                    </ul>
                </li>
                <li class="fl dropdown">
                    <a href="javascript:;" class="dropdown-toggle link">收藏夾<i class="dropdown-arrow"></i></a>
                    <ul class="dropdown-list dropdown-left">
                        <li class="dropdown-item"><a href="#">收藏的寶貝</a></li>
                        <li class="dropdown-item"><a href="#">收藏的店鋪</a></li>
                    </ul>
                </li>
                <li class="fl dropdown">
                    <a href="javascript:;" class="nav-site-cat link">商品分類</i></a>
                </li>
                <li class="fl dropdown">
                    <a href="javascript:;" class="dropdown-toggle link">賣家中心<i class="dropdown-arrow"></i></a>
                    <ul class="dropdown-list dropdown-left">
                        <li class="dropdown-item"><a href="#">免費開店</a></li>
                        <li class="dropdown-item"><a href="#">已賣出的寶貝</a></li>
                        <li class="dropdown-item"><a href="#">出售中的寶貝</a></li>
                        <li class="dropdown-item"><a href="#">賣家服務市場</a></li>
                        <li class="dropdown-item"><a href="#">賣家培訓中心</a></li>
                        <li class="dropdown-item"><a href="#">體驗中心</a></li>
                    </ul>
                </li>
                <li class="nav-site-service fl dropdown">
                    <a href="javascript:;" class="dropdown-toggle link">聯繫客服<i class="dropdown-arrow"></i></a>
                    <ul class="dropdown-list dropdown-right">
                        <li class="dropdown-item"><a href="#">已買到的寶貝</a></li>
                        <li class="dropdown-item"><a href="#">我的足跡</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //短路操作,如果cdn的jquery沒有引用成功,則會執行後面一句,引入本地jquery
        //括弧中的<\/script>標簽會被當做當前標簽的結束標簽,因此需要轉義
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/index.js"></script>;
</body>
</html>

common.css 公共樣式

/*公共樣式 */
.container{
    width:1200px;
    margin:0 auto;
}
.link{
    color:#4d555d;
}
.link:hover{
    color:#f01414;
}
.fl{
    float:left;
}
.fr{
    float:right;
}

index.css

/*nav-site */
.nav-site{
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{
    height:44px;
    line-height: 44px;
    border-bottom:1px solid #cdd0d4;
}
.nav-site-login{
    color:#f01414;
    margin-left:15px;
}
.nav-site-reg{
    margin-left:10px;
}
.nav-site-shop{
    margin-left:10px;
}
.dropdown{

}
.dropdown-toggle{
    display: block;
    padding:0 16px 0 12px;
    border-right:1px solid #f3f5f7;
    border-left:1px solid #f3f5f7;
    position: relative;
    z-index:2;
}
.dropdown-arrow{
    display: inline-block;
    width:8px;
    height:6px;
    background:url(../img/dropdown-arrow.png) left center no-repeat;
    margin-left:8px;
    vertical-align: middle;
}
.dropdown-list{
    display: none;
    border:1px solid #cdd0d4;
    background-color: #fff;
    position: absolute;
    z-index:1;
    top:43px;
}
.dropdown-left{

}
.dropdown-item{
    height:30px;
    line-height:30px;
    padding:0 12px;
}
.dropdown-item:hover{
    background-color: #f3f5f7;
}
.nav-site-cat{
    margin:0 10px;
}
.nav-site-service{
    margin-right:15px;
}
/*# sourceMappingURL=index.css.map */

/*# sourceMappingURL=index.css.map */

index.js

$(".dropdown-toggle").hover(function(){
    //滑鼠移入
    var ui=$(this);
    //背景色和邊框改變
    ui.css({
        "background-color":"#fff",
        "border-color":"#cdd0d4"
    });
    //箭頭切換
    ui.find(".dropdown-arrow").css({
        "background-image":"url(img/dropdown-arrow-active.png)"
    })
    //下拉列表顯示
    ui.next(".dropdown-list").show();
},function(){
    //滑鼠移出
    var ui=$(this);
    //背景色和邊框改變
    ui.css({
        "background-color":"",
        "border-color":"#f3f5f7"
    });
    //箭頭切換
    ui.find(".dropdown-arrow").css({
        "background-image":"url(img/dropdown-arrow.png)"
    })
    //下拉列表隱藏
    ui.next(".dropdown-list").hide();
});

在js中直接修改css,存在瀏覽器的重繪(背景色等,元素自身)以及迴流(寬高等,元素自身及周圍元素),造成性能問題

修改:在js中添加或刪除類,將樣式寫在css中

index.css中新增:

/*滑鼠懸停樣式*/
.dropdown-toggle:hover{
    background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow{
    background-image:url(../img/dropdown-arrow-active.png);
}
.dropdown-active+.dropdown-list{
    display: block;
}

index.js代碼修改為:

$(".dropdown-toggle").hover(function(){
    //滑鼠移入
    $(this).addClass("dropdown-active");
},function(){
    //滑鼠移出
    $(this).removeClass("dropdown-active");
});

還有更簡單的修改方式,全部使用:hover偽類來完成,不使用js

只需要在index.css中新增:

/*滑鼠懸停樣式*/
.dropdown:hover .dropdown-toggle{
    background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown:hover .dropdown-arrow{
    background-image:url(../img/dropdown-arrow-active.png);
}
.dropdown:hover .dropdown-list{
    display: block;
}

不過這種寫法不相容 IE6 ,因為 IE6 只支持 a 標簽的 hover 偽類

效果圖

 


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

-Advertisement-
Play Games
更多相關文章
  • 閉包 函數被調用之後,會創建一個執行環境及作用域鏈.函數被執行完之後就會被釋放掉. 閉包函數執行之後會保留當前活動變數在內部函數作用域鏈中,所以內部函數可以訪問外部變數. 示例一 列印出的結果是多少? 示例二 列印出的結果是什麼? 這隻是創建並執行了10個函數,每個函數都傳遞了個 變數給參數給 ,` ...
  • 邊框border通常簡寫為"border:1px solid red;"但其實一個完整的border邊框其實是由1.border-width/*邊框寬度*/,2.border-style/*邊框樣式*/,3.border-color/*邊框色彩*/三大屬性構成構成;邊框方位分為border-top,... ...
  • fancybox圖片燈箱功能 在頁面中引入幾個文件 在博客文件中需要載入圖片的地方插入下麵html代碼 效果: ...
  • 是誰在耳邊對我說!important提升權重優先順序,只為這一句,我用了3600s研究通配符與標簽!important的背景展示,也是讓我懷疑人生了!選擇器權值:標簽選擇器1,類選擇器和偽類選擇器:10,ID選擇器:100,通配符選擇器:0,行內樣式:1000,!important 在一定條件下,優先... ...
  • background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.backgr... ...
  • 通過之前的站點導航案例,分離下拉菜單的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" h ...
  • 1.vue框架使用註意事項和經驗 1.1 解決Vue動態路由參數變化,頁面數據不更新 問題描述: 遇到動態路由如:/page/:id 從/page/1 切換到 /page/2 發現頁面組件沒有更新 解決方式1: 給增加一個不同:key值,這樣vue就會識別這是不同的了。 解決方案2: 在組件內使用v ...
  • 常見css樣式:1.字體與顏色2.背景屬性3.文本屬性4.邊框屬性5.滑鼠游標屬性6.列表樣式7.定位屬性8.內外邊距9.浮動和清除浮動10.滾動條11.顯示和隱藏 文本:1.letter-spacing/*字間距*/2.word-spacing/*詞間距*/3.text-decoration/*下... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...