css
关注
分享
扫一扫
文章平均质量分 72
css
Dn_wh
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css浮动。。。
文章目录结构伪类选择器结构伪类公式伪元素浮动css书写顺序：结构伪类选择器利用标签的关系查找元素减少对于HTML中类的依赖，有利于保持代码整洁用于查找某个父级选择器中的子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l原创 2022-02-26 14:34:09 · 350 阅读 · 0 评论 -
css，盒子模型
盒子模型，就是帮助我们做布局的盒子模型由 内容区域content 、内边距区域 padding、 边框区域 boder、外边距区域margin 构成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2022-02-21 01:07:17 · 162 阅读 · 0 评论 -
css定位
文章目录定位相对定位定位搭建一个网页用到的布局方式：标准流、 浮动、 定位 三种定位：1、解决盒子之间的层叠问题2、可以让盒子始终固定在屏幕的某个位置相对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2022-03-02 15:05:35 · 227 阅读 · 0 评论 -
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-02-20 12:07:45 · 189 阅读 · 0 评论 -
css进阶
1、选择器：通俗的说，就是为了找标签，然后便于网页布局①后代选择器：空格选择器1 选择器2 {css}②子代选择器③并集选择器:选择许多标签，设置同一属性选择器1 , 选择器2{css}④交集选择器：选中页面中同时满足多个选择器的标签⑤hover伪类选择器：选中鼠标悬停在元素上的状态，设置样式选择器 : hover{css}...原创 2022-02-19 00:07:34 · 398 阅读 · 0 评论 -
css--子绝父相
子绝父相将一个小图放在大图或者大盒子的某个位置原创 2022-03-07 10:50:00 · 234 阅读 · 0 评论 -
css引入方式
写在style标签里，head上，title下 /* 选择器：查找标签 */ p { /* 文字颜色变红色 */ color: red; /* 字变大 px:像素*/ font-size: 30px; /* 背景颜色 */ background-color: green; /* width height */ .原创 2022-02-17 14:38:52 · 317 阅读 · 0 评论 -
css装饰
文章目录垂直对齐方式--vertical-align：光标类型--cursor边框圆角--border-radius溢出部分显示效果----overflow元素本身隐藏元素的整体透明度垂直对齐方式–vertical-align：基线：浏览器解析文字的时候，是按照基线对齐的 baseline处理器在处理行内和行内块格式的时候，默认按照文字的格式去解析，默认文字是按基线对齐的。在设计的时候，注意添加vertic-align：middle 这样就能两个块对齐垂直对齐：vertical-align：ba原创 2022-03-04 16:28:05 · 285 阅读 · 0 评论 -
精灵图，背景图缩放。盒子阴影，
文章目录精灵图背景图大小精灵图将小图合成一个大图优点：减少服务器的发送次数，减轻服务器的压力，提高页面的加载速度说白了就是限制访问量三步：1、创建一个盒子2、把精灵图设置为盒子的背景图3、修改背景图的位置注意一般精灵图的标签都使用行内标签（行内：加宽高不生效），比如span b i 等等背景图位置修改:backgroud-position<!DOCTYPE html><html lang="en"><head> <meta ch原创 2022-03-04 17:29:08 · 457 阅读 · 0 评论 -
css的基础语法
四种选择器①标签选择器，以标签命名的选择器，但是选中所有的这个标签都生效css②类选择器，.类名{css属性名:属性值;}一个标签可以多个类名，空格隔开类名只能由数字、字母、下划线、中划线组成，不能以数字或者中划线开头类名只能由数字、字母、下划线、中划线组成，不能以数字或者中划线开头一个标签可以多个类名，空格隔开③id选择器（用于配合js做美化）#id属性值{css属性名:属性值:}id属性是唯一的，不能重名一个标签只能一个id属性值一个id选择器只能选中.原创 2022-02-17 17:02:15 · 3541 阅读 · 0 评论 -
css网页布局小练习，文字案例，小米官网卡片案例
1、网页排版目标效果图如下：<!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-02-18 22:39:49 · 1853 阅读 · 0 评论 -
css浮动的一些小练习
1.小米模块练习需求：使用浮动，完成设计图中的布局效果原创 2022-02-26 17:06:48 · 2040 阅读 · 0 评论 -
css忘了的一些小知识
文字的居中水平居中：text-align：center垂直居中：行高=盒子的高度文字垂直居中，还可以浮动，还有加定位图像垂直对齐：img{ vertical-align:text-top;}如果行内块和行内文字无法通过 vertical-align 或行高对齐，就使用行高来解决css伪元素/* 通过伪元素添加标签实现精灵图----伪元素添加的标签是 行内 */父级::before{content:' ';}第二个li 里面的before添加背景图位置属性.foote原创 2022-03-07 12:11:16 · 194 阅读 · 0 评论