【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧
(待续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="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="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" 点赞图标--> <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() 函数是 JavaScript函数,可解析一个字符串,并返回一个整数。 let newNum = parseInt(oldNum)+1; $goodEle.text(`${newNum}`); swal("THANKS FOR YOUR
赞 (0)