CSS 滑动操作的原理与轮播图原理类似： 子盒子宽度或者高度超出父盒子宽度或者高度，隐藏滚动条，就可以实现滑动操作： html 结构如下： <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></l ...
分类：
Web程序 时间：
2018-05-04 17:01:01
阅读次数：
992
需求： 图片的宽高是不固定的，但是外部盒子是有固定大小的。 图片的宽度和盒子保持一致，并且是水平居中显示，即两边是裁剪的 图片的高度是由盒子宽度控制的，等比例缩放，多余的被裁减掉 原图： 代码： 效果： 第一种是底部对齐，裁剪顶部 第二种是顶部对齐，裁剪底部 第三种是在固定容器内等比例显示图片 ...
分类：
Web程序 时间：
2017-12-25 18:21:24
阅读次数：
384
手风琴 1、排他思想 2、ul宽度需要大一点，防止li撑开跑下去 3、一个变大其他所有变小，变小不能太小，不然会出现空白 仿360开机 1、首先下盒子高度变为0，之后整体盒子宽度变为0 2、本例子没有用图片，最好盒子以图片形式为好 ...
分类：
Web程序 时间：
2017-12-07 19:08:36
阅读次数：
273
scrollWidth：内容超过了盒子，宽度为内容的宽度，不超出是盒子本身的width+padding scrollHeight：内容超出了盒子，高度为内容的高。不超出是盒子本身height+padding 注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度 scrol ...
分类：
Web程序 时间：
2017-12-01 11:34:19
阅读次数：
191
1.div和span DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式 DIV和SPAN的区别在与，span是内连元素，div是块级元素 2.盒模型 margin:盒子外边框 padding:盒子内边框 border:盒子边框宽度 width:盒子宽度 heigh ...
分类：
Web程序 时间：
2017-11-28 01:22:00
阅读次数：
237
实现效果： 实现原理： 给关闭按钮绑定点击事件，点击以后触发动画效果。利用jQuery的animate方法，先让显示天气的盒子高度变为0，接着让整个包含天气和事件的盒子宽度变为0，最后通过将display属性值设为none，使得close按钮消失。 实现代码： ...
分类：
编程语言 时间：
2017-11-03 18:54:27
阅读次数：
159
其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。 想要实现的效果为： 未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。 当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。 1、利用行内元素： 我首先想到了这个思路，思路如下： 让P居中 ...
分类：
Web程序 时间：
2017-10-12 19:00:15
阅读次数：
202
左侧浮动，右侧margin-left值为左侧宽即可。 由于左侧浮动，左侧盒子脱标，右侧仍在标准文档流，右侧盒子宽度是剩下的宽度，效果为右侧自适应。 右侧内容可居中，常规用法即可。 需注意的是左侧浮动，右侧不能继续浮动。 如果两边盒子都浮动，由于右侧盒子宽度不固定，默认为内容撑开宽度。 若浮动，极有可 ...
分类：
其他好文 时间：
2017-10-01 21:13:17
阅读次数：
199
一、padding1、内边距会影响盒子大小2、行内元素，尽量不用上下的padding和margin3、块元素嵌套块元素。子级会继承父级的宽度，高度由内容决定。如果给子级再设置padding,不会影响盒子宽度。继承的宽度设置padding不会影响盒子宽度。 二、js的数据类型字符型、数值型、布尔型、n ...
分类：
Web程序 时间：
2017-09-06 00:41:19
阅读次数：
182
一、鼠标的4种状态 cursor:pointer; 鼠标变成小手cursor:default;小白cursor:move;移动cursor:text;文本输入 二、网页布局：1、input、button行内块元素之间有空隙，设置浮动可以清除空隙2、给一个盒子：宽度高度、背景边框、位置3、背景既有图片 ...
分类：
其他好文 时间：
2017-09-03 00:17:04
阅读次数：
231
