HTML & CSS - 随笔分类 - 赵小磊

CSS利用伪元素实现两端对齐

摘要：1 2 3 4 5 6 7 1 2 3 4 5 1 2 3 4 1 2 3< 阅读全文

posted @ 2016-07-13 23:45 赵小磊阅读(587) 评论(0) 推荐(0)

单行文字两端对齐：css方式和css+JS方式

摘要：无论移动端还是PC端都会有这样的列表，网上查了一下，实现的方式都不完美。有时候UI那边相差1px都会给你逼逼逼。所以还是折腾一下吧。我们都知道text-align:justify，但是它不处理块内的最后一行文本，所以，为了实现该功能，又不想增加额外的标签，最终用了伪类 :after。仅仅这样是不阅读全文

posted @ 2016-06-22 14:29 赵小磊阅读(2255) 评论(0) 推荐(0)

解决CSS移动端1px边框问题

摘要：移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下：一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。这个主要利用after伪类进行缩放。调用公共class，还是很方便的。二、JS判断是否支持0.5px边框阅读全文

posted @ 2015-12-25 14:24 赵小磊阅读(5963) 评论(0) 推荐(0)

localStorage

摘要：Title 阅读全文

posted @ 2015-12-07 09:55 赵小磊阅读(152) 评论(0) 推荐(0)

移动端的头部标签和meta

摘要：... 阅读全文

posted @ 2015-07-01 10:28 赵小磊阅读(187) 评论(0) 推荐(0)

CSS网页变成灰色

摘要：阅读全文

posted @ 2015-06-08 09:35 赵小磊阅读(1467) 评论(0) 推荐(0)

HTML5+javascript实现图片加载进度动画效果

摘要：在网上找资料的时候，看到网上有图片加载进度的效果，手痒就自己也写了一个。图片加载完后，隐藏loading效果。想看加载效果，请ctrel+F5强制刷新或者清理缓存。效果预览：0%代码如下： HTML5+javascript实现图片加载进度动画效果 0%判断页面加载... 阅读全文

posted @ 2015-03-16 17:39 赵小磊阅读(5863) 评论(1) 推荐(0)

CSS3实现旋转的太极图（二）：只用1个DIV

摘要：效果预览：PS：1、昨天用3个DIV实现了太极图（点击查看），，今天试着用1个Div来做。2、公司刚忙过双10周年庆，最近空闲下来，闲着也是闲着，总得写点东西吧。3、高手莫喷，小弟仅仅是没事折腾一下，做个的记录。4、有网友反应旋转的时候会卡。5、IE浏览器，出门左拐、走好不送 ~~~实现步骤：HTM... 阅读全文

posted @ 2014-10-17 14:24 赵小磊阅读(6506) 评论(4) 推荐(2)

CSS3绘制旋转的太极图案（一）

摘要：实现步骤：基础HTML：步骤一：.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0... 阅读全文

posted @ 2014-10-16 15:23 赵小磊阅读(7763) 评论(9) 推荐(5)

HTML5实现笑脸

摘要：HTML5实现笑脸阅读全文

posted @ 2014-09-10 11:48 赵小磊阅读(1205) 评论(0) 推荐(0)

纯css实现平行四边形导航

摘要：纯css实现平行四边形导航网站首页公司简介产品展示联系我们阅读全文

posted @ 2014-03-24 16:00 赵小磊阅读(850) 评论(0) 推荐(0)

css3伪类选择器 - :nth-child()

摘要：序号写法：li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/倍数写法：li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/倍数分组匹配：/* 匹配第1、第4... 阅读全文

posted @ 2013-12-25 11:32 赵小磊阅读(171) 评论(0) 推荐(0)

解决IE6 css背景图片缓存问题

摘要：IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片解决IE下图片作为背景时，会有闪烁：方法一、css（推荐使用）html {zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache", false, true);}(this));}方法二、jstry { document.execCommand('BackgroundImageCache', false, 阅读全文

posted @ 2013-12-19 23:19 赵小磊阅读(452) 评论(0) 推荐(0)

浏览器的重绘与重排

摘要：在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘(redraw)和重排(reflow)，需要付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文期待可以部分解释以上三个问题。浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲.. 阅读全文

posted @ 2013-11-26 16:03 赵小磊阅读(201) 评论(0) 推荐(0)

CSS旋转&翻转，兼容方案

摘要：/*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH(); } /*垂直翻转*/ .flipy { -mo... 阅读全文

posted @ 2013-11-08 23:24 赵小磊阅读(582) 评论(0) 推荐(0)

HTML特殊字符编码大全：

摘要：HTML的特殊字符我们并不常用，但是有的时候却要在页面中用到这些字符，甚至有时候还需要用这些字符来实现某种特殊的视觉效果。现在，国外的设计师Neal Chester整理了一份很全的特殊字符集，我觉得这很赞～～，共享出来供大家查阅吧。使用方法：这些字符属于unicode字符集，所以，你的文档需要声明为... 阅读全文

posted @ 2013-10-30 14:36 赵小磊阅读(2218) 评论(0) 推荐(1)

重新发现HTML表格

摘要：中文原文：重新发现HTML表格整理自：Woork请尊重版权，转载请注明来源，多谢！根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用HTML表格来定义网页的布局，但是表格在方便的排列数据信息行和列方面非常完美，而且如果你一定要在一个页面上显示表列数据，你就不得不使用它们！为什么不呢？然而，在这种情况下，一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。H 阅读全文

posted @ 2013-10-24 09:46 赵小磊阅读(200) 评论(0) 推荐(0)

美化网站的10+实用 CSS3 技巧

摘要：黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}页面顶部阴影body:before { content: ""; position: fixed; top: -10px; left: 0; wi... 阅读全文

posted @ 2013-10-09 15:19 赵小磊阅读(296) 评论(1) 推荐(0)

CSS3修改滚动条样式

摘要：/*设置滚动条的宽度：*/::-webkit-scrollbar {width:10px;}/*设置滚动的轨道：*/::-webkit-scrollbar-track {background:#ddd;}/*设置滚动的滑块：*/::-webkit-scrollbar-thumb {background:#999;}::-webkit-scrollbar-thumb:active {background:#666;}::-webkit-scrollbar滚动条整体部分，一般可以设置宽度 2. ::-webkit-scrollbar-button两端的按钮 3.::-webkit-scroll.. 阅读全文

posted @ 2013-10-09 14:59 赵小磊阅读(468) 评论(0) 推荐(0)

网站CSS选择器性能讨论

摘要：CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CSS选择符模式，尽量编写高效的CSS选择符，从而加快页面的渲染速度，缩短页面呈现时间。我们先来看一下safari和webkit的架构师David Hyatt的两段话：样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择阅读全文

posted @ 2013-10-08 17:49 赵小磊阅读(449) 评论(0) 推荐(0)

随笔分类 - HTML & CSS

公告