你的位置:首页 > 网页设计
【转】浏览器的渲染原理
How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。无论是作为开发,还是作为黑客,企图从Web 端注入 SQL,或是XSS 的时 ...
HTML和CSS中判断IE版本并实现相应HTML和CSS
在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。 1.HTML代码中经过本人测试,在HTML代码中,区别各种浏览器的代码如下:<!--[if IE 6]> 仅支 ...
display和visibility的区别
2017-03-25 00:00:22

display和visibility的区别

visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。vilibility:hidden(隐藏)、visible(显示) display:none(隐藏)、block(显示) 可以保存下面的代码看看效果:具体步骤:代码示例: < d ...
fis3 scss 版本报错
2017-03-25 00:00:20

fis3 scss 版本报错

fis3 scss编译需要安装的node版本为4.x,node版本高了fis会报错。如下图所示: ...
字体图标制作
2017-03-25 00:00:17

字体图标制作

web端为什么需要做字体图标?性能好。在之前项目中,网页的图标是用的图片,当图标很多时,体积比较大。而且之前做过2年的UI设计,总觉得这样经常切图麻烦,当需要同一个图标大小不一时,直接放大图片会失真。字体图标制作流程1:第一当然需要一个设计师啦...我常用的方法,设计师设计出图标 ...
css中px、em和rem的区别总结
前言em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。em 和 rem 的相同点使用 ...
H5弹性盒布局的使用(父容器属性)
为父容器添加display:flex/inline-flex 父容器可以使用的属性有:1.flex-direction:决定主轴的方向有四个属性值:row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴 ...
移动端布局方案 网易
2017-03-24 12:00:11

移动端布局方案 网易

移动端布局:rem方案:页面中的任何元素都采用rem布局,包括字体。 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset= ...
限制html文本框input只能输入数字和小数点
代码:<input type="text" class="txt" name="qty" value="" onkeyup="this.value=this.value.replace ...
download 下载文件 IE兼容性处理
根据CANIUSE(http://caniuse.com/#search=download)download兼容性如下图所示:如上图所示,IE浏览器是不支持的。 1、测试代码: 1 <!doctype html> 2 <html lang="en& ...
HTML5本地图片裁剪并上传
最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的需求是:头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像。如果大于规定的尺寸,那么用户可以选择 ...
CSS中margin边界叠加问题及解决方案(转)
边界叠加简介边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生 ...
CSS3 transition 浏览器兼容性
1、兼容性根据canius(http://caniuse.com/#search=transition),transition 兼容性如下图所示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l ...
谈谈一些有趣的CSS题目(十三)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。不断更新,不断更新,不 ...
【原】老生常谈
2017-03-23 00:00:38

【原】老生常谈

刚开始写这篇文章还是挺纠结的,因为网上搜索&ldquo;从输入url到页面展示到底发生了什么&rdquo;,你可以搜到一大堆的资料。而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步追问下去的,很多细节就不太清楚了。  最 ...
CSS3——复杂选择器
2017-03-23 00:00:34

CSS3——复杂选择器

今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点。1、兄弟选择器:同一位置级别,可称为兄弟元素a、相邻兄弟选择器:next紧紧跟在【当前元素之后的】(一个),指定选择器的元素       语法:通过“+”作为结合符eg: div+p ->紧跟 ...
Html利用CSS布局技巧
2017-03-23 00:00:31

Html利用CSS布局技巧

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实 ...
SEO整站优化,让你的网站更加与人不同
网站是一个企业在互联网的一个重要门户,是企业与客户重要的沟通桥梁。然而,如何让你的网站,在浩如烟海的网页汪洋中脱颖问出,无疑是每一间公司所期望的。那么如何才能更好的达成你想要的呢?广州先可思网络科技有限公司,为你提供更好的培训方案和优质的学习平台。  首先是对网站诊断,分析网站的 ...
关于li标签之间的间隔如何消除!
问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距。  原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间。  解决方案:1、将li标签之间用注释填补          <li>内容 ...
【转】浏览器的渲染原理简介
How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。 浏览器工作大流程先看个图从图中,可以看到:1) 浏览器会解析三个东西* ...
CSS实现div水平垂直居中
2017-03-22 12:00:18

CSS实现div水平垂直居中

实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案。1. div宽高固定width: 400px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;marg ...
纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益!  在CSS中实现水平居中是非常简单的,行内元素设置其父元素的text-align:center,块级元 ...
web前端常用知识点
2017-03-22 00:00:33

web前端常用知识点

1、常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ...
FineReport中如何自定义登录界面
在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证。自定义登录界面登录界面设置自定义html登录页面:命名为login.html, ...
bootstrap IE8 兼容性处理
2017-03-22 00:00:28

bootstrap IE8 兼容性处理

1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <met ...
html5新增标签
2017-03-22 00:00:27

html5新增标签

html5新增标签<section></section> 表示内容区块,一般入章节、页眉、页脚或者页面中的其他部分。可以与h1-h6等元素结合起来使用,标示文档的结构 <section></section><article&g ...
【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了。 1.左右按钮tab选项卡双切换很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分。1) 先实现Tab内容和标签部分的显示:HTML代码:<div ...
深入理解CSS中的margin
2017-03-22 00:00:21

