flex

标 签:

1.盒子模型相关,box-sizing:

    content-box 普通的,默认的例子模型,padding,border属性时,盒子是朝外扩展的

    border-box 边框盒子模型,padding,border属性时,盒子是朝内扩展的

    calc(css公式函数)用来计算大小的,比如四个div宽度为25%,浮动成一行,加个border,或者padding会成二行,这个时候用

width:calc(25% - 2px)这样就可以了,但要注意的是头号两这得加空格,

    但一般这样不会用calc,可以设置盒子属性为 box-sizing:border-box,就好了

2.flex弹性布局; 在父级上加入属性 display:flex 就可以了,

   如果父级加了flex属性后,子级默认就是浮动的,float,clear 等属性就没有用了

   现在说说父级的属性

/** 定义当前的为flex弹性布局 **/
display:flex

/** 子元素横向排列方式 **/
justify-conent: center 居中 | 居左(默认) flex-start | 居右 flex-end | 两端对齐 space-between | 所有子元素margin相同 space-arund

/** 子元素纵向排列方式 **/
align-items:center 居中 | 从上到下(默认) flex-start | 从下到上 flex-end 

/** 子元素排列方向 **/
flex-direction:row 横向排列 |  横向反排 row-reverse | 纵向排列 column | 纵向反排 column-reverse

/** 子元素显示换行 **/
flex-wrap:no-wrap (默认)不换行 | wrap 换行

/** 排除简写 **/
flex-flow:<flex-direction> <flex-wrap>

 下面说说子元素属性

flex:n 表示平分父级宽度里占几份
align-self: 覆盖父级继承的 align-items 属性
flex-grow:1 定义子元素放大比例
order: 规定子元素顺序,越小越靠前


CSS / 评 论 (0) / 热度 (218℃) / 2019-04-21 / 阅读全文  / MaWei

css3立方体动画

标 签:


<!DOCTYPE html>
<html>
  <head>
    <title>09首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/style.css" rel="stylesheet">
    <style type="text/css" media="screen">
    	/*****转动*******/
		.will_rotate{
			width: 150px;
			height: 150px;
			margin: 0 auto;	
			position: relative;
		}
		.rotate_parent, .rotate_parent li {
		    position: absolute;
		    display: block;
		}
		.rotate_parent{
		    position: absolute;
		    display: block;
		    width: 100%;
		    height: 100%;
		    padding: 0;
		    /*margin: -50px 0;*/
		    -webkit-transform-origin: 50px 50px;
		    transform-origin: 50px 50px;
		    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		    transform: rotateX(-33.5deg) rotateY(45deg);
		    -webkit-transform-style: preserve-3d;
		     transform-style: preserve-3d; 
		     -webkit-animation: willRotate 3s ease-in-out infinite 2s; 
		     animation: willRotate 3s ease-in-out infinite alternate; 
		     /*animation: name duration timing-function delay iteration-count direction;*/
			    /*name	规定需要绑定到选择器的 keyframe 名称。。*/
			   	/*duration	规定完成动画所花费的时间,以秒或毫秒计。*/
			  	/*timing-function	规定动画的速度曲线。*/
			 	/*delay	规定在动画开始之前的延迟。*/
				/*iteration-count	规定动画应该播放的次数。*/
				/*direction	规定是否应该轮流反向播放动画。*/
		    top: 20%;
		    /*left: 50%;*/
		}

		.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {
		    background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%);
		}
		.rotate_parent li {
		    width: 100px;
		    height: 100px;
		     transition: -webkit-transform 1s ease-in-out; 
		     transition: transform 1s ease-in-out; 
		}
		.rotate_parent .tip_front {
		    -webkit-transform: translateZ(50px);
		     transform: translateZ(50px); 
		}
		.rotate_parent .tip_back {
		    -webkit-transform:translateZ(-50px);
		    transform:translateZ(-50px);
		}
		.rotate_parent .tip_right {
		    -webkit-transform: rotateY(90deg) translateZ(50px);
		    transform: rotateY(90deg) translateZ(50px);
		}
		.rotate_parent .tip_left {
		    -webkit-transform: rotateY(90deg) translateZ(-50px);
		    transform: rotateY(90deg) translateZ(-50px);
		}
		.rotate_parent .tip_top {
		    -webkit-transform: rotateX(90deg) translateZ(50px);
		    transform: rotateX(90deg) translateZ(50px);
		}
		.rotate_parent .tip_bottom{
		    -webkit-transform: rotateX(90deg) translateZ(-50px);
		    transform: rotateX(90deg) translateZ(-50px);
		}
		.rotate_parent .tip_floor {
		    box-shadow: -300px 0 50px rgba(0,0,0,.3);
		    -webkit-backface-visibility: visible;
		    backface-visibility: visible;
		    width: 110px;
		    height: 110px;
		    left: 295px;
		    background-color: transparent;
		    -webkit-transform: rotateX(90deg) translateZ(-60px);
		    transform: rotateX(90deg) translateZ(-60px);
		}	
    </style>
  </head>
  <body>
		<div class="will_rotate">
			<ul class="rotate_parent">
				<li class="tip_front"></li>
				<li class="tip_back"></li>
				<li class="tip_right"></li>
				<li class="tip_left"></li>
				<li class="tip_top"></li>
				<li class="tip_bottom"></li>
				<li class="tip_floor"></li>
			</ul>
		</div>
	</body>
