如果你们设计师想在某些特别的专题活动中使用下图的字体作为标题字体进行展现，怎么办呢？做成图片咯。然后你可能会遇到这几个问题：不同屏幕下的适配，要是只做一种尺寸的图...

前言 最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对 transform-origin 属性理解不深，特地找了个例子来练习，加深了...

字体属性 字体font-family:字体1,字体2,... 例：font-family：宋体; 字号font-size:大小的取值 例：font-size:16px; 注意：xx-small:绝对字体尺寸，最小。 x-small:绝对字体尺寸，较小。 medium:绝对字体尺...

overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完...

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}.triangle_top{width:0;height: 0;border-width:50px;border-style:solid;border-color:red transparent transparent transparent;}.triangle_right{w...

最近在写自己的个人博客时遇到了一个小问题，为了解决响应式设计，便加入了媒体查询@meida来自适应各种大小的终端设备。但是在其中还发现了不少坑，在这里希望通过这篇文章分享...

css导航切换效果图如下： 代码如下，复制即可使用： !DOCTYPE htmlhtmlhead titlecss实现导航切换/title style type=text/css .clothes{width:1170px;margin:0 auto;border-bottom:1px solid red;margin:30px; } *{padding:0;mar...

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决...

网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将...

功能：图片轮播，当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。 1.首先建立div，并放入图片 #wai{ width:300px; height: 300px; border: 1px solid red;} img{ width: 100%; height: 100%; display: no...

下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示： img src=../images/bg1.jpg alt= / img { /*等宽缩小不变形*/ /*width: 100%;*/ /*二选一*/ /*等高缩小不变形*/ height: 100%;...

一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示： 随着鼠标的滚动，整个图片也滚上去了。 以...

使用定位方法 style*{ padding: 0; margin: 0;}#myDiv { width: 100%; height: 100%; border: 1px solid red; position: absolute}/stylebody div id=myDiv 我要全部填满 /div/body 使用百分比 html和body本身是没有高度的，他们的...

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi...

前言 tooltip的实现有多种方式，下面是一个tooltip成长史。 效果 原始版 最简单的莫过于就用原始title属性，像这样： button title=tipsbutton/button 缺点是体验是差了点，并且鼠标移上去，过一...

想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。 1. 两个标签的嵌套： div class=element1 div class=child1/div/div .element1{ width: 200px; hei...

最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的 结果出现了这样的情况 页面的html是这样的 div class=block div/div /div div class=b...

css实现水平对齐，如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗？使用float: left，或者display: inline-block，不就可以了吗？是的，最常用的最简单方式就是上面这两种，但还有一...

两端对齐效果 如上图中红色的9个div它们中间有间距，而最左边和最右边是没有间距的，这种布局如果使用css3的flex来实现是非常简单的，而如果要使用float布局就需要一些特殊的技巧了...

移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏，3倍屏之分，作为精益求精的前端，我们希望找到一种完美适配各种机型的方案。rem是现在主流...

效果 思路 用css的animation属性做动画 代码 wxml： view class=container view class='anit {{show == 1?show:(show == 2?hide:)}}'请选择商品/view view bindtap='anniu'点击弹出提示/view/view wxss： .container { height: 100...

我们都知道，撸【文章由美国大带宽服务器http://www.558idc.com/mg.html 提供，感恩】页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜...

前言 本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale） css3中新增了一个animation的属性，该...

1. 实现一个简单的三角形 使用CSS盒模型中的border（边框）即可实现如下所示的三角形： CS【文章出处:外国服务器】S实现简单三角形 实现原理： 首先来看在为元素添加border时，border的...

我们一般在打开相机的时候有个扫描框，然后静态二维码有时候为了聚焦和利于扫描也会加一个框框，下面介绍一下如何通过css 来实现一个框框 实现效果: 代码如下: html: div class=img-b...

1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？ 举个栗子： .parent { width: 200px; height: 100px;}.child { width: 80%...

场景 最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图： 心想：so easy, 在父容器上加一个...

什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元...

问题描述 想用CSS实现顶部固定的效果： 尝试margin-top加position:fixed实现，代码如下： !DOCTYPE htmlhtmlhead meta charset=utf-8 meta name=viewport content=width=device-width titleTest/title style type=text/css .heade...

1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素width/height/padding/margin 的百分比的时候，大家可知道基准是什么？ 举个栗子： .parent { width: 200px; height: 100px;}.child { width: 80%;...

为什么需要深入学习CSS溢出机制？ 在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受到祖先元素的overflow:hi...

因公司业务要求需要实现如下图中红色区域的效果： 效果说明： 1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部 2、当数据过多时需要显示滚动...

所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。 大多数应用于导航栏之中，如微信导航栏: 具体实现方法如下： 1、...

初始时，多个列内容大小不同，高度不同。现在需要设置不同的背景来显示，而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。 最终需要的效果： 1. 真实等高布局...

只需15行CSS代码，就可以让你的iPhone崩溃 Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 CSS 和 HTML 的网页，就会导致 iOS 重新启动以及 macOS 冻结。 Windows 和 Li...

1、过渡 transition 过渡属性用法： transition :ransition-property transition-durationtransition-timing-function transition-delay 可以一起指定也可以分别单独指定 transition-property: 是要过渡的属性（如width，...

在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片（同一行...

css的position属性指定了元素的定位类型，然后通过top，botton，left，right来具体定位。 在具体定位之前必须使用position属性，否则所有的具体定位属性都无法生效。 position可选择的值一共...

背景 解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决...

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例： h1 style=color:red;style属性的应用/h1p style=font-size:14px;color:green;直接在HTML标...

效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的...

div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构 实现demo里面的div通过Css进行2端对齐。 div class=box div class=demo div1/div div2/div di...

前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要...

最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，...

当【原URL http://www.yidunidc.com/sin.html 转载请说明出处】我们想给一个矩形或其他能用 border-radius 生成的形状（在自适应的椭圆一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称...

在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景宽度满屏，内容宽度固定。这个设计的一些典型特征如下。 页面中包含多个大区块，每个区块都占据了整个视口的...

为什么实现这种效果呢，其实这效果也是根据title的提示说明衍生出来的，只是因为原生的比较丑陋，像这种衍生出的插件后很多种，如jquery-ui的tooltip，Bootstrap的tooltips等等，有很多种...

我们经常会遇到这样的问题：如何用css来实现底部元素可粘住底部的效果，对于粘住底部，本文有两种理解： 一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容...

一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS，它可以直接让你的 Chrome 页面挂掉 :) 复现 在 Chrome 里打开一个稍复杂的页面，比如知乎或者...

昨天想使用 a:visited 改变右侧猜你喜欢已访问过的文字颜色，发现改来改去效果都一般，想到还有其他几个CSS可以设置，与颜色相关的，结果，太久没使用这个伪类选择器，具体那几个...