HTML+CSS
文章平均质量分 80
zhiqiang21
爱前端,爱 Python,爱 Linux,爱 VIM。
展开
-
前端知识概述----公司内部的一次分享
因为公司内部一个纯后端团队要做一些适合自己团队的web页面,所以就有了这次分享。知识都是很基础,有的知识也只是做了解简单介绍。主要是想让大家对前端有一个基本的了解。现在做一个总结。欢迎大家拍砖。原创 2015-04-16 21:24:47 · 8033 阅读 · 2 评论 -
myslide 插件开发知识点总结和 css3 动画性能问题的研究
myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的。1.手机端的 slider 插件是否有必要集成点按操作对于我自己开发的版本来说还是集成了这个操作的。但是参考了京东,天猫,淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作。那么是为什么呢?我想到的答案可能如下:原创 2016-03-19 19:44:51 · 2211 阅读 · 1 评论 -
前端开发知识点总结
1.a标签的相互嵌套很多时候我们会有下面的场景,如下图中所显示的那样。点击1区域(从图上看1区域包含2区域)和2区域跳转不同的链接。正常的代码结构应该是:<ul> <li> <a href="#1"> <div>内容1区域 <a href="#2"> <div>按钮2</div>原创 2016-04-05 19:40:58 · 4219 阅读 · 0 评论 -
垂直三列中间元素自动宽度布局
1.最常见的垂直三列布局html代码:<body><div id=""> <div> <div class="left_div"> left </div> <div class="mid_div"> 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空原创 2015-05-19 10:41:42 · 2441 阅读 · 0 评论 -
【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC)
引子:在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应.效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.第一种实现方法,是借助css3的新属性calc,实现代码如下:body { margin: 0; padding: 0;原创 2015-05-27 22:24:57 · 3894 阅读 · 1 评论 -
粘连 Footer 的 5 种方法 | CSS-Tricks
本文转载自:http://www.zcfy.cc/article/491文中对于“吸附”布局的实现非常巧妙,当我第一次看到那个效果图,第一时间也没有想到好的实现方法。一个简短的历史,如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部,如果有足够的内容将页面撑开,footer 可以被撑到网页下方去。但是,如果页面的内容很短,粘连 footer 仍然会出现转载 2016-06-20 21:38:29 · 5148 阅读 · 0 评论 -
html5学习开发指南
本文发表于CSDN《程序员》杂志2016年8月期,未经允许不得转载!概述:随着移动互联网的兴起,前端开发工程师的岗位也随着兴起。前端工程师不仅在用户和产品之间扮演着越来越重要的角色,而且前端的职能也能够(开始)朝着服务端延伸。所以不仅小公司缺人在招前端,大公司同样面临着缺少优秀前端工程师的尴尬处境。当我们在谈论或者招聘前端工程师的时候,都会提到熟练或者是熟悉 h5(html5) 开发。那么所谓的原创 2016-08-05 15:12:03 · 4648 阅读 · 3 评论 -
移动端h5开发相关内容总结(四)
前言:看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题:自己做技术的初衷;自己的技术成长之路;当然这两篇文章自己也在润色之中,相信很快会跟大家见面。原创 2016-10-03 16:12:23 · 5407 阅读 · 2 评论 -
高清屏概念解析与检测设备像素比的方法
前言做移动端h5开发很久了,从开始入行到现在。很多知识和工具都是在用前辈留下的遗产,都没有深入的研究过原因,了解为什么要这么去做。终于在国庆节有一个大块的时间,把最近看到的东西总结一下,也算是对这方面的知识划一个句号。着实把国庆节过成了劳动节,没办法,自己就是一个这样的人,“有些应该去做的,而且有能力做的,但是不把它给做了,心里面总是不舒服”。这篇文章的内容主要分为两个部分:高清屏相关概念解析与和原创 2016-10-05 14:43:54 · 4583 阅读 · 0 评论 -
再谈移动端适配和点5像素的由来
前言这篇文章的内容如题目一样,主要分为两个部分,谈谈业内主流的移动端适配解决方案点5像素的由来和实现方法建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》,因为这些文章涉及的很多概念在这篇文章中都会提到。1.再谈移动端适配1.1百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应,其实在高度上并没有很好的自适应。所以在我们的前端页原创 2016-10-06 17:05:23 · 3692 阅读 · 0 评论 -
JavaScript “跑马灯”抽奖活动代码解析与优化(一)
最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候,也顺便把自己的代码重构了一下。 这里主要是来写写自己的优化过程。俗话说: 一个程序猿的进步是从对自己的代码不满意开始的。开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的:1.移动端1px像原创 2016-02-15 17:03:48 · 4767 阅读 · 3 评论 -
JavaScript “跑马灯”抽奖活动代码解析与优化(二)
既然是要编写插件。肯定会有一些功能的需求。 功能需求: 1.能够控制灯的自动播放 2.灯的旋转方向 3.灯的旋转速度 4.奖品的旋转速度原创 2016-02-15 17:04:34 · 2460 阅读 · 1 评论 -
移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开。给大家分享一下这半年来的感受吧:知道和理解之间是有很大距离的。别人谈到一个知识点,能接上嘴并且能发表一下自己的意见,这叫知道。遇到问题能够想到用什么知识点解决问题,这叫理解。所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎原创 2016-01-31 14:52:43 · 3434 阅读 · 0 评论 -
CSS_Spirte实现原理
CSS Spirte就是所谓的把很多的小图标合并成一张大的图片,然后使用CSS的background-position属性,来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求,加快网页的加载速度。图片需要的结果:多余的话就不多说了具体的实现都已经写在了代码中,并且对于重点都进行了注释。如果有问题可以留言哈! css_spirte div u原创 2015-04-28 22:58:48 · 1969 阅读 · 0 评论 -
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
原文地址:http://caibaojian.com/js-name.htmlJS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离。1、名词解释screen:屏幕。这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性。client:使用区、客户区。指的是客户区,当然是指浏览器区域。offset:偏移。指的是目标甲转载 2015-05-27 16:42:29 · 2044 阅读 · 0 评论 -
Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS、转载 2015-05-29 11:01:42 · 41976 阅读 · 0 评论 -
【从0到1学Web前端】CSS定位问题二(float和display的使用)
display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。浏览器支持 所有主流浏览器都支持 display 属性。 注释:任何版本的原创 2015-05-28 22:03:07 · 2913 阅读 · 1 评论 -
【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
到这里可以验证当使用`top` `right` `bottom` `left` ***(这四个属性可以设置具体的像素数也可以设置百分比)***这样属性改变元素的位置的时候,不会影响其他元素的位置。而使用`margin` 这样的属性改变元素的位置会影响其他元素的位原创 2015-05-29 23:01:19 · 8110 阅读 · 1 评论 -
【从0到1学Web前端】CSS伪类和伪元素
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。原创 2015-06-02 22:29:17 · 2911 阅读 · 0 评论 -
css定位“十字架“之水平垂直居中
1.先看要实现的效果实际的效果图可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div。看实现代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>原创 2015-05-18 22:00:30 · 6556 阅读 · 1 评论 -
移动端 h5开发相关内容总结——CSS篇
1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">其它相关配置内容如下:width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)in原创 2016-01-06 15:59:15 · 33136 阅读 · 2 评论 -
前端开发 sublime text 常用插件和配置
前端开发sublimeconfigmac配置此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置。插件列表所有插件都可以使用Package Control安装,具体的安装方法可以自行谷歌安装,不在本文的介绍范围之内。也可以是使用git 手动安装。1.autoprefixer该插件主要使编写css更加的方便和快捷,可以配置快捷键给标签属性添加浏览器厂商前缀。安装前需要确定电脑原创 2016-01-07 13:09:20 · 27625 阅读 · 9 评论 -
对“粘连”footer布局的思考和总结
经典的"粘连"footer布局参考文章链接在文章末尾,简单的语言总结如下:经典的“粘连”footer布局就是。我们有一块内容。当的高度足够长的时候,紧跟在后面的元素会跟在元素的后面。当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部。如下图所示:当main足够长时当main比较短时上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况:我们需要实原创 2016-12-27 20:44:27 · 2952 阅读 · 0 评论