自适应的问题，我想根据它的分辨率调用不同的样式，在PC端调用图片1在移动端调用图片2，一开始以为通过js可以解决，但是网上翻了半天没找出一个正儿八经的解决方案，不得以来找前端大神朋友，大神几下给我出了...
自适应css最简代码，根据分辨率调用不同的图片
阅读全文
响应式图像解决方案HTML 方法，浏览器原生支持
网页在不同尺寸的设备上，都有良好的显示效果，叫做"响应式设计"（responsive web design）。 响应式设计的网页图像，就是"响应式图像"（responsive image）。 响应式图...
CSS 布局利器 flexbox 轻松搞定【垂直居中】
传统的 CSS 布局方式是基于盒模型（它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法），实现时依赖于 block, inline, table, position, float 这些属性，...
如何仅用CSS3，实现单标签的动态晴阴雨雪效果
作者：兔子先生 如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果： 再看看HTML代码： <!--晴--> <div class="...
CSS样式实现网页变灰色/黑白代码的abc三个方法
将网站整体的色调换成灰色、黑色色调，这个记得在以前纪念一些日子的时候会有用到，早年老蒋在自己的博客中也有使用的。记得那时候直接是修改CSS就可以实现，既然有用户需要，老蒋这里抽点时间再整理一下看看是否...
HTML 33个rel属性值完全展示，你知道怎么用吗？
一、HTML rel属性值索引 HTML中有一个名为rel的属性，是relationship这个单词的缩写，指明两个文档之间的关系，专门用来链接相关元素上，如<a>、<area>...
RGB、HSL、Hex网页色彩16进位色码标示法，如何运用和计算？
网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法...
CSS初学者悬停过渡动画三部曲
CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。 如下是我们将在本教程中构建的代码 项目设置 在这个项目中...
CSS两端对齐之’text-justify’应用技巧
CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。 p { text-align: justif...
CSS伪元素content搭配counter（计数器）制作一些有趣的应用
针对content搭配counter（计数器）进行一些有趣的应用，相信熟练之后搞不好很好玩也说不定。 counter基本用法 在CSS里头，counter是个很有意思的功能，最常见得就是如果我们使用l...
CSS变量实现炫酷的悬浮效果动画
Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加...
CSS 实现输入框发光效果
效果 输入框选中前： 输入框选中后： 代码 input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-...
background-attachment: fixed 实现滚动视差的逻辑理解
background-attachment: fixed 实现滚动视差 <section style="height: 300px;width:500px;background: url('ht...
HTML5地理位置概述和对象的详解
一、地理位置 经度 : 南北极的连接线 纬度 : 东西连接的线 二、位置信息从何而来 IP地址 GPS全球定位系统 Wi-Fi无线网络 基站 三、地理位置对象（） ...
CSS3代码生成器，10个顶级的免费用
以下资源是完全免费的 web 应用，可用于生成图案、渐变、甚至浏览器前缀属性的 CSS3 代码。如果你写的是前端代码，然后这些资源可以为你节省大量的时间，并为今后的项目工作提供可重复片段。 CSS3 ...
CSS3 触发animation和@keyframes定义的动画
结合CSS3的animation和@keyframes可以给元素定义动画，定义一个标题进入的动画如下： <!DOCTYPE html> <html lang="en"> <...
CSS3使用transition属性实现动画过渡效果
transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的C...
CSS3 transition动画实例学习参考代码
CSS3 transition动画的属性。 1、transition-property 设置过渡的属性，比如：width height background-color 2、transition-du...
Css3新特性、优先级、常用属性及应用案例
CSS是层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。下面,传智播客将针对Css3的新...
Web前端培训：使用CSS3实现瀑布流效果
什么是瀑布流布局效果,比如电商网站：蘑菇街。 原理图： 在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。 使用CSS3S实现只需要如下4步: 1. 准备图片素...
CSS3 响应式布局–Media Queries媒体查询学习总结
CSS3 Media Queries ， CSS3媒体查询。使用 @media 查询，你可以针对不同的媒体类型定义不同的样式；也可以针对不同的屏幕尺寸设置不同的样式；当重置浏览器大小的过程中，页面也会...
PC网站改为自适应，没有你想像中的那么难
之前觉得实现网站自适应，要设计很多套CSS，并且要结合jQuery，来实现自适应不同的设备。我还以为要重新设计文章的图片，或者要用到JavaScript来控制图片尺寸，因为图片过大就会超出手机屏幕，而...
21种CSS Web 性能优化和加快网站速度的方法
CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小...
HTML5中的data-*属性解读
<div data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value&l...
16