一些学习中碰到的小技巧

让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. android 如何结束一个线程

    总结: 1 不推荐直接调用onstop()强制结束,,因为不安全 2 run()比较短暂,执行完毕会自动停止 3 在run()设置一个flag标识,满足条件才执行; 4 通过sleep()捕获异常,在 ...

  2. Intellij IDEA工具Java web 环境搭建

    Java web 环境搭建 环境依赖 操作系统:Windows 7 64位 开发工具:IntelliJ IDEA 13.1.4 开发工具依赖环境 JDK版本:1.7+ 开发工具依赖插件 包管理:Mav ...

  3. [Asp.net 开发系列之SignalR篇]专题六：使用SignalR实现消息提醒

    一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...

  4. C#中的线程一（委托中的异步）

    C#中的线程一(委托中的异步) 一.同步委托 我们平时所用的委托以同步居多,我们编写一个方法和相关委托进行演示: publicdelegatevoid DoSomethingDelegate(stri ...

  5. MySQL4：存储过程和函数

    什么是存储过程 简单说,存储过程就是一条或多条SQL语句的集合,可视为批文件,但是起作用不仅限于批处理.本文主要讲解如何创建存储过程和存储函数以及变量的使用,如何调用.查看.修改.删除存储过程和存储函 ...

  6. 用canvas开发H5游戏小记

    自神经猫风波之后,微信中的各种小游戏如雨后春笋般目不暇接,这种低成本,高效传播的案例很是受开发者青睐.作为一名前端,随手写个这样的小游戏出来应该算是必备技能吧.恰逢中秋节,部门决定上线一个小游戏,在微 ...

  7. Linux 通配符

    概述 本章节主要介绍关于linux通配符的用法,熟练运用通配符可以提高工作效率并且可以简化一些繁琐的处理步骤. 正文 测试数据 touch a a6.log abc.log ac.txt b c c5 ...

  8. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  9. VS2013 好用的插件

    切换到vs2013上有些时间了,以下是我个人认为比较好的插件. Resharper 神器中的神器,提升编码效率的第一神器,附带提高编码能力:除去臃肿的体积,堪称完美: Productivity Pow ...

  10. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...