11 2020 档案

CSS案例：文本行的斑马条纹
摘要：在文本行中实现斑马条纹效果的隔行变色，从代码实现角度来说，通过对每行文字包裹在<div>元素中通过选择器nth-child(even)可以实现隔行变色。但是这种方式非常笨重，当段落文字发生变动或者长度发生改变时，就需要重新添加包裹元素。这里推荐通过CSS线性渐变以及背景定位相关知识可以更加灵活实现文 阅读全文
posted @ 2020-11-27 17:33 请叫我二狗哥 阅读(438) 评论(0) 推荐(0)
圣杯布局和双飞翼布局的原理探究
摘要：浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、 阅读全文
posted @ 2020-11-24 17:55 请叫我二狗哥 阅读(1259) 评论(2) 推荐(1)
竖版文字排列实现《金刚般若波罗蜜心经》
摘要：在网上找到一篇竖版金刚般若波罗蜜经，尝试通过CSS实现接近书籍图片原文的排版效果。 网络中找到的截图： 采用CSS模拟实现的效果截图： 实现难点： 1.竖版文字的排列； 2.等距离竖格线的实现：竖格线要在容器中上下满屏分布，恰好满足与文字的距离。 莲花图片在百度图片中找到近似图片。 <div cla 阅读全文
posted @ 2020-11-18 17:13 请叫我二狗哥 阅读(1478) 评论(0) 推荐(0)
前端气泡效果实现的方式
摘要：气泡效果在前端设计中很常见，如上图就是一种对话气泡效果的实际应用。气泡效果在CSS前端编程中实现的难点是不规则的三角形，比较主流的设计思路是通过绝对定位的伪元素来制作该三角形效果。 .container { width: 300px; height: 200px; background-color: 阅读全文
posted @ 2020-11-16 12:25 请叫我二狗哥 阅读(1716) 评论(0) 推荐(0)
纯CSS绘制三角形
摘要：三角形属于常见的几何图形，在网页设计中应用较为广泛。在网页编程中除了采用图片来实现前端展现外，纯CSS也可以实现三角形绘制。 1、基于border-width方案 基于border-width绘制三角形是“一门传统手艺”，由于该属性浏览器的支持性非常好，几乎没有兼容性问题，主流的三角形绘制方案都是采 阅读全文
posted @ 2020-11-16 10:08 请叫我二狗哥 阅读(2380) 评论(1) 推荐(2)
什么是块级格式上下文
摘要：块级格式上下文BFC(block formatting context)是一种规定渲染区域元素排列的规则，包括子元素如何定位以及和其它元素的作用关系。块级盒参与块级格式上下文。 块级格式上下文的渲染规则主要有以下几点： 1、触发该规则——浮动元素、绝对定位元素、非块级盒的块级容器[如行内块级元素(d 阅读全文
posted @ 2020-11-11 11:01 请叫我二狗哥 阅读(463) 评论(0) 推荐(0)
绝对定位元素left、right、top、bottom值与其margin和宽高的关系
摘要：绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中，定位祖先元素的宽度为W，垂直高度为H，则存在以下关系： 元素水平方向 width + left + right + marginLeft + marginRight = W 垂直方向： he 阅读全文
posted @ 2020-11-05 18:00 请叫我二狗哥 阅读(2487) 评论(0) 推荐(2)