地球村欢迎您!
分类: 学无止境预览模式: 图文 | 列表

学无止境神奇的布局方式display:flex

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

查看更多...

Tags: 前端布局 css布局 display flex

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 34

学无止境KRPANO加密XML手动解密分析

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

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

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


<encrypted>KENCRUBR6XHk18l9V8NcuX33cW/5TK3svI6......</encrypted>

以<encrypted></encrypted>为标签,同时密文前三个字母为KEN

查看更多...

Tags: krpano 加密 XML手动解密

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 21
HTML代码


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

查看更多...

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 12

学无止境js动态显示媒体文件播放时间

 功能描述

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

实现代码

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

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

源码分析

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

查看更多...

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

分类: 学无止境 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 5

学无止境获取表单元素各值相关

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

<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</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代码


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

查看更多...

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8

学无止境jquery判断li中data-id为2的元素

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

//

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

查看更多...

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8

学无止境HTML 字符实体

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

查看更多...

Tags: HTML 字符实体

分类: 学无止境 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 25
在IE6,7下只要不设置Div高度,就能自适应高度,背景色或背景图也能自动延伸。
但是在IE8或Firefox下面就有问题了!背景色或背景图得不到延伸!!
解决办法看下边:
这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

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

查看更多...

Tags: DIV+CSS

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 140
来源: Duing-冬忆个人博客

asp中可以用vb语言
vb的函数有
mid(str,1,2)函数,str表示你要取的字符串,1代表从str中第1个字符开始,2代表要取几个字符。这个函数你可以用在asp中,也可以用在vbscript中

查看更多...

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

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 9

学无止境js代码实现网站栏目中英文交换

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>

查看更多...

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

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 32