（待續ing）
一、示例
超級無敵簡易版博客園：
https://www.cnblogs.com/bigorangecc/p/12891419.html
jQuery簡易網頁：
https://www.cnblogs.com/bigorangecc/p/12924475.html
學習資源，你想要的，這里都有：https://v3.bootcss.com/css/
https://www.cnblogs.com/bigorangecc/p/12874459.html
二、技巧解說
1、界面背景圖鎖定
【效果描述】：
背景圖固定不動（就像貼在 最底下的圖），其余頁面內容可以在其上方正常翻動瀏覽（鏤空設計）
（待續）
2、固定定位——敵動我不動
【效果描述】：
網頁固定不動的部件，例如：
【CSS】
（1）網頁固定部件：
使用的是 CSS的固定定位 —— position: fixed;
例如：該部件屬于 box 類，為其添加屬性 position: fixed;
.box { position: fixed; top: 10px; left: 20px;}
（2）回傳頂部（頁面瀏覽到一定位置后，出現“回傳頂部”小標簽） （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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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、鏈接四狀態——訪問前，懸浮，點擊時，訪問后
【效果描述】：
滑鼠懸浮，文字或者圖片有顏色變化 / 小小的浮動突出
【CSS】
（1）四狀態顏色變化（具體應用 參考示例的-超級無敵簡易版博客園-）
.title a:link { color:forestgreen; }.title a:hover { color:pink;}.title a:active { color:olivedrab;}.title a:visited { color:black;}CSS
（2）影片效果
（待續）
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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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') // 然后將被點擊標簽內部的hide移除 $(this).children().removeClass('hide') })</script></body></html>View Code
（待續）
5、登入注冊相關事件（jQuery事件）
（1）自定義登入校驗——【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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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 () { // 獲取用戶輸入的用戶名和密碼 做校驗 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 框 實時監控(即 實時監控用戶輸入的內容，例如 判斷用戶名是否已被占用，密碼格式是否正確 等)
<!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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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事件）
（點擊標簽，就可以復制標簽）
<!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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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">屠龍寶刀，點擊就送</button><script> $('#d1').on('click',function () { // console.log(this) // this指代是當前被操作的標簽物件 // $(this).clone().insertAfter($('body')) // clone默認情況下只克隆html和css 不克隆事件 $(this).clone(true).insertAfter($('body')) // 括號內加true即可克隆事件 })</script></body></html>HTML
7、模態框事件（jQuery事件）
（例如 百度登入界面 三層視圖結構）
<!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>自定義模態框</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="關閉"></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script> // var tButton = $("#i0")[0]; $("#i0").click(function () { var coverEle = $(".cover")[0]; // 需要手動轉 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事件）
（滑鼠懸浮在目標標簽 與 離開標簽）
<!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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><p id="d1">到家啊就是度假酒店</p><script> // $("#d1").hover(function () { // 滑鼠懸浮 + 滑鼠移開 // alert(123) // }) $('#d1').hover( function () { alert('我來了') // 懸浮 }, function () { alert('我溜了') // 移開 } )</script></body></html>HTML
9、鍵盤按鍵事件 （jQuery事件）
（實時提示 你按下了什么鍵（鍵盤的每個按鍵，在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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/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、趣味小功能——點贊+1
參考：https://v3.bootcss.com/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.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.cnblogs.com/bigorangecc/p/font-awesome-4.7.0/css/font-awesome.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://www.cnblogs.com/bigorangecc/p/bootstrap-sweetalert-master/dist/sweetalert.css"> <script src="https://www.cnblogs.com/bigorangecc/p/bootstrap-sweetalert-master/dist/sweetalert.min.js"></script></head><body><!-- 樣式1 --><!-- <a href="https://www.cnblogs.com/bigorangecc/p/#">Inbox <span >42</span></a><button type="button"> Messages <span >4</span></button> --><!-- 樣式2 --><!-- <ul role="tablist"> <li role="presentation" ><a href="https://www.cnblogs.com/bigorangecc/p/#">Home <span >42</span></a></li> <li role="presentation"><a href="https://www.cnblogs.com/bigorangecc/p/#">Profile</a></li> <li role="presentation"><a href="https://www.cnblogs.com/bigorangecc/p/#">Messages <span >3</span></a></li></ul> --><!-- 版本3 good+1 --><div > <button type="button" id="btn-good" > (～￣▽￣)～ <!-- # 點贊圖示--> <i aria-hidden="true"></i> <span id="good-value">0</span> </button></div><script> let $goodEle = $('#good-value'); $('#btn-good').click(function () { let oldNum = $goodEle.text(); // parseInt() 函式是 JavaScript函式，可決議一個字串，并回傳一個整數， let newNum = parseInt(oldNum)+1; $goodEle.text(`${newNum}`); swal("THANKS FOR YOUR ??", "??may you a good day??") })</script></body></html>View Code
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39114.html
標籤：Html/Css
上一篇：title 換行顯示