小三角：

<!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. Two Sum I & II & III & IV

    Two Sum I Given an array of integers, find two numbers such that they add up to a specific target nu ...

  2. mysql系列二、mysql内部执行过程

    向MySQL发送一个请求的时候,MySQL到底做了什么 客户端发送一条查询给服务器. 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一阶段. 服务器端进行SQL解析.预 ...

  3. 记录entityframework生成的sql语句

    Interceptors (EF6.1 Onwards) Starting with EF6.1 you can register interceptors in the config file. I ...

  4. windows系统安装jdk并设置环境变量

    CLASSPATH:JDK1.5之后的版本不需要配置.安装JDK 选择安装目录 安装过程中会出现两次安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的 ...

  5. 并发之synchronized关键字的应用

    并发之synchronized关键字的应用 synchronized关键字理论基础 前两章我们学习了下java内存模型的相关知识, 现在我们来讲讲逢并发必出现的synchronized关键字. 作用 ...

  6. java jvm 字节码 实例

    https://blog.csdn.net/wuzhiwei549/article/details/80626677 代码 package strings; //: strings/WhitherSt ...

  7. 《转》Pragma: no-cache 对性能的影响

    做了下go和java的http性能的简单比较服务端直接输出字符串使用JMeterwindows下  2000的并发,测试结果很出乎意料,go不会这么差吧 研究了半小时,原因如下tomcat的servl ...

  8. 《剑指offer》-判断平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 考察平衡树的概念和递归的使用.平衡树是指,树中的每个节点的左右子树的高度差小于等于1. class Solution { public: bo ...

  9. DDD领域模型数据访问权限之用户权限（十）

    BAS_PRService岗位和角色服务: public class BAS_PRService { //岗位 private IRepository<BAS_Post> ireposit ...

  10. Spring Boot学习笔记---Spring Boot 基础及使用idea搭建项目

    最近一段时间一直在学习Spring Boot,刚进的一家公司也正好有用到这个技术.虽然一直在学习,但是还没有好好的总结,今天周末先简单总结一下基础知识,等有时间再慢慢学习总结吧. Spring Boo ...