【2020Python修煉記】前端開發(fā)之網(wǎng)頁設(shè)計(jì)超級(jí)酷炫小技巧

小世界的野孩子 2021-10-23

展開全文

（待續(xù)ing）

一、示例

超級(jí)無敵簡易版博客園：

https://www.cnblogs.com/bigorangecc/p/12891419.html

jQuery簡易網(wǎng)頁：

https://www.cnblogs.com/bigorangecc/p/12924475.html

學(xué)習(xí)資源，你想要的，這里都有：https://v3./css/

https://www.cnblogs.com/bigorangecc/p/12874459.html

二、技巧解說

1、界面背景圖鎖定

【效果描述】：

　　背景圖固定不動(dòng)（就像貼在最底下的圖），其余頁面內(nèi)容可以在其上方正常翻動(dòng)瀏覽（鏤空設(shè)計(jì)）

（待續(xù)）

2、固定定位——敵動(dòng)我不動(dòng)

【效果描述】：

　　網(wǎng)頁固定不動(dòng)的部件，例如：

【CSS】

（1）網(wǎng)頁固定部件：

使用的是 CSS的固定定位 —— position: fixed;

例如：該部件屬于 box 類，為其添加屬性 position: fixed;

.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

（2）返回頂部（頁面瀏覽到一定位置后，出現(xiàn)“返回頂部”小標(biāo)簽）（jQuery事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;

            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<a href="#d1" class="hide">回到頂部</a>

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

HTML

3、鏈接四狀態(tài)——訪問前，懸浮，點(diǎn)擊時(shí)，訪問后

【效果描述】：

　　鼠標(biāo)懸浮，文字或者圖片有顏色變化 / 小小的浮動(dòng)突出

【CSS】

（1）四狀態(tài)顏色變化（具體應(yīng)用參考示例的-超級(jí)無敵簡易版博客園-）

.title a:link {
    color:forestgreen;    
}
.title a:hover {
    color:pink;
}
.title a:active {
    color:olivedrab;
}
.title a:visited {
    color:black;
}

CSS

（2）動(dòng)畫效果

（待續(xù)）

4、顯隱菜單

【jQuery 版本】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜單一
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜單二
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜單三
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
    </div>
</div>

<script>
    $('.title').click(function () {
        // 先給所有的items加hide
        $('.items').addClass('hide')
        // 然后將被點(diǎn)擊標(biāo)簽內(nèi)部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
</body>
</html>

View Code

（待續(xù)）

5、登入注冊(cè)相關(guān)事件（jQuery事件）

（1）自定義登入校驗(yàn)——【jQuery 版本】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 獲取用戶輸入的用戶名和密碼 做校驗(yàn)
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用戶名不能為空")
        }
        if (!passWord){
            $passWord.next().text('密碼不能為空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>
</body>
</html>

HTML

（2）input 框實(shí)時(shí)監(jiān)控(即實(shí)時(shí)監(jiān)控用戶輸入的內(nèi)容，例如判斷用戶名是否已被占用，密碼格式是否正確等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>k</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>

HTML

6、克隆事件（jQuery事件）

（點(diǎn)擊標(biāo)簽，就可以復(fù)制標(biāo)簽）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="d1">屠龍寶刀，點(diǎn)擊就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是當(dāng)前被操作的標(biāo)簽對(duì)象
        // $(this).clone().insertAfter($('body'))  // clone默認(rèn)情況下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括號(hào)內(nèi)加true即可克隆事件

    })
</script>
</body>
</html>

HTML

7、模態(tài)框事件（jQuery事件）

（例如百度登入界面三層視圖結(jié)構(gòu)）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態(tài)框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="彈" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">愛好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="關(guān)閉">
</div>
<script src="https://cdn./jquery/3.2.1/jquery.min.js"></script>
<script>
  // var tButton = $("#i0")[0];
  $("#i0").click(function () {
    var coverEle = $(".cover")[0];  // 需要手動(dòng)轉(zhuǎn)
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  })
  // tButton.onclick=function () {
  //   var coverEle = $(".cover")[0];
  //   var modalEle = $(".modal")[0];
  //
  //   $(coverEle).removeClass("hide");
  //   $(modalEle).removeClass("hide");
  // };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

HTML

8、hover事件（jQuery事件）

（鼠標(biāo)懸浮在目標(biāo)標(biāo)簽與離開標(biāo)簽）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<p id="d1">到家啊就是度假酒店</p>

<script>
    // $("#d1").hover(function () {  // 鼠標(biāo)懸浮 + 鼠標(biāo)移開
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我來了')  // 懸浮
    },
        function () {
            alert('我溜了')  // 移開
        }
    )
