2022年3月29日
网格布局
摘要： 网格布局是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。 基本概念： display: grid; 创建网格容器。所有直接子元素都成为 -- grid items(网格项目) 属性：grid-template-columns -- 列宽，grid-t 阅读全文
posted @ 2022-03-29 15:47 RoddyBryce 阅读(145) 评论(0) 推荐(0)
animation 动画
摘要： animation 属性 animation 用来设置动画的名称、执行时间等。 animation-name：动画名称。 animation-duration：动画执行时间。 animation-iteration-count：动画执行次数，infinite -- 一直执行。 animation-f 阅读全文
posted @ 2022-03-29 15:44 RoddyBryce 阅读(804) 评论(0) 推荐(0)
2022年3月27日
阴影
摘要： 盒子阴影 box-shadow：有六个值，分别是 -- 水平距离、垂直距离、模糊半径、扩散半径、颜色、内外阴影。 除此之外还可以设置多个阴影，语法是：box-shadow: 阴影1效果, 阴影2效果, 阴影3效果; 多个阴影之间用英文逗号隔开 <!DOCTYPE html> <html lang=" 阅读全文
posted @ 2022-03-27 15:18 RoddyBryce 阅读(206) 评论(0) 推荐(0)
CSS变量
摘要： 定义的语法：--变量名: 变量值; 使用的时候用 --属性: var(变量名);的方式使用。变量都是公用样式所以一般都放在 :foot 里面。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi 阅读全文
posted @ 2022-03-27 13:20 RoddyBryce 阅读(27) 评论(0) 推荐(0)
2022年3月26日
选择器和伪元素
摘要： 目标选择器 div > p：选择 div 的直接子代 p。 div + p：选择 div 后紧跟着的 p。 a[target]：通过 a 标签的 target 属性设置样式。 input[type="text"]：根据 input 的 type 属性值来设置样式，给 type 值是 text 的 i 阅读全文
posted @ 2022-03-26 10:26 RoddyBryce 阅读(28) 评论(0) 推荐(0)
2022年3月25日
CSS响应式布局
摘要： 响应式布局就是在任何情况下，页面布局效果都不会发生变化，他会根据用户的电脑屏幕，尺寸大小来改变自身的布局。 浏览器窗口，VH和VW，VH 的计算方法就是，将窗口的大小分为100份，vh 的计算方法和 vh 是一样的，一个是计算高，一个是计算宽。 弹性盒子，弹性盒子是CSS3的一种新布局模式，代替浮动 阅读全文
posted @ 2022-03-25 22:23 RoddyBryce 阅读(296) 评论(0) 推荐(0)
2022年3月24日
莱恩在线
摘要： 头部区域运用 header 标签包裹。导航部分运用 nav 标签包裹，左边的 logo 用 h1 包裹，因为有跳转的功能所以里面要有一个a链接，a链接里面再写"米修在线"。右边三个用一个ul包裹，因为可以跳转所以要在 li 里面添加a，在里面再写内容。 <!-- 头部区域 --> <header> 阅读全文
posted @ 2022-03-24 21:00 RoddyBryce 阅读(44) 评论(0) 推荐(0)