随笔分类 - html/css
布局相关
摘要：ISUX团队镇楼：https://isux.tencent.com/nine-question-of-swipe-html5-page.html IE6、7、8支持html5新元素 ： http://www.daqianduan.com/2831.html 一：动画分类 逐帧动画 补间动画 二：动画
阅读全文
摘要：一、移动端布局 %+rem 布局用百分比（无刷新自适应） width、padding依据父元素的宽度计算；背景图background-size:100% 100%参照自身元素宽高勿混淆！ 百分比布局 http://www.codingserf.com/index.php/2014/08/respon
阅读全文
摘要：1: overflow:hidden 为何可以清除浮动？ https://www.zhihu.com/question/30938856 开启超级属性（BFC） 从 BFC 的机制设计来看，把 float 元素纳入尺寸计算（即所谓父块包裹子块）是合理的否则反布局常识 最后计算内容元素全部高度。
阅读全文
摘要：一：点击免费获取验证码 1.1 初始状态 弹窗提示请输入手机号。 初始状态绑定弹窗！ 1.2 手机号输入框错误 弹窗提示错误信息。 onblur函数内绑定弹窗！ 1.3 手机号输入正确 点击获取验证码可输入。 按钮显示倒计时效果！
阅读全文
摘要：一：向上的动态箭头 http://www.5599.com/88lz/up_direct.html
阅读全文
摘要：1：两次取反操作！！ 将目标对象转变成对应的boolean类型而已。取反操作“!”会得到与目标对象代表的布尔型值相反的布尔值，而再做一次取反就得到了与其相同的布尔值。Boolean(xx)和!!xx是一样的。 以a两次取反为例： 如果a是0；两次取反当然是false；如果a是null；两次取反是fa
阅读全文
摘要：1：margin-left在IE6不生效(复现条件：块状元素、浮动、margin-left) 解决方法：http://www.seostudying.com/1233.html 2: position:fixed 在ie6 、ie7(quirk) 、 ie8(quirk)下被当成错误处理。 解决方法
阅读全文
摘要：XHTML 验证器：http://validator.w3.org/ CSS 验证器：http://jigsaw.w3.org/css-validator/
阅读全文
摘要：1：想学会REM 点这里 http://www.360doc.com/content/15/0812/09/15077656_491114265.shtml 2：想让media queries 不再神秘 点它 http://www.w3cplus.com/content/css3-media-que
阅读全文
摘要：一、动画 https://security.jj.cn/ 提交按钮动画 效果描述： 鼠标浮动过去，新背景色从中心向四周扩散。 实现原理： 元素a作为初始背景， b元素为新背景，c为背景上的字体，z-index最大，确保字体始终处于上方。b初始缩放为0，逐渐缩放到scale（1,1）。 初始态： b
阅读全文
摘要：字体略粗犷，凑活着看吧。 note page 1： note page 2： note page 3： 上传附件如下：http://files.cnblogs.com/files/fengluzheweb/5599%E6%96%B0%E6%B8%B8%E6%88%8F%E4%B8%8A%E4%BC%
阅读全文
摘要：重要提醒：前端写完 发邮件通知项目组 1：写好的前段资源包上传到SVN上之后，相关的图片、CSS、js文件要换成线上地址给后台开发。 2：图片 压缩（https://tinypng.com/） 传到图片服务器 同步图片服务器 HTML 、 css 、 js中相关的图片地址由本地地址替换成线上地址。
阅读全文
摘要：1：设计图 》分出几个独立模块 》颗粒化布局 》文档流控制整体布局 》固定位置的元素绝对定位，段落这种元素不可绝对定位。 》加上和后台交互用的js代码 》会采用常规的交互写法。 头部：header 登录表单:form_list 按钮:but 文本:con_text 商品：goods 说明：text_
阅读全文
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="gb2312"> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-eq
阅读全文
摘要：一：切图 1：切那些（移动端能不用图片就不用图片；logo单独切因为要带链接） 2：普通切（快捷键：复制到新图层 选中 复制 新建 粘贴 保存） 3：类似切 （选中多个图层 矩形框多选 选择工具 垂直居中对齐） 4：格式 手机端支持png格式 二：重用代码 1：HTML头部； 2：css默认设置；3
阅读全文
摘要：1：绝对定位不是随便用的。 2：一定要用相对定位控制文档流，在相对定位里面使用绝对定位控制具体的位置。 3：代码结构尽量简化。 不要加不必要的span； 不要加不必要的类； 4：控制字体样式的类尽量写在父级元素。除非是a元素。 5：切图的原则:切的图尽量是代码容易编写，代码尽量完美实现设计图。 列表
阅读全文
摘要：总结： 1: CSS动画：@keyframes animation；ie10+；加-webkit前缀； animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascript代码而实现动画。 基于animation和@keyframe 的动画一方面也是为了实现表现与行为的
阅读全文
摘要：z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序（stack order）。 margin为负值时元素会依参考线向外偏移。margin-left/margin-to
阅读全文
摘要：1. block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。 2.默认情况下
阅读全文
摘要：1：absolute fixed 定位会产生一个块级框； 2：float浮动框产生一个块级框；
阅读全文
浙公网安备 33010602011771号