• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
 






学会五大阵法就会JS

 
 

Powered by 博客园
博客园 | 首页 | 新随笔 | 联系 | 订阅 订阅 | 管理

09 2017 档案

 
JS小功能x系列6文字自动滚动
摘要：11111111111111111 222222222222222222 3333333333333333333 4444444444444444 5555555555... 阅读全文
posted @ 2017-09-28 20:21 天地人物事 阅读(367) 评论(0) 推荐(0)
JS小功能系列7自动打字
摘要：<style> textarea{ width:400px; height:100px; } #text{ width:400px; height:200px; border:1px solid blue; } </style> </head> <body> <div> <input type="t 阅读全文
posted @ 2017-09-27 20:26 天地人物事 阅读(260) 评论(0) 推荐(0)
JS小功能系列6折叠
摘要：<style> * { margin: 0; padding: 0; } li { list-style-type: none; } .classify>ul>li { width: 200px; text-indent: 20px; background: blue; } .classify>ul 阅读全文
posted @ 2017-09-27 20:25 天地人物事 阅读(204) 评论(0) 推荐(0)
JS小功能系列5图片左右移动
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2017-09-27 20:24 天地人物事 阅读(471) 评论(0) 推荐(0)
JS小功能系列4图片轮播综合数字轮播，顺时针逆时针，自动轮播
摘要：<style> * { margin: 0; padding: 0; } a { text-decoration: none } li { list-style-type: none; } #coural { width: 360px; height: 200px; position: relati 阅读全文
posted @ 2017-09-27 20:23 天地人物事 阅读(294) 评论(0) 推荐(0)
JS小功能系列3时钟
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2017-09-27 20:21 天地人物事 阅读(159) 评论(0) 推荐(0)
JS小功能系列2商品计算
摘要：<style> li{ list-style-type:none; } li span { width: 30px; text-align: center; display: inline-block; } </style> </head> <body> <ul class="ul"> <li> < 阅读全文
posted @ 2017-09-27 20:20 天地人物事 阅读(326) 评论(0) 推荐(0)
JS小功能系列1换一批
摘要：<style> * { margin: 0; padding: 0; } li { list-style-type: none; } .l { float: left; } .r { float: right; } .c:after { clear: both; width: 0; height: 阅读全文
posted @ 2017-09-27 20:19 天地人物事 阅读(818) 评论(0) 推荐(0)
JS json数据
摘要： 阅读全文
posted @ 2017-09-25 19:02 天地人物事 阅读(248) 评论(0) 推荐(0)
JS隔行变色，鼠标悬停变色
摘要：<style> *{ margin:0; padding:0; } div{ width:300px; height:50px; margin:20px; } .activeColor{ background: orange; } .odd-color{ background:#ccc; } .ev 阅读全文
posted @ 2017-09-25 11:40 天地人物事 阅读(477) 评论(0) 推荐(0)
JS选项卡
摘要：<style> * { margin: 0; padding: 0; } #choose{ width:400px; margin:30px; } #choose ul li{ float: left; padding: 5px 10px; border-top:3px solid transpar 阅读全文
posted @ 2017-09-25 11:22 天地人物事 阅读(179) 评论(0) 推荐(0)
JS字符串的方法
摘要：length 字符串的长度 str.concat(str) 连接字符串，使用+运算符连接更简单str.charAt(index) 返回指定index的字符str.charCodeAt() 返回在指定的位置的字符的 Unicode 编码。str.indexOf(str,fromIndex) 返回指定字 阅读全文
posted @ 2017-09-22 22:39 天地人物事 阅读(102) 评论(0) 推荐(0)
JS数组的方法
摘要：arr.concat() 连接n个数组或元素，并返回数组结果arr.join() 在数组中两个元素之间加入一个元素 并返回数组结果arr.toString() 将数组转换成字符串，并返回结果【等价于arr.join()】 arr.sort() 对数组中的元素进行排序【0-9，a-z】arr.reve 阅读全文
posted @ 2017-09-22 22:38 天地人物事 阅读(124) 评论(0) 推荐(0)
JS日期的方法
摘要： 阅读全文
posted @ 2017-09-22 22:37 天地人物事 阅读(140) 评论(0) 推荐(0)
JS最原始封装素数，创建表格，改变样式，颜色等
摘要：变宽 变高 变色 变成红色 变成绿色 变成蓝色 切换图片 顺时针切换字母 逆时针切换字母 A ... 阅读全文
posted @ 2017-09-22 20:19 天地人物事 阅读(165) 评论(0) 推荐(0)
CS href,src,url混淆问题
摘要：href,src,url <a href=""></a><img src=""><link href="" rel="stylesheet"><script src=""></script>backgroun:url(''); 阅读全文
posted @ 2017-09-19 20:49 天地人物事 阅读(200) 评论(0) 推荐(0)
CS菜单常用布局及三角形
摘要：<style> /* 初始化样式 */ * { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style-type: none; } input, button { outline: none; } .l { floa 阅读全文
posted @ 2017-09-19 19:23 天地人物事 阅读(332) 评论(0) 推荐(0)
CS两种添加图标布局
摘要：<style> /* 初始化样式 */ * { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style-type: none; } input, button { outline: none; } .l { floa 阅读全文
posted @ 2017-09-19 15:58 天地人物事 阅读(613) 评论(0) 推荐(0)
CS两种图片文字常用布局
摘要：... 阅读全文
posted @ 2017-09-19 15:21 天地人物事 阅读(609) 评论(0) 推荐(0)
CSS div的三种结构水平垂直包含margin的计算
摘要：结论: 1：水平结构第一个盒子的 右边距等于 左边盒子的margin-right +右边盒子的margin-left;【相加】 2：垂直结构第一个盒子的 下边距等于 上边盒子的margin-bottom和下边盒子的margin-top比较一下，【取最大值】 3：包含结构子元素的margin-left 阅读全文
posted @ 2017-09-16 14:54 天地人物事 阅读(712) 评论(0) 推荐(0)
CSS display样式
摘要：1:块级元素独占一行 2:块级元素可设width,height 3:块级元素可用margin/padding:left/right/top/bottom h3 块级元素 p 块级元素 ul li 块级元素 ... 阅读全文
posted @ 2017-09-16 13:31 天地人物事 阅读(268) 评论(0) 推荐(0)
CSS行高line-height解释
摘要：“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。 vertical-align中有top,middle,basel 阅读全文
posted @ 2017-09-16 11:40 天地人物事 阅读(318) 评论(0) 推荐(0)
CS和CS3知识点
摘要：【1：CS】 -o-：代表opera浏览器私有属性（Opera挪威浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认）-ms-：代表IE浏览器私有属性-moz-：代表FireFox【简称FF】浏览器私有属性 （moz代表的是Firefox的开发商Mozill 阅读全文
posted @ 2017-09-16 11:01 天地人物事 阅读(568) 评论(0) 推荐(0)
HTML图片<img>标签空白解决方法
摘要：图片垂直结构有空白 首先我们要知道这部分空白产生的原因。图片默认的vertical-align:baseline(基线) 也就是字母X的下边距，如下图 可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里 阅读全文
posted @ 2017-09-16 10:26 天地人物事 阅读(5833) 评论(0) 推荐(0)
CS清除浮动
摘要：为什么要清楚i浮动呢，这得从布局说起，布局简单说就是水平垂直结构 当水平时，用display：block；变成垂直结构 当垂直时，用float:left/right;变成水平结构 浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度 阅读全文
posted @ 2017-09-14 19:31 天地人物事 阅读(458) 评论(0) 推荐(0)
CSS列表样式
摘要：<style> .ul1 { list-style-type: circle } .ul2{ list-style-type:square; } .ol1{ list-style-type:upper-roman; } .ol2{ list-style-type:none; } .ol3{ list 阅读全文
posted @ 2017-09-12 14:47 天地人物事 阅读(259) 评论(0) 推荐(0)
CSS边框样式
摘要：<style> .p1{ border-width:1px; border-style:solid; border-color:#f00; } .p2{ border:10px solid rgb(255,0,0); } .p3{ border:1px dotted #f00; } .p4{ bor 阅读全文
posted @ 2017-09-12 14:46 天地人物事 阅读(178) 评论(0) 推荐(0)
CSS颜色样式
摘要：<style> .p1{ color:red; } .p2{ color:green; } .p3{ color:blue; } .p4{ color:#ff0000; } .p5{ color:#f00; } .p6{ color:rgb(255,0,0); } .p7{ color:rgb(17 阅读全文
posted @ 2017-09-12 14:45 天地人物事 阅读(770) 评论(0) 推荐(0)
CSS字体样式
摘要：字体样式变成斜体font-style:italic; 字体样式加粗font-weight:bold; 字体样式变大font-size:20px 字体样式变大font-size:1em;1em默认是16px 字体样式font-family:"宋体“ 字体样式font-family:"微软雅黑“ 阅读全文
posted @ 2017-09-12 14:39 天地人物事 阅读(221) 评论(0) 推荐(0)
CSS文本样式
摘要：文本样式居中text-align:center; 文本样式缩进text-indent:100px; 文本样式装饰删除线text-decoration:line-through; 文本样式上划线text-decoration:overline; 文本样式下划线text-decoration:underline; 阅读全文
posted @ 2017-09-12 14:35 天地人物事 阅读(168) 评论(0) 推荐(0)
HTML
摘要：标题标签<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5><h5>,<h6><h6>段落标签<p></p>,<span><span>水平线标签<hr/>换行标签<br/>加粗斜体<strong></strong>,<em></em><b></b>,<i>< 阅读全文
posted @ 2017-09-11 19:30 天地人物事 阅读(295) 评论(0) 推荐(0)