导航栏

随笔分类 -  html、css

CSS（十二）--响应式布局
摘要：1.响应式布局 网页可以根据不同的设备或窗口大小呈现出不同的效果 通过响应式布局，可以使一个网页适用于所有设备 响应式布局的关键就是媒体查询，通过媒体查询，可以为不同的设备，或设备的不同状态来分别设置样式 1.2媒体查询 语法：@media 查询规则 媒体类型： all：所有设备 print：打印设 阅读全文
posted @ 2021-01-30 22:28 RickZ 阅读(363) 评论(0) 推荐(0)
CSS（十一）-- 手机像素
摘要：1.像素 屏幕是由一个一个发光的小点构成，这一个个小点就是像素 分辨率：1920*1080 说的是屏幕中小点的数量 在前段开发中像素要分成两种情况进行讨论，css像素和物理像素 物理像素：上述所说的小点就属于物理像素 css像素：编写网页时，我们所用像素都是css像素 一个css像素最终由几个物理像 阅读全文
posted @ 2021-01-29 23:56 RickZ 阅读(275) 评论(0) 推荐(0)
CSS（十）-- 弹性盒子
摘要：1.弹性盒简介 flex（弹性盒，伸缩盒），是css的又一种布局手段 主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 1.1弹性容器 要使用弹性盒，必须先将一个元素设置为弹性容器 通过display来设置弹性容器 display：flex 设置为块 阅读全文
posted @ 2021-01-29 23:27 RickZ 阅读(418) 评论(0) 推荐(0)
CSS常用属性
摘要：布局 min-width：1226px 浏览器网页最小宽度（缩小后还是会有水平滚轮，只是会铺满） 作用：不让浏览器过小导致容器溢出 css动画效果 text-indent：2px文本首行缩进 让元素隐藏 隐藏后仍保留位置 visibility：hidden； 隐藏后不保留位置 display：hid 阅读全文
posted @ 2021-01-28 23:28 RickZ 阅读(45) 评论(0) 推荐(0)
CSS（九）-- less（css的预处理语言）
摘要：1.css的一些附加功能 变量的设置 兼容性不好，ie没有 <style> html{ --color:#bfa; } div{ color:var(--color) } </style> calc()计算函数 兼容性不好，ie没有 <style> width:calc(136px*12); </s 阅读全文
posted @ 2021-01-28 23:26 RickZ 阅读(417) 评论(0) 推荐(0)
CSS（八）-- 变形（过渡、动画、平移、旋转、缩放）
摘要：1.过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 1.1transition-property:指定执行过渡的属性 多个属性使用“，”隔开，如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果 注意：过渡必须是从一个有效数值向另外一个有效数值过渡 1.2 阅读全文
posted @ 2021-01-28 21:44 RickZ 阅读(1406) 评论(0) 推荐(0)
HTML（二）-- 表格、表单
摘要：在现实生活中，我们经常需要使用表格来表示一些格式化数据，例如：课程表、人名单、成绩单。。。 在网页中也要使用表格 通过table标签创建一个表格 1.表格 1.1常用表格 标签 table tr 表示一行 td 表示一个单元格 默认情况下元素在td中是垂直居中的，可以通过vertical-align 阅读全文
posted @ 2021-01-26 09:13 RickZ 阅读(234) 评论(0) 推荐(0)
CSS（六）-- 布局（元素的层级），字体
摘要：1.层级 对于开启了定位的元素，可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示 如果元素的层级一样，则优先显示靠下的元素 祖先元素的层级再高也不会盖住后代元素 2.字体相关 2.1字体相关的样式 (https://blo 阅读全文
posted @ 2021-01-24 00:13 RickZ 阅读(552) 评论(0) 推荐(0)
CSS（七）-- 背景
摘要：1.背景 1.1一些属性 background-color:设置背景颜色 ###background-image：设置背景图片 background-image：url(图片的路径)； 可以同时设置背景颜色和背景图片，这样将会成为图片的背景色 如果背景的图片小于元素，则背景图片会自动在元素中平铺及那 阅读全文
posted @ 2021-01-24 00:11 RickZ 阅读(192) 评论(0) 推荐(0)
CSS（五）-- 布局（定位）
摘要：1.定位position 定位是一种更加高级的布局手段 单纯的用margin实现元素的移动，会显得很麻烦且笨拙，因此使用position属性改变元素的定位方式，从而更好的布局 通过定位可以将元素摆放到页面的任意位置 可选值 static 默认值，元素是静止的没有开启定位 relative：开启元素的 阅读全文
posted @ 2021-01-20 20:43 RickZ 阅读(160) 评论(0) 推荐(0)
CSS（四）-- 布局（浮动）
摘要：float浮动 通过浮动可以使一个元素相其元素的左侧和右侧移动 使用float属性来设置于元素的浮动，只是在父元素的范围内，不会超出 可选值： none（默认值）：元素不浮动 left：元素向左浮动 right：元素向右浮动 注意1：元素设置浮动以后，水平布局的等式遍不需要强制成立 之前 设置了fl 阅读全文
posted @ 2021-01-20 15:45 RickZ 阅读(199) 评论(0) 推荐(0)
CSS（三）-- 布局（盒子模型）
摘要：1.文档流（normal flow） 网页是一个多层的结构，一层叠着一层 通过CSS可以分别为每一层来设置样式，作为用户只能看到最顶上一层 这些层中，最底下的一层称为文档流。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列 对于我们来说元素主要有两个状态 在文档流中 不再文档流中（脱离 阅读全文
posted @ 2021-01-18 22:55 RickZ 阅读(463) 评论(0) 推荐(0)
CSS（二）-- 样式继承、选择器权重、像素、颜色
摘要：1.继承（样式） 样式的继承，我们为一个元素设置的样式同时也会应用到他的后代元素上 继承是发生在祖先和后代之间的 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素伤，这样只需要设置一次即可 注意：并不是所有的方法都会被继承，比如，背景相关的，布局相关等这些样式 阅读全文
posted @ 2021-01-18 11:02 RickZ 阅读(139) 评论(0) 推荐(0)
CSS（一）-- CSS的基本语法，选择器，伪元素，伪类
摘要：html和css资料链接 提取码zyq6 1.CSS 层叠样式表 网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式，而最终我们能看到的只是网页的最上边的一层 总之一句话，css用来设置网页中元素的样式 内联样式，行内样式 在标签内部通过style属性来设置元素的样式 <p s 阅读全文
posted @ 2021-01-16 15:35 RickZ 阅读(337) 评论(0) 推荐(0)
HTML（一）
摘要：html和css资料链接 提取码zyq6 w3school的HTML教程 1.网页的结构 根据W3C标准，一个网页主要分为三部分组成：结构（HTML）、表现（CSS）、行为（JS） 结构：HTML用于描述页面的结构 表现：CSS用于控制页面中元素的样式 行为：JS用于响应用户操作 2.HTML 超文 阅读全文
posted @ 2021-01-15 19:09 RickZ 阅读(140) 评论(0) 推荐(0)