</script>
</body>
</html>

HTML

9、鍵盤按鍵事件（jQuery事件）

（實(shí)時(shí)提示你按下了什么鍵（鍵盤的每個(gè)按鍵，在jQuery框架中，都有相應(yīng)的數(shù)字編號(hào)）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift鍵')
        }
    })
</script>
</body>
</html>

HTML

10、趣味小功能——點(diǎn)贊+1

參考：https://v3./components/#badges

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>good+1</title>
    <link href="https://cdn./twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="https://cdn./jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
    <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>

</head>
<body>
<!-- 樣式1 -->
<!-- <a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button> -->

<!-- 樣式2 -->
<!-- <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul> -->

<!-- 版本3 good+1  -->
<div class="container">
    <button type="button" id="btn-good" class="btn btn-success">        
      (～￣▽￣)～
      <!-- # class="fa fa-thumbs-up"  點(diǎn)贊圖標(biāo)-->
        <i class="fa fa-heart" aria-hidden="true"></i> 
        <span class="badge badge-light" id="good-value">0</span>
    </button>
</div>
<script>
    let $goodEle = $('#good-value');
    $('#btn-good').click(function () {
        let oldNum = $goodEle.text();
        // parseInt() 函數(shù)是 JavaScript函數(shù)，可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
        let newNum = parseInt(oldNum)+1;
        $goodEle.text(`${newNum}`);
        swal("THANKS FOR YOUR

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：小世界的野孩子 > 《待分類》

舉報(bào)/認(rèn)領(lǐng)

0條評(píng)論

發(fā)表

請(qǐng)遵守用戶評(píng)論公約

類似文章 更多

小世界的野孩子

關(guān)注對(duì)話

TA的最新館藏

pycharm學(xué)習(xí)-1.pycharm的安裝和永久激活
Go語言隨機(jī)向量與向量運(yùn)算
python 混亂
pyinstaller 打包生成可執(zhí)行exe后，點(diǎn)擊exe報(bào)找不到自己的封裝包
新手購買阿里云服務(wù)器企業(yè)型怎么配置？
C#異步處理Task的簡單使用

喜歡該文的人也喜歡更多

熱門閱讀換一換

一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

【2020Python修煉記】前端開發(fā)之 網(wǎng)頁設(shè)計(jì)超級(jí)酷炫小技巧

（待續(xù)ing）

一、示例

超級(jí)無敵簡易版博客園：

https://www.cnblogs.com/bigorangecc/p/12891419.html

jQuery簡易網(wǎng)頁：

https://www.cnblogs.com/bigorangecc/p/12924475.html

學(xué)習(xí)資源，你想要的，這里都有：https://v3./css/

https://www.cnblogs.com/bigorangecc/p/12874459.html

二、技巧解說

1、界面背景圖鎖定

【效果描述】：

背景圖固定不動(dòng)（就像貼在 最底下的圖），其余頁面內(nèi)容可以在其上方正常翻動(dòng)瀏覽（鏤空設(shè)計(jì)）

2、固定定位——敵動(dòng)我不動(dòng)

【效果描述】：

網(wǎng)頁固定不動(dòng)的部件，例如：

【CSS】

（1）網(wǎng)頁固定部件：

使用的是 CSS的固定定位 —— position: fixed;

例如：該部件屬于 box 類，為其添加屬性 position: fixed;

（2）返回頂部（頁面瀏覽到一定位置后，出現(xiàn)“返回頂部”小標(biāo)簽） （jQuery事件）

3、鏈接四狀態(tài)——訪問前，懸浮，點(diǎn)擊時(shí)，訪問后

【效果描述】：

鼠標(biāo)懸浮，文字或者圖片有顏色變化 / 小小的浮動(dòng)突出

【CSS】

（1）四狀態(tài)顏色變化（具體應(yīng)用 參考示例的-超級(jí)無敵簡易版博客園-）

（2）動(dòng)畫效果

4、顯隱菜單

【jQuery 版本】

5、登入注冊(cè)相關(guān)事件（jQuery事件）

（1）自定義登入校驗(yàn)——【jQuery 版本】

（2）input 框 實(shí)時(shí)監(jiān)控(即 實(shí)時(shí)監(jiān)控用戶輸入的內(nèi)容，例如 判斷用戶名是否已被占用，密碼格式是否正確 等)

6、克隆事件（jQuery事件）

（點(diǎn)擊標(biāo)簽，就可以復(fù)制標(biāo)簽）

7、模態(tài)框事件（jQuery事件）

（例如 百度登入界面 三層視圖結(jié)構(gòu)）

8、hover事件（jQuery事件）

（鼠標(biāo)懸浮在目標(biāo)標(biāo)簽 與 離開標(biāo)簽）

9、鍵盤按鍵事件 （jQuery事件）

（實(shí)時(shí)提示 你按下了什么鍵（鍵盤的每個(gè)按鍵，在jQuery框架中，都有相應(yīng)的數(shù)字編號(hào)）

10、趣味小功能——點(diǎn)贊+1

【2020Python修煉記】前端開發(fā)之網(wǎng)頁設(shè)計(jì)超級(jí)酷炫小技巧

一、示例

學(xué)習(xí)資源，你想要的，這里都有：https://v3./css/

二、技巧解說

1、界面背景圖鎖定

　　背景圖固定不動(dòng)（就像貼在最底下的圖），其余頁面內(nèi)容可以在其上方正常翻動(dòng)瀏覽（鏤空設(shè)計(jì)）

2、固定定位——敵動(dòng)我不動(dòng)

　　網(wǎng)頁固定不動(dòng)的部件，例如：

例如：該部件屬于 box 類，為其添加屬性 position: fixed;

（2）返回頂部（頁面瀏覽到一定位置后，出現(xiàn)“返回頂部”小標(biāo)簽）（jQuery事件）

3、鏈接四狀態(tài)——訪問前，懸浮，點(diǎn)擊時(shí)，訪問后

　　鼠標(biāo)懸浮，文字或者圖片有顏色變化 / 小小的浮動(dòng)突出

（1）四狀態(tài)顏色變化（具體應(yīng)用參考示例的-超級(jí)無敵簡易版博客園-）

4、顯隱菜單

5、登入注冊(cè)相關(guān)事件（jQuery事件）

（2）input 框實(shí)時(shí)監(jiān)控(即實(shí)時(shí)監(jiān)控用戶輸入的內(nèi)容，例如判斷用戶名是否已被占用，密碼格式是否正確等)

6、克隆事件（jQuery事件）

（點(diǎn)擊標(biāo)簽，就可以復(fù)制標(biāo)簽）

7、模態(tài)框事件（jQuery事件）

（例如百度登入界面三層視圖結(jié)構(gòu)）

8、hover事件（jQuery事件）

（鼠標(biāo)懸浮在目標(biāo)標(biāo)簽與離開標(biāo)簽）

9、鍵盤按鍵事件（jQuery事件）

（實(shí)時(shí)提示你按下了什么鍵（鍵盤的每個(gè)按鍵，在jQuery框架中，都有相應(yīng)的數(shù)字編號(hào)）

10、趣味小功能——點(diǎn)贊+1