html5+css3
19年,重新开始写
求学之路,泛结良师,广交益友
展开
-
vue.js使用总结
Vue.js简介:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件Vue.js的核心库只关注视图层vue.js的实例化实例化vue.js对象的方式:通过vue的构造器new Vue({options})获取对象的相关数据可以通过.来实现,如果想要获取options的数据比如el,data,methods,f原创 2017-07-19 19:50:10 · 938 阅读 · 0 评论 -
bootstrap的tooltip提示
tooltip提示相关声明式属性的作用介绍data-toggle: tooltip固定值 data-original-title:目前来看貌似没啥大用 title:提示的内容 data-placement:指定提示显示的方向 <div class="container"> <button type="button" class="btn btn-default" data原创 2017-05-04 00:37:13 · 2647 阅读 · 0 评论 -
bootstrap的tab选项卡
<div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#A" data-toggle="tab">公告</a></li> <li><a href="#B" data-toggle="tab">规则</a></li>原创 2017-05-04 00:15:43 · 1698 阅读 · 0 评论 -
bootstrap监听滚动
监听滚动应用场景像百度百科中的介绍目录就运用了监听滚动的功能 简述监听滚动基于链接的瞄点实现的,设置a链接的href为对应的div的id,点击该链接即可到达对应的位置bootstrap实现方式 bootstrap中,我们可以先创建一个导航栏,里面的每个li元素下的a链接的href都指向一个瞄点,然后定义一个div,包含所有的瞄点对应的div,外层div指定两个data-*声明式属性:data-ta原创 2017-05-03 23:38:52 · 566 阅读 · 0 评论 -
bootstrap对话框
bootstrap对话框特点1.固定浮动在浏览器中2.宽度自适应,而且水平居中3.当浏览器宽度小于768px时,对话框宽度为600px4.底部会有一个灰色的蒙层效果,用于禁止单击底层元素5.使用fade类样式可以让对话框显示过程有一个过渡效果基本结构1.class="modal": 指定对话框最外层样式2.class="modal-dialog":指定对话框第二层样式3.class="m原创 2017-05-03 23:00:51 · 3453 阅读 · 0 评论 -
bootstrap按钮组
按钮组基本类样式1.使用btn-group包含当前按钮分组中的所有按钮,组成一个按钮组 <div class="container"> <div class="btn-group"> <button class="btn btn-default">首页</button> <button class="btn btn-defaul原创 2017-05-03 19:56:48 · 339 阅读 · 0 评论 -
Bootstrap下拉菜单
下拉菜单概述下拉菜单使用了bootstrap里的data-*属性声明式触发,将所有的数据使用最外层容器dropdown包含,按钮指定dropdown-toggle样式,并声明data-toggle属性为dropdown,下拉菜单使用dropdown-menu来包含,即可实现下拉菜单<div class="container"> <div class="dropdown"> <原创 2017-05-03 19:20:26 · 542 阅读 · 0 评论 -
bootstrap表单样式
基本表单类样式列表1.基础表单: <div class="form-group"> <label for="username">username: </label> <input type="text" class="form-control" name=username" /></div>2.内联表单:<div class="form-inline"> ...</d原创 2017-05-03 14:44:55 · 2177 阅读 · 0 评论 -
为响应式布局而生的viewport
viewport简介viewport的主要作用是运行开发者创建一个虚拟的窗口,并且自定义窗口的大小、缩放功能等基础属性基本定义viewport虚拟窗口是在meta元素中定义的,主要作用是设置web页面自适应移动设备的屏幕大小<meta http-equiv="viewport" content="width=device-width,initial-scalable=1" />viewport虚拟窗原创 2017-05-03 12:50:33 · 427 阅读 · 0 评论 -
bootstrap画板类样式
画板组成类样式1.外层画板: panel 2.画板标题: panel-heading3.画板内容: panel-body4.画板脚注: panel-footer画板样式:(同panel外层画板一个div)panel-default 重点蓝panel-success 成功绿panel-info 信息蓝panel-warning 警告黄panel-danger原创 2017-05-03 12:33:26 · 808 阅读 · 0 评论 -
Bootstrap常用导航条
<body> <!-- 设计页面导航条 --> <div class="container"> <!-- 基本导航条 --> <div calss="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand原创 2017-05-03 12:04:38 · 315 阅读 · 0 评论 -
Bootstrap常用的导航栏
<body> <!-- 设计页面导航 --> <div class="container"> <!-- 普通tabs选项卡导航栏 --> <ul class="nav nav-tabs"> <li><a href="javascript:void(0);">网页</a></li> <li><a href=原创 2017-05-02 23:56:32 · 479 阅读 · 0 评论 -
bootstrap的按钮
设置按钮的点击事件1.当我们点击按钮时,可以使按钮处于loading状态:$(this).button("loading");并且显示该button里面的data-loading-text的值2.实际上我们可以设置任意的状态的值:data-*-text、以及$(this).button(*);不过loading的话,会让当前的按钮处于disabled状态下,不能被点击按钮异步加载实例 <div原创 2017-05-04 00:49:31 · 496 阅读 · 0 评论 -
bootstrap的手风琴
<div class="container"> <div class="panel-group" id="mypanel"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-tit原创 2017-05-04 00:58:04 · 427 阅读 · 0 评论 -
牛客网前端工程师评估笔试题总结
1.css的overflow属性,如果为scroll值时,不管是否需要,用户代理都会提供一种滚动机制,也就是说,不管是否溢出,都会显示滚动条,而使用auto则会自动进行判断是否需要滚动条2.falsh和js之间的交互通过ExternalInterface接口进行交互,ExternalInterface接口有两个方法:call和addCallBack,其中call的作用是让Flash调用js里面的方法原创 2017-07-29 13:33:20 · 1822 阅读 · 0 评论 -
牛客网HTML/CSS专项练习错题汇总
有关浏览器的内核判断主要分为四类:-o-/-ms-/-moz-/-webkit-通过js的dom.style.XxxTransition进行相应的校验判断: var div = document.createElement('div'); var style = div.style; if (style.webkitTransition) { return '-原创 2017-08-12 21:34:34 · 830 阅读 · 1 评论 -
FormData实现文件的异步上传
为什么要使用FormData?在进行文件上传的操作时,我们通常使用post方式提交至服务器,然后服务器对请求数据进行处理;而有时候我们也需要进行异步上传文件,这个时候,就需要用到了FormDataFormData简单介绍XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以原创 2017-08-03 18:33:36 · 539 阅读 · 0 评论 -
FileReader实现上传图片时的图片预览
为什么要使用FileReader?在html静态文件中,当我们在input文件选择框中选择一个文件时,该input框的值为文件的绝对路径,这个时候我们可以直接将该路径复制给我们需要预览的图片的src即可可是在jsp这些服务器的脚本文件中,我们打开一个文件时,会发现文件选择框的值不是文件的绝对路径,而是c://fackpath之类的路径,这是服务器的临时文件存放路径,因此,我们直接将该路径复制给src原创 2017-08-03 18:16:58 · 659 阅读 · 0 评论 -
ajax实现跨域请求的三种方法
跨域的概念 域名的组成:协议号(http)//子域名(www).主域名(google):端口号(8888) 当协议、子域名、主域名、端口号中任意一个不相同时,就认为他们是不同的域。不同的域之间请求资源,叫做跨域请求 实现跨域的第一种方法–代理 比如在北京和上海都有一台服务器,北京的后端直接访问上海的服务器进行数据获取,北京的前端只需要对北京的服务器进行数据请求即可返回数据;他属于后台转载 2017-08-10 09:45:34 · 5862 阅读 · 0 评论 -
CSS3新特性之box-reflect倒影
使用背景有时候,我们需要实现如图一样的倒影图片,在css3的box-reflect属性出来之前,我们需要借助于第三方工具比如photoshop来实现这样的图片效果,可现在,box-flect的出现使我们能很方便的就实现这种图片效果box-reflect属性的浏览器兼容性box-reflect属性虽然能够很方便的实现图片、文字倒影的效果,但是到目前为止,浏览器对它的支持性还不是很完美;目前仅仅在chr转载 2017-08-08 09:43:45 · 709 阅读 · 0 评论 -
原生js实现帝国矩阵效果文字
效果演示地址:原生js实现帝国矩阵效果文字实现代码前端页面设计<html> <head> <!--Style Link--> <link rel="stylesheet" href="index.css" /> <!--JS Link--> <script src="index.js"></script> </head>原创 2017-06-10 23:04:48 · 1080 阅读 · 1 评论 -
纯css实现图片翻转效果
所要掌握知识点CSS样式1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时,是否进行显示还是隐藏2.transform: rotateX(n deg):设置当朝X轴方向旋转的角度3.transition: css duration style; 实现代码前端布局实现代码<div class="jskc">原创 2017-06-21 19:12:26 · 5141 阅读 · 0 评论 -
js制作简单的轮播图
实现原理首先定义一个div,设置width和height,然后在这个div里面再定义一个div2,该div的宽度为父div的宽度的n倍,其中n表示图片的张数,在这个div2里面放置需要进行轮播的所有图片,设置每张图片的宽度为一个最外层父类div的宽度,高度都是相同的然后使用js定义一个轮播的函数,每指定时间执行一次轮播函数,通过使用js提供的时间片来实现。轮播函数的思路为:在js外部定义一个全局变量原创 2017-06-21 09:30:12 · 803 阅读 · 0 评论 -
JS实现无延迟级联菜单
1.一般的级联菜单,当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验:我们必须在这个li元素上平行的移动鼠标,才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下,将会显示其他的二级菜单了2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片3.实现代码://前端页面<!DOCTYPE html PUBLIC "-原创 2017-05-07 21:24:15 · 820 阅读 · 0 评论 -
实现页面的回到顶部功能
页面的几个属性介绍$(window).scrollTop():当前滚动的窗口顶端到整个页面窗口顶端的距离$(window).scrollLeft():当前滚动的窗口左端到整个页面的窗口左端的距离 $(window).height():当前可视化页面窗口的宽度$(document).height():整个页面的高度相关判断1.让页面回到顶部,就是让window.scrollTop =原创 2017-05-04 18:39:21 · 1518 阅读 · 0 评论 -
H5本地存储之存储JSON格式数据
1.通常在页面中存储用户信息包含很多数据,比如:账号、昵称、年龄等,可以将每个数据进行单独存储sessionStorage.setItem(paramname,paramvalue);2.不过这样保存起来太麻烦,我们可以直接将其封装成一个对象来保存,使用JSON类的stringify()和parse()<script> var username = "chengxi"; var pa原创 2017-05-02 23:35:29 · 1861 阅读 · 0 评论 -
Bootstrap打造特色进度条
Bootstrap基本进度条实现1.外层容器使用class=progress类样式2.真正显示进度条样式的容器使用class=progress-bar类样式示例:<div class="progress"> <div class="progress-bar"></div> <!--可以添加width来设置进度条当前加载的百分比--> <div class="progres原创 2017-05-01 23:40:37 · 1257 阅读 · 0 评论 -
疯狂H5笔记 - 表格、列表相关属性及media query
1.表格相关属性:border-collapse:设置表格里的行和单元格边框的显示方式,有两个属性值: seperate:单元格的分割线为双线 collapse:单元格的分割线为单线border-spacing:当设置单元格的分割线为双线seperate时,该属性用于设置单元格边框之间的间距caption-side:设置表格标题位于表格哪边,有四个属性值:top/right/bo原创 2016-11-09 19:55:13 · 401 阅读 · 0 评论 -
疯狂H5笔记 - 盒模型与布局相关属性
1.布局相关属性:float:控制目标HTML组件的浮动方向。有属性值:left/rightclear:设置目标HTML组件的左右是否允许出现浮动对象:有属性值:none/left/right/bothoverflow:设置当目标组件内容溢出时的溢出内容显示方式。有属性值:visible/auto/hidden/scrolloverflow-x:设置内容溢出时水平方向溢出的内容显示方式,属性值原创 2016-11-08 23:56:35 · 494 阅读 · 0 评论 -
疯狂H5讲义 - 大小、定位、轮廓相关属性
1.CSS3新增box-sizing属性,用于指定当前元素所设置的width和height属性是指定哪一块,目前只有firefox浏览器支持该属性,因此需要添加-moz-前缀使用:1.content-box:指定width和height设置的是内容区也就是content的宽度和高度2.padding-box:指定width和height设置的是内容区加内边距区也就是content+padding的原创 2016-11-08 20:18:18 · 367 阅读 · 0 评论 -
疯狂H5笔记 - 背景和边框相关属性
1.背景相关属性:background-attachment:设置背景图片是随着对象内容滚动还是固定,有两个属性值: scroll:随组件内容的滚动而滚动 fixed:背景图片固定background-color:设置背景颜色,如果同时设置了背景颜色和背景图片,背景图片将会覆盖背景颜色background-image:设置背景图片,属性值形如:url(url) backgrou原创 2016-11-08 18:28:05 · 1277 阅读 · 0 评论 -
疯狂H5讲义笔记 - H5常用元素和属性
1.自定义文本显示方向:。ltr为从左往右显示文本内容,rtl为从右往左显示文本内容2.缩写指定内容:…。将鼠标移至该元素的文本内容上时会显示title值3.格式化文本:...。该元素中的文本包含的空格、回车等都会被保留并原样输出,但是大部分的标签都会被当成标签处理,而不是输出4.d氏列表:<dl> <dt>列表标题</dt> <dd>列表项1</dd> <dd>列表项2</原创 2016-11-04 22:25:05 · 593 阅读 · 0 评论 -
疯狂H5讲义 - 字体与文本相关属性
1.字体相关属性:color:控制文字颜色font-family:设置文字的字体,如果需要设置多个字体,使用逗号隔开font-size:设置文字的字体大小。该属性支持如下属性值: xx-small:绝对字体尺寸,最小字体 x-small:绝对字体尺寸,较小字体 small:绝对字体尺寸,小字体 medium:绝对字体尺寸,正常大小的字体,默认值 large原创 2016-11-08 15:24:40 · 747 阅读 · 0 评论 -
疯狂H5笔记 - CSS选择器
1.属性选择器:1.E{...}:对所有E元素起作用2.E[attr]{...}:对具有attr属性的E元素起作用3.E[attr=value]{...}:对具有attr属性且属性值为value的E元素起作用4.E[attr~=value]{...}:对具有attr属性且属性值为空格隔开的一系列字符串,其中某个值为value的E元素起作用5.E[attr|=value]{...}:对具有at原创 2016-11-08 13:53:15 · 486 阅读 · 0 评论 -
疯狂H5笔记 - 多媒体支持
1.使用<audio src></audio>元素来播放音频,使用<video src></video>元素来播放视频2.audio元素和video元素有大致相同的属性,支持的属性如下:src:指定播放音频或者视频的URL地址;autoplay:指定是否当音频/视频装载完成后自动播放;controls:指定当播放音频/视频时是否显示播放控制条;loop:指定音频/视频播放完成后是否再次重复播放;pr原创 2016-11-07 22:05:31 · 476 阅读 · 0 评论 -
使用H5audio特性实现简单的音乐播放器
<!Doctype html><html> <head> <title>成兮音乐浏览器</title> <meta http-equiv="Keywords" content="music" /> <meta http-equiv="author" content="chengxi" /> <style>原创 2016-11-07 20:08:05 · 4234 阅读 · 0 评论 -
疯狂H5讲义笔记 - 表单相关元素和属性
1.form表单的enctype属性用于指定传递表单数据所用的编码方式,有三种:1.application/x-www.form-urlencoded:默认编码方式,处理表单控件的value值2.multipart/form-data:以二进制流的方式处理表单数据,用于上传文件3.text/plain:当action为mailto:url形式时使用该编码方式,用于发送邮件2.标签可以用来绑定对应原创 2016-11-05 13:07:51 · 442 阅读 · 0 评论 -
使用H5拖放事件来写一个小程序
1.所有的元素都有一个draggable属性,用于指定是否启动该元素的拖放功能,而/两个元素默认启动拖放<div draggable="true"> innerHTML</div>2.拖放操作相关的事件:被拖动的元素的事件: 1.ondragstart:开始拖动时触发 2.ondrag:拖动过程中持续触发 3.ondragend:拖动结束时触发拖动时鼠标经过的元素原创 2016-11-04 17:45:05 · 947 阅读 · 0 评论 -
疯狂H5笔记 - 变形与动画相关属性
1.变形支持:1.transform:用于设置变形,该属性支持如下一个或多个变形函数: translate(tx,ty):设置目标组件横向x移动tx距离,纵向y移动ty距离,可以省略ty,表示ty=0.即纵向上没有位移 translateX(tx):设置目标组件横向x移动tx距离 translateY(ty):设置目标组件纵向y移动ty距离 scale(sx,sy):原创 2016-11-09 21:22:49 · 854 阅读 · 0 评论 -
疯狂H5笔记 - DOM编程详解
1.通过节点关系来访问HTML元素:Node parentNode:返回当前节点的父节点Node previousSibling:返回当前结点的前一个兄弟节点Node nextSibling:返回当前节点的下一个兄弟结点Node[] childNodes:返回当前节点的所有子节点Node[] getElementByTagName(tagName):返回当前节点的具有指定标签名的所有子节点原创 2016-11-10 13:56:34 · 399 阅读 · 0 评论