小三角：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             border-top:  30px solid transparent;            /**透明色*/
  9.             border-right: 30px solid gray;
  10.             border-bottom: 30px solid transparent ;         /**透明色*/
  11.             border-left: 30px solid transparent;
  12.             display: inline-block;                          /*块级拥有行类特性*/
  13.         }
  14.         div:hover{
  15.             border: 30px solid transparent;
  16.             border-left: 30px solid navy;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div></div>
  22. </body>
  23. </html>

　　

　　

控制背景图移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             height: 350px;
  9.             width: 350px;
  10.             background: url("21.jpg") no-repeat;        /* no-repeat 不平铺*/
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div></div>
  16.     <p>
  17.         <input type="button" value="上">
  18.         <input type="button" value="下">
  19.         <input type="button" value="左">
  20.         <input type="button" value="右">
  21.     </p>
  22.  
  23.     <script>
  24.         var btn = document.getElementsByTagName('input');
  25.         var box = document.getElementsByTagName('div')[0];
  26.         btn[0].onclick = function () {
  27.             // console.log('1')
  28.             box.style.backgroundPositionX = '0px';                      // 背景图 X
  29.             box.style.backgroundPositionY = '0px';                   // 背景图 Y
  30.         };
  31.         btn[1].onclick = function () {
  32.             // console.log('2')
  33.             box.style.backgroundPositionX = '0px';                      // 背景图 X
  34.             box.style.backgroundPositionY = '-350px';                   // 背景图 Y
  35.         };
  36.         btn[2].onclick = function () {
  37.             // console.log('3')
  38.             box.style.backgroundPositionX = '-350px';                      // 背景图 X
  39.             box.style.backgroundPositionY = '0px';                   // 背景图 Y
  40.         };
  41.         btn[3].onclick = function () {
  42.             // console.log('4')
  43.             box.style.backgroundPositionX = '-350px';                      // 背景图 X
  44.             box.style.backgroundPositionY = '-350px';                   // 背景图 Y
  45.         }
  46.     </script>
  47. </body>
  48. </html>

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

在输入框中的数据 + 1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="-">
  9.     <input type="text" name="num">
  10.     <input type="button" value="+">
  11.  
  12.     <script>
  13.         var obj = document.getElementsByTagName('input')
  14.         obj[0].onclick = function () {
  15.             obj[1].value -= 1
  16.         }
  17.          obj[2].onclick = function () {                 // 在 js 中 + 号表示字符串合并，这里 obj[1].value 是 str
  18.            obj[1].value =  Number(obj[1].value) +1
  19.         }
  20.     </script>
  21. </body>
  22. </html>

　　

局部刷新

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .test1{
  8.             height: 200px;
  9.             width: 200px;
  10.             background: skyblue;
  11.         }
  12.         .test{
  13.             width: 100%;
  14.             height: 8000px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="test1">参照</div>
  20.     <input type="button" value="登录">
  21.     <div class="test">
  22.         <!--<iframe src="http://www.taobao.com"></iframe>-->
  23.     </div>
  24.  
  25.     <script>
  26.         var btn = document.getElementsByTagName('input')[0];
  27.         btn.onclick = function (){
  28.             var box = document.getElementsByClassName('test')[0];
  29.             box.innerHTML = "<iframe style='' src=\"http://www.taobao.com/\"></iframe>"
  30.         }
  31.     </script>
  32. </body>
  33. </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. 根据txt中的文件名将文件复制到目标文件夹中

    功能如标题,之所以这么做是有的时候文件数目较多,一个一个复制太复杂了,代码如下: # -*- coding:utf-8 -*- #2018_03_18 #实现功能:根据文件名字将对应的文件复制到目标地 ...

  2. STM32F103X datasheet学习笔记---Interrupts and events

    1.前言 本章主要介绍STM32中断和事件相关的内容 2.NVIC NVIC管理着包括内核异常等中断 主要特性 68个外部中断源(不包含16个内部中断线) 可编程优先级为16级 低延迟异常和中断处理 ...

  3. ES系列十三、Elasticsearch Suggester API(自动补全）

    1.概念 1.补全api主要分为四类 Term Suggester(纠错补全,输入错误的情况下补全正确的单词) Phrase Suggester(自动补全短语,输入一个单词补全整个短语) Comple ...

  4. ODOO引用Echarts数据展示

    作为一个后端开发,首先想到的是将需要的数据进行处理反馈给前端. 具体如下: 然后就是专门的echarts模块(我这样写主要是因为echarts会用到的地方比较多,后续直接调用) 1. 2.echart ...

  5. 修改centos和ubuntu ssh远程连接端口提升系统安全性

    #修改centos服务器ssh端口 sed -i 's/#Port 22/Port 38390/' /etc/ssh/sshd_config sed -i 's/^GSSAPIAuthenticati ...

  6. Day5----------------------文件合并与文件归档

    一.文件合并 1.命令: >:覆盖式 >>:追加式 例如:cat /etc/passwd > a.txt      把/etc/passwd下的内容合并到a.txt内,若没有文 ...

  7. webstrom里面的html页面设置

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  8. mac安装navicat mysql破解版

    下载破解中文版http://m6.pc6.com/xuh6/navicat12027pre.zip 完成下载后无法正常进行安装,此时应该打开命令行执行 sudo spctl --master-disa ...

  9. laravel 集合

    最近一直在用laravel框架,比较喜欢laravel的ORM(通常我们理解的Model)...但是默认情况下,Eloquent 查询的结果总是返回 Collection 实例...所有不得不了解co ...

  10. python 全栈开发，Day5(字典,增删改查,其他操作方法)

    一.字典 字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.存储大量的数据,是关系型数据,查询数据快. 列表是从头遍历到尾字典使用二分查找 二分查找也称折半查找(Bi ...