深入理解CSS中的margin

1.css margin可以改变容器的尺寸   元素尺寸   可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth   占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法   margin与可视尺寸    ...
Html5游戏框架createJS组件
2017-03-22 00:00:20

Html5游戏框架createJS组件

CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。掌握了CreateJS可以更方便的完成HTML5的游戏开发。CreateJS提供了E ...
30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)
去年八月时要做一个OA系统为了后台界面而烦恼,后来写了一篇博客(《后台管理UI的选择》)介绍了选择过程与常用后台UI,令我想不到的时竟然有许多开发者与我一样都为这个事情而花费不少时间,最后界面效果还是不佳;还好这个OA系统已经基本交付给客户在使用了,但登录界面还是非常难看,这几天 ...
丫空间项目总结
2017-03-21 12:00:15

丫空间项目总结

最近准备春招,正好可以把之前的实习经历总结归纳以下,先来总结一下在开发丫空间时遇到的问题吧。一、背景说实话,开发这个网站技术含量其实蛮低的,无论是前端还是后端,都是入门级水平。毕竟当时(2015年9月)我算是前端刚入门,也就只会简单的切切图,JS也只能做些简单的DOM操作,连独自 ...
一些常用的meta标签
2017-03-21 12:00:12

一些常用的meta标签

1 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> 2 <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zh ...
rgba兼容性处理
2017-03-21 12:00:10

rgba兼容性处理

