Duing-冬忆个人博客 - 学无止境

神奇的布局方式display:flex

18017982@qq.com(admin) — Mon,06 May 2019 12:54:07 +0800

一：display:flex 布局，Flex布局是什么

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

复制内容到剪贴板程序代码

.box{
display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
display: flex; //将对象作为弹性伸缩盒显示
}

当然，行内元素也可以使用Flex布局。

复制内容到剪贴板程序代码

.box {
display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}

兼容性写法
.box {
display: flex || inline-flex;
}

二、基本概念
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

结构示意图

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；

三、flex的六个容器属性
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content

1、flex-direction属性：决定主轴的方向（即项目的排列方向）

复制内容到剪贴板程序代码

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：主轴水平方向，起点在左端；
row-reverse：主轴水平方向，起点在右端；
column：主轴垂直方向，起点在上边沿；
column-reserve：主轴垂直方向，起点在下边沿。

主轴的4个方向

2、flex-wrap属性：定义换行情况
默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

一条轴线排不下

复制内容到剪贴板程序代码

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

1). nowrap（默认）：不换行；

不换行nowrap

2). wrap：换行，第一行在上方；

换行，第一行在上

3). wrap-reverse：换行，第一行在下方。

换行，第一行在下

3、flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap

复制内容到剪贴板程序代码

.box {
flex-flow: || ;
}

4、justify-content属性：定义项目在主轴上的对齐方式。
对齐方式与轴的方向有关，本文中假设主轴从左到右。

复制内容到剪贴板程序代码

.box {
justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

1). flex-start（默认值）：左对齐；

左对齐

2). flex-end：右对齐；

右对齐

3). center：居中；

居中对齐

4). space-between：两端对齐，项目之间间隔相等；

两端对齐

5). space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。

两侧间隔相等

5、align-items属性：定义在交叉轴上的对齐方式
对齐方式与交叉轴的方向有关，假设交叉轴从下到上。

复制内容到剪贴板程序代码

.box{
align-items: flex-start | flex-end | center | baseline | stretch;
}

1). flex-start：起点对齐；

起点对齐

2). flex-end：终点对齐；

终点对齐

3). center：中点对齐；

中点对齐

4). baseline：项目的第一行文字的基线对齐；

基线对齐

5). stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content属性：定义多根轴线的对齐方式
如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；

复制内容到剪贴板程序代码

.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

1). flex-start：与交叉轴的起点对齐；

起点对齐

2). flex-end：与交叉轴的终点对齐；

终点对齐

3). center：与交叉轴的中点对齐；

中点对齐

4). space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；

轴线之间等间距

5). space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

轴线两侧等间距

6). stretch（默认值）：轴线占满整个交叉轴。

项目未设置高度时
有意思的是，当你不给项目设置高度但是给容器设置align-content不为stretch时，同一轴线上的项目的高度将等于项目中高度最高的项目。

四、项目的属性

设置在项目上的属性也有6个。
order
flex-grow
flex-shrink
flex-basis
flex
align-self

1、order属性：定义项目的排列顺序。
数值越小，排列越靠前，默认为0，可以是负值。

复制内容到剪贴板程序代码

.item {
order: <整数>;
}

展示效果不明显，直接盗图

2、flex-grow属性：定义项目的放大比例
默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。

默认情况

复制内容到剪贴板程序代码

.item{
flex-grow: <数字>;
}

若所有项目的flex-grow的数值都相同，则等分剩余空间

等分剩余空间

若果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍

不等分占据

3、flex-shrink属性：定义项目的缩小比例
默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。

复制内容到剪贴板程序代码

.item{
flex-shrink: <非负整数>;
}

如果一个项目设置flex-shrink为0；而其他项目都为1，则空间不足时，该项目不缩小。

设置flex-shrink为0的项目不缩小
如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。

不缩小
如果设置项目的flex-shrink不为0的非负数效果同设置为1。

4、flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。
默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

复制内容到剪贴板程序代码

.item{
flex-basis: ;
}

注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。

设置flex-basis为350px，但空间充足

空间不足，项目缩小，小于设定值

5、flex属性是flex-grow，flex-shrink和flex-basis的简写
默认值为0 1 auto，第一个属性必须，后两个属性可选。

复制内容到剪贴板程序代码

.item{
flex: none | [

];
}

可以用 flex:auto; 代替 flex: 1 1 auto;；
可以用 flex: none;代替 flex: 0 0 auto；

####align-self属性：允许单个项目与其他项目有不一样的对齐方式
>默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。

复制内容到剪贴板程序代码

.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

KRPANO加密XML手动解密分析

