你的位置:首页 > 网页设计
一道前端学习题
2017-12-09 07:00:04

一道前端学习题

对于没参加过互联网企业招聘,或是没有参加过大型互联网企业招聘的人来说,能以这些公司的面试题做为锻炼,无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答),题目本身在现实中意义不大,主要是考察应试者对js及算法的理解程度,本文给出了三种答案,期待有更大的侠来一 ...
CSS3 按钮特效(一)
2017-12-09 05:00:10

CSS3 按钮特效(一)

1. 实例 2.HTML 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3- ...
图文详解前端CSS中的Grid布局,你真的可以5分钟掌握
前言网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式。今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式。CSS第一个Grid布局首先我们看看最基本的Grid布局是什么样的,HTML页面的代码如下所示。HTML代码然后设置其CSS属 ...
前端
2017-12-08 20:00:04

前端

web服务处于应用层的http协议负责的数据传输与解析。位于socket上层,用socket传输http数据时需要在消息开头处声明是http协议/相应http版本 状态码 状态码含义 \r\n\r\n 真正的字符串内容。HTML是什么Hypertext Markup Langua ...
localStorage使用总结
2017-12-08 19:00:03

localStorage使用总结

注:本文转载自大神同学的博客 ,仅供学习不用于其他用途,大家想要更多的干货,请移步到该大神博客园一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储 ...
前端程序员容易忽视的一些基础知识
基础数据结构与算法现在有两个不同的JSON,比较复杂,可以参考这里的DEMO中返回的JSON。要比较它们的差异,除了用现成的工具如beyond compare以外,如果我们的机器上没有安装这个工具,能如何较快解决?作为一个程序员,一个个对比是不可行的,对比完也不会有什么收获。我会 ...
过完年想去杭州发展,我打算参加培训当程序员,不知道杭州程序员就业情况怎么样?
随着互联网的快速发展,当下最火的职业应该就是程序员了,现在的应届生或者想转行的应该最想选择的职业就是当程序员。所以说,现在只有你会技术,发展前景还是很不错的,而且软件行业的工资也相对比普通的行业要高不少。入门进入这一行业还是有发展前途的。如果想快速入门就业的话,选择培训机构是比较 ...
程序猿必备的10款web前端动画插件一
1.动画SVG框架幻灯片在幻灯片之间切换时显示动画SVG帧的实验性幻灯片。不同的形状可以用来创建各种风格。我们想和大家分享一个实验幻灯片。我们的想法是在从一个幻灯片转换到另一张幻灯片时,使SVG帧动画化。使用不同的形状,我们可以在改变SVG路径时创建各种框架样式。这个想法的灵感是 ...
Android APP切换到后台接收不到推送消息
1. Android端进程被杀死后,目前自带的保护后台接收消息活跃机制。暂时没有什么好的机制保持任何情况下都活跃android原生系统用home键杀进程可以起来,如果是强行停止就只能用户自己手动开启应用如果是miui等第三方应用,杀了进程默认无法自启动如果是roo ...
【转】META标签指南:哪些meta标签该用哪些不该用?
以下内容来源 >META标签是网页代码中HEAD区的一个关键标签,其提供的信息虽然用户不可见,但却是文档的最基本的元信息。说起meta标签,许多SEOer的第一反应就是K与D:keywords和description。这两种标签是在优化过程中最常用的也是被谈论最多的。但实际 ...
absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时,却是不同的结果。demo  用如下小demo测试: <aside cla ...
Swiper插件轮播
2017-12-07 06:00:05

Swiper插件轮播

<html><head> <meta charset="utf-8"> <title>Swiper轮播</title></head><body> <div id=&quo ...
jQuery Mobile Slider 禁用点击事件
阿子原创,转载请注明出处。在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作。为此需要禁用Slider的点击事件。官方API并没有提供禁用点击事件的事件的方法,因此要实现这一功能只能另辟蹊径。留意到点击S ...
ES6 const用法
2017-12-07 01:00:07

ES6 const用法

