你的位置:首页 > 网页设计
2017最新前端面试题
2017-10-27 00:00:08

2017最新前端面试题

> HTML、CSS部分要点:对Web标准的理解、浏览器差异、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等1. Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?(1)、<!DOCTYPE&g ...
[H5案例分享]天猫:天猫和布朗熊的花式 battle
品牌:天猫体验地址 id="Label4">1、内容:这是一直图文展示类型的H5,里面穿插了点击DJ台的发光按钮开始尬舞、点击左右移动的小框进行投篮、长按能量表蓄积电量发动滑板三个游戏,最后引出活动的主题。2、亮点:将天猫吉祥物自然的应用到案例中来而且赋 ...
下拉菜单
2017-10-26 22:00:17

下拉菜单

<!Doctype html><html>  <head>    <meta charset="utf-8">    <title>下拉菜单</title>    <style> ...
前端工程师做事的三重境界:我的进阶之路
![v2-fd52450adf6c98b518618bdc74f1520e_r.png] Programmer、Developer、Enginner 的能力结构与工程师成长过程的关联,并分享出来给大家,期望能对入门的前端同学有所借鉴和启发。需要提前说明的是,文中用到的工程师的不同 ...
从零开始利用vue
2017-10-26 18:00:22

从零开始利用vue

最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下。一、工具环境1、node.js 6.10.0,目前node.js最新版本是8.7.0,可以到官网下载最新版本安装。链接 8.8 ...
IE6兼容png图片
2017-10-26 18:00:11

IE6兼容png图片

<!--[if IE 6]><script src="http://www.cnblogs.com//js/DD_belatedPNG.js"></script><script>DD_belatedPNG.fix ...
div嵌套时,子元素设置margin
这是因为父元素的padding设置为0时所产生的bug,它自动将margin-top提升到了父元素上,所以此时我们所设置的margin-top自动就到父元素上了,解决方案:1.给父元素添加一个padding,例如:padding-top:1px;2.给父元素设置overflow: ...
照片查看器的制作代码
2017-10-26 15:00:19

照片查看器的制作代码