18017982@qq.com(admin) — Wed,14 Jun 2017 10:16:39 +0800

KRPano自带的工具可以对XML文件进行加密，保护XML文件。加密分为两种，第一种为公共加密，即允许其他krpano全景读取该XML，而另一种为私有加密，仅允许加密的用户读取XML。两种加密方式的算法是一致的，只是公有加密使用了一个公共的解密密钥，而私有加密则是根据某个用户自己的密钥进行加密的。

不过，由于krpano可以运行于浏览器中，XML会在解析的过程中在内存中出现，所以可以利用浏览器调试技术提取出解密好的XML。

一个典型的加过密的XML文件如下

KENCRUBR6XHk18l9V8NcuX33cW/5TK3svI6......

以为标签，同时密文前三个字母为KEN

手动解密XML详细步骤

以http://vr.pacificparkbrooklyn.com/该网址上的一个全景项目中的密文为例，进行手动解密分析：

1、在Chrome中打开网址，按F12进行打开调试界面，在Network页面可以查看到某个加密的XML

2.打开source标签，找到ppb.js，格式化代码（{}按钮），定位到500，499，436行的位置添各加一个断点

3.重新刷新网页，代码会在该位置被中断，继续执行代码，当代码停在436行的eval处时，点击step into按钮进入到该函数中

4.进入到该函数后，对函数进行格式化，按Ctrl+F搜索”ken”，可以找到某个函数，该函数即为解密函数

5.在函数的开头和末尾各添加一个断点，多次点击执行，直到出现加密的文件名

6.执行到函数末尾，便可以在内存中看到解密后的xml了，在console窗口中输入变量名n，即可完整得到解密后的XML了，可以把他从console中复制出来，保存在本地。

具有回放、慢动作播放功能的视频播放器

18017982@qq.com(admin) — Sat,08 Apr 2017 11:19:10 +0800

HTML代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8"/>  
<title>具有回放功能的视频播放器</title>  
<style>
div#buttonDiv{
    width:800px;
    display:none;
}
progress#playPercent{
    width:800px;
}
div#progress{
    width:800px;
    height:20px;
    left:0px;
    background:#ccc;
}
div#progressValue{
    width:0%;
    height:20px;
    background:green;
    cursor:default;
}
div#showTime{
    z-index:2;
    display:none;
    position:absolute;
    font-size:10px;
}
</style>
</head>  
<body>

您的浏览器不支持video元素
</video>
<div id="buttonDiv">
<progress id="playPercent" max=100>
    <div id="progress">
        <div id="progressValue"></div>
    </div>
</progress>
<button id="btnPlay" onclick="PlayOrPause()" disabled/>播放</button>
<button id="btnSpeedUp" onclick="SpeedUp()" disabled/>加速</button>
<button id="btnSpeedDown" onclick="SpeedDown()" disabled/>减速</button>
<button id="btnSlowPlay" onclick="SlowPlay()" disabled/>慢放</button>
<button id="btnMute" onclick="setMute()" disabled/>静音</button>
<button id="btnVolumeUp" onclick="VolumeUp()" disabled/>增音</button>
<button id="btnVolumeDown" onclick="VolumeDown()" disabled/>降音</button>
<button id="btnPlayBack" onclick="PlayBack()" disabled/>回放</button> 
</div>
<div id="showTime">
</div>
</body> 
<script type="text/javascript"> 
var speed=1;
var volume=1;
var muted=false;
var direction=1; 
var video = document.getElementById("video");
var showTime=document.getElementById("showTime");
var functionId;
if(video.canPlayType)
{
    video.addEventListener('loadedmetadata',loadedmetadata,false);
    video.addEventListener('ended',videoEnded,false);
    video.addEventListener('play',videoPlay,false);
    video.addEventListener('pause',videoPause,false);
    video.addEventListener('timeupdate',updateProgress,false);
    video.addEventListener("error",catchError,false);  
    progress=document.getElementById("progress");
    progress.onmouseover=progress_mouseover;
    progress.onmouseout=progress_mouseout;
    progress.onclick=progress_click;
    playPercent=document.getElementById("playPercent");
    playPercent.onmouseover=progress_mouseover;
    playPercent.onmouseout=progress_mouseout;  
    playPercent.onclick=playPercent_click;
}
function catchError()
{
    var error = video.error;  
    switch(error.code)
    {  
        case 1:  
            alert("视频的下载过程被中止。");  
            break;  
        case 2:  
            alert("网络发生故障，视频的下载过程被中止。");  
            break;  
        case 3:  
            alert("解码失败。");  
            break;  
        case 4:  
            alert("媒体资源不可用或媒体格式不被支持。");  
            break;  
      }  
}

