笔记

最新推荐文章于 2024-04-13 10:21:22 发布

u010242159

最新推荐文章于 2024-04-13 10:21:22 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/u010242159/article/details/53264368

版权

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标签不识别
解决方法：




<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>





<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


【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>
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
</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
【可行】
【不行，顺序错误】



<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>




















































</body>
</html>

u010242159

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记

http://edu.csdn.net/course/detail/1373http://www.cnblogs.com/maorongmaomao/archive/2011/12/20/2294622.htmlhttp://www.jb51.net/css/140685.htmlhttp://blog.csdn.net/linlin_juejue/article/details/66
复制链接

扫一扫