CSS
文章平均质量分 52
⑥②
这个作者很懒,什么都没留下…
展开
-
小程序和H5页面如何实现图片的瀑布布局
瀑布布局使用绝对定位的形式,这里使用waterfall-js来获取计算后的图片项的位置大小等信息,可以看到最终的效果图,示例代码可以参考https://gitee.com/orz365/waterfall-js可以看到,图片上的图片等列的显示,都是不等高的,对于这种像流水一样的布局,可以称为瀑布流的布局,对于不同大小的图片,这种布局方式是一种不错的选择。我们使用一种js插件,waterfall-js插件,我们只要传入我们要展示的图片列表信息,它可以很快的计算出我们要展示的图片大小,并将图片的大.原创 2021-07-27 09:29:04 · 500 阅读 · 0 评论 -
一段代码,使用flex布局方式写出图文列表
在学习使用新的知识,最直观的方式就是用一段代码来展示学习。其实在flex布局中,我们可以用最简单的代码写出好看的页面。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>使用flex布局的列表页面</title> <style> .list { } .item {原创 2020-06-05 16:19:38 · 507 阅读 · 0 评论 -
为什么图片img下方会出现一行空白?
我们在使用inline或inline-block做img图片对齐的时候,通常会发现图片下方有一行空白,这样的空白直接影响我们的显示效果,那么为什么会出现那样的空白呢?可以看到上图,图片底部就是基线位置,蓝色的线就是底线位置,这是由于行内元素的vertical-align的对齐方式默认为baseline。图片和单词是两个行内元素,如果想上下居中对齐,需要对图片和单词都设置vertical-a...原创 2020-04-08 16:40:01 · 1861 阅读 · 0 评论 -
flex盒子布局 - 通过主轴和侧轴学习对齐方式
CSS Flexible Box Layout 就是css的弹性盒子布局,简称flex布局,相对于box布局来说,功能更多一些,使用起来也相对灵活。先了解一下方向轴的概念主轴(main axis)和侧轴(cross axis),其中侧轴也可以翻译成交叉轴。主轴和侧轴的定义是通过定义flex-direction属性得来的,也就是说,你定义flex-direction为row或row-...原创 2019-12-25 16:09:10 · 2788 阅读 · 0 评论 -
动态分页展示效果(纯JavaScript编写,值得学习)
动态分页展示效果(纯JavaScript编写,值得学习)实例索引body{margin:0px;padding:0px;font-size:12px;font-family:Verdana, "微软雅黑";background:#2d3033;}img{border:0;}a{outline:none;}#box{width:918px;height:745转载 2012-07-26 15:27:09 · 1915 阅读 · 0 评论