CSS
关注
分享
扫一扫
weixin_46370867
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
两个水平排列的div顶部对齐~详细
方法left-div和right-div都设置display:inline-block; 和vertical-align: top;使得右边的div跟左边的div的顶部对齐最终代码如下<div id='left-div' style="width:20%; display:inline-block;vertical-align: top;"></div> <div id='right-div' style="width: 80%; display:inline-原创 2021-04-26 20:04:45 · 1639 阅读 · 1 评论 -
display:none的进一步理解
display:none是让某个元素在文档流中消失，并不只是取消这个元素的样式所以，在使用display:none的时候一定要小心实例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewp原创 2021-03-14 18:36:17 · 1345 阅读 · 2 评论 -
CSS图片重叠效果~秒懂
利用CSS实现图片重叠，当鼠标悬浮到第一张图片的时候，第二张图片会显示出来。效果如下：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片重叠</title>原创 2020-12-13 23:27:29 · 2896 阅读 · 0 评论 -
CSS布局简介
五、两列布局两列布局：一列是定宽的, 另一列是自适应的。其中一列是定宽：将该元素的宽度设置为固定的宽度其中一列是自适应: 除了定宽之外所有的宽度都为第二列第一种两列布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-10-20 21:34:19 · 180 阅读 · 1 评论 -
两种垂直布局~详细
垂直布局第一种实现垂直布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一种实现垂直布局</title> <style> /原创 2020-10-19 20:39:08 · 748 阅读 · 2 评论 -
三种水平居中布局~详细
一、什么是布局布局：就是HTML页面的结构。实现布局要通过 HTML元素 和 CSS样式 结合。（就像盖楼的设计图纸）二、布局的分类目前比较流行的布局：1.居中布局：水平方向居中布局、垂直方向居中布局 以及 水平和垂直都居中 的布局。2.多列布局：两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)3.全屏布局从技术角度划分：1.CSS3 新增的弹性(flex)盒子模型2.CSS3 新增的网格(grid)布局根据场景的不同划分：1.响应式布局: 一个 HTML 既可以在 P原创 2020-10-19 20:37:45 · 331 阅读 · 1 评论 -
使用 CSS 模拟鼠标点击交互
使用 CSS 模拟鼠标点击交互通过 CSS 方式模拟鼠标点击交互动效的两个核心要素：HTML 元素需要使用 <input> 和 <label> 元素CSS 使用 :checked 伪类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2020-08-29 00:18:37 · 799 阅读 · 1 评论