function loadedmetadata()
{    
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    btnPlay.disabled=""; 
    video.play();  
    var buttonDiv=document.getElementById("buttonDiv");
    buttonDiv.style.display="block";   
}
function PlayOrPause()
{
    if(video.paused)
    {
       video.play();
       video.playbackRate=speed;
       video.muted=muted;
       video.volume=volume;       
    }
    else
        video.pause();

} 
function videoEnded(ev)
{
    video.currentTime=0;
    this.pause();
}
function videoPlay(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    document.getElementById("btnSpeedUp").disabled="";
    document.getElementById("btnSpeedDown").disabled="";
    document.getElementById("btnSlowPlay").disabled="";
    document.getElementById("btnMute").disabled="";
    document.getElementById("btnVolumeUp").disabled="";
    document.getElementById("btnVolumeDown").disabled="";
    document.getElementById("btnPlayBack").disabled="";
    if(direction==-1)
        functionId=setInterval(playBack1,200);     
} 
function videoPause(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="播放";
    document.getElementById("btnSpeedUp").disabled="disabled";
    document.getElementById("btnSpeedDown").disabled="disabled";
    document.getElementById("btnSlowPlay").disabled="disabled";
    document.getElementById("btnMute").disabled="disabled";
    document.getElementById("btnVolumeUp").disabled="disabled";
    document.getElementById("btnVolumeDown").disabled="disabled";
    document.getElementById("btnPlayBack").disabled="disabled";
    clearInterval(functionId);
}
function updateProgress() 
{
　　var value=Math.round((Math.floor(video.currentTime)/Math.floor(video.duration))*100,0);
    var progress = document.getElementById('playPercent');
    progress.value = value;
    var progressValue=document.getElementById("progressValue");
    progressValue.style.width = value+"%";    
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
}
function calcTime(time)
{
    var hour;
    var minute;
    var second;
    hour=String(parseInt(time/3600,10));
    if (hour.length == 1)   hour   = '0' + hour;
    minute=String(parseInt((time%3600)/60,10));
    if (minute.length == 1)   minute   = '0' + minute;
    second=String(parseInt(time%60,10));
    if (second.length == 1)   second   = '0' + second;
    return hour+":"+minute+":"+second;
}
function progress_mouseover(ev)
{
    showTime.style.display="inline";
    showTime.style.left=ev.pageX+5+"px";
    showTime.style.top=ev.pageY+5+"px";
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
    ev.stopPropagation();
}
function progress_mouseout(ev)
{
    showTime.style.display="none";
    showTime.innerHTML="";
}
function playPercent_click(evt)
{
    if(evt.offsetX)
    {
        playPercent=document.getElementById("playPercent");
        video.currentTime = video.duration * (evt.offsetX / playPercent.clientWidth);
    }
}
function progress_click(evt)
{
    progress=document.getElementById("progress");
    if(evt.offsetX)
        video.currentTime = video.duration * (evt.offsetX /progress.clientWidth);
    else
        video.currentTime = video.duration * (evt.clientX /progress.clientWidth);
}
function SpeedUp()
{    
    video.playbackRate+=1;
    speed=video.playbackRate;
}
function SpeedDown()
{
    video.playbackRate-=1;
    if(video.playbackRate<0)
        video.playbackRate=0;
    speed=video.playbackRate;
}
function SlowPlay()
{
    var btnSlowPlay=document.getElementById("btnSlowPlay");    
    if(btnSlowPlay.innerHTML=="慢动作")
    {
	video.playbackRate=0.5;
        btnSlowPlay.innerHTML="正常速度";
        document.getElementById("btnSpeedUp").disabled="disabled";
        document.getElementById("btnSpeedDown").disabled="disabled";
    }
    else
    {
	video.playbackRate=1;
        btnSlowPlay.innerHTML="慢动作";
        document.getElementById("btnSpeedUp").disabled="";
        document.getElementById("btnSpeedDown").disabled="";
    }
    speed=video.playbackRate;
}
function setMute()
{
    if(!video.muted)
    {
        video.muted=true;
        document.getElementById("btnMute").innerHTML="取消静音";
    }
    else
    {
        video.muted=false;
        document.getElementById("btnMute").innerHTML="静音";
    }
    muted=video.muted;
}
function VolumeUp()
{
    if(video.volume<1)
        video.volume+=0.1;
    volume=video.volume;
}
function VolumeDown()
{   
    if(video.volume>0)
         video.volume-=0.1;
    volume=video.volume;
}
function PlayBack(){
    var playBackBtn=document.getElementById("btnPlayBack");
    if(playBackBtn.innerHTML=="回放")
    {
        functionId=setInterval(playBack1,200);
        playBackBtn.innerHTML="取消回放";
        direction=-1;
    }
    else
    {
        clearInterval(functionId);
        playBackBtn.innerHTML="回放";
        direction=1;
    }
}
function playBack1()
{
    var playBackBtn=document.getElementById("btnPlayBack");
    if(video.currentTime==0)
    {
        playBackBtn.innerHTML="回放";
        clearInterval(functionId);
    }
    else
        video.currentTime-=1;
}
</script>  
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

