CSS - 分享生活和学习中的点点滴滴

前端技术 2023/09/07 CSS

语法： CSS Code复制内容到剪贴板 box-reflect：none | <direction> <offset>? <mask-box-image>? <direction> = above | below |...

前端技术 2023/09/07 CSS

问题：一个1920*900的大图，在1024*768的分辨率只能显示一部分，希望仍居中显示解决方案CSS: 复制代码代码如下:width: 100%; background-position: 50% 50%; 示例code：复制代码代码如下:<sty...

前端技术 2023/09/07 CSS

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着...

前端技术 2023/09/07 CSS

今天介绍的这款简单非常简单，利用一张背景图片来实现菜单的悬停状态。我们看下面的图片：仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果。我们该如何做呢？看下面的图片：这是一个示意图。最底层是ul，这是一个容器，我们将列表项li全部置入其中。为了方便说明，示意图中...

前端技术 2023/09/07 CSS

text-overflow 概要：其作用是解决文本溢出时，其展现的形式该属性有两个参数，分别如下： CSS Code复制内容到剪贴板 text-overflow : clip | ellipsis clip:不显示省略标记(....),溢出的文本会被的裁减掉。...

CSS两列布局实现方式总结

前端技术 2023/09/07 CSS

两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式首先想到的是...

DIV+CSS垂直居中一个浮动元素

前端技术 2023/09/07 CSS

场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。原始代码如下: 复制代码代码如下:<!DOCTYPE html><html> <head> <title></title> ...

前端技术 2023/09/07 CSS

前言最近学习CSS有点走火入魔了，CSS一直是自己的短板，没想到最近居然能静下心来学了这么多CSS的东西，着实值得表扬。俗话说得好，不疯活不成魔，我最近真有点刀狂剑痴的味道了。有时候晚上学习结束后，一晚上睡得很浅，我感觉下雨了，但下的雨居然全部是html标签！我在电梯里...

前端技术 2023/09/07 CSS

先看看效果图，像是气泡在上升： CSS Code复制内容到剪贴板 #load3, #loader3 { font-size: 20px; margin: 80px 50px; float: left; width...

前端技术 2023/09/07 CSS

很多分步骤的流程都会有一个多步骤进度条，很直观的显示用户每一步的操作状态，像淘宝的购物流程其实现方法其实很简单，只需要把每一步分隔处的箭头切下来，然后灵活利用background-image和background-color来实现，像这样的多步骤进度条一般有...

关闭

我的博客