![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DIV + CSS
文章平均质量分 75
guokanglun
这个作者很懒,什么都没留下…
展开
-
移动端 响应式 less
1. 移动端布局1. 流式布局(百分比布局)2. flex布局3. rem 适配布局 配合媒体查询使用3.1 remem: 相对于父级rem: 相对于html元素的字体大小, 如: html 字体大小 16px, 则1rem = 16px;优点: 通过html字体大小控制页面布局媒体查询/* 屏幕宽度<800时,字体大小100px */ @media screen and (max-width: 800px){ html{ font-size: 1原创 2021-01-06 00:35:15 · 330 阅读 · 0 评论 -
H5标签
文章目录1. 语义化标签1. 语义化标签header 页眉nav 导航栏section 页面上的版块article 一个完整的独立部分aside 侧边栏footer 页尾h1~h6 标题标签figure 对元素进行组合原创 2020-09-28 23:21:29 · 81 阅读 · 0 评论 -
iframe
引用另一个网页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-09-28 12:27:23 · 161 阅读 · 0 评论 -
阿里图标
文章目录1. 搜索需要的图标2. 添加购物车3. 选择 font-class 生成链接4. 引用1. 搜索需要的图标2. 添加购物车添加完成后再右下角打开购物车,然后添加到项目3. 选择 font-class 生成链接4. 引用阿里图标支持字体样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2020-09-28 11:41:55 · 178 阅读 · 0 评论 -
inline-block float
文章目录inline-block自动解析间隙(给行内块元素父级字体大小为0,单独设置转变元素的大小)float父级盒子高度塌陷(使用了就必须清楚浮动,在浮动元素父级身上清楚浮动)原创 2020-09-23 11:02:39 · 77 阅读 · 0 评论 -
定位
文章目录1. 定位(position)2. 相对定位3. 绝对定位4. 层级1. 定位(position)相对定位: relative绝对定位: absolute固定定位位置改变属性:topbottomleftright2. 相对定位(1)位置改变相对于自身原本的位置(2)不会脱离文档流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2020-09-23 08:46:09 · 125 阅读 · 0 评论 -
字体样式
文章目录1. 字体样式2. 行高3. 文本对齐方式文字的样式在标签上1. 字体样式font-size: 字体大小,默认16pxfont-family : 字体类型(font-family: '楷体';)引用自定义样式@font-face{ font-family:'youyuinati ', src: url('font/youyunati.ttf')}2. 行高line-height 行高行高为容器高度时文字居中3. 文本对齐方式文本默认对齐(内联元素和行内块元素):原创 2020-09-19 13:00:51 · 771 阅读 · 0 评论 -
块元素,内联元素,行内块元素
文章目录1. 块元素2. 内联元素3. 行内块元素1. 块元素div,ul , ol , li, h, p(1)默认继承父级宽度(2) 块级元素独占一行(3)支持内外边距2. 内联元素span, i, em, strong, a(1)内容撑开宽度,不会默认继承父级宽度(2)内联元素依次横排对齐(3)不支持宽高(4)支持左右外边距(5)支持内边距,上下不会撑开父级,也不会改变自身位置注意:中间的空格是换行占位字符.3. 行内块元素display: inline-block原创 2020-09-18 22:50:58 · 134 阅读 · 0 评论 -
盒子阴影
文章目录1. 使用语法2. 参数说明3. 使用案例1. 使用语法box-shadow: h-shadow v-shadow blur spread color inset;2. 参数说明h-shadow: 水平阴影位置(必须)v-shadow:垂直阴影的位置(必须)blur:模糊距离(可选)spread:阴影的尺寸(可选)color:阴影的颜色(可选)inset:内部样式(可选...原创 2020-01-14 17:54:13 · 184 阅读 · 0 评论 -
媒体查询技术
1. 响应式网站响应式是一种网页设计的技术做法,该设计可使网站在不同的设备上浏览时对应不同分辨率皆有适合的呈现2. 媒体查询的判断条件(1)媒体类型all 所有媒体screen 彩屏设备print 打印机和打印预览speech 应用于屏幕阅读器等发声设备(2)媒体查询的逻辑关键词and 和not 非only 限制某种媒体设备(3)媒体查询的参数条件(width:6...原创 2019-12-17 07:18:55 · 702 阅读 · 0 评论 -
弹性盒模型flex
弹性盒子模型:一种更为简单,有效的方式对一个元素中的子元素进行排列对齐的模型1. 使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...原创 2019-12-12 05:48:35 · 112 阅读 · 0 评论 -
CSS3 滤镜
1. 亮度 div { width: 200px; height: 200px; background: url(./1.jpg) no-repeat center/200px 200px; margin: auto; } div:hov...原创 2019-12-12 05:31:40 · 117 阅读 · 0 评论 -
3D 效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-12 04:57:12 · 102 阅读 · 0 评论 -
transform 样式
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转(rotate),缩放(scale),移动(translate),倾斜(skew)等。1. 变化样式之旋转 div { width: 200px; height: 200px; background-color: pink; ...原创 2019-12-10 21:55:47 · 329 阅读 · 0 评论 -
css3 动画
1. 动画的基本实现条件(1)短时间内连续播放多张静态的帧(2)每一帧内部物体的状态必须发生变化2. 触发式动画(1)参数过渡动画时间:transition-duration过渡动画延迟:transition-delay过渡动画时间函数: transition-timing-function过渡动画属性: transition- property过渡动画综合属性:属性名称 过渡时...原创 2019-12-10 21:40:11 · 189 阅读 · 0 评论 -
伪类元素 伪元素
1. 高级选择器的种类CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(1)伪类选择器之状态类:checked:hover:active:focus… …(2)伪类选择器之结构类:nth-child(n) :nth-last-chi...原创 2019-12-10 20:43:55 · 450 阅读 · 2 评论 -
表格元素布局
1. 基本的表格设置table 元素: 在网页中创建一个表格内容tr元素: 在网页中创建表格的一行td元素: 在网页中创建表格的一列th元素: 创建表格中的表头,特殊的td元素caption: 表格的名字2. 基本表格<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-12-10 19:29:32 · 607 阅读 · 0 评论 -
input 框
1. form 标签浏览器在网页上专门用来划分出一个用来存储表单元素的区域form是块元素form标签的action属性内部是一个连接,指向的是提交表单时向哪个服务器地址发送表单数据。form标签的method属性内部存储着,该表单向目标服务器传输数据时采用的是哪种方式2. 文字输入 <form action=""> 用户名: <input ...原创 2019-12-10 07:06:44 · 531 阅读 · 0 评论 -
块元素居中方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-10 06:04:06 · 806 阅读 · 0 评论 -
浮动样式
1. 默认元素普通流布局普通流规则:浏览器在默认情况下规定一个块元素在父元素内的排列规则:从上往下排列从左开始排列一个块元素占一行2. 浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...原创 2019-12-10 05:55:24 · 392 阅读 · 0 评论 -
圆角样式与渐变色
1. 圆角样式border-radius的样式格式(1)单个属性值border-radius:50px; 单个属性值:四个小圆的半径相同(2)两个属性值Border-radius:50px 130px; 两个属性值:左上与右下,左下与右上(3) 三个属性值Border-radius:50px 130px 150px; 三个属性值:左上 右上与左下 右下2. 圆角样式border...原创 2019-12-10 04:49:26 · 446 阅读 · 0 评论 -
背景样式,overflow
1. 什么是背景样式背景样式是W3C规定的浏览器如何渲染元素的背景层,用户可以在背景层添加图片,颜色等效果2. 背景颜色3种设置方式(1)rgb模式:分别代表红绿蓝三种颜色,取值范围rgb(0,0,0)→rgb(255,255,255)(2)rgba模式:a的取值范围0~1, 代表透明度(3)十六进制写法:取值范围 #000000~#ffffff3. 背景颜色写法background...原创 2019-12-09 21:36:28 · 608 阅读 · 0 评论 -
css盒模型,外边距合并
1. 什么是盒模型盒模型是W3C规定的一个浏览器如何渲染, 显示一个元素, 根据元素的种类分为块级元素盒模型和行内元素盒模型2. 标准盒模型(1)content区域:块级元素的width和height值在标准盒模型下,定义了一个块级元素能够存放内容的区域大小,元素的内容从width和height的左上角原点开始排列内容(2)border:块级元素的border的作用是在元素的内容区外加上一...原创 2019-12-07 05:03:47 · 151 阅读 · 0 评论 -
css 基本样式与元素选择器以及命名规范
1. 什么是css层叠样式表,是一种为HTML文档添加样式的计算机语言2. css的引用方式(1)内联样式:在head标签中间新建一个style标签,用来存放css代码<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...原创 2019-12-05 18:50:51 · 245 阅读 · 0 评论 -
基本标签
1. 什么是标签标签是由小于号 + 中间字符 + 大于号组成的代码例如: <!DOCTYPE html>作用:给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息2. 标签的基本格式单标签: <!DOCTYPE html>双标签:<h1> </h1>3. 标签介绍注释标签 <!-- -->html 标签 ...原创 2019-12-04 23:20:03 · 223 阅读 · 0 评论