小三角：

<!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. C# 清理消息管道的消息

    using System;using System.Collections.Generic;using System.Linq;using System.Messaging;using System. ...

  2. 数据库的连接使用——使用ADO.NET连接数据库

    一.ADO.NET简介 ADO.NET是由很多类组成的一个类库,这些类库提供了很多对象,用来完成数据的连接.查询.插入.更新和删除等操作.其中主要包括以下对象: 1.Connection对象:用来连接 ...

  3. Win10 + VS2017 15.5.6 环境下解决 Python 3.6 环境无法刷新DB的问题

    作为宇宙第一IDE,VS2017对Python的支持还算可以,虽然和PyCharm等Python专用IDE相比还有些差距,但是经过后续的更新升级,我相信VS2017将越来越完善.由于本人一直都是使用V ...

  4. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  5. svn使用openldap验证apache访问方式

    启用svn服务器的sasl验证机制 1.安装cyrus-sasl认证包 # yum install -y *sasl* # rpm -qa|grep sasl cyrus-sasl-2.1.23-15 ...

  6. mysql删除数据库文件ibdata1后引发的故障

    进行性能测试是发现大量报错: Duplicate entry主键重复 可以看到mysql数据库中已经没有innodb引擎启动信息了 之前发现ibdata1占用了大量硬盘,为了省出空间删除了数据库ibd ...

  7. TCP/IP五层层次模型

    TCP/IP层次模型共分为五层:应用层HTTP.传输层TCP.网络层IP.数据链路层Data-link.物理层physical.·         应用层-应用层是所有用户所面向的应用程序的统称.IC ...

  8. sklearn聚类模型：基于密度的DBSCAN；基于混合高斯模型的GMM

    1 sklearn聚类方法详解 2 对比不同聚类算法在不同数据集上的表现 3 用scikit-learn学习K-Means聚类 4 用scikit-learn学习DBSCAN聚类 (基于密度的聚类) ...

  9. 大道至简、大智若愚—GO语言最佳详解实践

      导读:2007年,受够了C++煎熬的Google首席软件工程师Rob Pike纠集Robert Griesemer和Ken Thompson两位牛人,决定创造一种新语言来取代C++, 这就是Gol ...

  10. C++11 AUTO 类型实践

    auto在C++11中引入,为大家带来方便. 具体使用及注意事项参考: https://blog.csdn.net/xiaoquantouer/article/details/51647865 htt ...