一些学习中碰到的小技巧

让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{

            width: 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;

            width: 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;

            width: 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{

            width: 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>

html/css/js小技巧实例的更多相关文章

  1. 一些CSS/JS小技巧

    CSS部分 1.文本框不可点击 .inputDisabled{ background-color: #eee;cursor: not-allowed;} 2.禁止复制粘贴 onpaste=" ...

  2. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  3. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  4. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  5. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  6. js小技巧总结

    js小技巧总结 1.Array.includes条件判断 function test(fruit) { const redFruits = ["apple", "stra ...

  7. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  8. javascript小技巧-js小技巧收集(转)

    本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...

  9. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

随机推荐

  1. [ASE][Daily Scrum]12.05

    占坑 最近大家都很忙所以工作准备放到周末来做……所以这两天进度会比较慢.

  2. 无线安全专题_攻击篇--MAC泛洪攻击

    上一篇讲解了无线安全专题_攻击篇--干扰通信,没在首页待多长时间就被拿下了,看来之后不能只是讲解攻击实战,还要进行技术原理和防御方法的讲解.本篇讲解的是局域网内的MAC泛洪攻击,这种攻击方式主要目的是 ...

  3. Redis 队列操作

    class Program { //版本2:使用Redis的客户端管理器(对象池) public static IRedisClientsManager redisClientManager = ne ...

  4. .Net Core CLI在CentOS7的安装及使用简介

    1. 安装libunwind cd /usr/local/src wget http://download.savannah.gnu.org/releases/libunwind/libunwind- ...

  5. 超出TCP连接端口数限制（MaxUserPort）引起的服务器问题

    昨天2台Windows Server 2012服务器出现奇怪的问题,自己竟然连不上自己的本机80端口,telnet 127.0.0.1 80也连不上,而更奇怪的是其它服务器可以连接到这2台服务器的80 ...

  6. 四则运算的实现（C++）重做

    #include <iostream> using namespace std; void main() { int a0[1000],b0[1000],c0[1000],a1[1000] ...

  7. 用DirectX实现魔方（三）视角变换及缩放（附源码）

    在本系列第一篇介绍过鼠标按键的功能,如下. 左键拖拽 - 旋转魔方 右键拖拽 - 变换视角 滚轮 - 缩放魔方 今天研究一下如何实现后面两个功能,用到的技术主要是Arcball,Arcball是实现M ...

  8. save与persist差别

    唯一差别: 在没提交事务情况下 save会产生insert语句,然后因为没提交事务进行回滚. 而这种情况,persist是连insert语句都不会产生.

  9. Redis集群~StackExchange.Redis(10月6号版1.1.608.0)连接Twemproxy支持Auth指令了

    回到目录 对于StackExchange.Redis这个驱动来说,之前的版本在使用Proxy为Twemproxy代理时,它是不支持Password属性的,即不支持原始的Auth指令,而我也修改过源代码 ...

  10. Atitit截屏功能的设计解决方案

    Atitit截屏功能的设计解决方案 自己实现.... 使用快捷键.. 弹出自己的win,,背景是屏幕快照 点击鼠标光标变成十字状态 出现截屏窗口调整截屏窗口位置与大小 释放鼠标,三个btn,,  复制 ...