Annay_li-CSDN博客

原创移动web开发记录

1.meta标签<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capa

2016-09-01 17:28:34 315

原创 clearfix清楚浮动

子节点设置了浮动，在父节点加class=”clearfix”类，以达到清楚浮动效果（推荐） clearfix定义如下： .clearfix:after{visibility:hidden;display:block;font-size:0;content: ” “;clear:both;height:0;} .clearfix{*zoom:1;}参考：http://blog.sina.com.

2016-09-01 16:40:28 375

转载 flexbox弹性布局

详细教程1：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 详细教程2：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

2016-09-01 16:29:02 399

原创不定宽高的水平和竖直同时居中

.box{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); ,,, }

2016-09-01 16:16:23 377

原创移动前端-viewport

1.像素知识 px：逻辑像素，浏览器使用的抽象单位 dp和pt:物理像素,设备无关像素 dpr：设备像素缩放比计算公式：1px= (dpr）2 dp 2.深入理解viewport 详见：http://www.cnblogs.com/2050/p/3877280.html

2016-09-01 15:49:38 284

原创针对IE6兼容png

1.新建名为dd_belatedpng_0.0.8a-min.js的js文件 js文件代码（已编译好的代码）：/*** DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.* Author: Drew Diller* Email: [email protected]

2016-09-01 09:55:46 257

原创兼容html5

注意：以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

2016-09-01 09:13:39 325

原创内容定位导航js（移动端)

var myexports={};myexports.init = function(){ myexports.moreTxt();//调用}myexports.moreTxt = function(){var subject =$('#j_subject'); var navigation = $('#j_nav'); //导航 var nav = s

2016-08-31 18:21:08 575

原创 js对象写法

var myexports={}; //创建对象myexports.init = function(){ myexports.moreTxt();//调用函数 }； myexports.moreTxt = function(){ //定义函数并写函数$(function() { myexports.init();

2016-08-31 17:39:26 374

原创 jquery插件

1.stickUp 一个内容定位导航，固定在页面的某一位置，不随页面滚动而滚动，下载：stickUp 2.jquery.jcountdown.js（倒计时插件） 3.lyz.delayLoading.js（图片延时加载插件）其他详见jquery插件库:http://www.jq22.com/

2016-08-31 15:48:05 337

转载 IE6双边距bug及其解决办法

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{ margin:0; padding:0;}#div1{ width:200px; he

2016-08-31 15:13:42 808

原创前端工作心得

1.首先要把页面布局理解清楚再动手，确定哪里是需要切图，哪里是需要用代码编写的，同时注意能用代码编写的地方不要懒省事去切图。 2.在写代码的时候要确定好类名，类名要语义化，同时在写代码的时候随时随地格式化自己的代码，一个板块写好把代码折叠起来，免得满屏代码，看的头晕。 3.在编写代码的时候大写英文字母尽可能的小写 4.在布局的时候尽量不要设置高度，除非必须，要设置宽度值，用内容把div撑开

2016-08-31 14:28:42 5683

转载 sublime3快捷键汇总

Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。 Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。 Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。 Ctrl+S

2016-08-31 13:57:56 280

原创二级导航菜单栏

html:<div id="nav"><ul><li class="first"><a href="#">Home</a></li><li><a href="#">About Me</a></li><li><a href="#">Portfolio</a><ul><li><a href="#">Web</a></li><li><a href="#">Print</a></li><li

2016-08-26 14:14:06 660

原创鼠标放上去盒子向上滑动

html: <div class="box clearfix"> <div class="box1"></div> <div class="box2"></div> </div>css(引入重置文件后的车css):.box{height: 500px;width: 500px;background-color: pink;}.box1,.box2{widt

2016-08-26 14:09:44 3443

原创鼠标放图片上，原图上划上去一个透明图片

html: <div class="box"> <div class="box1"></div> <div class="box2"></div> </div>css（引入重置文件后的css):.box{height: 100px;width: 200px;background-color: pink;position:relative;overflow-y:hi

2016-08-26 14:06:39 2307

原创选项卡切换

html代码：<div class="box clearfix"> <div class="box1"> <ul> <li class="on"><a href="">按钮一</a></li> <li><a href="">按钮二</a></li> <li><a hr

2016-08-26 14:01:51 613

原创图片轮播

html <div id="wrapper"> <div id="banner"> <ul class="imgList"> <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss

2016-08-26 13:52:11 885

原创内容在页面中位置导航

html代码： <body> <div id="j_subject">  <div class="nav">nav</div>   <div class="box1 cont-box">第一部分</div> <div cl

2016-08-26 13:29:25 1214

Annay_li的博客