根据caniuse(http://caniuse.com/#search=rgba),rgba兼容性为IE9以及以上浏览器。 实例代码: 1 <!doctype html> 2 <html lang="en"> 3 4 < ...
gradient渐变IE兼容处理
2017-03-21 12:00:08

gradient渐变IE兼容处理

根据caniuse(http://caniuse.com/#search=gradient),rgba兼容性为IE10以及以上浏览器。 实例代码: 1 <!doctype html> 2 <html lang="en"> 3 ...
DOCTYPE的作用以及标准模式和兼容模式的区别
DOCTYPE的作用以及标准模式和兼容模式的区别<!doctype>声明必须处于HTML文档的头部,在<html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。HTML5中不区分大小写&l ...
响应式开发(1)
2017-03-21 00:00:20

响应式开发(1)

起因 因为越来越多的智能移动设备( mobile, tablet device )加入到互联网中来,移动互联网不再是独立的小网络了,而是成为了 Internet 的重要组成部分。响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机 ...
响应式开发(2)
2017-03-21 00:00:17

响应式开发(2)

1.像素  因为浏览器不是根据硬件像素宽度工作的,而是根基DIPs工作的叫什么设备独立像素值,这个有个链接给你 (http://yunkus.com/physical-pixel-device-independent-pixels/)2.DPR  设备像素比DPR( ...
vue2源码浏览分析01
2017-03-21 00:00:16

vue2源码浏览分析01

1.构造函数 Vue$3function Vue$3 (options) { if ("development" !== 'production' && !(this instanceof Vue$3)) { warn('Vue is ...
学习H5仿制网站时遇到的问题
学习H5的第二周,开始仿制网站,在本过程中也发现了自己存在的更多问题。1.TOP块:在制作top中,遇到的第一个问题,一旦top左右的背景色不同该怎样去调整解决方式:建立两个div取代一个div 2.浮动排列使用的并不熟练:使用浮动时,总是出现各个块乱飘的现象解决方法, ...
移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理什么是适配,为什么要适配我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一 ...
记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面。。而且有的页面内容少的话不能把尾部挤到最下面,所以,这次来研究一下怎么能让尾部一直在下面。。 先把html代码放出来:<b ...
【Little Demo】从简单的Tab标签到Tab图片切换
Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容。目前在各大网站都有存在这种效果。例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等。 1.简单的 Tab 标签a) 先来实现Tab标签的头部通过HTML和CSS完成基本的标签效果。包括H ...
【Little Demo】Tab标签
2017-03-19 00:00:20

【Little Demo】Tab标签

Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容。目前在各大网站都有存在这种效果。例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等。 1.简单的 Tab 标签a) 先来实现Tab标签的头部通过HTML和CSS完成基本的标签效果。包括H ...
10个值得前端收藏的CSS3动效库(工具)
现在网站重视的更多的是用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用。在网站中加入一些动效会让整个页面看起来很有动感。但是如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话,你可以参考并使用下面的这10个优秀动效库(工 ...
静态变量导致的内存泄露
public class MainActivity extends Activity{ private static final String TAG = ...
关于bootstrap原理及优缺点
网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。bootstrap优缺点:1.bootstap最近发布了 ...
CSS前端开发学习总结、一
1. 属性选择器: 2. CSS伪类选择器:3. CSS伪元素:4. CSS优先级:5. 行内标签:6. 块级标签:7. Display:8. Line-height:行高9. text-indent:首行缩进10.white-space ...
css相关
2017-03-18 00:00:28

css相关

textarea去掉拉伸resize:none;input button等去掉选中的默认样式input,button,select,textarea{outline:none;}超出显示省略号overflow:hidden;white-space:nowrap;text-over ...
CSS 布局整理
2017-03-18 00:00:24

CSS 布局整理

1.css垂直水平居中效果:HTML代码:<div id="container"> <div id="center-div"></div></div> CSS实现:都设置居中 div块的 ...
canvas画直角坐标系
2017-03-18 00:00:24

canvas画直角坐标系

canvas画直角坐标系2017年3月17日利用canvas画直角坐标系其实挺简单的,只要确定了原点(0,0)点,也可以是其他的点,只要自己知道那是原点就行!知道了原点再分别向X轴方向和Y轴方向画两条直线即可(X轴和Y轴也是相对的,这个纯看个人喜好和实际需求)。闲话不多说直接看代 ...
html+css 基础(标签选择,分页,行和块元素)
(1)html标签选择1、<a></a> 的功能有连接,下载,锚点2、<span></span> 用来区分字体样式,<strong></strong>和<em></em>用来强调某段文 ...
CSS深入理解之border篇
2017-03-17 12:00:32

CSS深入理解之border篇

border的属性1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是3px的原因是只有当border是3px及以上时,border-style才有效     果),thick(5px)2.border-style:有 ...
JD .  简单的网站构成、引入图标、去除 图片间距/加粗/倾斜/下划线/蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式
模拟京东案例准备:截图(效果图PSD文件)搭建项目环境 (结构样式行为分离) HTML 核心文件 index.html CSS 控制样式 base.css(基础样式) ...
WebApp 里Meta标签大全,webappmeta标签大全
1.先说说mate标签里的viewport:viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能 ...
ios中iframe的scroll滚动事件替代方法
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录。因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图:代码如下:<!DOCTYPE html><html><head> <title& ...
JD .  圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中不占位置
---恢复内容开始---圆角矩形border-radius:50% 40% 30% 33px; 像素、百分比、小数( 0.5 )        左上、右上、右下、左下权重:标签 1 ; 类选择器 10 ; ID选择器 100 ;行内样式 10 ...
HTML5学习笔记一: 认识H5
2017-03-16 12:00:07

HTML5学习笔记一: 认识H5

什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 HT ...
css3布局属性flex
2017-03-16 00:02:31

css3布局属性flex

html代码如下:<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#& ...
如何对网站的文件和资源进行优化?
1.文件合并(目的是减少http请求):使用css sprites合并图片,一个网站经常使用小图标和小图片进行美化,但是很遗憾这些小图片占用了大量的HTTP请求,因此可以采用sprites的方式把所有的图片合并成一张图片 ,可以通过相关工具在线合并,也可以在ps中合并。2.使用C ...
html简写格式
2017-03-16 00:01:34

html简写格式

简写示例:编辑器中输入--h1{图片瀑布流}+ul.ul_box>li*20>img[src="img/$.jpg"]之后按TAB键生成代码如下:<h1>图片瀑布流</h1><ul class="ul_box ...
第一页下一页12345678910下10页末页第1/198页,总共:11831条数据