积累

1.图片的居中问题：将图片转换成block,设置margin:0 auto。
2.为了增加用户的体验度，将图片保存的时候，使用切片工具。
3.清除浮动：
.clearfix { *zoom:1;}/*兼容IE低版本*/
.clearfix:after { content:''; display:table; clear:both;}
4.boxsizing:
.boxSizing
{-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
5.圆形
<ul class="circular clearfix">
<li class="fl boxSizing"><a href=""><circular><span>20余年</span><br />皮肤病<br />临床经验<br /></circular></a></li>
</ul>
.per ul li{width:33.33%;}
.per ul li a{display:block;color:#666;width: 85%;border-radius:50%;border:2px solid #E6E6E6;}
6.虚线：dashed
7.头部的弹性布局：在苹果4中不能正常显示
8.有花纹的背景如何做：引入整张的背景 repeat,上边覆盖住
9.移动端头部
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

1）首先 name="viewport" 声明了视口，也就是移动端的视频窗口的一个声明与<meta charset>是一个道理，但是没添加属性就等于无效果一样。

2）content="width=device-width, //应用程序的宽度和屏幕的宽度是一样的

3）initial-scale=1.0　　　//应用程序启动时的缩放比例(1.0表示不缩放)

4）maximum-scale=1.0　　//用户可以放大到最大尺度(1.0表示不缩放)

5) minimum-scale=1.0　　//用户可以缩放到最小尺度(1.0表示不缩放)

6）user-scalable="no"　　 //用户是否可以通过他的手势来缩放整个应用程序，使程序的尺度发生一个改变(yes/no)
10.这个符号“ · ”
输入方法如下：
1、切换至中文输入法（如搜狗、智能ABC等都可以）
2、确认是中文标点模式（在输入法的标签上可以看到）
3、按“波浪键”（键盘左上角ESC下方那个键）
11.<form>
<input class="input_1" type="text" value="请输入您要搜索的内容" onfocus="if (value =='请输入您要搜索的内容'){value =''}" onblur="if (value ==''){value='请输入您要搜索的内容'}" /><input class="input_2" type="button" value="搜索" />
</form>
12.写页面的时候，一般不要固定布局的高度，宽度可以固定，用padding的时候，要注意高度和宽度的变化
13.公共样式的定义，应用起来很方便，如果有经常用到的css的样式，可以先将样式定义好，到时候直接加类名就可以了
14.用ps的切片工具的时候，要注意文件夹的建立，不要一个images文件下嵌套一个images文件
15.在布局的时候，先将页面的结构大致写出来，这样在布局的时候就不会乱。
16.在做pc端的时候，圆角属性是不兼容的，如果要是用圆形的话，可以将圆形抠出来，以背景的方式引入(但是在真正做项目的时候，圆形可以用border-radius这个属性，不影响排版就可以)
17.overflow: hidden;定位的时候，按钮被覆盖住，原因是：slideBox的css的样式定义的是 overflow:hidden；（这个问题是出现在图片轮播插件的时候遇到的 ，左右两个按钮定位的问题）
18.一般在做项目的时候，要注意设计图是多宽的，1440px的话，banner轮播图要设置宽度为1440，而不能是100%
19.项目中的特殊字体，要进行切图。然后就是网页中的链接问题，要记得时刻加链接
20.图片放大与缩小的问题：transform:scale(1.2);使用CSS3新属性，transform的scale 大于1: 放大 小于1: 缩小
21.背景引入会在ie8中有兼容性问题；将合在一起的background的属性分开写，能将图片显示出来
22.返回顶部的js:
<div id="scroll">返回</div>
<script type="text/javascript">

var oScroll = document.getElementById('scroll');
oScroll.onclick = function() {
var x=document.documentElement.scrollTop;
var timer = setInterval(function() {
window.scrollBy(0,-x);
if(document.body.scrollTop == 0) {
clearInterval(timer);
};
}, 2);
}
</script>
23.JS获取滚动条的高度：http://www.cnblogs.com/iyitong/p/4688200.html
23.Jq获取滚动条的高度：https://zhidao.baidu.com/question/318013277.html
24.jquery 返回顶部：<script type="text/javascript">
$(function(){
$('#scroll').click(function(){
$("html,body").animate({
scrollTop:"0"},700)

})
})
</script>
25.获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

26.jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
实例

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});

