小三角：

<!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. centos6安装python3.6.4

    安装Python依赖包: [root@Python src]# yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlit ...

  2. swift的一些知识点（不断完善中）

    首先,隆重推荐文章http://www.infoq.com/cn/articles/swift-brain-gym-optional swift 烧脑体操!目前有4篇文章,说的都很好! 1. 应该充分 ...

  3. mpVue小程序全栈开发

    1.微信小程序,mpVue和wepy的对比 2. 3.es6中关于数组的一些方法 <script> let arr = [,,,] // 遍历 arr.forEach(v => { ...

  4. Js中带有小数的值相加产生的问题

    项目中遇到的问题,0.1+0.2为0.30000000000000004,与想象中不一样, 解决办法: function addNum (num1, num2) { var sq1,sq2,m; tr ...

  5. 改变input标签中placeholder显示的颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #A9A9A9; } :-moz-placeholder { /* Mozilla ...

  6. Java+Jmeter接口测试

    一.创建工程.引包 1.创建JAVA工程 2.引入Jmeter中lib\ext基础包:ApacheJMeter_java.jar.ApacheJMeter_core.jar 3.引入Jmeter日志包 ...

  7. mysql中的几种join 及 full join问题

    [注意]:Oracle数据库支持full join,mysql是不支持full join的,但仍然可以同过左外连接+ union+右外连接实现 初始化SQL语句:   /*join 建表语句*/   ...

  8. InnoDB的关键特性-插入缓存，两次写，自适应hash索引

    InnoDB存储引擎的关键特性包括插入缓冲.两次写(double write).自适应哈希索引(adaptive hash index).这些特性为InnoDB存储引擎带来了更好的性能和更高的可靠性. ...

  9. Spark的HA部署

    一.安装JDK.Scala 二.安装zookeeper 三.安装Hadoop 四.安装Spark 1.修改spark/conf/spark-env.sh export JAVA_HOME=/usr/j ...

  10. pytest七：assert

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