摘要:CSS高级应用 1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出来! 1.1 display显示(重点) display设置或检索对象是否及如何显示。 display: none 隐藏对象display:
阅读全文
摘要:定位 1. CSS布局的三种机制 1、普通流(标准流) 2、浮动 让盒子从普通流中浮起来——让多个盒子div水平排列成一行。 3、定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 ——CSS离不开定位,特别是后面的js特效。 2. 为什么使用定位 所以,我们脑海应该有三种布局机制的上下顺序 标
阅读全文
摘要:浮动 1.浮动(float) 1.1 CSS布局的三种机制 网页布局的核心——就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中: 普通流(标准流) 块级元素会独占一行,从上向下顺序排列; 常用元素:div、hr、p、h1~h6、ul、ol、d
阅读全文
摘要:CSS背景 1.背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明的例:background-color:pink; 2.背景图片(image) 语法: background-image:none|url(url) 参数作用 none
阅读全文
摘要:行盒的盒模型 常见的行盒:包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整 内边距(填充区) 水平方向有效,垂直方向仅会影响背景(背景变,但字体还是不动),不
阅读全文
摘要:盒模型应用 改变宽高范围 默认情况下,width 和 height 设置的是内容盒宽高。 页面重构师:将psd文件(设计稿)制作为静态页面 问题:衡量设计稿尺寸的时候,往往使用的是边框盒,但设计width和height,则设置的是内容盒 解决办法有两种: 精确计算 CSS3:box-sizing(用
阅读全文
摘要:盒模型 1.什么是标签的显示模式 什么是标签的显示模式? 标签以什么方式进行显示,比如div自己独占一行,比如span一行可以放多个 作用: 我们网页的标签非常多,在不同地方会用到不同类型的标签,以便更好的完成我们的网页。 标签的类型(分类) HTML标签一般分为块标签和行内标签两种类型,也称为块元
阅读全文
摘要:属性值的计算过程 概念: 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时: 选择器相同,则执行层叠性 选择器不同,就会出现优先级的问题。 权重计算公式 关于CSS权重,我们需要一套计算公式来去计算,这个就是CSS Specificity特殊性。 标签选择器计算权重公式 继承或* 0,
阅读全文
摘要:继承 子元素会继承父元素的某些(不是全部)CSS属性 通常,跟文字内容相关的属性都能被继承 例:background-color、weigh、height不能被继承 概念: 子标签会继承父标签的某些样式,如文本颜色和字号。 想要设置一个可继承的属性,只需将他应用于父元素即可。 简单的理解就是:子承父
阅读全文
摘要:层叠 声明冲突:同一个样式,多次应用到同一个元素 层叠:解决声明冲突的过程,浏览器自动处理(权重计算) 概念: 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 原则: 样式冲突,遵循的原则
阅读全文
摘要:选择器 选择器作用:帮助你精准的选中想要的元素\找到特定的HTML页面元素 1.简单选择器 1.1 ID选择器(JavaScript使用)(不推荐使用) 选中的是对应id值的元素 id选择器使用#进行标识,后面紧跟id名 其基本语法格式如下: id选择器 #id名 {属性1:属性值1; 属性2:属性
阅读全文
摘要:字体样式 1.CSS外观属性 1.1 color:文本颜色 作用: color属性用于定义文本的颜色 其取值方式有如下3种: 表示属性值 预定义的颜色值(预设值:定义好的单词) red、green、blue 十六进制 淘宝红:#ff4400/#f40 黑色:#000000/#000 白色:#ffff
阅读全文
摘要:为网页添加样式 术语解释 h1 { color:red; background-color: lightblue; text-align: center;} CSS规则 = 选择器(“{”前面的)+ 声明块 声明块 出现在大括号中({}) 声明块中包含很多声明(属性),每一个声明(属性)表达了某一方
阅读全文
摘要:1.什么是CSS? CSS是用于页面展示的语言 CSS决定了页面长什么样子 2.开发者工具 vscode快捷操作 1、快速复制一行 ctrl+c 然后 ctrl+v 2、选定多个相同的单词 双击选定一个单词然后ctrl+d 3、添加多个光标 ctrl+Alt+上箭头(下箭头) 4、全局替换某写单词
阅读全文
摘要:git基础 1.1 版本管理 1.1.1 什么是版本管理 版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容。 1.1.2 人为维护文档版本的问题 文档数量多且命名不清晰导致文档版本混乱 每次编辑文档需要复制,不方便 多人同时编辑同一个文档,容易产生覆盖 1.2 Git 是什么 Git
阅读全文
摘要:HTML5新增元素 概述 HTML5新增的主要结构元素有6个:header、nav、article、aside、section、footer。 header 在HTML5中,header元素一般用于3个地方: 页面头部:如网站名称、页面LOGO、顶部导航、介绍信息等。 文章头部(article元素)
阅读全文
摘要:表单标签 目标: 能写出最常用的注册类表单 能说出input表单常见属性 作用: 表单目的是为了收集用户信息。 在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时也需要表单。 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成 表单控件: 包含了具体的
阅读全文
摘要:1.列表标签 学习目标 理解 无序列表的应用场景 自定义列表的应用场景 应用 无序列表语法 自定义列表语法 列表就是用来布局的,因为非常整齐和自由 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表 特点: 列表的最大特点就是 整齐、整洁、有序,跟表格类似,但是他可组合自由度会更高。
阅读全文
摘要:表格 表格会使用 表格 用来展示数据 可以让数据显示整齐规范 列表 列表用来布局 列表可以页面布局整齐规范 表单 表单用来收集用户信息 目标: 理解: 能说出表格用来做什么 表格的基本结构组成 应用: 能够熟练写出n行n列的表格 能够简单的合并单元格 1.创建表格 在HTML网页中,要想创建表格,就
阅读全文
摘要:容器元素 容器元素:该元素代表一个块区域,内部用于放置其他元素 div元素 没有语义 语义化容器元素 header:通常用于表示页头,也可以用于表示文章的头部 footer:通常用于表示页脚,也可以用于表示文章的尾部 article:通常用于表示整篇文章 section:通常用于表示文章的章节 as
阅读全文