27.提交按钮用submit button，别用a标签；提交按钮要写在表单里面
28.jquery的动画"多个动画之间用 ， 隔开"
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
29.tab初始化：Tabs初始化时如何让特定的tab处于选中状态
$('#div_sysconfig').tabs('update',{
tab:$('#div_sysconfig').tabs('getTab','首页图片管理'),
options:{
selected:true
}
});
30.检查一个对象是否包含在另外一个对象中的方法，contains方法。
31.hover事件的bug ,用什么方法解决：
1.用布局的方法进行解决
<div class="box">
<div class="hello">
<img src="img/body.gif" />
<span>你好，世界</span>
</div>

<div class="word">
<p class="fl"></p>
<p class="fr"></p>
</div>
</div>

JS:
$(function() {
$('.fl,.fr').show();
$('.box').hover(function() {
$('.word').show();
$('.fl,.fr').show().animate({ width: "200px" },300)
},function(){
$('.fl,.fr').animate({ width: "0" },300)
});
})
CSS://定义的时候，要严格注意宽度和高度的设置，.hello宽度和高度，box的宽度和高度。
*{margin:0;padding:0;}
.box{position:relative;width:400px;height:400px;}
.hello{width:400px;height:400px;position: relative;}
.hello span{display:block;text-align: center;color:#fff;font-weight:600;position: absolute;font-size:50px;top:170px;left:0;width:400px;text-align: center;}
img{width:400px;height:400px;}
.word{height:400px;width:400px;left: 0;top: 0;position: absolute;color:#fff;text-align: center;}
.word p.fl{width:0px;height:400px;background:red;float:left;}
.word p.fr{width:0px;height:400px;background:blueviolet;float:right;}

32.transition: all 1s ease;过渡的效果

33./* Rotate div */ 旋转 正数代表：顺时针旋转 负数代表：逆时针旋转
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}

 

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数:

transform:scale(,42);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */

过渡:
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */

34.div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

35.如何判断是移动端，还是PC端，当是PC端的时候，加上这段代码，如果是手机端输入该网址的话，就会变成手机端的样式，是以下js的代码，将移动端的地址写正确
<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="http://liu.xingguodong.cn/wm/wm12/";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="http://liu.xingguodong.cn/wm/wm12/"
}else{
window.location.href="http://liu.xingguodong.cn/wm/wm12/"
}
}catch(e){}
}
}
}
</script>

36.不定宽高的水平垂直居中:
<div class="" style="width:400px;height:400px;border: 1px solid red;position:relative;">
<img style="position: absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%)" width="200" height="200" src="images/do_01.jpg"/>
</div>

