14
2020
07

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。

实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom

<div class="img-box">
	<img src="123.jpg"/>
</div>
.img-box{
	padding-bottom:100%;
}
.img-box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	margin:auto;
}


.img-box img里的宽度100%,高度100%就可以填满整个正方形框,如果都不填则自动水平居中和垂直居中div框内

01
2020
07

两个DIV高度自适应方法(左右两个DIV高度一样)

 html:

<div id="container">
    <div id="leftSide">
        <p>aaaa</p>
        <p>aaaa</p>
    </div> 
    <div id="rightSide">bbb</div>
</div>

1、使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用

21
2020
04

jq动画重复执行的解决方法

1. 在你的点击事件中加上一个判断,假设产生动画效果目标的是div这个节点,那么你要加上这个判断 它会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉。

if(!$("div").is(":animated")){
//执行你的操作
}


2. stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

18
2020
03

html 图片文字并排显示

常用情况:

<div>
    <img src="images/demand.png">
    <span>设置成功,请牢记新的登陆密码</span>
</div>

显示图片:

20
2019
11

a标签的为空链接和返回上一页的设置方法

a标签中的href值是一个地址,指示点击这个标签时,转向的地址。但是当使用a标签来做按钮,不需要跳转时,href值即为空。
<a href="javascript:void(0);">
在制作网页的时候,经常在网页上要用到“返回上一页”的功能。
<a href="javascript:history.back(-1)">

08
2019
11

JQ获取浏览器宽度,根据不同宽度给div赋值

做响应式网站经常需要改变浏览器宽度,然后网站内容随之改变。这时候就经常用JQ获取浏览器宽度,根据不同宽度给div赋值。

30
2019
09

jQuery pjax 简单入门

Pjax是ajax的升级版,怎么理解呢,当初学习ajax的时候讲了ajax的优缺点,其中一个缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的Jquery库,使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

23
2019
09

移动端html5手机网站如何定义字体font-family

使用自定义字体时候,很容易像PC端那样定义,其实安卓和ISO系统,对中文字体是不支持,所以定义以后看到效果不是直接定义字体效果,如果需要定义

大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上,在需要使用时被自动下载。

05
2019
09

背景图片靠右对齐,并且间距从右算起

假如右边有个小箭头需要右对齐并且垂直居中,

可以写成 background:url("images/icon.png")no-repeat right center;

如果需要离右边10px呢?

可以这样写 background:url("images/icon.png")no-repeat right 10px center; //这样间距从右算起。

02
2019
09

CSS字体font-family的正确选择方案

本文主要介绍的是CSS字体font-family的正确选择方案,由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。