03 2022 档案
摘要：编程语言 编程：让计算机解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果。 计算机程序：计算机所执行的一系列的指令集合，而程序全部都是我们所掌握的语言来编写，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 计算机语言：人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒
阅读全文
摘要：网格布局是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。 基本概念： display: grid; 创建网格容器。所有直接子元素都成为 -- grid items(网格项目) 属性：grid-template-columns -- 列宽，grid-t
阅读全文
摘要：下拉框 下拉框所在的 ul 都放在 id 为 navbar 的一个 nav 标签里。每一个 li 都对应一个一级菜单，第三个和第四个 li 里面嵌套一个 ul，这个 ul 里的 li 就是二级菜单。nav 下面用一个 header 包裹内容。 <!DOCTYPE html> <html lang="
阅读全文
摘要：页面由导航栏和内容构成。导航栏刚开始是隐藏的，点击左上角的三条杠之后就会在屏幕中间显示导航栏并有一个过渡的效果。内容部分被放在一个 header 标签里，里面有一个类名为 container 的盒子，它的作用是让内容居中。导航栏放在一个盒子里，左上角的三条杠放在一个类名是 hamburger 的盒子
阅读全文
摘要：四个页面都放在一个页面上，每个页面都放在一个 section 标签里。每个 section 都有一个 id，对应一个页面。每个页面的内容基本都一样，所以写完第一个之后复制粘贴然后更改一下就行。第二页和第三页有两个按钮，除此之外只有背景色不一样。 <!-- 第一页 --> <section id="p
阅读全文
摘要：transition过渡 让样式变化时有一个过渡效果。 transition-property：过渡的属性，all 指的是所有属性都过渡。 transition-duration：过渡时间。 transition-delay：延迟过渡的时间。 transition-timing-function：过
阅读全文
摘要：animation 属性 animation 用来设置动画的名称、执行时间等。 animation-name：动画名称。 animation-duration：动画执行时间。 animation-iteration-count：动画执行次数，infinite -- 一直执行。 animation-f
阅读全文
摘要：定义的语法：--变量名: 变量值; 使用的时候用 --属性: var(变量名);的方式使用。变量都是公用样式所以一般都放在 :foot 里面。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi
阅读全文
摘要：盒子阴影 box-shadow：有六个值，分别是 -- 水平距离、垂直距离、模糊半径、扩散半径、颜色、内外阴影。 除此之外还可以设置多个阴影，语法是：box-shadow: 阴影1效果, 阴影2效果, 阴影3效果; 多个阴影之间用英文逗号隔开 <!DOCTYPE html> <html lang="
阅读全文
摘要：目标选择器 div > p：选择 div 的直接子代 p。 div + p：选择 div 后紧跟着的 p。 a[target]：通过 a 标签的 target 属性设置样式。 input[type="text"]：根据 input 的 type 属性值来设置样式，给 type 值是 text 的 i
阅读全文
摘要：navbar 由于网页往下滑的时候这部分一直都在顶部，所以这个要单独弄出来添加粘性定位。导航栏由一个 nav 标签包裹，左边由一个 h1 加字体图标制作 logo。右边用一个 ul 列表制作导航部分 <nav id="navbar"> <h1 class="logo"> <span class="t
阅读全文
摘要：弹性布局的基本属性 给父元素添加 display: flex; 之后就是弹性布局 flex-direction：指的是排列方式，column 指的是纵向排列，row 指的是横向排列，row-reverse 指的是反向排列 flex-wrap: wrap;：指的是自动换行 flex-flow：它是 f
阅读全文
摘要：媒体查询 可以根据显示的宽度和高度来显示哪些样式。基本语法：media ( xxx : xxx ) { 样式 }。 比如： @media(max-width: 500px) { body { background: cyan; } #samrtphone h1 { display: block; }
阅读全文
摘要：头部区域 头部区域运用 header 标签包裹。导航部分运用 nav 标签包裹，左边的 logo 用 h1 包裹，因为有跳转的功能所以里面要有一个a链接，a链接里面再写"米修在线"。右边三个用一个ul包裹，因为可以跳转所以要在 li 里面添加a，在里面再写内容。 <!-- 头部 --> <heade
阅读全文
