HTML5+CSS3
关注
分享
扫一扫
ZhangXD_BLOG
坚持，就会有收获。
展开
-
css实现左边高度自适应右边高度
css样式： <style> .container { width: 960px; height: 100%; overflow: hidden; margin: 0 auto; } .left { hei...原创 2018-12-06 18:01:59 · 1104 阅读 · 0 评论 -
css font的简写规则
一、字体属性主要包括下面几个font-family，font-style，font-variant，font-weight，font-size，fontfont-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;font-variant (字...原创 2016-09-02 20:34:18 · 17830 阅读 · 0 评论 -
jQuery-链接api实现星座运势和手机号归属地查询
连接api 做一个星座运势查询。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>星座运势查询-api</title> <script src="jquery原创 2016-07-01 09:02:18 · 1031 阅读 · 0 评论 -
jQuery--jQuery动画、animate
1.隐藏和显示hide()；隐藏 show()；显示 slideDown(), slideUp(): 只会改变元素的高度 fadeIn(), fadeOut(): 只改变元素的透明度 toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的. slideToggle(): 通过高度变化来切换匹配元素的可见性. fadeTo(): ...原创 2016-06-27 21:27:47 · 335 阅读 · 0 评论 -
jQuery--jQuery创建元素、包装集的处理
1.jquery创建元素（三种方法）多个css样式：$('获取元素').css({'属性名':'属性值','属性名':'属性值'});例子：<body><button id="btn1">添加一</button><button id="btn2">添加二</button><button id=&quo原创 2016-06-27 21:26:19 · 369 阅读 · 0 评论 -
jQuery--jQuery和DOM对象互相转化、选择器
1. jQuery的简介是一个JavaScript函数库2. jQuery的优势轻量级 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性3. jQuery的使用（1.12版本）<script src="jquery.min.js"></script>4.jQuery对象和DOM对象（1）jQuery对象转为DOM对象jQ...原创 2016-06-22 15:26:47 · 825 阅读 · 0 评论 -
javascript-ajax的使用
index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax请求服务器</title></head><body>原创 2016-06-22 15:25:54 · 306 阅读 · 0 评论 -
javascript--Cookie的使用、案例刀塔传奇
Cookie的使用1、定义：是一种以文件（Cookie文件）的形式保存用户数据信息。2、写入Cookie格式：document.cookie="关键字=值[;expires=有效时间]"例子：//存cookie function saveCookie(key, content) { // "zhang" "123" va...原创 2016-06-22 15:25:11 · 515 阅读 · 0 评论 -
javascript--全选、取消全选、反选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选、取消多选、反选</title> <style type="text/css">原创 2016-06-22 15:24:31 · 317 阅读 · 0 评论 -
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight
1、.position()和.offset()jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left；jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...转载 2016-08-13 16:31:56 · 5860 阅读 · 0 评论 -
html5开发之viewport使用-屏幕适配
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍：[html] view plain c...原创 2016-09-12 15:35:22 · 6706 阅读 · 0 评论 -
table表头固定，内容可滚动问题
1.首先新建html页面body中写入： <div class="title_div" id="tdiv"> <table class="title_tb" id="tb1"> <tr> <td width="80">文件类型<原创 2017-12-28 18:06:30 · 9214 阅读 · 0 评论 -
video控制条在部分浏览器禁止显示“下载”-解决方法
1. 搜狗浏览器视频播放器会显示向下箭头的下载按钮：如图：解决方法：只需加入下面的样式video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webki...原创 2018-11-16 14:58:04 · 4002 阅读 · 2 评论 -
vue.js开发环境安装教程
一、简介Vue.js 是什么Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 ...转载 2017-06-30 14:27:19 · 898 阅读 · 0 评论 -
安装vue.js的方法
安装vue.js的方法一、简介Vue.js 是什么Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js...转载 2017-08-16 16:32:17 · 308 阅读 · 0 评论 -
Sublime Text3配置Vue 语法
下载的文件 link: https://pan.baidu.com/s/1nv7C4B3 密码: w5zs sublime菜单栏 -> 首选项 -> 浏览插件,打开Packages文件夹 把步骤1的文件解压到packages目录 sublime 中 Ctrl + Shift + P 输入 vue 回车 重启sublime 打开.vue文件 看到...转载 2017-08-18 11:21:45 · 666 阅读 · 0 评论 -
krpano-自动旋转和自动场景跳转的实现
<autorotate enabled="true" waittime="0.5" accel="1.0" speed="5.0" horizon="0.0" tofov="90" /> 通过events执行停止delayedcall和开始delayedcall的动作 <events onnewpano="转载 2017-10-18 18:45:44 · 1689 阅读 · 0 评论 -
krpano调用js方法并传参、在krpano中用JS实现视频音频播放
Krpano中的action可以调用javascript中写好的函数。主要参考krpano360的资料和new720的资料。个人感觉前者没有后者讲的清楚，后者更适合初学者一些。根据krpano调用js的方法，就可以用krpano调用js，然后用js写视频和音频。顺序是在js文件中写好要实现的功能（我的js文件名称为action.js），然后在krpano生成的tour.html中引入这个...转载 2017-10-18 18:48:05 · 2661 阅读 · 0 评论 -
krpano实践之全景图缩放，旋转，倾斜，自动旋转，VR，全屏方法-js调用
在此仅提取方法，需要时可以直接调用相关方法 /*定义控件*/var krpano = document.getElementById("krpanoSWFObject");/*获取变量*/var fov = Number(krpano.get("view.fov"));var hlookat = Number(krpano.get("view.hlookat"));var vl...转载 2017-10-30 16:59:29 · 5239 阅读 · 0 评论 -
krpano调用网页js函数
原创 2017-10-30 17:56:55 · 1694 阅读 · 0 评论 -
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片1、 background-origin：设置背景图片的起始原点background-origin:border-box;------背景图片从边框开始显示background-origin:padding-bax;-----背景图片从内边距开始显示（默认）background-orign:content-box;------背景图片从内容区域开始显示 例子：...原创 2016-05-31 20:20:55 · 1923 阅读 · 0 评论 -
HTML基础知识二（页面属性、注释、表格、设置表框颜色）
1、 页面属性：（1） body属性bgcolor：设置背景颜色background：设置背景图片 如果两个同时设置，优先级读取background例子： （2） 注释解释某段内容：<!—解释内容-->注释一段内容：<!—注释内容--> 2、 表格<table></table&g...原创 2016-05-09 20:56:59 · 4406 阅读 · 0 评论 -
HTML基础知识一（HTML、常见方式、文档结构、<meta>、 网站文件命名、文本修饰、文本样式、段落标记、居中标记、水平线标记、特殊字符、列表、图像）
1、 HTML全称：Hyper Text Mark-up Language超文本标记语言2、 发展史：3、 常见方式：方法一、记事本方法二：Dreamweaver方法三：web浏览器动态生成4、 文档结构：<html></html>网站文件的开始和结束<head></head>网站文件的头部信息<titl...原创 2016-05-09 20:55:09 · 2425 阅读 · 0 评论 -
javascript--贪食蛇（完整版-逻辑思路）
逻辑思路：创建表格，目的画线分割 创建地图div，让蛇在上面移动 创建所有的块，蛇头、身体、食物创建的蛇头、身体、食物div，添加到地图中 蛇头、身体、食物随机产生坐标 设置蛇头的初始方向 设置按键改变蛇头方向 开启定时器，自动移动蛇头 4.食物判断是否吃到食物（蛇头的left和top等于食物的left和top） 碰撞则随机产生食物（随机坐标） 5.身...原创 2016-06-22 15:21:45 · 7048 阅读 · 0 评论 -
javascript--爱奇艺网站首页（轮播图）
实现一个爱奇艺网站首页的轮播图： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>爱奇艺导航</title> <style type="text/css&原创 2016-06-14 08:54:32 · 4153 阅读 · 2 评论 -
javascript--键值或按钮控制div移动、轮播
1、在屏幕添加四个按钮，上下左右，来控制一个div的移动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击按钮操作上下移动</title></head>原创 2016-06-14 08:53:42 · 794 阅读 · 0 评论 -
javascript--DOM对象实例集合
在HTML中添加3个对象1.按钮 显示2.按钮 隐藏3.DIV当点击显示时候div显示当点击隐藏div隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div显示隐藏</title&原创 2016-06-14 08:52:28 · 448 阅读 · 0 评论 -
CSS基础知识-五（CSS定位、左右布局方法）
一、CSS定位1、Float:left / right /none;------左浮动/右浮动/无2、Position:absolute;----绝对定位3、Position:relative;-----相对定位（top/right/bottom/left）注意：父级（大div） 子级（子div）1、 Relelative原创 2016-05-31 20:12:18 · 3311 阅读 · 1 评论 -
HTML5+CSS3-文档类型声明、新增标签
H5+CSS31、 约等于HTML+CSS3+javascript+api(接口)2、 新认识：兼容性、实用性和用户优先化繁为简3、 文档类型声明：<!doctypehtml>-------大写也可以<html><head><meta charset=”utf-8”>-----字符编码设置<title&g...原创 2016-05-31 20:13:37 · 1672 阅读 · 0 评论 -
HTML5+CSS3-浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角
CSS31、 不同的浏览器需要不同的前缀（浏览器的私有属性）前缀 浏览器-webkit chrome/safair-moz firefox-ms IE-o opera2、新特性 （1）：CSS选择器 （2）：新的颜色制式和透明设定...原创 2016-05-31 20:14:23 · 1554 阅读 · 0 评论 -
HTML5+CSS3-文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩
（6）text-align-----文本对齐方式A、text-align :Left;左对齐B、text-align :right;右对齐C、text-align :center;居中D、text-align :justify;内容两端对齐（仅火狐有效果）E、文字从左到右Direction:rtl;--（文档流变成从右向左）text-align :start;（内容对齐...原创 2016-05-31 20:19:06 · 1692 阅读 · 0 评论 -
HTML5+CSS3-背景渐变、多栏布局column
（13）背景渐变语法：background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000));第一个参数：渐变类型---线性渐变第二个参数：分别为 X,Y轴方向渐变的起始位置第三个参数：分别为 X,Y轴方向渐变的终止位置第四个参数：设置起始位置的颜色第五个参数：设置终止位置的颜色 （14）column--...原创 2016-05-31 20:20:00 · 1651 阅读 · 0 评论 -
javascript--javascript表单处理
Javascript表单处理1、javascript事件onclick-----鼠标点击onchange-------文本内容或下拉菜单中的选项发生改变onfocus-----获得焦点onblur------失去焦点onMouseOver------鼠标滑过onMouseOut-----鼠标离开onMouseMove-------鼠标移动onLoad------网页文档加载（...原创 2016-06-22 15:23:18 · 316 阅读 · 0 评论 -
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，转载 2016-08-18 21:20:24 · 589 阅读 · 0 评论 -
移动端-音乐自动播放-微信测试可行
<audio src="image/music.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>js:要放到audio下面<script> function audioAutoPlay(id){ var audi原创 2018-08-14 18:23:26 · 618 阅读 · 0 评论 -
移动端页面-日历调用
测试ios和安卓端都可用：代码如下html:<div class="head"> <a class="btn-1"> <input type="button" id="start_date"/> </a> </div>原创 2018-08-14 17:20:07 · 1985 阅读 · 0 评论 -
移动端上传图片--调用手机的相册和相机
网上百度找到一个方法不错，借鉴：代码如下html:<div class="head"> <a class="btn-2"> <input type="file" accept="image/*" id="upload" name="upload"> <原创 2018-08-14 17:11:56 · 8587 阅读 · 1 评论 -
解决360浏览器中input框字体颜色不变问题
1. html页面： <form> <div> <ul> <li> <input type="text" name="username" placeholder="用户名">原创 2017-12-28 17:43:02 · 614 阅读 · 0 评论 -
html5shiv.js让IE6、IE7、IE8支持html5新标签
一、插件介绍用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js...转载 2017-09-12 10:59:00 · 389 阅读 · 0 评论 -
网页中怎么插入flash的代码
做页面前端的过程中经常需要在页面中插入flash，那么你知道如何在网页中插入flash吗？下面本文将把这一段标准的代码贴在下面，以备需要的时候能拿来用，毕竟这种代码超长，靠记忆是很难的。OK，具体如何在网页中插入flash的代码片段如下： <OBJECT codeBase="http://download.macromedia.com/pub/shockwave/cabs/flas...原创 2017-06-12 14:39:50 · 5272 阅读 · 0 评论