1、const声明一个只读的常量。一旦声明,常量的值就不能改变。2、const的作用域与let命令相同:只在声明所在的块级作用域内有效。3、const命令声明的常量也是不提升,只能在声明的位置后面使用。4、ES6中:var命令和function命令声明的全局变量,依旧是顶层对象的 ...
css实现图片横向排列滚动
.imageList{ overflow-x: auto; overflow-y: hidden; height:180px; white-space: nowrap; img{ width:auto; height:100%; margin-right:10px ...
HTML5 极简的JS函数
2017-12-06 19:00:06

HTML5 极简的JS函数

页面初始化mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。在app开发中,若要使用HTML5 ...
页面渲染的同步和异步区别?
同步:浏览器访问网址,浏览器创建新的tabpage,新的内存块,加载页面的全部资源并渲染全部资源。但只要有页面中的任何一个操作,就会从新的开端全部在创建请求渲染一次,浏览器自己控制的http。异步:用之前已经渲染过的页面数据,与后台交互数据不需要重新来渲染页面,实现对页面的部分更 ...
HTML的基本语法
2017-12-06 01:00:01

HTML的基本语法

HTML的文件结构:<html> <head>网页头部信息</head> ...
HTML的iframe标签妙用
2017-12-06 00:00:05

HTML的iframe标签妙用

在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多。作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景。 (图片说明:所有浏览器都支持iframe,无论什么版本) 在什么情况下使用iframe呢?其实iframe有很多奇技淫巧的用 ...
微信视频播放后出现QQ平台视频推荐
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题。原计划在视频播放完毕后,页面发生video的ended事件时,应该显示分享和进入转化页的按钮,如图: 然而在很多安卓手机微信内,视频播放结束后并没有出现应出现的按钮,而是出现了一堆QQ平 ...
absolute
2017-12-05 22:00:06

absolute

1、独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏 ...
css中border制作各种形状
2017-12-05 21:02:00

css中border制作各种形状

css利用border制作各种形状的原理如图:使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0:设置border的高度为0:如图最后设置左右border的颜色 ...
grid 布局的使用
2017-12-05 19:00:06

grid 布局的使用

grid 布局的使用   css 网格布局,是一种二维布局系统。   浏览器支持情况:老旧浏览器不支持,   概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。      <div >         <div ></di ...
CSS以图换字的9种方法
2017-12-05 05:00:05

CSS以图换字的9种方法

前面的话  CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法 文字隐藏  在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:non ...
移动前端图片压缩上传
2017-12-05 04:00:15

移动前端图片压缩上传

摘要:之前在做一个小游戏平台项目,有个“用户中心”模块,就涉及到了头像上传的功能。在做移动端图片上传的时候,传的都是手机本地图片,而本地图片一般都相对比较大,拿现在的智能手机来说,平时拍很多图片都是两三兆的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传 ...
关于flex布局对自己的影响
对于本图来说用了一个效果就能达到这种情况,对于我来说,今天是有进步的,具体操作就是盒子模型确实,在什么地方起来的flex就运用到该地方去,刚开始就一直有问题,思考了半天,原来是我的控制代码出现了点错误,就是不将对应的控制放到了想盒子里面,而放在子元素下面,果然不会的地方是在于多多 ...
Vue延迟点击
2017-12-05 01:00:05

Vue延迟点击

从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间fastclick清除点击延迟,让程序更灵敏1、导入fastclickimport Vue from 'vue'import FastClick from ' ...
Canvas小练习_祖玛游戏01
2017-12-05 00:00:17

Canvas小练习_祖玛游戏01

这几天学习了一个祖玛游戏的小Demo,记录下这个小游戏的编写过程。 1:首先实现的一个简单界面效果。 2:在图形绘制完成后,让黑色小球沿着圆形弧线运动。 编码过程 创建画布,绘制圆形弧线。 ...
css zoom与scale区别
2017-12-05 00:00:16

css zoom与scale区别

转自 >1、zoom的缩放是相对于左上角的;而scale默认是居中缩放;2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;所以二者会导致渲染的性能差异。3、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大 ...
swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer
用swiper4实现的拥有header和footer的全屏滚动demo,<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> ...
fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer
fullpagejs实现的拥有header和foooter的全屏滚动,技术要点:给section元素加fp-auto-height类,<!DOCTYPE html><html lang="zh-CN"><head> < ...
swiper4实现的拥有header和footer的全屏滚动demo/swiper
用swiper4实现的拥有header和footer的全屏滚动demo,<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> ...
fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage
fullpagejs实现的拥有header和foooter的全屏滚动,技术要点:给section元素加fp-auto-height类,<!DOCTYPE html><html lang="zh-CN"><head> < ...
用swiper4实现的拥有header和footer的全屏滚动demo/swiper
用swiper4实现的拥有header和footer的全屏滚动demo,<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> ...
DOM BOM document window 区别
2017-12-04 21:00:02

DOM BOM document window 区别

DOM 是为了操作文档出现的 API,document 是其的一个对象;BOM 是为了操作浏览器出现的 API,window 是其的一个对象。 使用下图讲解: 归DOM管的:E区:即document 归BOM管的:A区:浏览器的地址栏,书签栏等B区:右键菜单C区:do ...
程序猿必备的10款超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们收集了10个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实 ...
Web前端学习——CSS
2017-12-04 07:00:07

Web前端学习——CSS

一、CSS简介CSS全称cascading style sheeding,层叠样式列表。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。二、CSS组成1、选择器(1)标签选择器<head> <style> p{ ba ...
拥有header和footer的全屏滚动demo/swiper
用swiper4实现的拥有header和footer的全屏滚动demo,<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> ...
Animate.css(一款有意思的CSS3动画库)
官网:https://daneden.github.io/animate.css/animate.css 是一款跨浏览器的动画库。使用方式:在页面的 <head>中引入样式文件:<head><link rel="stylesheet ...
元素加了position:absolute则该元素的text
position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50 ...
Web前端学习——HTML
2017-12-04 02:00:07

Web前端学习——HTML

HTML其实还是蛮容易学习的,无非就是一些标签、格式的填写,大学的时候也做过网站设计,所以这里主要记录一些常用的HTML标签、属性以及书写方法等。一、常见HTML格式主要包含文件type,html标签、head标签、body标签三个主题标签,其中Head主要包含字符集、描述、关键 ...
cms中某些标题链接的单独写法
href="{$CATEGORYS[45][url]}" 链接写法,{$CATEGORYS[45][catname]} 标题写法在show页面中src="{$thumb}" 图片展示{$content};文字内容 ...
H5 调用手机摄像机、相册功能
<input type="file" accept="image/*" capture="camera"><input type="file" accept="video/ ...
transition过渡和animation动画
transition 强调过渡 是两个关键帧的animationanimation 强调流程与控制 是多个关键帧的animation一、transition属性描述transition-property指定要过渡的css属性teansition-duration指定完成过渡 ...
css实现九宫格
2017-12-04 00:00:03

css实现九宫格

原理:浮动+margin负边距示例代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title& ...
近期前端中的 一些常见的面试题
近段时间看了不少的前端面试题,很多大牛也对此做了整理。这篇文就算是借花献佛啦。总体来说基本上每家问的问题也差不多,可能不同业务的公司问的问题的侧重点也不太一样,有的侧重于移动端适配CSS布局浏览器兼容IE hack,而有的侧重于JS逻辑面向对象设计模式考察等。可能将实际工作中会遇 ...
三个提升网页性能技巧
2017-12-03 19:00:11

三个提升网页性能技巧

1、display属性设置先将元素设为display: none(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。只在必要的时候,才将元素的display属性为可见,因为不 ...
程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画,记得在很早以前我们也分享过一款基于 ...
流式风格
2017-12-03 07:00:03

流式风格

1、网格设计方法一、float(浮动)float 将4个div 从左至右排序,当外围区块小时,4个div会根据外围的区块宽度重新调整内容显示的位置。原理就是利用float:left将元素浮动靠左排列,反之用靠右排列,当超过容器最大宽度时,div就会自动挤到下一行。方法二、disp ...
Font Awesome(一套很棒的图标库)
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只 ...
在Bootstrap框架中,form
2017-12-03 06:00:12

在Bootstrap框架中,form

在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。1、宽度变成了100%2、设置了一个浅灰色(#ccc)的边框3、具有4px的圆角4、设置阴影效果,并且元素得到 ...
bootstrap3中container与container_fluid的区别
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:  .container 类用于固定宽度并支持响应式布局的容器。  .container-fluid 类用于 100% 宽度,占据全部视口(vie ...
css选择器的优先级问题
2017-12-03 06:00:04

css选择器的优先级问题

当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢?  定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来介绍一下选择器的优先级。  一、选择器的优先级排序  1. !im ...
sublime text3快捷使用
2017-12-03 06:00:04

sublime text3快捷使用

Ctrl+N 新建一个编辑区,!加 tab新建一个html骨架完好的文件。Ctrl+Shift+P开启命令模式,sshtml 切换html语法。 esc退出,Ctrl+`打开工作台、Ctrl+Enter 在当前行下添加一行。Ctrl+Shift+Enter 在当前行上添加一行 ...
HTML标签,简单归纳
2017-12-03 04:00:09

HTML标签,简单归纳

列表标签有序列表:<ol><li></li></ol>无序列表:<ul><li></li></ul> //属性:font-weight字体粗细 表格:<table> ...
html 总结
2017-12-03 04:00:05

html 总结

时间:2017年12月3日 19:35:18用于: 这文章用于个人技术总结html笔记1、html标签不区分大小写,但是建议小写2、标签 可用在head部分:   <head>     <title>...</title> //网页标题   ...
JavaScript CSS 等前端推荐
2017-12-02 10:00:13

JavaScript CSS 等前端推荐

推荐两个网站,JAVASCRIPT与前端相关,两边都可以玩,蛮方便的,然后全通后你拿个全英文版本的证书提升逼格.https://www.freecodecamp.org/https://www.freecodecamp.cn/最好的玩法是两边一起玩,第二个网址是第一个网址的翻译, ...
css !important
2017-12-02 07:00:06

css !important

很多情况下,你会使用 CSS 库,这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时,你可以使用 !important。 1 <style> 2 body { 3 background-color: black; 4 font- ...
CSS颜色表示
2017-12-02 07:00:02

CSS颜色表示

你可能会疑惑为什么我们使用6位数来表示一种颜色而不是只用一位或二位,答案是使用6位数可提供给我们巨大数量的颜色变化。会有多少种可能的颜色?16 个值(0~F)和 6 个位置意味着我们有 16 的 6 次方,或者说超过 1600 万种可能的颜色。Hex code 遵循 red-gr ...
第一页下一页12345678910下10页末页第1/229页,总共:13723条数据