小三角：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            border-top:  30px solid transparent;            /**透明色*/

            border-right: 30px solid gray;

            border-bottom: 30px solid transparent ;         /**透明色*/

            border-left: 30px solid transparent;

            display: inline-block;                          /*块级拥有行类特性*/

        }

        div:hover{

            border: 30px solid transparent;

            border-left: 30px solid navy;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　

　　

控制背景图移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 350px;

            width: 350px;

            background: url("21.jpg") no-repeat;        /* no-repeat 不平铺*/

        }

    </style>

</head>

<body>

    <div></div>

    <p>

        <input type="button" value="上">

        <input type="button" value="下">

        <input type="button" value="左">

        <input type="button" value="右">

    </p>

    <script>

        var btn = document.getElementsByTagName('input');

        var box = document.getElementsByTagName('div')[0];

        btn[0].onclick = function () {

            // console.log('1')

            box.style.backgroundPositionX = '0px';                      // 背景图 X

            box.style.backgroundPositionY = '0px';                   // 背景图 Y

        };

        btn[1].onclick = function () {

            // console.log('2')

            box.style.backgroundPositionX = '0px';                      // 背景图 X

            box.style.backgroundPositionY = '-350px';                   // 背景图 Y

        };

        btn[2].onclick = function () {

            // console.log('3')

            box.style.backgroundPositionX = '-350px';                      // 背景图 X

            box.style.backgroundPositionY = '0px';                   // 背景图 Y

        };

        btn[3].onclick = function () {

            // console.log('4')

            box.style.backgroundPositionX = '-350px';                      // 背景图 X

            box.style.backgroundPositionY = '-350px';                   // 背景图 Y

        }

    </script>

</body>

</html>

　　以这整张为背景，在 div 开4分之1 图大小窗口，控制背景图的 X/Y 的移动，

在输入框中的数据 + 1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="-">

    <input type="text" name="num">

    <input type="button" value="+">

    <script>

        var obj = document.getElementsByTagName('input')

        obj[0].onclick = function () {

            obj[1].value -= 1

        }

         obj[2].onclick = function () {                 // 在 js 中 + 号表示字符串合并，这里 obj[1].value 是 str

           obj[1].value =  Number(obj[1].value) +1

        }

    </script>

</body>

</html>

　　

局部刷新

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test1{

            height: 200px;

            width: 200px;

            background: skyblue;

        }

        .test{

            width: 100%;

            height: 8000px;

        }

    </style>

</head>

<body>

    <div class="test1">参照</div>

    <input type="button" value="登录">

    <div class="test">

        <!--<iframe src="http://www.taobao.com"></iframe>-->

    </div>

    <script>

        var btn = document.getElementsByTagName('input')[0];

        btn.onclick = function (){

            var box = document.getElementsByClassName('test')[0];

            box.innerHTML = "<iframe style='' src=\"http://www.taobao.com/\"></iframe>"

        }

    </script>

</body>

</html>

　　

潭州课堂25班：Ph201805201 周五 (课堂笔记)的更多相关文章

  1. 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)

    index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 潭州课堂25班：Ph201805201 第十课 类的定义，属性和方法 (课堂笔记)

    类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...

  6. 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)

    一.分析静态页面   1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...

  7. 潭州课堂25班：Ph201805201 django 项目 第三十一课 在线课堂视频点播的实现(课堂笔记）

    在线课堂 一.数据库模型设计 # 在apps/course/models.py中定义如下模型: from django.db import models from utils.models impor ...

  8. 潭州课堂25班：Ph201805201 爬虫基础 第十五课 js破解 二 (课堂笔记）

    PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...

  9. 潭州课堂25班：Ph201805201 爬虫基础 第八课 selenium (课堂笔记）

    Selenium笔记(1)安装和简单使用 简介 Selenium是一个用于Web应用程序测试的工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, ...

随机推荐

  1. 那些IT行业的经典定律

    几十年来,IT界有一些非常著名的定律,蕴含着行业发展的大智慧,非常有趣,略作收集总结,再加上一丁点自己的浅见~ 一.摩尔定律:价格不变,集成电路上可容纳的元器件数目,约每隔18个月便会翻一倍,性能也将 ...

  2. STOMP Over WebSocket

    Show Table of Contents What is STOMP? STOMP is a simple text-orientated messaging protocol. It defin ...

  3. 【转】C Runtime Library的来历

    由于我看到的文章也是转载且未提供原文链接,所以这里没有提供原文链接! msvcrt.dll(名称:Microsoft C Runtime Library)提供了printf,malloc,strcpy ...

  4. JOptionPane类提示框常用方法总结

    JOptionPane类封装了很多的方法,总结如下: 1.showMessageDialog 显示一个带有OK 按钮的模态对话框. 下面是几个使用showMessageDialog 的例子: Java ...

  5. keras2.0的一些变化

    keras 变化太快了https://github.com/fchollet/keras/wiki/Keras-2.0-release-notes

  6. TP5.1：request请求对象（使用四种方式获取）

    准备: 在index/controller下创建一个名为requests.php的文件(注意:不要起名为request,因为它是关键字,不被允许起名) 动态方法和静态方法的区别: 静态方法:publi ...

  7. pytest七：assert

    断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了.什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试 pass,不符合预期那就测试 failed py ...

  8. ORACLE 锁表处理，解锁释放session

    后台数据库操作某一个表时发现一直出于假死状态,可能是该表被某一用户锁定,或者后台数据库操作某一个表时发现一直出于"假死"状态,可能是该表被某一用户锁定,导致其他用户无法继续操作 - ...

  9. OSGI命令

    OSGi的一些支离破碎的知识 以下命令说明内容来自于Eclipse的OSGi框架Equinox. ---Controlling the OSGi framework---launch - start ...

  10. JSON.NET 空值处理, 数字转字符,时间格式化

    public static string ToJsonString(this Object obj) { IsoDateTimeConverter idtc = new IsoDateTimeConv ...