固定宽度，像素完美的网站设计已经离我们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，我们的设计必须应付一切可能，将宽由320px向7680px转变。 伴随这种多分辨率风景而至的，...
HTML5 的 picture 元素处理响应式图片 怎么玩？
阅读全文
css网页布局之display属性最全总结
display属性在网页布局中非常常见，但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值，本文将详细介绍display属性的各个方面 定义 display...
CSS3过渡transition动画交互效果的深度理解
过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过...
css让多余字符串消失并附加省略号的实现代码
css/css3中如何让多余的字符串消失并附加省略号的方法 ,可以使用 . 代码如下: white-space:nowrap;text-overflow:ellipsis;overflow:hidde...
网页视差滚动效果是什么，如何实现？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。 CSS3实现优点：开发时间短、性能和开发效率比较好，缺点是不...
流式布局与响应式布局有什么区别或不同？
流式布局 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩，不受固定像素的限制，内容向两侧填充。 响应式开发 利用CSS3 中的 Media Qu...
CSS 引入方式有哪些? link 和@import 的区别是?
CSS引入方式有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import) link和@import的区别： link是XHTML标签，除了加载CSS外，还...
::before 和 :after中双冒号和单冒号有什么区别？这2个伪元素的作用?
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义...
png、jpg、gif 图片格式解释一下，分别什么时候用?有没有了解过webp？
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是...
CSS3有哪些新特性？
CSS3有哪些新特性？ RGBA和透明度 background-image background-origin(content-box/padding-box/border-box) backgrou...
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ div： border : 1px solid red; margin : 0 auto ; height : 50px ; wid...
CSS选择器有哪些？哪些属性可以继承？
CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul &...
响应式网页制作的四大核心要素、测试与编写
1. 什么是响应式页面 响应式网页（RWD，Responsive Web Design），2010年5月由Ethan Marcotte提出。简而言之，就是一个网站能够针对多个终端提供不同的显示样式，而...
css3巧用伪元素和伪类让html结构更清晰合理
css3为了区分伪类和伪元素，伪元素采用双冒号写法。 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch...
CSS3 max/min-content 及 fit-content 等 width 值学习理解
一、为何要蹦出这些新玩意？ 在CSS3的世界里，width属性又多了几个关键字成员，fill-available, max-content, min-content, 以及fit-content。 想...
CSS3 制作导航条和毛玻璃效果学习教程
导航条对于每一个Web前端攻城狮来说并不陌生，但是毛玻璃可能会相对陌生一些。简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享的主题...
css3border属性多方位应用和实现自适应三角形
border属性是在实际的应用中使用频率比较高的一个属性，除了作为边框使用，利用border属性的一些特征以及表现方式，可以在实现一些比较常见的效果（如等高布局，上下固定内容滚动布局和绘制CSS图标等...
CSS3动画实战：animation和伪类构建太极Loading图
使用CSS3的animation和伪类来构建，分析设定关键帧的执行顺序和时间段。 效果 动画分析 首先通过效果对动画执行进行一下分析： 边框的四条边进行按顺序动画加载 。 矩形边框变为圆行边框。 太极...
css sprites精灵图、图片整合、贴图定位案例教程
一、 什么是css sprites CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一...
伪类和伪元素在css及css3中的区别
css伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是它们在字面上的区别。下面我们...
CSS滤镜代码将网页内容全部变成灰色 对 IE11 浏览器无效
想要让网站网页整体变成灰色，那么只需要将以下代码添加到站点页面的<head></head>中间即可，PS：该代码针对 IE11 浏览器无效。 <style type="t...
HTML常用标签之［行内元素］和［块级元素］详解
块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div...
网页为什么不能被复制…破解那些复制不了的网页内容
教你复制那些复制不了的网页文字，平时找资料是很有用啊 1，网页中嵌入了javascript语言，通过编程手段屏蔽了复制。 只要点击IE的“工具”→“Internet选项”菜单，进入“安全”标签页，选择...
如何复制那些禁止复制的网页内容 破解其保护功能
如何复制禁止复制的网页内容。（下面内容是转载自某论坛，你懂的~） （一） 大家都遇到过，有些网页，不让你选取，也不让你拷贝。你连按ctrl+C的机会也不给。 不过，有时，你实在是太想拷贝了。怎么办呢？...
16