你的位置:首页 > 网页设计
WEB前端研发工程师编程能力成长之路
【背景】  如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧;  如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧;  如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧;  WEB前端研发工程师,在国内是一个朝阳职 ...
使用图片地图减少HTTP请求数量
前言  最近在看《高性能网站建设》,记录一下所学。  现在很多网站都是图片形式的导航,点击图片跳转到对应的链接。如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请求。优化的方式之一就是使用图片地图标签  图片地图要用到map和area标签  map标 ...
初学者应该怎么学习前端?web前端的发展路线大剖析!
写在最前:优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模 ...
前端【响应式】开发详细解析
一、响应式设计需要解决的问题是什么?针对目前大家常见的固定布局、自适应布局都是一种反应迟钝的web设计,当Web页面需要在各种显示屏显示时,他们就显得力不从心了。因此,我们就需要相应设计。优势:一个页面适应各种显示屏;具有良好的SEO;较大缩短开发周期;给用户更多的选择,更好的用 ...
【初学者必读】:前端工程师的知识体系
下图是前端工程师图解:前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。HTML1.标签的分类 ...
Angular5.0.0新特性
2017-11-02 14:39:32

Angular5.0.0新特性

文章来自官网部分翻译https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935cedAngular5.0.0版本已经正式发布 总结一下v5.0.0带来的新变化都有哪些。 1.构建优化   ...
web前端工程师全套教程免费分享
这是我自己早前听课时整理的前端全套知识点,适用于初学者,也可以适用于中级的程序员,你们可以下载下来。我自认为还是比较系统全面的,可以抵得上市场上90%的学习资料。讨厌那些随便乱写的资料还有拿出来卖钱的人!在这里我免费的分享出来供大家使用!在这个平台真的可以学习到不少的东西!有很多 ...
vue2.0生命周期好文章推荐
<p ...
HTML项目实践中学到的东西
1.组织的重要性。 首先是要建立两个根文件夹,一个存上线页面的资源,一个存测试页面的资源。所有改动内容都在测试页面的文件夹中进行,在这个文件夹中进行测试、W3C语法检测后(HTML检测网站:https://validator.w3.org/#validate_by_u ...
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
来 >翻译 2013年09月11日 21:06:11标签:绝对居中 /垂直居中 /水平居中 /CSS居中代码 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margi ...
百分比布局中的居中
2017-11-02 10:38:32

百分比布局中的居中

百分比布局 垂直&水平居中的几种方法 1.以em/rem设置宽度和高度 父级设置 width:5rem; height:5rem; text-align:center; 子集设置 line-height:5rem; ...
width:100%以什么为基准的测试
起初是遇到这样一个问题:当盒模型设为box-sizing:border-box;(移动端上经常这么干)。子盒子的width:100%,子盒子的width等于父盒子contend的长度还是condend+padding+border的长度?css和html: 结果:(se ...
localStorage学习总结
2017-11-02 10:38:29

localStorage学习总结

一、本地存储  在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限制。  Cookie问题:   1.cookie大小限制在4K左右(各个浏览器不一致)   2.cookie每次随着HTTP请求都会一起发送(造成很多不需要的coo ...
前端大牛们都学过哪些?
前几天看到这样的问题:最近在看bootstrap,发现除了大一的时候看过的html+css,和一些js,JQuery之外,几乎没学什么关于前端的东西。偶尔了解过一些html5。想知道如果作为一个团队的前端负责人还需要学习哪些东西?发现bootstrap与.less有关,除了这个还 ...
零基础的前端开发初学者应如何系统地学习?
网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:基础知识:html + css 这部分建议在 w3school 在线教程上学习,边学边练,每章后还有小测试。 之后可以模 ...
观点  2017年前端初学者的生存指南
观点 | 2017年前端初学者的生存指南 樱止语2017-11-01 16:37 · 字数 3256 · 阅读 0 · 日记本 逝者如斯夫,不舍昼夜。 历史在向前发展,前端的“摩尔定律”是每隔18个月难度会上升一次,过去的2016年 ...
HTML的历史遗留问题
2017-11-02 10:38:27

HTML的历史遗留问题

1.<style type="text/css">从前,HTML的设计者认为以后应该还会有其他样式,不过如今我们已经醒悟,事实表明,完全可以只使用<style>而不带类型属性(即type是可选的),所有浏览器都知道你指的是CSS。——— ...
css是如何实现在页面文字不换行、自动换行、强制换行的
强制不换行div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;}CSS设置不转行:overflow:hidden ...
10大H5前端框架,让你开发不愁
![] 作为前端,我一向都这么的任性 ^_^ )。**Bootstrap**首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。 ...
腾讯:腾讯工程技术事业群招聘H5:WE ARE TEG
z 品牌:腾讯案例地址 id="Label4">来源:199case_H5案例库1、内容:通过首页的js动态按钮进入下一界面,整个过程横屏设置,采用了拍摄好的完整多骨诺视频,并且在视频的不同节点出现相应文字,可以鲜明和充分的展现TEG是什么。视频播放 ...
【H5案例】保时捷:咔嚓!捕捉迅疾魅影 这条 H5 的速度太忄忄忄忄忄忄忄夬了
品牌:保时捷案例地址 id="Label4">来源:199case-H5案例库1、内容:一个以”捕捉迅疾魅影“为主题的声音识别类的h5,用户可以通过听取最大的跑车的引擎声,然后点击相机状的按钮,即可拍摄成功,最后展示类保时捷的跑车的特点。2、亮点:这只h ...
前端同学大福利,最全的面试题目整理
自己整理了一些关于前端这个行业面试题,好多都不会好难过,I NEED AV…….HTML&CSS常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Tr ...
bootstrapTable的数据后端分页排序
数据后端分页排序,其实就是sql语句中oeder by做一些限制。之前在写sql语句中的order by是写死,既然要写活,就要传参数到后台。之前讲到bootstrapTable的queryParams可以自定义参数,这里就只需要找下点击需要排序列的字段名就行 this.so ...
Css3新属性:calc()
2017-10-31 18:00:06

Css3新属性:calc()

一、前言  calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素,当然想到的第一个就是使用mar ...
Http状态码大全(200、404、500等)(转CSDN)
当我们从客户端向服务器发送请求时 服务器向我们返回状态码 状态码就是告诉我们服务器响应的状态 通过它,我们就可以知道当前请求是成功了还是出现了什么问题 状态码是由3位数字和原因短语组成的(比如最常见的:200 OK) 其中第一位数字表示响应类别,响应类别从1到 ...
实现文字颜色渐变
2017-10-31 17:00:27

实现文字颜色渐变

前言  主要用到三个CSS属性:  linear-gradient() 用来实现渐变的图像 background-clip 指定对象的背景图像向外裁剪的区域 text-fill-color 指定文字的填充颜色实例 ...
写给想成为前端工程师的同学们 ―前端工程师是做什么的?a
前端工程师是做什么的? 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终 ...
教你用SVG画出一条龙
2017-10-31 15:00:10

教你用SVG画出一条龙

先看demo,九十七度 其实使用svg画出这条龙很简单,关键不在于怎么使用svg,而在于你的美术功底,哈哈。好吧,当然基础是不能忽略的,先看下这条龙的代码: <svg id="long" 对的,其实画龙只需要svg 路径path的命令就 ...
谈谈前端『新』技术
2017-10-31 15:00:09

谈谈前端『新』技术

最近有位(大家都知道是谁)的『前辈』在微博上天天叫唤,相信很多人都看烦了。我跟他也算是吵了一架,污染了大家的时间线,先说声抱歉。但是我觉得让这么一个撒泼的人误人子弟,实在看不下去,所以咱上点干货以正视听。对待新事物的态度问题我这个人在技术讨论的时候信奉很简单的一个道理:没有研究过 ...
VUE学习,vue运行环境搭建遇见的小问题
1.使用vscode来编辑项目,那么首先给它搭一个vue运行的环境,打开集成终端,使用npm install live-server -g安装live-server.problem1:cmd终端分行问题。解决方法:打开cmd.exe,右击其最右上角,选择属性,选择使用旧版本,重启 ...
Spring Boot使用thymeleaf模板时报错:Template might not exist or might not be accessible by any of the configured Template Resolvers
错误如下:Template might not exist or might not be accessible by any of the configured Template Resolvers错误原因:访问的模板不存在或者任何解析器都无法访问该模板(错误为500)解决方案 ...
爱上朴实的CSS细节
2017-10-30 22:00:08

爱上朴实的CSS细节

英文原文:Learning to Love the Boring Bits of CSS   未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜、颜色等视觉效果。这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍。   如果说这些特性是C ...
git恢复删除的分支及内容
git 删除分支git branch -D 分支名git查看分支git branch -agit 删除远程分支git push origin :分支名这里注意:git分支提交并且push了,但是把分支删掉了,则分支上提交的东西也一并删掉了正确顺序是:git commit ==》g ...
实现输入框【输入填写+动态提示信息+下拉选择】
实现输入框能填写能下拉选择,填写时动态提示 using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System ...
《Web前端开发修炼之道》
如何组织CSS-分层应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式;另一部分是css框架,重点是如何对 css 进行组织。如何组织 css 可以有多种角度,例如按功能划分,或者按区块划分。这里讲一下 base.css + common ...
居中的几种方法
2017-10-30 12:00:37

居中的几种方法

一:通过margin负值.one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px;}兼容性好,但是必须要定宽高二:通过margin:auto.tw ...
tab面板,html+css
2017-10-30 12:00:36

