前端
关注
分享
扫一扫
Crazy Monkey
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
jquery.cookie() 方法的使用(读取、写入、删除)
新添加一个会话 cookie： $.cookie('the_cookie', 'the_value'); 注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。 2.创建一个cookie并设置有效时间为 7天: $.cookie('the_cookie', 'the_value', { expi...原创 2018-10-30 12:01:27 · 200 阅读 · 0 评论 -
UI设计
1.背景 background:color ,image(position、repeat、size、attachment、all-range),background:#fff url(' ') [ top left] [repeat: no-repeat、cover、] [attachment:fixed]2.透明度 opacity:0.8 filter:al...原创 2018-10-19 18:05:49 · 462 阅读 · 0 评论 -
轮播图详解
我理解的轮播图思想是这样：一些图片按指定顺序依次播放，就像一幅卷轴徐徐打开一般，一手打开，一手又卷起。所以可以将所要轮播的图片“拼在一起”构成一幅大图，在窗口前拉动。每个黑边框模拟一张需要轮播的图片，一组黑边框构成一幅大图，红色边框模拟窗口，代表每次能显示的区域。1.构建窗口.container { position: relative; width: 1...原创 2018-10-15 01:59:51 · 4360 阅读 · 0 评论 -
JavaScript Cookie
JavaScript CookieCookie 用于存储 web 页面的用户信息。什么是 Cookie？Cookie 是一些数据, 存储于你电脑上的文本文件中(硬盘中)。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 web 页面时，他的名字可以记录在 coo...原创 2018-10-15 00:26:43 · 182 阅读 · 0 评论 -
多重样式优先级深入概念
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。优先级顺序下列是一份优先级逐级增加的选择器列表：通用选择器（*） 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式!important 规则例外...原创 2018-10-14 23:46:51 · 286 阅读 · 0 评论 -
CSS 创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观...原创 2018-10-14 23:46:57 · 568 阅读 · 0 评论 -
css选择器
id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":<!DOCTYPE html><html><head><style>#para1{ text-align:...原创 2018-10-14 23:47:04 · 230 阅读 · 0 评论 -
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，...原创 2018-10-14 23:47:10 · 237 阅读 · 0 评论 -
html 与 htm 的区别
前者是超文本标记(Hypertext Markup)后者是超文本标记语言(Hypertext Markup Language)可以说 htm = html同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个链接的）那为什么出现两种文件格式呢？ht...原创 2018-10-13 23:29:57 · 278 阅读 · 0 评论 -
前端编程注意事项
1.URL 字符编码URL 只能使用 ASCII 字符集.来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。 2.在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用...原创 2018-10-13 23:30:15 · 294 阅读 · 0 评论 -
HTML 实体字符
HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。ISO-8859-1 的较低部分（从 1 到 127 之间的代码）是最初的 7 比特 ASCII。ISO-8859-1 的较高部分（从 160 到 255 之间的代码）全都有实体名称。这些符号中的大多数都可以在不进行实体引用的情况下使用，但是实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。...原创 2018-10-13 23:27:29 · 208 阅读 · 0 评论 -
HTML5 表单元素
HTML5 有以下新的表单元素:<datalist> <keygen> <output><datalist> 元素<datalist> 元素规定输入域的选项列表。<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：...原创 2018-10-13 23:27:43 · 230 阅读 · 0 评论 -
HTML5 新的 Input 类型
Input 类型: colorcolor 类型用在input字段主要用于选取颜色<form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"><原创 2018-10-13 23:27:59 · 1893 阅读 · 0 评论 -
HTML5 Video(视频)和Audio(音频)
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video原创 2018-10-13 23:28:30 · 865 阅读 · 0 评论 -
HTML5 Geolocation（地理定位）
定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。getCurrentPosition() 方法来获得用户的位置。showPosition() 函数获得并显示经度和纬度<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>...原创 2018-10-13 23:29:02 · 604 阅读 · 0 评论 -
HTML5 拖放（Drag 和 Drop）
拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title><sty原创 2018-10-13 23:29:34 · 937 阅读 · 0 评论 -
HTML5 内联 SVG
什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准SVG优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和...原创 2018-10-13 23:28:10 · 165 阅读 · 0 评论 -
HTML5 Canvas
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。什么是 canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你...原创 2018-10-13 23:29:46 · 216 阅读 · 0 评论 -
HTML 速查列表
HTML 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>基本标签（Basic Tags）<h原创 2018-10-14 22:07:47 · 189 阅读 · 0 评论 -
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。...原创 2018-10-14 23:47:18 · 334 阅读 · 0 评论 -
HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。什么是应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载...原创 2018-10-14 23:47:25 · 358 阅读 · 0 评论 -
百度首页制作经验总结
通过亲自对百度首页布局，对网页布局方法及步骤有了更深刻的认识：在正式进入敲写代码前，一定要先对网页各功能部位进行大体布局，千万不可未思考明白就先敲代码，然后逻辑越来越不清楚，最后不是推倒重做，就是漏洞百出却又难以找出。整体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8" />...原创 2018-09-21 02:40:21 · 699 阅读 · 0 评论 -
HTML5中的iframe标签
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。src:src 属性规定在 iframe 中显示的文档的 URL;name:设置该iframe的名字；scrolling：scrolling属性规定是否在 iframe 中显示滚动条；frameborder：frameborder属性规定是否显示 iframe 周围的边框；srcdoc：srcdoc 属性规定页面...原创 2018-09-24 18:40:14 · 5227 阅读 · 1 评论 -
javascript中的let
JavaScript中使用var定义变量可能存在的问题:1. var定义的变量没有块作用域 2.var定义的全局变量会自动添加全局window对象的属性3.var定义的变量会提前装载 对于问题1： <script type="text/javascript"> for( let i = 0;i<10;i++){ consol...原创 2018-09-24 18:18:48 · 907 阅读 · 0 评论 -
javascript数据类型和变量
js是弱类型语言，支持变量声明，存在作用范围，有局部变量和全局变量之分。1.定义变量隐式定义：直接给变量赋值；现实定义：使用var关键字定义变量。 隐式定义：<script type="text/javascript"> a="See me"; alert(a);</script>显示定义：<script type...原创 2018-09-24 17:59:04 · 301 阅读 · 0 评论 -
css盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 当您指定一个CSS元素的宽度...原创 2018-09-24 17:06:35 · 274 阅读 · 0 评论 -
QQ空间仿制
注意事项：1.先布局，后操作；2.合理使用clear清除悬浮；3.发表说说的文字框使用<textarea.../>更合理，为了使文字定位到左上角输入，标签中间不得有空格 效果图： 源码：<!DOCTYPE html><html><head><title>Qzone</title>...原创 2018-09-24 16:35:58 · 867 阅读 · 1 评论 -
简单相册制作
此次QQ空间相册仿制主要是为了练习简单页面布局，即合理安排每个div块的位置，制作出美观的界面效果。显示效果如下：源码：<html><head><title>Qzone </title><style> .div_top{ width:100%; height:56px; background-color...原创 2018-09-24 15:05:43 · 1162 阅读 · 0 评论 -
canvas绘图
canvas绘图是HTML5新增的功能，配合js可以完成诸多绘制功能，如开发组件。首先通过<canvas.../>定义一张画布，获取CanvasRendingContext2D对象，然后调用CanvasRendingContext2D的方法进行绘图。常用元素如下：fillRect():填充一个矩形区域；strokeRect：绘制一个矩形边框；beginPath()/cl...原创 2018-09-24 15:00:21 · 426 阅读 · 0 评论 -
菜鸟教程首页制作经验总结
之前做了百度首页，比较简洁，逻辑清晰；虽然菜鸟教程首页的复杂度比百度首页高一些，但只要遵循先整体布局再动手敲代码的原则，依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下：1.导航栏可通过部署div块完成，也可以通过ul-li列表完成，尤其利用后种方法时，要将ul的padding和margin设为0，否则导航栏内的首个元素不能靠向最左；2.导航栏元素下方的三角可通过多种方式设置，...原创 2018-09-21 03:09:38 · 1748 阅读 · 0 评论 -
HTML5表单
HTML通过表单向服务器提交请求，主要有两种方式、；GET和POST两种。GET：会将请求的参数的名和值转换为字符串，附在原URL之后，请求传输的数据量小，通过浏览器一般不大于2KB,非浏览器可大于2KB；POST：不会将请求的参数的名和值转换为字符串放在URL，而是放在HTML HEADER中，请求传输的数据量大，安全性高。1.基本元素<form.../>:用于生成form表...原创 2018-09-21 12:29:14 · 613 阅读 · 0 评论 -
使用a元素添加超链接和锚点
href:指向超链接所连接的另一资源；target：指定使用框架集中的哪个框架来装载另一个资源，有_self、_blank、_top、_parent，分别代表使用自身、新窗口。顶层框架、父框架来装载新资源；download:用于让用户下载目标链接所指向的资源；1.超链接示例：<!DOCTYPE html><html><head> <...原创 2018-10-07 22:32:40 · 1451 阅读 · 0 评论 -
HTML5 Web SQL 数据库
核心方法以下是规范中定义的三个核心方法：openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。 transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。 executeSql：这个方法用于执行实际的 SQL 查询。打开数据库我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会...原创 2018-10-15 00:17:49 · 389 阅读 · 0 评论 -
sessionStorage
什么是 HTML5 Web 存储?使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。localStorage 和 sessionSt...原创 2018-10-14 23:47:53 · 362 阅读 · 0 评论 -
localStorage
客户端存储数据的两个对象为：localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:if(typeof(Storage)!==...原创 2018-10-14 23:47:46 · 297 阅读 · 0 评论 -
HTML5 语义元素
语义= 意义语义元素 = 有意义的元素什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.<section> 元素&l...原创 2018-10-15 00:17:55 · 555 阅读 · 0 评论 -
HTML5 表单属性
autocomplete 属性autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。注意: autocomplete 适用于 <form> 标签，以及以下类型的 <i...原创 2018-10-14 23:47:40 · 370 阅读 · 0 评论 -
HTML5保留的通用属性
id:元素唯一标识<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; char原创 2018-10-07 22:32:15 · 393 阅读 · 0 评论 -
通过img的map图片映射
1.创建分区链接的图片<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; ch原创 2018-10-07 22:31:48 · 926 阅读 · 0 评论 -
URL(统一资源定位符)
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。scheme://host.domain:post/path/filename scheme:指定因特网服务的类型。domain:指定因特网域名，比如：baidu.com、jd.com等；...原创 2018-10-07 22:32:30 · 2117 阅读 · 0 评论