<!doctype html><html><meta charset="utf-8"><title>照片查看器</title>/*基础样式一定要记得清除,或者会对布局造成影响。*//*样式的设置根据自 ...
2017前端框架何去何从
2017-10-26 12:00:10

2017前端框架何去何从

>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手,分析前端框架在这几年发展中的关键技术点,作为2015前端技术选型的参考。摘要:- 初体验- 技术特点- 组件化- 应用架构### 总结**1. 初体验**拿TODO来作为引子好了. ...
CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子:html代码:<div class="element">这是一段文字</div>css代码:.element { width:200px; height:200px; --main-bg-color: # ...
大学之道在明明德
2017-10-26 00:00:14

大学之道在明明德

《大学》原文:大学之道,在明明德,在亲民,在止於至善。知止而後有定,定而後能静,静而後能安,安而後能虑,虑而後能得。物有本末,事有终始,知所先後,则近道矣。【译文】大学的宗旨在于弘扬光明正大的品德,在于使人弃旧图新,在于使人达到最完善的境界。知道应达到的境界才能够志向坚定;志向坚 ...
CSS基础:基础和语法
2017-10-25 22:00:26

CSS基础:基础和语法

**CSS语法**CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。```selector {declaration1; declaration2; ... declarationN }```每条声明由一个属性和一个值组成 ...
深入理解display属性——前端布局常用重要属性
小注:display属性在网页布局中非常常见,但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面定义display属性用于规定元素生成的框类型,影响显示方式常用值: none | inli ...
表单元素
2017-10-25 21:00:12

表单元素

一、form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。<form> 标签用于为用户输入创建 HTML 表单。表单能够包含in ...
【echarts】 tooltip显示图片
tooltip: { trigger: 'item', borderRadius: 8,//边框圆角 backgroundColor: 'rgba(51,204,204,0.7)',//背景颜色(此时为默认色) ...
BootStrap 标题设置跨行无效
最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐。),发现标题设置跨行属性rowspan无效。html如下:<table class="table table-bordered&q ...
父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)
浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现。但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题:        1.浮动的元素会相对于父容器或者是前面已经定位的元素进行浮动,浮动的元素脱离文档流 ...
前端工程师的知识体系
2017-10-25 10:00:17

前端工程师的知识体系

前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。HTML1.标签的分类标签表示一个元素按性质 ...
做开发十年,我总结出了这些开发经验
在一线做了十年的开发,经历了网易、百度、腾讯研究院、MIG等几个地方,陆续做过3D游戏、2D页游、浏览器、移动端翻译app等。积累了一些感悟。必然有依然幼稚的地方,就当抛砖引玉,聊为笑谈。一、对于团队而言,流程太重要了行军打仗,你需要一个向导;如果没有向导,你需要一个地图;如果没 ...
2017web前端面试总结
2017-10-24 20:00:08

2017web前端面试总结

2017web前端面试总结从今年3月份开始面试笔试找实习找校招到现在也半年多了,拿到了不少offer,也有了自己的一点心得体会,这里写出来分享一下,拙见勿喷。注意一下,以下的观点仅代表我个人的体会不代表任何人任何组织和任何公司。关于流程一般的实习&校招招聘大体有这么一个流 ...
flexbox布局
2017-10-24 17:00:13

flexbox布局

1、flex兼容性根据caniuse >因此,flex布局主要应用在移动端。 2、基础测试代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> ...
angular1与swiper
2017-10-24 17:00:09

angular1与swiper

angular1路由切换过程中swiper不能使用。   问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面刚加载的时候初始化一次,在路由的切换过程中,模板虽然重新加载了,但是sw ...
CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示
在页面布局中,有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行。说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性。整个页面布局过程中,浮动属性的使用频率是最高的。今天,就来带领大家一同认识这两个神奇的C ...
弹性盒子模型属性之flex
2017-10-24 12:00:08

弹性盒子模型属性之flex

上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例,默认值为1,注意前提是空间不足的情况下,项目缩小。值为0,不缩小。 ...
浅谈BFC与高度塌陷
2017-10-23 18:00:26

浅谈BFC与高度塌陷

这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象。    什么是BFC?   页面中的元素都隐含一个属性Block Formatting Context(块级格式化上下文) 简称BFC。    BFC有什么用 ...
html 里面的 role 属性是什么意义和用途
使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,属于WAI-ARIA. 例如点击的按钮,就是role="button";会让这个元素可点击;本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情 ...
(利用DOM)在新打开的页面点击关闭当前浏览器窗口
1.在开发过程中我们前端的用户体验中有时候会要求点击一个按钮,关闭当前浏览器窗口。用html DOM就可做到。2.注意:本次写法要求在新窗口中关闭。 target="_blank"3. 由a.html 中打开b.html 在b页面中点击按钮关闭B页面4. a页 ...
一篇搞定微信分享和line分享
转载 id="前言">前言在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要。例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制。微信分享最简单的配置微信分享静态页微信分 ...
【简问】一些个人不会的问题,收到解答经核实OK的会在下方附注答案
1.p标签内放行内块(如,input)适宜么(已知p是块元素,但p内不宜放置div)?2.如何单独设置文字下划线颜色?3.行内元素可以定位吗?4.支持 margin:0 auto; 的元素类型有哪些(如,块元素)?5.使用margin:-px;有什么坏处么? ...
CSS命名规范 BEM
2017-10-23 13:00:08

CSS命名规范 BEM

良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的!BEM解释:(1).block 是BEM的区块,包含内容和风格。如bootstrap框架的.container。(2).block-element 代表自子容器。如bootstrap框架的轮播图,.carou ...
JavaScprit30
2017-10-23 12:00:13

JavaScprit30

今天学习的是 仿即时搜索诗句效果 第一个问题:fetch()Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取 ...
【简记】HTML + CSS 的一些要点(不定时更新)
1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写)2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的)3.th虽然定义了表头标题,但是默认不跨行(需要跨行要用colspan)4.text-indent可 ...
今天是我第一次来到博客园,好紧张!
首先,介绍一下自己吧。我是个普普通通的大一学弟,喜欢WEB前端、手绘、音乐和跆拳道;曾经有一段灰蒙蒙的日子,但是不想再提了;命运如此,我来到了河北科技大学;我本身是一个少言寡语的人,所以也没太多朋友;喜欢一个人在下雨天喝着咖啡,看窗外过往人流;希望遇到一个拼搏的团队,希望有个热心 ...
【简抄】h5 新增的几个背景属性和文本属性
一、背景图像显示:①background-size:规定背景图像的大小;值:像素值、百分比、auto、cover、contain②background-origin :规定背景图像的起始位置;值:padding-box(默认)、content-box、border-box③bac ...
大神张鑫旭慕课网CSS系列教程学习笔记03:overflow
为什么是03,因为我是从今天才意识到输出也是学习过程中很重要的一环,所以从今天开始,我会把每天学到的新知识记录下来,温故而知新。重申下,每篇文章都是我当天学习的记录,因本人是小白,水平有限,难免出现纰漏,后续会及时改正。欢迎各位指出错误!!!1,首先来看看overflow的5个基 ...
css3创建多边形clip属性,可用来绘制不规则图形了
.path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px);}.path2 { clip-path: polygon(3px 5px, 17px 5px, 10px 16px);}.path3 { clip-path: p ...
超好用的移动框架
2017-10-20 18:00:08

超好用的移动框架

超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。 (最近正在学习移动端项目制作,本文 ...
用css属性画出一棵圣诞树
对于学习前端的童鞋,css的掌握是必须的。今天就来实现用css画出一棵圣诞树。主要练习的是css里面border的练习与掌握程度。在body创建一个主区域<div></div>:我们用border搭建的三角形在主区域内。改主区域的背景色:可以给设定一个高度 ...
input 属性radio中设置checked 不生效
同一个页面中有许多地方都用到了单选按钮并设置了默认选中 , 结果在运行的时候发现单选按钮没有被默认选中由于是复制然后修改个别属性 ,然后直接使用的 , 所以name值忘记修改了 , 单选框是根据name来判断选中 .修改前 类似这样:由于是多个地方使用单选按钮 , 将所有使用了单 ...
关于HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是:<meta name="viewport" content="width=device-width,initial-scale=1&qu ...
【H5案例分享】Dr.魏的这波操作我赌你破解不了!
品牌:超凡魔术师h5案例地址 id="Label4">1、内容:一个以”超凡魔术师“为主题的视频+回答类的推文,用户可以通过观看一段一个人物在表演魔术的视频,在其间用户可以选择两个选项中的一项与之进行互动。2、亮点:这篇推文最大的亮点是可以与用户进行互动 ...
提高网站可用性的十个实用小技巧
2009-06-11 15:17 作者:oncoding 出处:天极网 责任编辑:盛晓莹   不论是企业网站、个人博客,或者购物网站、游戏 网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。  可用性是用户体验的一种度量,它可以用访问者完成 ...
HTML小技巧的一些小技巧
2017-10-20 10:00:21

HTML小技巧的一些小技巧

转自CSDN:1.怎样定义网页语言(字符集)? 在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以 ...
设置元素水平、垂直居中的两种方式
做一个水平和垂直居中的模态弹框这么一个小需求,对于我们这些前端来说,应该是常事。  在css3出来以前,我们要想让元素既水平居中又要垂直居中只有一个办法(我能想到的),就是通过js计算,把它们定位到屏幕中间位置。这方法比较笨,也麻烦。   下面两种方式,可以让元素快速定位到屏 ...
css:focus伪类的使用
2017-10-19 19:00:09

css:focus伪类的使用

css中:focus伪类的使用,即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...
img的属性alt 与 title的区别
当我们给图片加属性的时候,初学时,可能会弄混淆alt与title的区别,那么这两个的区别,我们可以从本意来看&mdash;&mdash; alt原词是&ldquo;Alternate&rdquo;,切换,替换的意思。常用的输入法切换会用到alt ...
web前端——10个妨碍进步的学习方式
1.前言从事web前端的人很多,每个人的学习方式,学习习惯基本不会一模一样!关于web前端(或者直接互联网),大家都知道,是做到老,学到老的一个行业。之前写文章的时候,我说过很多学习的方式和建议。今天换一下,说一下我个人不建议的学习方式,或者我个人觉得是妨碍进步的学习方式,希望大 ...
css:hover伪类的使用
2017-10-19 16:00:09

css:hover伪类的使用

:hover的使用,即当鼠标指针移入元素时,所做出的样式设置示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...
CSS之 relative 特性
2017-10-19 14:00:10

CSS之 relative 特性

1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位。 当left与right同时存在,lfet生效。 当top与bottom同时存在,top生效。 无侵入,保留原始位置,不会影响其他元素的布局。 可运用于《自定义拖拽》场景。2. relati ...
CSS之 absoulte 属性
2017-10-19 14:00:08

CSS之 absoulte 属性

特性: absoulte 与 float 具有相同的特性:包裹性,与破坏性 absoulte 与 float 可以交替使用 不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/rig ...
CSS之  z
2017-10-19 14:00:07

CSS之 z

层叠上下文: 三维概念,表示元素在Z轴的位置 层叠可嵌套,组合成一个分层次上下文 每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素 每个层叠上下是自成体系的层叠顺序1 background~border2 负z-index3 block盒子4 ...
CSS之 border 属性
2017-10-19 14:00:06

CSS之 border 属性

特性 border-width 不支持百分比 border-color 默认颜色是 color border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框 border 应用: 坐等高布局,不支持百分比宽度 支持的关键字: t ...
作业01
2017-10-19 14:00:04

作业01

(a)<html><head><title>你好</title></haed><body><a href="../fa/b.html">gotob</a><h ...
Css之relative特性
2017-10-19 13:00:16

Css之relative特性

1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位。 当left与right同时存在,lfet生效。 当top与bottom同时存在,top生效。 无侵入,保留原始位置,不会影响其他元素的布局。 可运用于《自定义拖拽》场景。2. relati ...
HTML之头部标签
2017-10-19 13:00:10

HTML之头部标签

<header> head 元素元素包含了所有的头部标签元素 可以添加在头部区域的元素标签为: title,style,meta,link,script,noscript,base<title> 定义不同文档的标题。 定义了浏览器工具栏的标题。 当网页添加 ...
css3动画之圆形运动轨迹
2017-10-19 12:00:17

css3动画之圆形运动轨迹

css3中通过@keyframes定义动画,animation设置动画属性,从而实现动画效果;在animation属性当中,可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。animationanimation作为一个复合属性,包括了以下动画属性。 ...
前端代码合集
2017-10-19 11:00:08

前端代码合集

HTML5使用FileReader实现前端图片预览<input type="file"><br><img src="" height="200" alt="Image previe ...
学web前端开发写给新手的建议,超实用!
01 前面的话如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了。每一台入网的机器,都会被分配一个ip,我们可以通过ipcon ...
bootstrap Table 服务端处理分页  后台是.net
要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来function HQCreatTables(ob) { var option = { method: 'get', dataType: "json", striped: t ...
【原创干货】绝对地址和相对地址
绝对地址和相对地址是网站开发基础知识中很重要的知识点。1.在网页中插入文件时,不可以使用硬盘的绝对路径 举个例子,在网页中插入图片,代码如下: <!DOCTYPE HTML><html><head><meta http- ...
第一页下一页12345678910下10页末页第4/227页,总共:13581条数据