js动态显示媒体文件播放时间

18017982@qq.com(admin) — Sat,08 Apr 2017 11:08:02 +0800

1.功能描述

为多媒体元素添加一个“onTimeUpdate”事件，用于改变播放文件位置时调用。另外，增加一个ID号为“spnTimeTip”的元素，用于动态显示媒体文件播放的当前时间与总量时间。

2.实现代码

在DreamweaverCS5中新建一个HTML页面dome.html，加入代码如代码清单dome所示。

代码清单dome 通过timeupdate事件动态显示媒体间文件播放时

动态显示媒体文件播放时间
         width="360px" height="220px" controls 
         onMouseOut="v_move(0)" onMouseOver="v_move(1)"
         onPlaying="v_palying()" onPause="v_pause()"
         onLoadStart="v_loadstart();"
         onEnded="v_ended();"
         onTimeUpdate="v_timeupdate(this)" poster="123.jpg">
         你的浏览器不支持视频
  
     
     00:00 / 00:00
 

在代码清单dome中，页面导入一个Javascript文件jslO.js,其中，除其他自定义函数外，新增了一个函在改变播放位置时调用。其实现的代码如下所示：

// Javascript Document
function $$(id) {
    return document.getElementById(id);
}
function v_move(v){
	$$("pTip").style.display=(v)?"block":"none";
}
function v_loadstart() {
	$$("spnPlayTip").innerHTML="开始加载";
}
function v_palying(){
	$$("spnPlayTip").innerHTML="正在播放";
}
function v_pause(){
	$$("spnPlayTip").innerHTML="已经暂停";
}
function v_ended(){
	$$("spnPlayTip").innerHTML="播放完成";
}
function v_timeupdate(e){
	var strCurTime=RuleTime(Math.floor(e.currentTime/60),2)+":"+
	               RuleTime(Math.floor(e.currentTime%60),2);
    var strEndTime=RuleTime(Math.floor(e.duration/60),2)+":"+
	               RuleTime(Math.floor(e.duration%60),2);
	$$("spnTimeTip").innerHTML=strCurTime+" / "+strEndTime;
}
//转换时间显示格式
function RuleTime(num, n) {
    var len = num.toString().length;
    while(len < n) {
        num = "0" + num;
        len++;
    }
    return num;
}
 

3.源码分析

在本实例中，当多媒体元素触发timeupdate事件时，调用_个自定义函数v_timeupdate()t在该函数中，分别使用整除与求余数的方法，分割多媒体元素当前时间（currentTime)属性与时间总量(duration)属性返回的秒值，组成分与秒的格式。在组成过程中，又调用了另外一个自定义函数RuleTime()，该函数可以将长度不足2位的数字，在前面加“0”进行补充，实现过程如Javascript代码中加粗部分所示。

获取表单元素各值相关

18017982@qq.com(admin) — Thu,30 Mar 2017 15:59:33 +0800

Javascript获取select下拉框选中的的值

复制内容到剪贴板程序代码

1、使用javascript原生的方法获取值

获取select对象： var myselect=document.getElementById("switch");

获取选中项的索引：var index=myselect.selectedIndex ;   // selectedIndex代表的是你所选中项的index

获取选中项options的value：  myselect.options[index].value;

获取选中项options的text：  myselect.options[index].text;

2、jquery方法获取值（前提是已经加载了jquery库）

var options=$("#switch option:selected");  //获取选中的项

console.log(options.val());   //拿到选中项的值

console.log(options.text());   //拿到选中项的文本

HTML代码

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>Forms</title> 
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body>

$( "#switch" ).bind( "change", function() {
			var options=$("#test option:selected");  //获取选中的项
		
			console.log(options.val());   //拿到选中项的值
			console.log(options.text());   //拿到选中项的文本
		});
		
	</script>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

jquery判断li中data-id为2的元素

18017982@qq.com(admin) — Thu,01 Sep 2016 16:09:44 +0800

$("li[data-id='2']")

//

$("ul .li[data-id='2']")

HTML 字符实体

