【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)

相关推荐