tab面板,html+css

<!doctype html><html> <head> <meta charset="utf-8"> <title>tab面板</title> <styl ...
通栏导航栏的制作,综合使用CSS属性,代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度。承接文章:灵活控制块级元素在一行内显示,CSS浮动属性,知道原理就很简单技术等级:初级 | 适合前端开发的初 ...
导出格式
2017-10-30 12:00:27

导出格式

<td ><s:property value="accountCode" /></td>//1)文本:vnd.ms-excel.numberformat:@//2)日期:vnd.ms-excel.numberformat:y ...
十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具。每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择。对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工 ...
【译】前端开发者的基本要求
备注:第一次翻译技术文章,标题都纠结了好久不知道肿么翻译,如发现翻译不当之处,可点击github链接提交评论,thx~前几天我为一个项目写README文档,我希望其他开发者能够看到这个项目,并从中学到一些东西。突然我意识到,若放在几年前,我写作的过程中随口提到的Node,npm, ...
前端开发:H5直播起航
2017-10-30 12:00:15

前端开发:H5直播起航

前言前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案。发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主(HLS存在延迟性问题,也可以借助 video.js 采 ...
信息列表(手风琴)效果的多种实现方法
效果图:一.纯CSS实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl ...
【初学者必读】能让你月薪过万的5大web前端核心技能
前言Web前端开发所涉及的内容主要包括W3C标准中的结构、行为和表现,那么这三项中我们需要掌握的核心技能是什么呢?看小编来为你揭开谜底的。1.开发语言HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单,不就是制 ...
初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。 初学者Web:介绍一些前端开发中的基本概念和用到的技术A — AJAXAJA ...
【前端】自适应布局方法总结
一栏固定一栏自适应实现代码:<!DOCTYPE html><html><head> <title>自适应布局-一栏固定一栏自适应</title> <meta charset="utf-8"> ...
关于移动端元素定位在页面可视区外,超出部分隐藏的问题
在做PC端页面和移动端页面的时候,出现这样一个问题:给body设置宽、高100%时,将元素使用绝对定位,使其定位在页面之外,根据不同的情况,再以动画的形式跑到页面当中来,给body设置overflow:hidden,在PC端页面时可以实现元素在页面之外,且不会出现滚动条,但是在移 ...
HTML5须知十件事
2017-10-27 16:00:06

HTML5须知十件事

英文原文:10 things you should know about HTML5  一两年前,HTML5似乎还是一个模糊的概念,只有少数几个互联网的书呆子才会关心。而现在,却感觉仿佛HTML5无所不在了。感谢Mozilla和Chrome的快速发布,以及微软IE9的部署(IE1 ...
Web设计新手应知道的10个锦囊妙计
摘要:你在网页设计所学到的大多数教训都来自工作经验。学习是一个反复持续的过程,并且没有比犯错更好的方式来获得知识。在本文中,我们将讨论10个重要并常规的技巧,这是每位Web设计师新手都应该知道。在做网站时会遇到很多的问题,所以Web设计师通常要扮演多种角色,并且要掌握如何构建一个 ...
css3中“渐变”兼容性解决方案
这次是简单的谈一下我们常见的渐变在各个浏览器下的兼容性问题,算一个比较简单的问题。 我们熟知的浏览器有Chrome、Firefox、Opera、Safari以及ie系列。最基础的background:#cccccc属性表示页面呈现#cccccc色,当然这个在任何浏览器下面都是满足 ...
你知道吗?Web的26项基本概念和技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。 Internet connectionA — AJAXAJAX 全称为“ ...
CSS进阶篇:CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子:html代码:<div class="element">这是一段文字</div>css代码:.element { width:200px; height:200px; --main-bg-color: # ...
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>/*基础样式一定要记得清除,或者会对布局造成影响。*//*样式的设置根据自 ...
第一页下一页12345678910下10页末页第3/227页,总共:13573条数据