18017982@qq.com(admin) — Sat,29 Aug 2015 13:44:28 +0800

HTML代码

<h2>HTML 中有用的字符实体</h2>
<p>注释：实体名称对大小写敏感！</p>
<table>
  <tbody>
    <tr>
      <th>显示结果</th>
      <th>描述</th>
      <th>实体名称</th>
      <th>实体编号</th>
    </tr>
    <tr>
      <td> </td>
      <td>空格</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td><</td>
      <td>小于号</td>
      <td><</td>
      <td><</td>
    </tr>
    <tr>
      <td>></td>
      <td>大于号</td>
      <td>></td>
      <td>></td>
    </tr>
    <tr>
      <td>&</td>
      <td>和号</td>
      <td>&</td>
      <td>&</td>
    </tr>
    <tr>
      <td>"</td>
      <td>引号</td>
      <td>"</td>
      <td>"</td>
    </tr>
    <tr>
      <td>'</td>
      <td>撇号 </td>
      <td>' (IE不支持)</td>
      <td>'</td>
    </tr>
    <tr>
      <td>￠</td>
      <td>分</td>
      <td>¢</td>
      <td>¢</td>
    </tr>
    <tr>
      <td>£</td>
      <td>镑</td>
      <td>£</td>
      <td>£</td>
    </tr>
    <tr>
      <td>¥</td>
      <td>日圆</td>
      <td>¥</td>
      <td>¥</td>
    </tr>
    <tr>
      <td>€</td>
      <td>欧元</td>
      <td>€</td>
      <td>€</td>
    </tr>
    <tr>
      <td>§</td>
      <td>小节</td>
      <td>§</td>
      <td>§</td>
    </tr>
    <tr>
      <td>©</td>
      <td>版权</td>
      <td>©</td>
      <td>©</td>
    </tr>
    <tr>
      <td>®</td>
      <td>注册商标</td>
      <td>®</td>
      <td>®</td>
    </tr>
    <tr>
      <td>™</td>
      <td>商标</td>
      <td>™</td>
      <td>™</td>
    </tr>
    <tr>
      <td>×</td>
      <td>乘号</td>
      <td>×</td>
      <td>×</td>
    </tr>
    <tr>
      <td>÷</td>
      <td>除号</td>
      <td>÷</td>
      <td>÷</td>
    </tr>
  </tbody>
</table>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

DIV+CSS中div高度随内容增多自动延伸(DIV背景色或背景图自动伸长)！

18017982@qq.com(admin) — Fri,26 Oct 2012 01:23:10 +0800

在IE6,7下只要不设置Div高度，就能自适应高度，背景色或背景图也能自动延伸。
但是在IE8或Firefox下面就有问题了！背景色或背景图得不到延伸！！
解决办法看下边：
这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。

在Div末尾加入代码：
　　＜div style="clear:both;">＜/div>

　　或者使用

　　＜br style="clear:both;" />

　　2. 使用after伪类

　　这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

　　这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

　　#outer:after{

　　 content:".";

　　 height:0;

　　 visibility:hidden;

　　 display:block;

　　 clear:both;

　　}

　　3.设置overflow为hidden或者auto

　　这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

　　不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

　　4.浮动外部元素，float-in-float

　　这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。

来源： Duing-冬忆个人博客

ASP中取字符串中第N个字符_网站设计制作

18017982@qq.com(admin) — Thu,27 Sep 2012 22:25:33 +0800

来源： Duing-冬忆个人博客