37.来回移动的动画：
.arrowing {
animation-name: arrowing;
-webkit-animation-name: arrowing;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
38.所谓闭包，简单理解就是子函数使用父函数的局部变量；
39.鼠标悬浮的时候，盒子有悬浮的效果css:
.part_03 ul li:hover{
-webkit-transition: all 0.2s linear;
-khtml-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
box-shadow:8px 8px 15px #ccc;
-webkit-box-shadow:8px 8px 15px #ccc;
-moz-box-shadow:8px 8px 15px #ccc;}


40.js错误处理：
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}

41.
数字转换成字符串
般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：
(“” +) > String() > .toString() > new String()

42.<!--移动端兼容适配 640-->
<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
var version = parseFloat(RegExp.$1);
if(version > 2.3) {
var phoneScale = parseInt(window.screen.width) / 640;
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
//微信去掉下方刷新栏
if(navigator.userAgent.indexOf('MicroMessenger') >= 0) {
document.addEventListener('WeixinJSBridgeReady', function() {
//WeixinJSBridge.call('hideToolbar');
});
}
</script>

43.按钮闪动：
<style type="text/css">
p {
width: 210px;
height: 30px;
line-height: 30px;
color: #ff5050;
text-align: center;
margin: 40px auto;
}
/**
* 下面是 @keyframes 的使用方式
* -webkit-animation:playBox 的 playBox 是调用该函数
* @-webkit-keyframes playBox 的 playBox 是函数的名称
* */

.box {
-webkit-animation: playBox 1.0s infinite;
}

@-webkit-keyframes playBox {
0% {
text-decoration: none;
background:red;
color:orange;
}
50% {
text-decoration: none;
background: #ffdcdc;
color:orange;
}
51% {
text-decoration: underline;
background:blue;
color:#000;
}
100% {
text-decoration: underline;
background: #e9c8c8;
color:white;
}
}
</style>

</head>

<body>
<p class="box">阅谁问君诵，水落清香浮。</p>
</body>

40.平时多看页面的效果；多总结，今天写背景动画的时候，出现了问题
41.
按钮和北京的闪动
//两个按钮字体同时闪动
.oneColor { color:#641500 ;}

要把预设里面的内容的字体的颜色删掉：.btn a{color:#fff;}删掉
function btn(){
var oBtn = getByClass("btn");
var tims = setInterval(function(){
for(var i = 0; i<oBtn.length;i++){
var oImg = oBtn[i].getElementsByTagName('a');
for(var j = 0; j<oImg.length;j++){
var oName = oImg[j].className;
if(oName.indexOf("oneColor") == -1){
addClass(oImg[j],'oneColor')
}else{
removeClass(oImg[j],'oneColor')
}
}
}
},500)
}

//一个按钮字体的闪动
不需要把预设里面的内容的字体的颜色删掉；
.oneColor { color:#641500 ;}
function onebtn(){
var oBtn = getByClass("oneBtn");
var tims = setInterval(function(){
for(var i = 0; i<oBtn.length;i++){
var oName = oBtn[i].className;
if(oName.indexOf("oneColor") == -1){
addClass(oBtn[i],'oneColor')
}else{
removeClass(oBtn[i],'oneColor')
}
}
},500)
}

42.
轮播图上面的小圆点，改变样式的话，分页的数字可能会出现，这时候，可以将出现的字体的颜色和背景颜色设置成一样的，注意设置原点的行高。
.focus .hd ul li{ display:inline-block; width:1.5rem; height:1.5rem;line-height: 1.5rem;border-radius:0.75rem;background:#ede7dd; margin:0 5px; vertical-align:top;color:#ede7dd;}
.focus .hd ul .on{ background:#b20000;color:#b20000;}

6月6日
43.按钮提交用submit ，不用button;
一张表单可以有多个普通按钮，且至少有一个提交按钮（需提交表单网页）

44.写页面的时候，如果遇到有边框，而且需要几个均分的时候。这时候要标签里面再套一个标签，给里面的标签添加边框，将里面的标签设置成块元素，同时，将padding加在里面的标签上。
45.像页面中，比较小的图，可以将图片设置成固定的大小。
46.页面中的等高，用jq写完以后，用window.onload=function(){}这样比较容易加载出来，但是一个页面只能有一个window.onload=function(){}，可以用$().ready(function)
47.引用的文件名称，要注意大小写，服务器上是区分大小写的
48. 苹果手机自带的样式去掉：
添加css样式:input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
textarea { -webkit-appearance: none;}然后自己定义样式，美化修改就好了。
49.<input type="image" src="img/sub.jpg" alt="discription"/> 提交按钮是特殊图片的时候

50.jquery中ajax方法有个属性async用于控制同步和异步，默认是true,即ajax请求默认是异步请求，有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

51.animate.css 动画 特别好用，里面是写好的一些css3动画效果, 你只需要引用这个样式,调用里面的对应的效果就行了 ********别忘了加上animated
52.ajax
<script type="text/javascript">
$(function(){
$('.more').click(function(){
loadmore();
})
function loadmore(){
$.ajax({
url:"https://zyl.xingguodong.cn/index.php?g=Api&m=Ceshi&a=gettest",
success:function(data) {
$('#li').append(data);
}
});
}
}) </script>