</html>


CSS / 评 论 (0) / 热度 (160℃) / 2017-10-30 / 阅读全文  / MaWei

jquery判断密码强度

标 签: jquery

jquery判断密码强度


1.如何用jquery判断密码的强度,一般都有正则,不多说,直接贴代码吧:

首先是HTML:

*原密码:
*新密码: (至少六个字符)
*确认密码:


2.下面是正则操作的JS,代码如下:

$(function () {
            $('#pass').keyup(function(e) {
             var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
             var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
             var enoughRegex = new RegExp("(?=.{6,}).*", "g");
             if (false == enoughRegex.test($(this).val())) {
                     $('#passstrength').css('color','red');
             } else if (strongRegex.test($(this).val())) {
                     $('#passstrength').html('(强)').css('color','green');
             } else if (mediumRegex.test($(this).val())) {
                     $('#passstrength').html('(中)').css('color','#E6941A');
             } else {
                     $('#passstrength').html('(弱)').css('color','red');
                 }
                 return true;
            });
        }); 
当然,这个特别比较粗糙,如果不合意,自己做做,这个主要是正则JS,


Js+JQuery / 评 论 (0) / 热度 (116℃) / 2017-03-06 / 阅读全文  / MaWei

jquery获取选中的文字

标 签: HTMLjquery

jquery获取选中的文字,js获取选中的文字


js获取选择中文字的js代码:

var text = '';
if(document.selection) {
	text = document.selection.createRange().text;
} else {
	text = document.getSelection();
}

alert(text);

Js+JQuery / 评 论 (0) / 热度 (183℃) / 2017-03-06 / 阅读全文  / MaWei

图片传前预览

标 签: HTMLjquery

jquery图片上传前预览代码

1.在上传图片前,默认是没有办法看到预览的,这是现在浏览器很头痛的问题,想预览可以用如下js,这个代码是来自网络,他原来的代码是只是看一个,你多选也只能看最后一个,我改了一下,注释起来为他原来的代码。具体找码如下:

<script>	
	$("#infile").change(function(){
		// var objUrl = getObjectURL(this.files[0]) ;
		// console.log("objUrl = "+objUrl) ;
			// if (objUrl) {
			 // $("#img0").attr("src", objUrl) ;
		 // }
        	$(this.files).each(function (index,Obj){
			objUrl = getObjectURL(Obj);
			console.log("objUrl = "+objUrl) ;
			if (objUrl) {
				var html = "<img src='"+objUrl+"'/>";
					$('.img').append(html) ;
				}
			});
	}) ;
	//建立一個可存取到該file的url
	function getObjectURL(file) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
			return url ;
		}
</script>

2.html的代码部分如下:

<input type="file" name="file[]" id="infile" />
<div class="img"></div>

Js+JQuery / 评 论 (0) / 热度 (116℃) / 2017-03-06 / 阅读全文  / MaWei

html5做一个表的动画特效

标 签: jqueryHTML

html5时钟动画

1.用html5做一个表,效果如下:

你的浏览器不支持html5和css3

具体代码如下:



	html5动画-表

你的浏览器不支持html5和css3


HTML / 评 论 (0) / 热度 (128℃) / 2017-03-06 / 阅读全文  / MaWei

jquery获取元素离顶部的高度

标 签: jquery

jquery获取元素位置偏移高度


1.jquery获取元素相对于父元素的偏移位置用 .position(),

这个函数是不需要任何参数的,他会返回这个元素的 top、left值。例子如下:

var pos = $('element').position();
//相对父元素的左偏移量
alert(pos.left);
//相对父元素的上偏移量
alert(pos.top);


2.jquery获取元素在浏览器中的位置高度用 .offset(),

这个函数也是不用任何参数的,他会返回 top、left值。例子如下:

var pos = $('element').offset();
//相对浏览器的左边偏移量
alert(pos.left);
//相对浏览器的顶部偏移量
alert(pos.top);

3.jquery获取垂直流动条的偏移高度 .scrollTop(), jquery获取水平滚动条离左边的偏移量 .scrollLeft(),

这个函数不接受参数,他会返回流动条离顶部的高度偏移量。例子如下:

//滚动条离顶部的偏移量
var pos = $('elenment').scrollTop();
alert(pos);

//滚动条离左边的偏移量
var pos = $('elenment').scrollLeft();
alert(pos);


Js+JQuery / 评 论 (0) / 热度 (442℃) / 2017-03-06 / 阅读全文  / MaWei

jquery自定义扩展函数

标 签: jquery

jquery 自定义函数

方法1:

$.fn.diyfun = function(index){
    return index;
}
//调用方法
$(this).diyfun(1);
//注意,$后面要接选择器,不选择也要用this.

方法2:

$.extend({
    diyfun:function(index){
        return index;
    }
});
//调用方法
$.diyfun(index);
//注意这种方法 $ 后面直接接点,不能有括号。

方法3:

$.diyfun = function(index){
    return index;
}
//调用方法
$.diyfun(1231);
//这个方法最简单,Jquery最简单的扩展方法


Js+JQuery / 评 论 (0) / 热度 (96℃) / 2017-03-06 / 阅读全文  / MaWei

12