zoukankan      html  css  js  c++  java
  • html/css/js小技巧实例

    一些学习中碰到的小技巧

    让div自动撑起来:

    .clearfix:after{
                content: ".";
                clear: both;
                display: block;
                visibility: hidden;
                height: 0;
            }
    

    用css画出尖角/三角

    transparent:表示透明

    .icon{
                display: inline-block;
                border-top: 15px solid transparent;
                border-bottom: 15px solid red;
                border-right: 15px solid transparent;
                border-left: 15px solid transparent;
            }
    

    后台管理布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>manage</title>
        <style>
            body{
                margin:0;
            }
            .head-menu{
                height:48px;
                background-color: #507aff;
            }
            .left-menu{
                 200px;
                background-color: greenyellow;
                position: absolute;
                top:48px;
                left:0;
                bottom: 48px;
            }
            .right-content{
                background-color: #fff8ee;
                position: absolute;
                top:48px;
                left:200px;
                right:0;
                bottom: 48px;
                /*最重要的一句代码,它让这个div变得可以根据内容长短进行滚动*/
                /*而其他的div却会保持位置不变*/
                overflow: auto;
            }
            .pg-footer{
                height: 48px;
                background-color: #b095b6;
                position: absolute;
                bottom: 0px;
                left:0;
                right:0;
            }
        </style>
    </head>
    <body>
        <div class="head-menu">
            head menu
        </div>
        <div>
            <div class="left-menu">
                left menu
            </div>
            <div class="right-content">
                right content
                <p>ahaha</p>
                <p>ahaha</p>
                <p>ahaha</p>
              
            </div>
        </div>
        <div class="pg-footer">
            page footer
        </div>
    </body>
    </html>
    

    一个跑马灯或滚动条的实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>scroll</title>
    </head>
    <body>
        <!--这是一个跑马灯或者滚动条的实例!-->
        <div id="id1" style="background-color: red;color: yellow;display: inline-block;">
            欢迎宝宝莅临指导工作
        </div>
    
        <script>
    //        这是一个定时器,接受一个js代码语句作为执行对象,1000表示每1000毫秒执行一次!
            setInterval("f1();",1000);
    
            function f1() {
    //            下面的方法获取id为id1的标签
                var tag = document.getElementById("id1");
    //            下面的方法获取该标签的内部文本
                var text = tag.innerText;
    //            下面都是对该字符串进行操作,将第一个字符放到最后去。
                var a = text.charAt(0);
                var temp_str = text.substring(1,text.length)
                var new_string = temp_str + a
                tag.innerText = new_string
                }
        </script>
    </body>
    </html>
    

    DOM版本的模态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
            .field{
                z-index: 1;
            }
            .cover{
                display: none;
                z-index: 2;
                position: fixed;
                top:0;
                right:0;
                bottom: 0;
                left:0;
                background-color: #b6b0ad;
                opacity: 0.8;
            }
            .input{
                display: none;
                z-index: 3;
                 300px;
                height:200px;
                background-color: #fff;
                border-radius: 20px;
                position: fixed;
                top:50%;
                left:50%;
                margin-left: -150px;
                margin-top: -100px;
                -webkit-box-shadow: 0 0 10px #0CC;
            }
        </style>
    </head>
    <body>
        <div>
            <fieldset id="1" class="field">
                <legend>用户信息</legend>
                <p id="username">用户名:</p>
                <p id="usergender">性别:</p>
            </fieldset>
            <button type="button" onclick="show()">输入用户信息</button>
        </div>
        <div id="2" class="cover">
    
        </div>
        <div id="3" class="input">
            <!--<form>-->
                <div style="text-align: center;">
                    姓名:<input id = "name" type="text" />
                </div>
                <br />
                <div style="text-align: center;">
                    性别:<input type="radio" name="gender" value="男" checked />男
                            <input type="radio" name="gender" value="女"/>女
    
                </div>
                <br />
                <div style="text-align: center;">
                    <input type="button" onclick="submit()" value="提交" />
                </div>
            <!--</form>-->
        </div>
    
    
        <script>
            function show() {
                var cover = document.getElementById("2");
                cover.style.display = "block";
                var input = document.getElementById("3");
                input.style.display = "block";
            }
            function submit() {
    
                var cover = document.getElementById("2");
                cover.style.display = "none";
                var input = document.getElementById("3");
                input.style.display = "none";
    
                var name = document.getElementById("name");
                var text = name.value;
                var p1 = document.getElementById("username");
                p1.innerHTML="用户姓名:"+text;
    
                var mbtype = document.getElementsByName("gender");
                var gender;
                for(var i=0;i<mbtype.length;i++){
                    if (mbtype.item(i).checked) {
                        gender = mbtype.item(i).getAttribute("value");
                        break;
                   }
                 }
                var p2 = document.getElementById("usergender");
                p2.innerHTML="用户姓名:"+gender;
            }
    
        </script>
    </body>
    </html>
    

    利用JQuery实现模态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
            .field{
                z-index: 1;
            }
            .cover{
                display: none;
                z-index: 2;
                position: fixed;
                top:0;
                right:0;
                bottom: 0;
                left:0;
                background-color: #b6b0ad;
                opacity: 0.8;
            }
            .input{
                display: none;
                z-index: 3;
                 300px;
                height:200px;
                background-color: #fff;
                border-radius: 20px;
                position: fixed;
                top:50%;
                left:50%;
                margin-left: -150px;
                margin-top: -100px;
                -webkit-box-shadow: 0 0 10px #0CC;
            }
        </style>
    </head>
    <body>
        <div>
            <fieldset id="1" class="field">
                <legend>用户信息</legend>
                <p id="username">用户名:</p>
                <p id="usergender">性别:</p>
            </fieldset>
            <button type="button" id="show">输入用户信息</button>
        </div>
        <div id="2" class="cover">
    
        </div>
        <div id="3" class="input">
            <!--<form>-->
                <div style="text-align: center;">
                    姓名:<input id = "name" type="text" />
                </div>
                <br />
                <div style="text-align: center;">
                    性别:<input type="radio" name="gender" value="男" checked="checked" />男
                            <input type="radio" name="gender" value="女"/>女
    
                </div>
                <br />
                <div style="text-align: center;">
                    <input type="button" id="submit" value="提交" />
                </div>
            <!--</form>-->
        </div>
    
        <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    
        <script>
            $(document).ready(function(){
    
                $("#show").click(function(){
                    $("#2,#3").show();
                  });
    
                $('#submit').click(function(){
                    var input = $("#name").val();
                    $("#1 p").first().append(input);
                    var g = $("input[name='gender']:checked").val();
                    alert(g);
                    $("#1 p").first().next().append(g);
                    $("#2,#3").hide();
                });
            });
        </script>
    </body>
    </html>
    

    搜索框

    <input type="text" id="1" value="请输入关键字" onfocus="hide();" onblur="show();"/>
        <script>
            
            function hide() {
                var e = document.getElementById("1");
                if (e.value == "请输入关键字"){
                    e.value = "";
                }
                
            }
            function show() {
                var e = document.getElementById("1");
                if (e.value.trim().length == 0){
                    e.value = "请输入关键字";
                }
            }
        </script>
    

    点赞的动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>good</title>
        <style>
            .good{
                position: relative;
            }
    
        </style>
    </head>
    <body>
    
        <div class ="good">
            <input type="button" value="点赞1" onclick="add(this);"/>
        </div>
        <div class ="good">
            <input type="button" value="点赞2" onclick="add(this);"/>
        </div>
        <div class ="good">
            <input type="button" value="点赞3" onclick="add(this);"/>
        </div>
        <div class ="good">
            <input type="button" value="点赞4" onclick="add(this);"/>
        </div>
    
        <script>
    
            function add(ths) {
                var top = 12;
                var left = 50;
                var op = 1;
                var fontSize = 10;
    
                var tag = document.createElement("span");
                tag.innerText = "+1";
                tag.style.color = "green";
                tag.style.position = "absolute";
                tag.style.top = top +"px";
                tag.style.left = left +"px";
                tag.style.fontSize = fontSize +"px";
                tag.style.opacity = op;
                ths.parentElement.appendChild(tag);
    
                var itv =setInterval(function () {
                    top -=10;
                    left +=10;
                    op -= 0.2;
                    fontSize += 5;
    
                    tag.style.top = top +"px";
                    tag.style.left = left +"px";
                    tag.style.fontSize = fontSize +"px";
                    tag.style.opacity = op;
    
                    if(op<=0.2){
                        clearInterval(itv);
                       ths.parentElement.removeChild(tag);
                    }
                },50);
    }
        </script>
    </body>
    </html>
    

    自适应的“返回顶部”功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>back</title>
        <style>
            body{
                margin: 0;
            }
            .hide{
                display: none;
            }
            .whole{
                height: 2000px;
                background-color: #a9e2bc;
            }
            .back{
                 50px;
                height:50px;
                background-color: #B61D1D;
                position: fixed;
                right: 10px;
                bottom: 10px;
                color: white;
    
            }
        </style>
    </head>
    <body onscroll="show();">
        <div class="whole">
            看到这里,就是顶部!
        </div>
    
        <div id="back" class="back hide">
            <span onclick="back();">返回顶部</span>
        </div>
    
    
        <script>
            function back() {
                document.body.scrollTop = 0;
            }
    
            function show() {
                var s = document.body.scrollTop;
                var sp = document.getElementById("back");
                if(s >=100){
                    sp.classList.remove("hide");
                }else{
                    sp.classList.add("hide");
                }
    
            }
    
        </script>
    
    
    </body>
    </html>
    
  • 相关阅读:
    第24课 #pragma使用分析
    第23课 #error和#line使用分析
    第22课 条件编译使用分析
    第21课 宏定义与使用分析
    Codeforces Round #142 (Div. 2)B. T-primes
    SPOJ XMAX
    Uva 10036
    Timus 1009. K-based Numbers
    MBLAST
    ROADS
  • 原文地址:https://www.cnblogs.com/feixuelove1009/p/5787344.html
Copyright © 2011-2022 走看看