Css on 码农真经的博客

Pinterest Masonry 瀑布流布局方案详解

mzhren1024@gmail.com (码农真经) — Wed, 28 Dec 2022 14:07:00 +0800

最近爬了一些漂亮的小姐姐的图片，做成一个小网站妹子图-魔力美少女，专门孝敬给各位码农大哥。网站使用瀑布流布局，简单总结经验如下：

什么是瀑布流？

Pinterest Masonry 瀑布流布局是一种常见的网页布局方式，常见于图片类网站。看两个例子：

妹子图 - Bing images

小红书

它的特点是每个元素的宽度相同，但是高度不同，且元素之间的高度差异较大。大家厌烦了普通的网格布局，而 Pinterest Masonry 瀑布流让元素有错位的感觉，看起来更加有趣。

2022年第23周书单-前端好书推荐

mzhren1024@gmail.com (码农真经) — Sun, 12 Jun 2022 11:54:15 +0800

这周是2022年第23周，给大家推荐一波前端好书。

我以前是搞前端的，本来水平就不咋地，隔了好多年再来学习React、Vue、Node、TypeScript…像极了上课走神的小学生，跟不上老师的节奏。所以给大家推荐前端好书，光凭自己经验肯定不行，还需要了解业内人士的口径。在网上查很多资料，结合网友书评，人肉大数据之后给大家推荐。主要集中在HTML/CSS/JS，也有Vue/React的书，但不多。我现在也在学习React、Vue、Node、TypeScript等，也请大家留言推荐相关好书。

只要一行代码，实现五种 CSS 经典布局

mzhren1024@gmail.com (码农真经) — Mon, 10 Aug 2020 00:00:00 +0000

作者：阮一峰

原文链接：只要一行代码，实现五种 CSS 经典布局

页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。

常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。

查找并修复页面意外的overflow

mzhren1024@gmail.com (码农真经) — Thu, 23 Apr 2020 00:00:00 +0000

响应式网站设计切换不同尺寸后偶尔会出现页面内容比屏幕要宽面导致出现横向滚动条。这里有个脚本可以方便的检测哪个元素超出了屏幕：

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

找到元素后，修改适配即可。

Markdown Syntax Guide

mzhren1024@gmail.com (码农真经) — Fri, 20 Dec 2019 12:00:06 +0900

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.