页面相关
文章平均质量分 71
sunqian_happy
这个作者很懒,什么都没留下…
展开
-
Chart.js 中文文档(整理)
Chart.js 中文文档(整理)Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。步骤:1、在HTML中引入Chart.js文件2、在body内使用canvas,设置ID以及相应样式3、获取canvas的ID、设置画笔 var myChart = document.getElementById("myChart"); if (原创 2016-01-18 16:58:52 · 14513 阅读 · 2 评论 -
CSS+html:天涯网页仿照制作
CSS+html:天涯网页仿照制作 天涯论坛 body { width: 1239px; height: 804px; margin: 0 auto; } #p1 { background原创 2015-08-03 22:57:00 · 1761 阅读 · 0 评论 -
动画---box-shadow
本文从《How to animate “box-shadow” with silky smooth performance》编译而来,英文没问题的同学,看原文找原味。 案例效果如下图所示,具体效果请移步demo。 为提高动画性能,应该减少页面的repaint次数。因此相对于直接动画“box-shadow”属性来说,使用伪对象的方式预先定义好阴影,然后动画opacity实现的方式性能转载 2015-12-14 16:02:41 · 414 阅读 · 0 评论 -
使用js动态计算给文档的fopnt-size 动态赋值
rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题,但是每一个文件都引用一大串的font-size 值很繁琐,而且值也不能达到连续的效果。就使用js动态计算给文档的fopnt-size 动态赋值解决问题。/** * [以iPhone6的设计稿为例js动态设置文转载 2016-01-07 16:00:39 · 585 阅读 · 0 评论 -
CSS3D变换/立方体旋转效果
3D变换基于几个比较重要的属性,perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 perspective视镜 perspective-origin视镜基点 x:left/center/right/length/% y:top/center/bottom/length/% transf转载 2016-04-25 12:19:35 · 1411 阅读 · 0 评论 -
表单标签动画(CSS)
搭建根基我们同样使用了haml来简化html书写。#container -(1..15).each do %div.row %label %input{:type=>"text"} %span姓名 %label %input{:type=>"text"} %span性别 %l转载 2016-01-13 14:28:33 · 665 阅读 · 0 评论 -
SVG格式
什么是SVG格式? SVG可以算是目前比较火的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。原创 2016-12-17 15:20:34 · 879 阅读 · 0 评论 -
原生js代码实现图片放大境效果
采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果。第一种是仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果。html>转载 2016-11-02 16:14:57 · 2654 阅读 · 0 评论 -
CSS3 3D旋转透视
立方体 3D 旋转3D 透视照片墙跳跃的音符可能上面的效果对精通 CSS3 的而言小菜一碟,写本文的目的也是我自己学习积累的一个过程,感兴趣的就可以一起往下看啦。其实 CSS3 效果真的很强大,上面的效果都是纯 CSS 实现,个人感觉越是深入 CSS 的学习,越是觉得自己不懂 CSS转载 2016-07-18 10:10:56 · 1107 阅读 · 0 评论 -
HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312转载 2016-06-14 15:45:18 · 619 阅读 · 0 评论 -
HTTP 头部信息和错误码汇总详细解释
前后端分离的请求测试,遇到了一个406错误, 无法接受,是HTTP头部信息里的Accept:application/json 这个Accept 导致的, 后端设置了只允许application/json 这种形式,so前端模拟请求的时候,也要和后端沟通好,然后发送请求参数通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。客户端向服务器发送一个请求,请求头包含转载 2016-06-06 15:58:53 · 758 阅读 · 0 评论 -
CSS+html:魔兽世界网页仿制
魔兽世界网页仿制 魔兽世界 body { margin: 0px; padding: 0px; } #p1 { position: absolute; background-image: u原创 2015-08-04 23:17:34 · 2545 阅读 · 0 评论 -
博客网页制作
博客网页制作首页: 博客首页 body { margin-top: 0px; } #p0 { background-image: url("background1.jpg"); background-size:原创 2015-08-08 17:32:57 · 1016 阅读 · 1 评论 -
CSS设置元素背景透明,其内的文字不透明
具体代码如下:背景设置为透明,其中的文字不透明*{ padding: 0; margin: 0;}body{ padding: 50px; background: url(img/bg.png) 0 0 repeat;}.demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* I原创 2017-01-22 15:18:50 · 949 阅读 · 0 评论 -
Highcharts图表导出excel文件
关于Highcharts的详细情况,在另一篇文章中有介绍。这篇主要介绍如何利用插件下载excel文件。插件:script src="http://code.highcharts.com/highcharts.js">script>script src="http://code.highcharts.com/modules/exporting.js">script>script sr原创 2017-02-18 11:57:45 · 6803 阅读 · 0 评论 -
Highcharts简介
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。原创 2017-02-18 11:41:30 · 1256 阅读 · 0 评论 -
沿着弧线拖拽滑动动画
因为在项目中遇到一个问题,即需要在移动端页面上滑动滑块,实现在弧形的线条上调节数值的大小。一时找不到合适的的办法,终于发现一个jQuery的插件可以完美的解决这个问题,真是帮了我的大忙。roundslider是一个jQuery插件,允许用户通过拖动滑块手柄来选择值或值的范围。这是他的官网截图:弧形的控件样式很多,也可以根据自己的实际需求更改样式。当然他也支持事件的处原创 2017-02-17 17:47:46 · 2186 阅读 · 0 评论 -
CSS渐变
一.线性渐变HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变。 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前,这种效果必须采用图片才能实现的。首先,我们先看一下它的样式表,如下:属性值linear-gradient(方位, 起始色, 末尾色)方位可转载 2017-01-05 12:40:17 · 716 阅读 · 0 评论 -
table中设置tr行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属转载 2016-01-09 17:02:05 · 9318 阅读 · 0 评论 -
Bootstrap图片轮播
Bootstrap提供了carousel插件,实现图片轮播非常方便。代码html lang="en">head> meta charset="UTF-8"> title>Documenttitle> link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="sty转载 2016-01-12 10:05:31 · 659 阅读 · 0 评论 -
定位,画布,BFC的使用
- 地图- 画布- BFC用法地图 1)判断浏览器是否支持地理定位navigator.geolocation,Geolocation是window.navigator下面的一个对象, 该对象提供了实现地理位置定位的接口。 if (navigator.geolocation) { aler原创 2015-09-27 10:44:25 · 822 阅读 · 0 评论 -
客户端网页编程--第二章(部分)、第三章
第二章(部分)XHTML基础插入表格状数据 实训人员名单实训人员名单 阶段 姓名 性别 出生日期 学历 专业 初级原创 2015-07-28 22:34:34 · 289 阅读 · 0 评论 -
客户端网页编程--第一章、第二章(部分)
第一章 Web应用程序开发原理主机/哑终端的集中计算模式:使用者一般通过只有一个屏幕、一个键盘和一根主机连接线的“哑终端”与主机的应用程序进行交互。这种模式一般称为主机/终端模式(Mainframe/Terminal)。客户机/服务器计算模式(Client/Server,简称C/S):优点:信息共享性好,网络信息传输量小缺点:不易维护,用户操作界面风格不一致,能够处理的数据类型不易原创 2015-07-27 20:24:40 · 467 阅读 · 0 评论 -
HTML5-炫丽的时钟效果Canvas绘图与动画
HTML5-炫丽的时钟效果Canvas绘图与动画 .linux903,.linux902 {display:none!important;display:none} var WINDOW_WIDTH=1024; var WINDOW_HEIGHT=600;转载 2016-05-28 16:20:28 · 498 阅读 · 0 评论 -
图片放大镜
放大镜练习 * { margin: 0px; padding: 0px; } #small { width: 400px; height: 400px;转载 2016-05-28 16:02:01 · 397 阅读 · 0 评论 -
BOM学习
一window对象概述 BOM的核心对象是Window对象,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其创建window对象。所有浏览器都支持window对象,它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 windo转载 2015-12-14 16:11:02 · 399 阅读 · 0 评论 -
html5进度条插件
(function () { window.H5ProgressBar = function (obj) { this.height = obj.height; this.width = obj.width; this.speed = obj.speed; }; //在界面上转载 2015-12-16 14:44:47 · 795 阅读 · 0 评论 -
BFC
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC布局规则:BFC布局规则:内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BF原创 2015-12-20 13:24:54 · 339 阅读 · 0 评论 -
canvas在线画图
在线画图JavaScript code?123456789101112131415161718192021222324252627转载 2016-01-11 16:02:43 · 824 阅读 · 0 评论 -
二级多菜单
> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title>导航菜单title> style type="text/css"> *{ margin:0; pa转载 2016-01-11 17:27:28 · 500 阅读 · 0 评论 -
Bootstrap自适应导航栏
导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。默认的导航栏1、向 标签添加 class .navbar、.navbar-default。2、向上面的元素添加 role="navigation",有助于增加可访问性。3、向 元素添加一个标题 cla转载 2016-01-11 17:31:11 · 46060 阅读 · 5 评论 -
canvas圆周动画
圆周运动JavaScript code?123456789101112131415161718192021222324252627转载 2016-01-12 12:51:02 · 666 阅读 · 0 评论 -
HTML5调用手机摄像头
> html> head> meta charset="UTF-8"> title>Insert title heretitle> head> body> video id="video" autoplay=""style='width:640px;height:480px'>video> div>button id='picture' style=转载 2016-01-12 17:57:12 · 532 阅读 · 0 评论 -
HTML5新格式
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。标签,定义文档中的节。比如章节、页眉、页脚或文档中的其它部原创 2016-01-14 17:10:43 · 386 阅读 · 0 评论 -
HTML5中meta属性的使用
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码meta charset='utf-8'>12、声明文档的兼容模式meta http-equiv="X-UA-Compatible" con转载 2016-01-19 17:31:49 · 517 阅读 · 0 评论 -
使用canvas画一个可以动的时钟
先给个效果图,画的比较丑,大家可以自己美化一下,直接上代码:[html] view plaincopy> meta charset="utf-8"> html> body> canvas width="500" height="500" id="clock转载 2015-11-08 12:01:24 · 487 阅读 · 0 评论 -
利用JavaScript实现鼠标在文字上悬浮时弹出悬浮层
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?代码:[html] view plaincopy> head> meta http-equiv="Content-Type" content="text/ht转载 2015-11-08 11:55:19 · 3053 阅读 · 0 评论 -
Html5用户注册自动校验
/*-------------------------------------------------------------------------- jq-idealforms 2.1 * Author: Cedric Ruiz * License: GPL or MIT * Demo: http://elclanrs.github.com/jq-idealfo转载 2016-05-28 15:53:42 · 538 阅读 · 0 评论 -
CSS多列布局
多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布局。灵活使用多列布局特性,可以实现在多列中显示文字和图片,从而节省大量的网页空间。如果网页上的文字很长,多列布局特性就能够发挥它的用武之地。 兼容性参考:http://www.w3.org/TR/css3-multicol/columns属性–定义多列布局 columns是多列布局特性的基本属性,类似边框转载 2016-04-29 14:25:57 · 706 阅读 · 0 评论 -
Canvas绘制圆角矩形
Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处,然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w,y转载 2016-04-27 14:32:04 · 1335 阅读 · 0 评论