html/css
文章平均质量分 71
Zerofishcoding
Focus on who you are,focus on who you want to be
展开
-
响应式布局-图片列表如何在窄屏(<320px)中显示为列,在宽屏(>768px)中显示为有间隙的一行
摘要:本文旨在介绍在宽屏(>768px)中图片列表中如何显示为有固定间隙的一行排列,介绍了笔者自己尝试过得五种写法,并分析了其缺点,采用什么方法就得见人见智,具体情况具体分析了。 如何在窄屏(原创 2017-09-04 20:11:12 · 1659 阅读 · 1 评论 -
兼容浏览器的最小高度(min-height)
前言:在网页设计中,常常遇到需要设置最小高度的问题。例如,设计方案中需要给一个div设置一个背景图,而该div并不限定具体宽高值,其内部内容无法撑开背景图完全显示所需要的高度,此时便需要设置最小高度。即当div内的内容无法撑开父级高度时,会有一个最小高度保证父级背景显示完全,而当内容高度大于最小高度时,该div的高度就会完全由内容撑开。这里边要用到css的一个属性,即min-height。原创 2017-09-14 12:58:25 · 2288 阅读 · 0 评论 -
CSS3-使用纯css绘制天猫logo
本文主要记录如何使用纯css绘制出一个天猫logo,即那只黑色的猫。原创 2017-09-27 21:27:07 · 981 阅读 · 0 评论 -
使不知宽高的元素水平垂直居中的方法
本文主要介绍如何使元素居中显示的几种方法,当然方法有很多,现在记录的不过是笔者目前能够想到的几种:定位、table-cell、增加空span、弹性盒模型。原创 2017-09-15 16:49:58 · 1659 阅读 · 0 评论 -
CSS3动画-定位元素层级覆盖问题
在之前写过一篇博客js-使用js生成10*10个带标号的div,关于如何使用js生成10*10的100个div。最近尝试着在这使用定位+循环生成的100个div上加上span并配合css3里的transform,相当于每一个div都是一个四个面的立方体,每一个面都是一整张背景图的一部分。但是出现了定位元素层级覆盖问题原创 2017-10-01 22:57:31 · 6062 阅读 · 0 评论 -
display:inline-block与float在布局时的差异分析
在布局的时候,很多设计都需要将元素排列在一行,使元素排列在一行的方法有多种,从兼容性和易用性来考虑,先介绍display:inline-block(显示为内联块)和float(浮动)。原创 2017-09-17 23:46:49 · 900 阅读 · 0 评论 -
CSS3动画-扇形展开-(内有js代码)
本文记录的是使用css新属性制作的扇形展开效果。其功能有:1.当页面加载完成之后,所有的卡片会像扇子一样展开;2.当点击封面,也就是最右边的卡片时,扇子会进行展示或折叠;3.除封面外的任意一张卡片,该卡片会旋转到中间(整个扇子都旋转),并且卡片上的文字会展示出来。原创 2017-10-15 00:10:27 · 3702 阅读 · 1 评论 -
CSS3-transform-transform影响子级的固定定位
在进行限制范围拖拽代码编写时,父级为固定定位,子级为固定定位,给父级加transform,html和css代码分别如下:原创 2017-11-15 08:17:41 · 4033 阅读 · 0 评论