asp中可以用vb语言
vb的函数有
mid(str,1,2)函数，str表示你要取的字符串，1代表从str中第1个字符开始，2代表要取几个字符。这个函数你可以用在asp中，也可以用在vbscript中
asp语言中可以这么做：
例如str="hello world" (你要从中取第1个字符到第2个字符）
dim str,str2
str="hello world"
num=len(str) '读取字符串共几个字符
for ii=1 to num
str2=str2&","&mid(str,ii,1)
next
response.write str2
str2就是要读取的字符！！

原文链接地址：http://www.duing.cn/article/study/ASPQuZiFuChuan.html

js代码实现网站栏目中英文交换

18017982@qq.com(admin) — Thu,23 Aug 2012 15:15:51 +0800

JS代码部份：
< script type="text/javascript">
function menuxs(i,n,v){

    for(j=1;j<=2;j++){

        str=i+j;
        document.getElementById(str).style.display="none";

        }
    document.getElementById(v).style.display="block";
    if(n=="1"){

        if(i=="menu7"){
        document.getElementById(i).className="top_6_11";
            }else{
        document.getElementById(i).className="top_61";}

        }else{
            if(i=="menu7"){
        document.getElementById(i).className="top_4_11";
            }else{
        document.getElementById(i).className="top_41";}
            }

    }
< /script>

< table border="0" cellpadding="0" cellspacing="0">
      < tr>
        < td width="50" align="center" id="menu1" onmouseover="menuxs('menu1','1','menu12')"
  onmouseout="menuxs('menu1','2','menu11')" onclick="javascript:window.location='index.asp'" style="cursor:hand;">< a
  href="index.asp" class="menulink">< span id="menu11">Home< /span>< span
  id="menu12" style="DISPLAY: none">首页< /span>< /a>< /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="60" align="center" id="menu2" onmouseover="menuxs('menu2','1','menu22')"
  onmouseout="menuxs('menu2','2','menu21')" onclick="javascript:window.location='aboutus.asp'" style="cursor:hand;">< a
  href="aboutus.asp" class="menulink">< span id="menu21">About Us< /span>< span
  id="menu22" style="DISPLAY: none">关于我们< /span>< /a>< /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="85" align="center" id="menu3" onmouseover="menuxs('menu3','1','menu32')"
  onmouseout="menuxs('menu3','2','menu31')" onclick="javascript:window.location='service.asp'" style="cursor:hand;">< a
  href="service.asp" class="menulink">< span
  id="menu31">Service Items< /span>< span id="menu32" style="DISPLAY: none">服务项目< /span>< /a> < /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="70" align="center" id="menu4" onmouseover="menuxs('menu4','1','menu42')"
  onmouseout="menuxs('menu4','2','menu41')" onclick="javascript:window.location='case.asp'" style="cursor:hand;">< a
  href="case.asp" class="menulink">< span id="menu41">Case Show< /span>< span
  id="menu42" style="DISPLAY: none">案例展示< /span>< /a> < /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="80" align="center" id="menu5" onmouseover="menuxs('menu5','1','menu52')"
  onmouseout="menuxs('menu5','2','menu51')" onclick="javascript:window.location='team.asp'" style="cursor:hand;">< a
  href="team.asp" class="menulink">< span id="menu51">Expert Team< /span>< span
  id="menu52" style="DISPLAY: none">专家团队< /span>< /a> < /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="75" align="center" id="menu6" onmouseover="menuxs('menu6','1','menu62')"
  onmouseout="menuxs('menu6','2','menu61')" onclick="javascript:window.location='culture.asp'" style="cursor:hand;">< a
  href="culture.asp" class="menulink">< span id="menu61">Our Culture< /span>< span
  id="menu62" style="DISPLAY: none">企业文化< /span>< /a> < /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="70" align="center" id="menu7" onmouseover="menuxs('menu7','1','menu72')"
  onmouseout="menuxs('menu7','2','menu71')" onclick="javascript:window.location='contactus.asp'" style="cursor:hand;">< a
  href="contactus.asp" class="menulink">< span
  id="menu71">Contact Us< /span>< span id="menu72" style="DISPLAY: none">联系我们< /span>< /a> < /td>
        < td width="22" align="center" class="menuline">|< /td>
        < td width="40" align="center">< a
  href="http://www.cncis.cn/FlashVersion" class="menulink">动画版< /a>< /td>
      < /tr>
    < /table>

用js设置div层始终在网页底部显示及使用JS获取网页高度和屏幕分辨率高度

18017982@qq.com(admin) — Fri,17 Aug 2012 09:59:40 +0800

来源： Duing-冬忆个人博客
实现div始终在网页底部显示，代码如下：
< style>
DIV {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
< /style>
< div id="t1"  style="position:absolute;border:double; width:100%;  text-align:center">div层始终在网页底部显示的内容< /div>
< script language="javascript">
//document.all.t1.style.top = document.body.clientHeight;
var h1 = window.screen.availHeight-170;
if (document.body.clientHeight   document.all.t1.style.top = window.screen.availHeight-170;
//document.write ("当前窗口宽："+document.body.offsetWidth+"；　高："+document.body.clientHeight+"aaaa"+(window.screen.availHeight));
< /script>
在线演示
原文链接地址：http://www.duing.cn/article/Study/DIV_DiBuXianShi.html

网页设计相关：css样式设置首字大写(占两行)

18017982@qq.com(admin) — Thu,09 Aug 2012 00:11:57 +0800

来源： Duing-冬忆个人博客
< style type="text/css">
div{width:500px; line-height:150%;}
.post-body:first-letter {
PADDING-RIGHT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 2.5em; FLOAT: left; COLOR: #f30; LINE-HEIGHT: 1.1em;
}
< /style>

< div class="post-body">
上网给孩子买积木，看中一款，瞄了下评价，有一条留言这样写道：“积木大小正好，孩子一口一个”，于是，我吓得不敢买了。
< /div>

显示效果：

原文链接地址：http://www.duing.cn/article/Study/ShouZiDaXie.html

文字标题字数过多时，用Css样式设置后面多出的字用省略号代替

18017982@qq.com(admin) — Wed,08 Aug 2012 23:32:30 +0800

来源： Duing-冬忆个人博客
适合网站新闻读取时，一些新闻标题文字过长，可用以下代码：
< DIV STYLE="width: 220px; height: 30px; border: 1px solid #ee55cc;
overflow: hidden; text-overflow:ellipsis; padding:5px">
< NOBR>文字标题字数过多，后面自动显示为省略号！< /NOBR>
< /DIV>
最终效果：

原文链接地址：http://www.duing.cn/article/Study/WenZiShengLueHao.html

网页中，点击栏目菜单滚动到相应位置内容

18017982@qq.com(admin) — Fri,13 Jul 2012 18:25:01 +0800

来源： Duing-冬忆个人博客

使用这个javascript, 当你点击锚点的时候，会滚动到相应的锚点区域。

挺实用,兼容各大主流浏览器。
在线演示

原文链接地址：http://www.duing.cn/article/Study/LanMuGunDong.html

在flash中读取swf问号后面的数据参数

18017982@qq.com(admin) — Tue,03 Jul 2012 02:39:53 +0800

在flash中如何读取如:
br/.swf?sitename=Duing
读取sitename的变量值很简单，在动作脚本里输入：
loadVariables("", sitename);
flashVar=sitename;
mySitename.text=sitename;

注：mySitename是在flash里的一个动态文本!

就这样，用浏览器访问http://www.duing.cn/tory/Duing.swf?sitename=Duing看看
源文件：http://www.duing.cn/tory/Duing.fla
小小提示：如果您的flash版本是CS4的,请重新发布设置，：
默认为播放器：flash player 10;脚本：ActionScript 3.0
这情况之下会出错！！
重新设置如下:
播放器:flash player 9;
脚本：ActionScript 2.0

原文链接地址：http://www.duing.cn/article/Study/SwfWenHao.html

Css设置float后,IE浏览器下margin双倍间距的问题

18017982@qq.com(admin) — Sat,30 Jun 2012 15:47:14 +0800

来源：Duing-冬忆个人博客
今天发现在用div+Css做网页时，使用margin:1px 0 0 32px，间距(左右间距双倍，上下间距正常)会翻倍！！
如上设置左间距为32px(像素)在IE浏览器下，显示结果是64px(像素)。

解决问题如下：
原因是CSS中设置了居左浮动float:left的元素，只要在此当中加上display: inline,就解决了！

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？
研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：
9.5.1 Positioning the float: the 'float' property这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。

原文链接地址：http://www.duing.cn/article/Study/Css_float_margin.html

<转%3c,escape,unescape的使用和在ASP中调用js里的编码函数

18017982@qq.com(admin) — Sun,24 Jun 2012 00:04:03 +0800

经过几番周折，终于是写好了
< %set rs=server.createobject("adodb.recordset")
sql="select top 6 * from [News] where BigClassID=5 order by ID desc"
rs.open sql,conn,1,1
if rs.eof then
response.write "No information!"
else
cnewstxt="< table cellspacing='0' cellpadding='0' width='100%' align='center'>< tbody>"
j=0
do while not rs.eof
if j>0 and j >= 6   then
exit do
end if
cnewstxt=cnewstxt&"< tr>< td align=left height=20>< img src='../images/news_icon.jpg' />  < a href='NewsShow"&rs("ID")&".html' title='"&rs("Title")&"'>"&cutstr(rs("Title"),15)&"< /a>< /td>< td align=right>2012-6-16< /td>< /tr>"% >
< %j=j+1
rs.movenext
loop
cnewstxt=cnewstxt&"< /tbody>< /table>"
end if
rs.close
set rs=nothing
% >
< script language="javascript" type="text/javascript" runat="server">
function JSAngelEncode(sStr)
{
return escape(sStr);
}
< /script>
< %
Function aspEncode(sStr)
aspEncode= JSAngelEncode(sStr)
End Function
cnewstxt=aspEncode(cnewstxt)
response.Write cnewstxt
% >

网站制作中CSS设置H1不换行

18017982@qq.com(admin) — Fri,22 Jun 2012 22:40:45 +0800

在网站优化中，就会用到H1标签，是对关键字进行优化！
可是如果是一行文字中的某个关键词加上了H1标记，那就会换行了。
这时可以使用下面的Css样式，H1标记就不会强制换行了。

〈style type="text/css">
h1 {font-size: 18px;color: #222; display : inline}
〈/style>

〈div style="text-align:center; width:950; margin:0 0 auto;">H1设置成〈h1>一行〈/h1>喽!!〈/div>

个人博客网站的seo优化

18017982@qq.com(admin) — Tue,05 Jun 2012 20:43:12 +0800

来源： Duing-冬忆个人博客
个人博客网站的seo优化

第一、网站内容，内容最好要原创，增加可读性，一个网站内容采集过多，不利于网站推广，要使访客有一个好的体验，这也是一个获取高PV的重要因素，更是访客忠诚度的一个体现。

第二、可以批量养一些博客、论坛等，前提是个人比较充足的时间，每天定时按量发一些你网站上的内容，然后带上链接，这样你既可以得到外链，又可以有不错的流量，可谓一举两得。也可以去一些权重比较高的论坛或网站留下自己的链接，吸引百度蜘蛛的爬行，有利于搜索引擎的收录，文笔好的可以自己写软文，如果内容写的不错的话，被转载出去的话，等于说是你不花力气别人帮你增加外链。

第三、关键词的优化，新站为了提高网站权重，也为了流量和排名，可以找一些竞争力小一点的关键词去做，也就是长尾词，这个是可以在短时间内有不错效果，每天按时更新，如果你内容好，又按时更新，搜索引擎蜘蛛分养成习惯每天都这个时间都来你的网站，你的快照便可以每天按时更新了，用不了多长时间就可以有一个不错的排名了!

第四、友情链接很重要是网站优化重要条件，可以去论坛发一些寻求链接的信息，或者是在群里寻找，最好是做同类网站的链接，做友情链接时一定要仔细检查这些链接是否有死链接或被降权的网站链接，若有一定不能做，以免受牵连被搜索引擎惩罚降权。

第五、购买链接，这里就不多说，也是快速升排名的很好条件。注意：不要短时间内，突然增加大量的导入链接。因为这样会被搜索引擎认为，你是群发的链接，会被搜索引擎认为是在作弊。

FireFox与IE下js和css的区别

18017982@qq.com(admin) — Sun,20 May 2012 16:34:50 +0800

来源： Duing-冬忆个人博客

在不同浏览器下的CSS处理
一般可以用!important来优先使用css语句（仅firefox支持）
比如：{border-width:0px!important;border-width:1px;}
在firefox下这个元素是没有边框的，在IE下边框宽度是1px

DIV等元素的边界问题
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；

判断浏览器类型
var isIE=document.all ? true : false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false

png透明 AlphaImageLoader
firefox：不支持;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true：默认值。滤镜激活。false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

firefox不能对innerText支持
firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。

禁止选取网页内容
在IE中一般用js：obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

滤镜的支持(例：透明滤镜)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;

捕获事件
IE：obj.setCapture() 、obj.releaseCapture()
Firefox：document.addEventListener(”mousemove”,mousemovefunction,true);
document.removeEventListener(”mousemove”,mousemovefunction,true);

获取鼠标位置
IE:event.clientX、event.clientY
firefox：需要事件函数传递事件对象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

document.formName.item(”itemName”) 问题
问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。
解决方法：统一使用document.formName.elements["elementName"]。

集合类对象问题
问题说明：IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。

eval(”idName”)问题
问题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

变量名与某HTML对象ID相同的问题
问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

const问题
问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

input.type属性问题
问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

window.event问题
问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

Duing-冬忆个人博客 - 学无止境

神奇的布局方式display:flex

KRPANO加密XML手动解密分析

具有回放、慢动作播放功能的视频播放器

js动态显示媒体文件播放时间

获取表单元素各值相关

jquery判断li中data-id为2的元素

HTML 字符实体

DIV+CSS中div高度随内容增多自动延伸(DIV背景色或背景图自动伸长)！

ASP中取字符串中第N个字符_网站设计制作

js代码实现网站栏目中英文交换

用js设置div层始终在网页底部显示及使用JS获取网页高度和屏幕分辨率高度

网页设计相关：css样式 设置首字大写(占两行)

文字标题字数过多时，用Css样式设置后面多出的字用省略号代替

网页中，点击栏目菜单滚动到相应位置内容

在flash中读取swf问号后面的数据参数

Css设置float后,IE浏览器下margin双倍间距的问题

<转%3c,escape,unescape的使用和在ASP中调用js里的编码函数

网站制作中CSS设置H1不换行

个人博客网站的seo优化

FireFox与IE下js和css的区别

网页设计相关：css样式设置首字大写(占两行)