![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 52
WangZhang_521
普通女孩热爱生活中...
展开
-
京东初始化CSS文件
京东初始化CSS文件/* 把所有标签的内外边距清零 */* { margin: 0; padding: 0}/* 让倾斜的文字不倾斜 */em,i { font-style: normal}/* 去掉li的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器,如果图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底部有空白缝隙的问题原创 2022-01-05 09:49:35 · 517 阅读 · 0 评论 -
常见布局技巧-布局技巧-margin负值的巧妙运用、文字围绕浮动元素巧妙运用、行内块的巧妙运用、三角强化的巧妙运用
01-margin负值的巧妙运用<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多行溢出文字显示省略号<原创 2022-01-05 09:49:49 · 136 阅读 · 0 评论 -
溢出的文字用省略号显示
01-单行文本溢出省略号显示(必须满足三个条件)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2022-01-04 20:30:05 · 83 阅读 · 0 评论 -
图片底部空白缝隙解决方案
图片底部空白缝隙解决方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2022-01-04 17:44:28 · 84 阅读 · 0 评论 -
利用vertical-align实现图片文字垂直居中对齐
利用vertical-align实现图片文字垂直居中对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2022-01-04 17:31:52 · 216 阅读 · 0 评论 -
用户界面样式-鼠标样式、表单轮廓和防止拖拽文本域
01-鼠标样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-01-04 17:09:47 · 161 阅读 · 0 评论 -
CSS三角制作及案例
01-CSS三角制作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-01-04 16:41:59 · 74 阅读 · 0 评论 -
精灵图案例-拼出自己名字
精灵图案例-拼出自己名字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2022-01-04 15:08:02 · 594 阅读 · 0 评论 -
精灵图的使用
精灵图的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2022-01-04 14:57:37 · 56 阅读 · 0 评论 -
土豆网案例-鼠标经过显示遮罩
土豆网案例-鼠标经过显示遮罩<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-04 12:11:28 · 444 阅读 · 0 评论 -
4.元素的显示与隐藏-display属性、visibility可见性、overflow溢出
01-display属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2022-01-04 11:48:08 · 437 阅读 · 0 评论 -
淘宝轮播图做法
淘宝轮播图做法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-01-04 10:48:56 · 112 阅读 · 0 评论 -
定位会完全压住标准流盒子内容及浮动的最初目的是文字环绕
定位会完全压住标准流盒子内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-02 18:15:39 · 344 阅读 · 0 评论 -
定位特殊特性
定位特殊特性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2022-01-02 17:54:48 · 212 阅读 · 0 评论 -
绝对定位水平垂直居中
绝对定位水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-01-02 17:40:59 · 198 阅读 · 0 评论 -
定位叠放顺序
定位叠放顺序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2022-01-02 17:24:38 · 61 阅读 · 0 评论 -
粘性定位(了解)
粘性定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2022-01-02 16:40:35 · 57 阅读 · 0 评论 -
固定定位小技巧-固定到版心右侧
固定定位小技巧-固定到版心右侧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-02 16:29:17 · 101 阅读 · 0 评论 -
固定定位(重要)
固定定位(重要)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2022-01-02 16:20:02 · 131 阅读 · 0 评论 -
学成在线hot模块
html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-01-02 15:54:25 · 182 阅读 · 0 评论 -
CSS四种定位-绝对定位
01-没有祖先元素或祖先元素没有定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-02 15:05:53 · 291 阅读 · 0 评论 -
CSS四种定位-静态定位和相对定位
01-静态定位布局中很少用到,了解即可02-相对定位(重要)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2022-01-02 14:54:59 · 167 阅读 · 0 评论 -
学成网在线项目
学成网在线项目<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-12-31 18:48:38 · 362 阅读 · 0 评论 -
css属性书写顺序(重要)
css属性书写顺序(重要)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-12-30 17:25:08 · 90 阅读 · 0 评论 -
清除浮动原因及四种方法
01-为什么清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-12-30 11:09:00 · 193 阅读 · 0 评论 -
浮动注意点
浮动注意点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-12-30 09:51:46 · 70 阅读 · 0 评论 -
常见网页布局
常见网页布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-12-30 09:51:15 · 258 阅读 · 0 评论 -
浮动布局练习
浮动布局练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-12-30 09:51:03 · 148 阅读 · 0 评论 -
浮动元素搭配标准流父盒子及案例
浮动元素搭配标准流父盒子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2021-12-29 20:59:45 · 235 阅读 · 0 评论 -
浮动及浮动特性(重难点)
01-浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-12-29 18:11:50 · 332 阅读 · 0 评论 -
盒子阴影及文字阴影
01-盒子阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-12-29 16:13:37 · 55 阅读 · 0 评论 -
圆角边框及常用写法
01-圆角边框**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-12-29 15:43:13 · 137 阅读 · 0 评论 -
综合案例二-快报模板
综合案例二-快报模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-12-29 15:13:56 · 229 阅读 · 0 评论 -
综合案例一-产品模块
综合案例-产品模块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-12-29 08:50:47 · 366 阅读 · 0 评论 -
清除内外边距
清除内外边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-12-29 08:50:27 · 257 阅读 · 0 评论 -
外边距合并
01-相邻块元素垂直外边距合并<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-12-29 08:50:15 · 48 阅读 · 0 评论 -
行内元素和行内块元素水平居中
行内元素和行内块元素水平居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-12-29 08:50:05 · 87 阅读 · 0 评论 -
块级盒子水平居中对齐
块级盒子水平居中对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-12-29 08:49:51 · 144 阅读 · 0 评论 -
盒子模型之外边距
盒子模型之外边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-12-28 15:32:13 · 251 阅读 · 0 评论 -
padding不会影响盒子大小情况
padding不会影响盒子大小情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-12-28 15:17:43 · 691 阅读 · 0 评论