http://edu.csdn.net/course/detail/1373
http://www.cnblogs.com/maorongmaomao/archive/2011/12/20/2294622.html
http://www.jb51.net/css/140685.html
http://blog.csdn.net/linlin_juejue/article/details/6622756
http://blog.csdn.net/freshlover/article/details/12132801
http://www.cnblogs.com/jarson-7426/p/3845062.html【重点】
http://www.zhangxinxu.com/wordpress/2010/04/%E8%AE%A9ie6ie7ie8%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81css3%E5%B1%9E%E6%80%A7/
http://blog.sina.com.cn/s/blog_7fb1495b0100vfka.html
http://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html
http://blog.csdn.net/freshlover/article/details/7535785/
http://www.cnblogs.com/PheonixHkbxoic/
http://www.cnblogs.com/PheonixHkbxoic/p/6041667.html【前端资料汇总】
https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
http://www.wndhw.com/diannao/jiaocheng/jc034.htm
http://ymblog.net/
app
index.html里页面 info.html未做
index3.html用百分比 浏览器窗口缩小排版乱
index4.html在body加min-width:1028px; 浏览器窗口缩小排版乱
index5.html 浏览器窗口缩小不会错乱了
index6.html 浏览器各种设备兼容 窗口缩小不会错乱了
index7.html 浏览器各种设备兼容 窗口缩小不会错乱了 头部文本框半圆 ie兼容解决
index10.html 浏览器各种设备兼容 窗口缩小不会错乱了 头部文本框半圆 ie兼容解决 video 基本可以,ie7,8左右边会有黑边
index12.html 视频 /video12-ok/hui00041.mp4 和机打字效果 不太好
【问题1:】
position fixed margin0 auto就不起作用
解决方法:
margin:0px auto;
position:fixed;
left:0px;
right:0px;
【问题2:】
html5 在IE6/IE7/IE8中使用html5标签 不识别
解决方法:
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--方法二-->
<!--<style type="text/css">
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
</style> -->
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i]);
}
})()
</script>
连接地址
http://linhui-dragon.iteye.com/blog/2003223链接
代码:
<!doctype html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在IE6/IE7/IE8中使用html5标签</title>
<!--试试去掉以下方法,运行代码看看-->
<!--方法一-->
<!--
<!–[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
-->
<!--方法二-->
<style type="text/css">
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
</style>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i]);
}
})()
</script>
</head>
<body>
<header>宅到底</header>
<nav>菜单1</nav>
<div>菜单2</div>
</body>
【问题3:】
ie7不支持某属性:
*left: 25%; /**IE7不居中处理***/
【4】:
text-size-adjust:100%
【5】display:inline-block 不被IE7识别的解决方案
http://blog.csdn.net/linlin_juejue/article/details/6622756
解决方法:
display:inline-block;
*display:inline;
*zoom:1;
【(@media判断;两个div;外面div 设置 width:100%;min-width:320px; 里面div设置width:320px)】
index6.html;解决方法:
/**>=320的设备***/
@media only screen and (min-width: 320px) {
.body-container{
width: 100%; /**设置浏览器窗口变小 控制***/
min-width:320px; /**设置浏览器窗口变小 控制***/
/*position: absolute;
left: 0;
top: 0;
height:auto;*/
}
.jl-navbar{
width:320px; /**设置浏览器窗口变小 控制,此时不要百分号***/
height:auto!important;
height:66px;
min-height:66px;
border: 0px solid red;
background-color: cornflowerblue;
/*text-align: center;*/
background-color: salmon;
}
}
【6】it9下不支持media 【????】
http://blog.sina.com.cn/s/blog_601b97ee0101asz3.html
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
【7】
ie7,ie8不支持 border-radis
【方法一 ie-css3.htc】
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
/* -moz-box-shadow:10px 10px 20px #000;
box-shadow:10px 10px 20px #000;*/
behavior:url(css/ie-css3.htc);
z-index: 999;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
【方法二 PIE.htc】
.jl-navbar-menu-right-input2{
border: 1px solid #669966; padding: 60px 0pt; text-align: center; width: 200px; font-size:18px; font-family:"sans-serif";
border-radius: 8px;
box-shadow: #666 0px 2px 3px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type="video/mp4">
【8】
ie7,8不支持video
http://blog.csdn.net/freshlover/article/details/7535785/
http://www.cnblogs.com/jukan/p/5519469.html
http://www.jq22.com/jquery-info404【重要】
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<!-- <video autoplay="" loop=""
poster="http://cdn.dev.egret.com/simpleboot/home/video/home.jpg" id="bgvid">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type="video/mp4">
</video>-->
改:
1.video.js
.video-js {
/* background-color: #000;*/
2.
.video-js .vjs-text-track {
display: none;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
/* background-color-with-alpha */
background-color: #000000;
background-color: rgba(0, 0, 0, 0.5);
}
gai:
【video兼容修改】
video-js.css:
/*u.Da.prototype.e = function() {
return u.e("div", {
className: "vjs-control-bar"
})
};*/
u.Da.prototype.e = function() {
return u.e("div", {
style: "display:none"
})
};
u.options = {
techOrder: ["html5", "flash"],
html5: {},
flash: {},
/*width: 300,
height: 150,*/
/*$("videojs.ControlBar", u.Da);*/
【浮动ie8 height 不会自动撑大】 参考222
<!-- min-height:1000px;height:auto!important;height:1000px;-->【可行】
<!--height:100px;min-height:100px;height:auto!important-->【不行,顺序错误】
<div class="jl-content" >
<div class="jl-content-video" style="height: 2000px; width: 1000px;" >
<video id="bgvid" class="video-container" style=" margin-left: 0px; padding-left:0px; width:1400px; min-width: 100%;min-height:1500px;height:auto !important; height:1500px; overflow:visible;"
autoplay="" loop="" data-setup="{}">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type='video/mp4' />
</video>
</div>
</div>
【鼠标放在图片上放大】
transform:scale(1.5,1.5);
ie:-ms-transform:scale(1.5,1.5);
【机打字】
http://www.html5tricks.com/css3-text-type-effect.html
http://www.qdfuns.com/notes/17783/93c5d6a85ca0b1108ade92344f1a9de8:storey-2.html
animation: typing 20s steps(30, end)
【如何在css中让div中的P标签居中】
如何在css中让div中的P标签居中,如图,我在那个div写了text-align是center了,没作用
你设text-align:center只是使p里的文字内容居中,对p没效果的,应该要这样:
div p{margin:0 auto;width:200px;}
其中200px你自己定,只要比div的宽度小就有效果
[解法一]: 如果在div里设置text-align,并且p没有设置width;者p自动居中
(因为p没有宽度,者以内容为居中显示)
<div>
<p>
</div>
[解法二]: 如果在div里设置text-align,并且p设置width;者p左排列;
(因为text-align只设置内容居中,并没有设置P,P有宽度,默认从左边起排列)
margin:0 auto;
width:200px;
<div>
<p>
</div>
【机打字】
【ok】
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h3 {
/*font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;*/
width: 16.5em; /* fallback */
/* width: 30ch; # of chars */
/*margin: 2em 1em;*/
/*white-space: nowrap;*/
overflow: hidden;
animation: typing 20s steps(50, end), /* # of steps = # of chars */
blink-caret .5s step-end infinite alternate;
}
【ok-end】
/*@keyframes typing{
from{width: 0;}
}
@-webkit-keyframes typing{
from{width: 0;}
}*/
.jl-content-sectionOne-title>h3,.jl-content-sectionOne-title>p{
padding: 4px;
letter-spacing:3px;
margin:0 auto;
width: 30em;
/*width:500px;*/
/*width: 16.5em; */
overflow: hidden;
/* width: 16.5em; *//* fallback */
/*animation: typing 20s steps(1, end);*/
animation: typing 5s steps(21, end),
blink-caret .5s step-end infinite alternate;
/*-webkit-animation: typing 20s steps(1, end);*/
}
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
/*h3 { */
/*font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;*/
/*width: 16.5em; *//* fallback */
/* width: 30ch; # of chars */
/*margin: 2em 1em;*/
/* white-space: nowrap;
overflow: hidden;*/
/*animation: typing 20s steps(30, end), *//* # of steps = # of chars */
/* blink-caret .5s step-end infinite alternate;
}*/
http://www.qdfuns.com/notes/17783/93c5d6a85ca0b1108ade92344f1a9de8:storey-2.html
http://www.jb51.net/article/70948.htm
http://www.jb51.net/article/70948.htm
http://ws234.com/yanshi/cssdazi/
【github】
holagoldfish
hf917
http://blog.csdn.net/buchiyangyu/article/details/51711101
【git客户端】
http://www.cnblogs.com/vitah/p/3612473.html
http://www.cnblogs.com/vitah/p/3618659.html
http://blog.csdn.net/lujinjian605894472/article/details/8350715
git客户端推送报错
branch正确的情况下,
不知为什么,在push的时候总是出现:
fatal: remote error:
You can't push to git://github.com/user_name/user_repo.git
Use git@github.com:user_name/user_repo.git
的提示,
解决办法:
$ Git remote rm origin
$ git remote add origin git@github.com:user_name/user_repo.git
$ git push origin
ok!
经过高人的点播,找到了原因:
如果在git clone的时候用的是git://github.com:xx/xxx.git 的形式, 那么就会出现这个问题,因为这个protocol是不支持push的
用$git clone git@github.com:lujinjianst/myNCCL.git
就可以用git push了。
【hbuilder 配置git】
http://blog.csdn.net/u011871921/article/details/44238971
http://blog.csdn.net/xiawu1990/article/details/50829274
【eclipse git】
http://blog.csdn.net/yanzi1225627/article/details/12885317
1. 本项目是 h5 app前端项目支持安卓、ios平台(Ps :后端用java写的代码在git仓库:H5APP-java)
2. 业务流程
用户注册——>登录——>列表展示用户——>查看其他用户信息——>关注其他用户——>聊天——>发布活动——>查看活动
3. 模块及功能
3.1 注册(本地照片上传、日期选择器、Job选择期、提交信息给后台)
IE6 hack
_background-color:#CDCDCD; /* ie 6 */
IE7 hack
*background-color:#dddd00; /* ie 7 */
IE8 hack
background-color:red \0; /* ie 8/9*/
IE9 hack
background-color:blue \9\0;
火狐,遨游,及其它高级浏览器通用
background-color:red!important;
注意写hack的顺序,其中:
background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 仅IE9支持;
另外,background-color:eeeeee\9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
http://blog.sina.com.cn/s/blog_683f52b40101436t.html
如何让ie6和ie7兼容display:inline-block; (2012-05-11 10:31:53)转载▼标签: 杂谈 分类: html css
块元素想要用display:inline-block;使其与行内元素在同行显示,这个效果除了ie6和ie7,其他的浏览器都是可以实现的,这里总结一下如何解决ie6和ie7不兼容的问题。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
p{display:inline-block;width:60px;height:30px;overflow:hidden;margin:0;padding:0;color:red; line-height: 45px;margin: 0 7px;}
</style>
<body>
<div style="color:#096;margin:0;padding:0;width:500px;line-height:30px;">p标签的display:inline-block;dfsf<p>p标签的display:inline-block;</p>p标签的display:inline-block;</div>
</body>
</html>
正常浏览器效果:
ie6和ie7效果:
之所以会出现这样的情况是因为display:inline-block;触发了ie的layout,这里有两个解决办法,可以让p标签的文字同行显示:
一:css部分加上这段代码:p{*display:inline;},注意是另起一行写。
二:将样式改为:
p{display:inline-block;width:60px;height:30px;overflow:hidden;margin:0;padding:0;color:red; line-height: 45px;margin: 0 7px;display:inline;zoom:1;
我自己测试了的,木有问题。
ps:以上部分是针对块级元素想要在行内显示的效果,如果是行内元素,a或者span,想要在行内增加宽度,背景,上下边距是不是也需要做兼容呢?不需要的,我测试了下,行内元素将display:inline-block;在ie6和ie7下面是可以同行显示没有兼容问题。
http://www.jb51.net/css/21991.html
http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/
http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
http://www.frontopen.com/2552.html
https://www.zhihu.com/question/20543196
作者:徐尤熙
链接:https://www.zhihu.com/question/20543196/answer/89218605
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
水平居中方案:
水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
在前端面试中,大都会问你div居中的方法:
文笔不好,就随便寥寥几句话概括了,希望大家能够轻拍
不过以后文笔肯定会变得更好一些的。
开始这些东西之前也可以测试一下你对html了解多少,让我们测试一下吧,小测验:你对HTML5了解有多少?
今天我们就细数一下几种方法:
1,使用position:absolute,设置left、top、margin-left、margin-top的属性
.one{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
这种方法基本浏览器都能够兼容,不足之处就是需要固定宽高。
2,使用position:fixed,同样设置left、top、margin-left、margin-top的属性
.two{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
大家都知道的position:fixed,IE是不支持这个属性的
3,利用position:fixed属性,margin:auto这个必须不要忘记了。
.three{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:pink;
}
4,利用position:absolute属性,设置top/bottom/right/left
.four{
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:black;
}
5,利用display:table-cell属性使内容垂直居中
.five{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
6,最简单的一种使行内元素居中的方法,使用line-height属性
.six{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
这种方法也很实用,比如使文字垂直居中对齐
7,使用css3的display:-webkit-box属性,再设置-webkit-box-pack:center/-webkit-box-align:center
.seven{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
background:yellow;
color:black;
}
8,使用css3的新属性transform:translate(x,y)属性
.eight{
position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好
9、最高大上的一种,使用:before元素
.nine{
position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
display:inline-block;
vertical-align:middle;
width:60px;
height:60px;
line-height:60px;
color:red;
background:yellow;
}
总而言之所有的居中的方法就是你必须要掌握css属性的这个概念HTML DIV+CSS ,你掌握了就可以好好的运用这些居中的东西了
http://blog.csdn.net/freshlover/article/details/11579669
【居中】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--居中失败
<div >
<div style="height: 500px; border: 1px solid; text-align: center;">
<img src="img/i-camera.png" style="vertical-align: middle; padding:50% auto;" />
<p>fdsaf</p>
<p>dfdf</p>
</div>
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
</div>
</div>-->
<!--居中成功 <div id="parent" style="border: 1px solid red; height: 300px;line-height: 300px;">
<div id="child" >Text here
</div>
</div>-->
<!--居中失败
<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
<p>fdsafsdf</p>
</div>
</div>-->
<!--<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
</div>
<p>fdsafsdf</p>
</div>-->
<!--居中失败
<div id="parent" style="border: 1px solid red; height: 300px; line-height: 300px;">
<img src="img/i-camera.png" alt="" />
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; line-height: 500px;">
<img style="vertical-align: middle;" src="img/i-camera.png" alt="" />
</div>-->
<!--横排多元素居中 【1】
<div id="parent" style="border: 1px solid red;line-height: 100px; text-align: center;">
<img style="vertical-align: middle;float: left; border: 1px solid red; width: 100px; height: 100px;" src="img/i-camera.png" alt="" />
<div style="border: 1px solid blue;">啊啊啊啊</div>
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; height: 500px; display: table;">
<div id="child" style="display: table-cell;vertical-align: middle;">Content here</div>
</div>
-->
<!--<div id="parent" style="border: 1px solid red; height: 500px; width: 500px; display: table;">
<div id="child" style="display: table-cell; vertical-align: middle;">Content here</div>
<p>fdfdsf</p>
</div>-->
<!--居中成功 ie#child {display: inline-block;}-->
<!--<div id="parent" style="border: 1px solid red; text-align: center;
height: 500px; width: 500px; display: table;">
<div id="child" style="display: table-cell;*display: inline-block; vertical-align: middle;">
<img src="img/i-camera.png" />
<p>fdfdsf</p>
</div>
</div>-->
<!-- 居中失败<div id="parent" style="border: 1px solid red; text-align: center; height: 200px; width: 500px; display:table;">
<div id="child" style="*display: inline-block; display: table-cell; vertical-align: middle;">Content here</div>
<div style="display: table-row;">aafdsfds</div>
</div>-->
<!--勉强居中成功,不是绝对居中<div id="parent" style="position: relative; height: 500px; width:100%; border: 1px solid red;">
<div id="child" style="position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;">
Content here</div>
</div>-->
<!--<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;">
<div id="floater" style="float: left;height: 50%; "></div>
<div id="child" style="clear: both;">Content here</div>
<div>fdsf</div>
<div>fdsfdsfdsf</div>
</div>-->
<!--IE7会有问题 横排多元素垂直居中 居中成功 【1】
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px; ">
<img src="img/i-camera.png" style="display:inline-block;line-height:300px; vertical-align:middle; border: 1px solid sandybrown;" />
<div id="floater" style="display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div>fdsafds</div>
-->
<!--横排多元素垂直居中 【1】
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px; ">
<img src="img/i-camera.png" style="float: left; margin-top: 50px; display:inline-block;line-height:300px; vertical-align:middle; border: 1px solid sandybrown;" />
<div id="floater" style="display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div>fdsafds</div>-->
<!--注意
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px ;">
<img src="img/i-camera.png" style="float: left; display:inline-block; vertical-align:bottom; border: 1px solid sandybrown;" />
<div id="floater" style="float: left; display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div id="child" style="clear: both;">Contentaaa here</div> -->
<!--注意
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px ;display:inline-block;">
<img src="img/i-camera.png" style="float: left; display:inline-block; vertical-align:bottom; border: 1px solid sandybrown;" />
<div id="floater" style="float: left; display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div id="child" style="clear: both;">Contentaaa here</div> -->
<!--IE7不支持display:table;所以*top 居中成功 【1】
<div style="height: 500px;width:500px;border: 1px solid red;display:table;text-align: center;*position: relative;">
<div style="display: table-cell;vertical-align: middle; *top:50px; *position: absolute;">
<img style="height: 100px;width:100px;" src="img/i-camera.png" />
<p>fdsfsdf</p>
<p>fdsfsdf</p>
<p>fdsfsdf</p>
</div>
</div>
-->
<!--居中失败 p 出框外 居中失败
<div style="height: 500px;width:500px;border: 1px solid red;text-align: center;">
<div style="vertical-align: middle; line-height: 500px;">
<img style="height: 100px;width:100px;" src="img/i-camera.png" />
<p>fdsfsdf</p>
<p>fdsfsdf</p>
<p>fdsfsdf</p>
</div>
</div>-->
<!--第一个元素居中成功,但里面多个元素不会自动计算中间高度
<style type="text/css">
.mydiv{
width: 100px;
height: 100px;
top:100px\9; /****/
left: 30px\9; /****/
top:-moz-calc(50% - (100px + 2px));
top:-webkit-calc(50% - (100px + 2px));
top: calc(50% - (100px + 2px));
position: absolute;
left:-moz-calc(50% - (100px + 2px));
left:-webkit-calc(50% - (100px + 2px));
left: calc(50% - (100px + 2px));
}
</style>
<div id="parent" style="border: 1px solid red; position: relative;
height: 500px; width: 500px; ">
<div class="mydiv" >
<img src="img/i-camera.png" style="border: 1px solid blue; " />
<p>fdsafsd</p>
<p>fdsafsd</p> <p>fdsafsd</p> <p>fdsafsd</p>
</div>
</div>-->
<!--<div id="parent" style="position: relative;border: 1px solid red; height: 400px; width: 400px;">
<div id="child" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 50%;margin: auto;">
fdsaffffff
</div>
</div>-->
<!--<style type="text/css">
.father{width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}
</style>
<div class="father">
<div class="son">
</div>
</div>-->
<!--最好的简单居中方法 只有ie7不支持 【1】
<div style="position:fixed;width: 300px;height: 300px;top: 0; left: 0; border: 1px solid red;">
<div style="position: absolute; top:0;left: 0; bottom: 0; right: 0; border: 1px solid blue; width: 50%; height:80%;margin: auto;">
<img src="img/i-camera.png" style="width: 100px; height: 100px;" />
<div>dfaaa</div>
<div>bbbb</div>
<div>dfaaa</div>
<div>bbbb</div>
</div>
</div>-->
<!--http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/
http://www.haorooms.com/post/css_div_juzhong
-->
</body>
</html>
http://www.cnblogs.com/maorongmaomao/archive/2011/12/20/2294622.html
http://www.jb51.net/css/140685.html
http://blog.csdn.net/linlin_juejue/article/details/6622756
http://blog.csdn.net/freshlover/article/details/12132801
http://www.cnblogs.com/jarson-7426/p/3845062.html【重点】
http://www.zhangxinxu.com/wordpress/2010/04/%E8%AE%A9ie6ie7ie8%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81css3%E5%B1%9E%E6%80%A7/
http://blog.sina.com.cn/s/blog_7fb1495b0100vfka.html
http://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html
http://blog.csdn.net/freshlover/article/details/7535785/
http://www.cnblogs.com/PheonixHkbxoic/
http://www.cnblogs.com/PheonixHkbxoic/p/6041667.html【前端资料汇总】
https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
http://www.wndhw.com/diannao/jiaocheng/jc034.htm
http://ymblog.net/
app
index.html里页面 info.html未做
index3.html用百分比 浏览器窗口缩小排版乱
index4.html在body加min-width:1028px; 浏览器窗口缩小排版乱
index5.html 浏览器窗口缩小不会错乱了
index6.html 浏览器各种设备兼容 窗口缩小不会错乱了
index7.html 浏览器各种设备兼容 窗口缩小不会错乱了 头部文本框半圆 ie兼容解决
index10.html 浏览器各种设备兼容 窗口缩小不会错乱了 头部文本框半圆 ie兼容解决 video 基本可以,ie7,8左右边会有黑边
index12.html 视频 /video12-ok/hui00041.mp4 和机打字效果 不太好
【问题1:】
position fixed margin0 auto就不起作用
解决方法:
margin:0px auto;
position:fixed;
left:0px;
right:0px;
【问题2:】
html5 在IE6/IE7/IE8中使用html5标签 不识别
解决方法:
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--方法二-->
<!--<style type="text/css">
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
</style> -->
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i]);
}
})()
</script>
连接地址
http://linhui-dragon.iteye.com/blog/2003223链接
代码:
<!doctype html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在IE6/IE7/IE8中使用html5标签</title>
<!--试试去掉以下方法,运行代码看看-->
<!--方法一-->
<!--
<!–[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
-->
<!--方法二-->
<style type="text/css">
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
</style>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i]);
}
})()
</script>
</head>
<body>
<header>宅到底</header>
<nav>菜单1</nav>
<div>菜单2</div>
</body>
【问题3:】
ie7不支持某属性:
*left: 25%; /**IE7不居中处理***/
【4】:
text-size-adjust:100%
【5】display:inline-block 不被IE7识别的解决方案
http://blog.csdn.net/linlin_juejue/article/details/6622756
解决方法:
display:inline-block;
*display:inline;
*zoom:1;
【(@media判断;两个div;外面div 设置 width:100%;min-width:320px; 里面div设置width:320px)】
index6.html;解决方法:
/**>=320的设备***/
@media only screen and (min-width: 320px) {
.body-container{
width: 100%; /**设置浏览器窗口变小 控制***/
min-width:320px; /**设置浏览器窗口变小 控制***/
/*position: absolute;
left: 0;
top: 0;
height:auto;*/
}
.jl-navbar{
width:320px; /**设置浏览器窗口变小 控制,此时不要百分号***/
height:auto!important;
height:66px;
min-height:66px;
border: 0px solid red;
background-color: cornflowerblue;
/*text-align: center;*/
background-color: salmon;
}
}
【6】it9下不支持media 【????】
http://blog.sina.com.cn/s/blog_601b97ee0101asz3.html
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
【7】
ie7,ie8不支持 border-radis
【方法一 ie-css3.htc】
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
/* -moz-box-shadow:10px 10px 20px #000;
box-shadow:10px 10px 20px #000;*/
behavior:url(css/ie-css3.htc);
z-index: 999;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
【方法二 PIE.htc】
.jl-navbar-menu-right-input2{
border: 1px solid #669966; padding: 60px 0pt; text-align: center; width: 200px; font-size:18px; font-family:"sans-serif";
border-radius: 8px;
box-shadow: #666 0px 2px 3px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type="video/mp4">
【8】
ie7,8不支持video
http://blog.csdn.net/freshlover/article/details/7535785/
http://www.cnblogs.com/jukan/p/5519469.html
http://www.jq22.com/jquery-info404【重要】
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<!-- <video autoplay="" loop=""
poster="http://cdn.dev.egret.com/simpleboot/home/video/home.jpg" id="bgvid">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type="video/mp4">
</video>-->
改:
1.video.js
.video-js {
/* background-color: #000;*/
2.
.video-js .vjs-text-track {
display: none;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
/* background-color-with-alpha */
background-color: #000000;
background-color: rgba(0, 0, 0, 0.5);
}
gai:
【video兼容修改】
video-js.css:
/*u.Da.prototype.e = function() {
return u.e("div", {
className: "vjs-control-bar"
})
};*/
u.Da.prototype.e = function() {
return u.e("div", {
style: "display:none"
})
};
u.options = {
techOrder: ["html5", "flash"],
html5: {},
flash: {},
/*width: 300,
height: 150,*/
/*$("videojs.ControlBar", u.Da);*/
【浮动ie8 height 不会自动撑大】 参考222
<!-- min-height:1000px;height:auto!important;height:1000px;-->【可行】
<!--height:100px;min-height:100px;height:auto!important-->【不行,顺序错误】
<div class="jl-content" >
<div class="jl-content-video" style="height: 2000px; width: 1000px;" >
<video id="bgvid" class="video-container" style=" margin-left: 0px; padding-left:0px; width:1400px; min-width: 100%;min-height:1500px;height:auto !important; height:1500px; overflow:visible;"
autoplay="" loop="" data-setup="{}">
<source src="http://cdn.dev.egret.com/simpleboot/home/video/file.mp4" type='video/mp4' />
</video>
</div>
</div>
【鼠标放在图片上放大】
transform:scale(1.5,1.5);
ie:-ms-transform:scale(1.5,1.5);
【机打字】
http://www.html5tricks.com/css3-text-type-effect.html
http://www.qdfuns.com/notes/17783/93c5d6a85ca0b1108ade92344f1a9de8:storey-2.html
animation: typing 20s steps(30, end)
【如何在css中让div中的P标签居中】
如何在css中让div中的P标签居中,如图,我在那个div写了text-align是center了,没作用
你设text-align:center只是使p里的文字内容居中,对p没效果的,应该要这样:
div p{margin:0 auto;width:200px;}
其中200px你自己定,只要比div的宽度小就有效果
[解法一]: 如果在div里设置text-align,并且p没有设置width;者p自动居中
(因为p没有宽度,者以内容为居中显示)
<div>
<p>
</div>
[解法二]: 如果在div里设置text-align,并且p设置width;者p左排列;
(因为text-align只设置内容居中,并没有设置P,P有宽度,默认从左边起排列)
margin:0 auto;
width:200px;
<div>
<p>
</div>
【机打字】
【ok】
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h3 {
/*font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;*/
width: 16.5em; /* fallback */
/* width: 30ch; # of chars */
/*margin: 2em 1em;*/
/*white-space: nowrap;*/
overflow: hidden;
animation: typing 20s steps(50, end), /* # of steps = # of chars */
blink-caret .5s step-end infinite alternate;
}
【ok-end】
/*@keyframes typing{
from{width: 0;}
}
@-webkit-keyframes typing{
from{width: 0;}
}*/
.jl-content-sectionOne-title>h3,.jl-content-sectionOne-title>p{
padding: 4px;
letter-spacing:3px;
margin:0 auto;
width: 30em;
/*width:500px;*/
/*width: 16.5em; */
overflow: hidden;
/* width: 16.5em; *//* fallback */
/*animation: typing 20s steps(1, end);*/
animation: typing 5s steps(21, end),
blink-caret .5s step-end infinite alternate;
/*-webkit-animation: typing 20s steps(1, end);*/
}
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
/*h3 { */
/*font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;*/
/*width: 16.5em; *//* fallback */
/* width: 30ch; # of chars */
/*margin: 2em 1em;*/
/* white-space: nowrap;
overflow: hidden;*/
/*animation: typing 20s steps(30, end), *//* # of steps = # of chars */
/* blink-caret .5s step-end infinite alternate;
}*/
http://www.qdfuns.com/notes/17783/93c5d6a85ca0b1108ade92344f1a9de8:storey-2.html
http://www.jb51.net/article/70948.htm
http://www.jb51.net/article/70948.htm
http://ws234.com/yanshi/cssdazi/
【github】
holagoldfish
hf917
http://blog.csdn.net/buchiyangyu/article/details/51711101
【git客户端】
http://www.cnblogs.com/vitah/p/3612473.html
http://www.cnblogs.com/vitah/p/3618659.html
http://blog.csdn.net/lujinjian605894472/article/details/8350715
git客户端推送报错
branch正确的情况下,
不知为什么,在push的时候总是出现:
fatal: remote error:
You can't push to git://github.com/user_name/user_repo.git
Use git@github.com:user_name/user_repo.git
的提示,
解决办法:
$ Git remote rm origin
$ git remote add origin git@github.com:user_name/user_repo.git
$ git push origin
ok!
经过高人的点播,找到了原因:
如果在git clone的时候用的是git://github.com:xx/xxx.git 的形式, 那么就会出现这个问题,因为这个protocol是不支持push的
用$git clone git@github.com:lujinjianst/myNCCL.git
就可以用git push了。
【hbuilder 配置git】
http://blog.csdn.net/u011871921/article/details/44238971
http://blog.csdn.net/xiawu1990/article/details/50829274
【eclipse git】
http://blog.csdn.net/yanzi1225627/article/details/12885317
1. 本项目是 h5 app前端项目支持安卓、ios平台(Ps :后端用java写的代码在git仓库:H5APP-java)
2. 业务流程
用户注册——>登录——>列表展示用户——>查看其他用户信息——>关注其他用户——>聊天——>发布活动——>查看活动
3. 模块及功能
3.1 注册(本地照片上传、日期选择器、Job选择期、提交信息给后台)
IE6 hack
_background-color:#CDCDCD; /* ie 6 */
IE7 hack
*background-color:#dddd00; /* ie 7 */
IE8 hack
background-color:red \0; /* ie 8/9*/
IE9 hack
background-color:blue \9\0;
火狐,遨游,及其它高级浏览器通用
background-color:red!important;
注意写hack的顺序,其中:
background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 仅IE9支持;
另外,background-color:eeeeee\9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
http://blog.sina.com.cn/s/blog_683f52b40101436t.html
如何让ie6和ie7兼容display:inline-block; (2012-05-11 10:31:53)转载▼标签: 杂谈 分类: html css
块元素想要用display:inline-block;使其与行内元素在同行显示,这个效果除了ie6和ie7,其他的浏览器都是可以实现的,这里总结一下如何解决ie6和ie7不兼容的问题。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
p{display:inline-block;width:60px;height:30px;overflow:hidden;margin:0;padding:0;color:red; line-height: 45px;margin: 0 7px;}
</style>
<body>
<div style="color:#096;margin:0;padding:0;width:500px;line-height:30px;">p标签的display:inline-block;dfsf<p>p标签的display:inline-block;</p>p标签的display:inline-block;</div>
</body>
</html>
正常浏览器效果:
ie6和ie7效果:
之所以会出现这样的情况是因为display:inline-block;触发了ie的layout,这里有两个解决办法,可以让p标签的文字同行显示:
一:css部分加上这段代码:p{*display:inline;},注意是另起一行写。
二:将样式改为:
p{display:inline-block;width:60px;height:30px;overflow:hidden;margin:0;padding:0;color:red; line-height: 45px;margin: 0 7px;display:inline;zoom:1;
我自己测试了的,木有问题。
ps:以上部分是针对块级元素想要在行内显示的效果,如果是行内元素,a或者span,想要在行内增加宽度,背景,上下边距是不是也需要做兼容呢?不需要的,我测试了下,行内元素将display:inline-block;在ie6和ie7下面是可以同行显示没有兼容问题。
http://www.jb51.net/css/21991.html
http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/
http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
http://www.frontopen.com/2552.html
https://www.zhihu.com/question/20543196
作者:徐尤熙
链接:https://www.zhihu.com/question/20543196/answer/89218605
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
水平居中方案:
水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
在前端面试中,大都会问你div居中的方法:
文笔不好,就随便寥寥几句话概括了,希望大家能够轻拍
不过以后文笔肯定会变得更好一些的。
开始这些东西之前也可以测试一下你对html了解多少,让我们测试一下吧,小测验:你对HTML5了解有多少?
今天我们就细数一下几种方法:
1,使用position:absolute,设置left、top、margin-left、margin-top的属性
.one{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
这种方法基本浏览器都能够兼容,不足之处就是需要固定宽高。
2,使用position:fixed,同样设置left、top、margin-left、margin-top的属性
.two{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
大家都知道的position:fixed,IE是不支持这个属性的
3,利用position:fixed属性,margin:auto这个必须不要忘记了。
.three{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:pink;
}
4,利用position:absolute属性,设置top/bottom/right/left
.four{
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:black;
}
5,利用display:table-cell属性使内容垂直居中
.five{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
6,最简单的一种使行内元素居中的方法,使用line-height属性
.six{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
这种方法也很实用,比如使文字垂直居中对齐
7,使用css3的display:-webkit-box属性,再设置-webkit-box-pack:center/-webkit-box-align:center
.seven{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
background:yellow;
color:black;
}
8,使用css3的新属性transform:translate(x,y)属性
.eight{
position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好
9、最高大上的一种,使用:before元素
.nine{
position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
display:inline-block;
vertical-align:middle;
width:60px;
height:60px;
line-height:60px;
color:red;
background:yellow;
}
总而言之所有的居中的方法就是你必须要掌握css属性的这个概念HTML DIV+CSS ,你掌握了就可以好好的运用这些居中的东西了
http://blog.csdn.net/freshlover/article/details/11579669
【居中】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--居中失败
<div >
<div style="height: 500px; border: 1px solid; text-align: center;">
<img src="img/i-camera.png" style="vertical-align: middle; padding:50% auto;" />
<p>fdsaf</p>
<p>dfdf</p>
</div>
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
</div>
</div>-->
<!--居中成功 <div id="parent" style="border: 1px solid red; height: 300px;line-height: 300px;">
<div id="child" >Text here
</div>
</div>-->
<!--居中失败
<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
<p>fdsafsdf</p>
</div>
</div>-->
<!--<div id="parent" style="border: 1px solid red; height: 300px;">
<div id="child" style="line-height: 300px;">Text here
</div>
<p>fdsafsdf</p>
</div>-->
<!--居中失败
<div id="parent" style="border: 1px solid red; height: 300px; line-height: 300px;">
<img src="img/i-camera.png" alt="" />
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; line-height: 500px;">
<img style="vertical-align: middle;" src="img/i-camera.png" alt="" />
</div>-->
<!--横排多元素居中 【1】
<div id="parent" style="border: 1px solid red;line-height: 100px; text-align: center;">
<img style="vertical-align: middle;float: left; border: 1px solid red; width: 100px; height: 100px;" src="img/i-camera.png" alt="" />
<div style="border: 1px solid blue;">啊啊啊啊</div>
</div>-->
<!--居中成功
<div id="parent" style="border: 1px solid red; height: 500px; display: table;">
<div id="child" style="display: table-cell;vertical-align: middle;">Content here</div>
</div>
-->
<!--<div id="parent" style="border: 1px solid red; height: 500px; width: 500px; display: table;">
<div id="child" style="display: table-cell; vertical-align: middle;">Content here</div>
<p>fdfdsf</p>
</div>-->
<!--居中成功 ie#child {display: inline-block;}-->
<!--<div id="parent" style="border: 1px solid red; text-align: center;
height: 500px; width: 500px; display: table;">
<div id="child" style="display: table-cell;*display: inline-block; vertical-align: middle;">
<img src="img/i-camera.png" />
<p>fdfdsf</p>
</div>
</div>-->
<!-- 居中失败<div id="parent" style="border: 1px solid red; text-align: center; height: 200px; width: 500px; display:table;">
<div id="child" style="*display: inline-block; display: table-cell; vertical-align: middle;">Content here</div>
<div style="display: table-row;">aafdsfds</div>
</div>-->
<!--勉强居中成功,不是绝对居中<div id="parent" style="position: relative; height: 500px; width:100%; border: 1px solid red;">
<div id="child" style="position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;">
Content here</div>
</div>-->
<!--<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;">
<div id="floater" style="float: left;height: 50%; "></div>
<div id="child" style="clear: both;">Content here</div>
<div>fdsf</div>
<div>fdsfdsfdsf</div>
</div>-->
<!--IE7会有问题 横排多元素垂直居中 居中成功 【1】
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px; ">
<img src="img/i-camera.png" style="display:inline-block;line-height:300px; vertical-align:middle; border: 1px solid sandybrown;" />
<div id="floater" style="display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div>fdsafds</div>
-->
<!--横排多元素垂直居中 【1】
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px; ">
<img src="img/i-camera.png" style="float: left; margin-top: 50px; display:inline-block;line-height:300px; vertical-align:middle; border: 1px solid sandybrown;" />
<div id="floater" style="display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div>fdsafds</div>-->
<!--注意
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px ;">
<img src="img/i-camera.png" style="float: left; display:inline-block; vertical-align:bottom; border: 1px solid sandybrown;" />
<div id="floater" style="float: left; display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div id="child" style="clear: both;">Contentaaa here</div> -->
<!--注意
<div id="parent" style="height: 300px; border: 1px solid red; text-align: center;line-height:300px ;display:inline-block;">
<img src="img/i-camera.png" style="float: left; display:inline-block; vertical-align:bottom; border: 1px solid sandybrown;" />
<div id="floater" style="float: left; display:inline-block; border: 1px solid blue;">bbbb</div>
<div style=" display:inline-block;">cccc</div>
<div id="child" style="display:inline-block;clear: both;">Content here</div>
</div>
<div id="child" style="clear: both;">Contentaaa here</div> -->
<!--IE7不支持display:table;所以*top 居中成功 【1】
<div style="height: 500px;width:500px;border: 1px solid red;display:table;text-align: center;*position: relative;">
<div style="display: table-cell;vertical-align: middle; *top:50px; *position: absolute;">
<img style="height: 100px;width:100px;" src="img/i-camera.png" />
<p>fdsfsdf</p>
<p>fdsfsdf</p>
<p>fdsfsdf</p>
</div>
</div>
-->
<!--居中失败 p 出框外 居中失败
<div style="height: 500px;width:500px;border: 1px solid red;text-align: center;">
<div style="vertical-align: middle; line-height: 500px;">
<img style="height: 100px;width:100px;" src="img/i-camera.png" />
<p>fdsfsdf</p>
<p>fdsfsdf</p>
<p>fdsfsdf</p>
</div>
</div>-->
<!--第一个元素居中成功,但里面多个元素不会自动计算中间高度
<style type="text/css">
.mydiv{
width: 100px;
height: 100px;
top:100px\9; /****/
left: 30px\9; /****/
top:-moz-calc(50% - (100px + 2px));
top:-webkit-calc(50% - (100px + 2px));
top: calc(50% - (100px + 2px));
position: absolute;
left:-moz-calc(50% - (100px + 2px));
left:-webkit-calc(50% - (100px + 2px));
left: calc(50% - (100px + 2px));
}
</style>
<div id="parent" style="border: 1px solid red; position: relative;
height: 500px; width: 500px; ">
<div class="mydiv" >
<img src="img/i-camera.png" style="border: 1px solid blue; " />
<p>fdsafsd</p>
<p>fdsafsd</p> <p>fdsafsd</p> <p>fdsafsd</p>
</div>
</div>-->
<!--<div id="parent" style="position: relative;border: 1px solid red; height: 400px; width: 400px;">
<div id="child" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 50%;margin: auto;">
fdsaffffff
</div>
</div>-->
<!--<style type="text/css">
.father{width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}
</style>
<div class="father">
<div class="son">
</div>
</div>-->
<!--最好的简单居中方法 只有ie7不支持 【1】
<div style="position:fixed;width: 300px;height: 300px;top: 0; left: 0; border: 1px solid red;">
<div style="position: absolute; top:0;left: 0; bottom: 0; right: 0; border: 1px solid blue; width: 50%; height:80%;margin: auto;">
<img src="img/i-camera.png" style="width: 100px; height: 100px;" />
<div>dfaaa</div>
<div>bbbb</div>
<div>dfaaa</div>
<div>bbbb</div>
</div>
</div>-->
<!--http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/
http://www.haorooms.com/post/css_div_juzhong
-->
</body>
</html>