奥丁9
奥丁9
后端
数据库
redis
mysql
mongoDB
达梦
php
laravel
laravel-admin
dcat
表单
表格
java
spring
python
go
c
c++
前端
vue
nodejs
sass/less
html/css
前端框架
javascript
微信生态
公众号
小程序
uniapp
typescript
其他
AI
数据结构
安全
linux
seo
git
健身
算法
正则表达式
docker
待分类
前端
/
html/css
h5c3笔记
1年前
aoding9
175
html
css
学习笔记
[TOC] *5.2* 看完pink老师h5c3基础篇 然后复习前面的内容 === # HTML基础 ## 概念 - 网站是因特网上根据一定规则，用html等制作的展示特定内容的网页集合 - 网页是构成网站的基本元素，通常由图片链接文字声音视频等组成 - HTML是超文本标记语言缩写(Hyper Text Markup Language)，有各种标签（用尖括号包围的关键词），用来制作网页 - 标签大部分成对出现，少部分是单标签 - 标签两种关系：包含关系（父子关系），并列关系（兄弟关系） ***！注意：编辑时标签的选择尽量语义化，合适的地方给合适的标签，便于查看*** ### 工具 - vscode notepad++ submit Dreamweaver webstorm等 - vscode的html文件输入!回车，自动生成网页基本结构 ### !DOCTYPE lang charset以及网页大致结构 ```html <!DOCTYPE html> 声明文档类型为HTML5 <html lang="zh-CN"> 声明中文网页 <head> 头部 <meta charset="UTF-8"> 声明编码类型为万国码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 其他声明 <title>网页标题</title> </head> <body> <p>身体</p> </body> </html> ``` ### 浏览器相关 #### 常用浏览器以及内核（渲染引擎，读取网页内容，整理讯息，计算网页显示方式并显示页面） | 浏览器 | 内核 | 说明 | | ------------ | ------- | ---------------- | | IE | Trident || | Firefox | Gecko | 火狐浏览器 | | Safari | Webkit | 苹果浏览器 | | Chrome/opera | Blink | Webkit内核的分支 | ***!国产浏览器一般是webkit和blink内核*** ### web标准 #### W3C万维网联盟制定的标准，统一不同浏览器的展示方式 >包含： - 结构 对网页元素整理和分类，如html - 表现 设置网页元素外观样式，如css - 行为 网页模型的定义及交互的编写，如JavaScript *!web标准提出最佳体验方案：结构样式行为相分离，结构写到html文件，表现写到css文件，行为写到js文件*** ## 标题 段落 ```html <title> 网页标题 <h1>-<h6> 标题 <p> 段落 <br> 换行 <hr> 横线 网页格式化标签 <strong> <b>加粗 <em> <i> 倾斜 <del> <i> 删除线 <ins> <u> 下划线 <div> 块元素 独占一行 <span> 行内元素 大小随内容改变，一行可多个 <!-- 注释 --> 特殊字符实体 空格 < < > > ``` ### 案例：01.体育新闻.html ## 超链接 图片 锚点 路径 ```html <a href="" target=""> 超链接 id="锚点" 然后href="#锚点" 点击即可跳到锚点位置 target的值： _blank 新窗口打开 _self 当前窗口打开 <img src="" alt="" title=""> 图片标签 src 图片路径，必须写 alt 图片显示不出时的替换文本 title 图片说明 ``` ***!src alt title 必须写在标签里面*** ### 目录和路径 #### 目录文件夹：放网站的文件夹 #### 根目录：目录文件夹最外面一层 #### 路径 >相对路径 同一级直接写文件名 img.jpg 下一级 / images/img.jpg 上一级 ../ ../image/img.jpg >绝对路径 目录写全，通常是盘符开始或者网络地址开始 如 http://www.xx.com/xx.png ***!一般用相对路径，查找快，换电脑不用改*** ***!盘符表示的绝对路径，符号是\反斜杠*** ### 案例：02-1.圣诞节的那些事.html 02-2.oldman.html ## 表格 ```html <table> 下面的标签都要包含在\<table>里面 cellspacing 单元格外边距 cellpadding 格子内边距 border 边框 width 宽 height 高 align 对齐方式 border-collapse:collapse 合并边框模型 <thead>\<tbody> 表格结构标签 头部 主体 <tr> 行 <td> 标准单元格 <th> 表头单元格 colspan 跨列合并 rowspan 跨行合并 ``` ### 案例：03.小说排行榜.html *5.3* 继续复习 === ## 列表、表单标签 ```html <ul> 无序列表 <ol> 有序列表 <li> 列表子项 自定义列表 dl类似于table但是只管一列，dt类似th，dd类似td，dd是dt的细分 <dl> 定义列表 <dt> 定义项 <dd> 定义描述 ``` ### 表单相关 ```html <form action="demo.php" method="POST" name="name1"> 表单域 配合后端收集数据 <input type=""> 表单控件 <textarea> 文本域 输入大量文字 <select><option> 下拉选择 <label for="id"> 绑定到某个元素便于点击 ``` #### input的type可选值 - text 文本框 - password 密码框 - select 下拉选框 - 用\<option>标签代表每个选项，他们的name相同，但value不同 - radio 单选按钮 - name必须相同 checked="checked" 表示默认选中 - checkbox 复选框 - file 文件选择 用于文件上传 默认单选 - 加上multiple属性则是文件多选 - submit 提交 - button 单纯是个按钮 ### 案例：04.注册页面.html # CSS基础 ## css3规范 ### css是什么 >层叠样式表 ### 三种样式写法 #### 内联样式 直接标签里面写 `<p style=""> ` #### 内部样式 `<head>`里面写 选择器和{隔一个空格 :和值 打个空格 ```html <style> p { color: red; } <style> ``` #### 外部样式 <head>里面<link>引入` `<link rel="stylesheet" href="xxx.css">` ### 属性书写顺序，便于查看，提高渲染性能 1. 定位属性： `position display float left top right bottom overflow clear z-index` 1. 自身属性： `width height padding border margin background` 2. 文字样式： `font-family font-size font-style font-weight font-variant color` 3. 文本属性： `text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow` 4. css3中新增属性： `content box-shadow border-radius transform……` ## css选择器1 ### 标签选择器 p {xxx: xxx;} 选择所有标签元素 ### 类选择器 .xx {xxx: xxx;} 声明类名然后标签里面class="xx"调用这个类 <div class="类名1 类名2"> 多个类之间用一个空格隔开，都生效 ### id选择器 #xxx {xxx: xxx;}声明id名然后标签里面id="xx"调用他 ### 通配符选择器 * {} 选择所有元素 ## 常用属性1 ### 自身属性： ```css { width|height: 10px; 宽 高 像素、百分比 background-color:red; 背景颜色 预定义颜色值、RGB代码、十六进制颜色 } ``` ***!透明色 transparent*** ### 字体样式： ```css { font-family: "Microsoft Yahei"; 字体 微软雅黑 font-size: 16px; 字体大小 像素、比例 font-weight: 400; 字体粗细 100-900,400等同normal，700等同bold font-style: italic; 字体风格样式 normal标准 italic倾斜 font: [font-style] [font-weight] font-size/[line-height] font-family; 字体复合写法 size和family必须写 } ``` ### 文本外观： ```css { color: red; 文字颜色 颜色值 text-align: center; 文字对齐方式 left|right|center 左右中对齐 给父级加t-a:c 可以让图片水平居中 text-decoration: underline; 装饰文本 none默认没有 line-through 删除线 underline下划线（常用） overline 上划线 text-indent：2em； 文本首行缩进 px、em line-height: 1.5; 行高 文字+上下间距之和 可以是px、em等，不跟单位表示当前字体多少倍 } ``` ***!行高=盒高则垂直居中，行高>盒高则往下偏，反之偏上*** ### 案例：05.天气新闻.html ***!text-decoration:none; 去掉a下面的下划线*** ## 浏览器调试工具 - 按F12，左边Elements元素栏看html，右边style看css，Computed看盒子模型 - 左上角箭头选中元素后，左右对比检查样式，看css是否写错 - 右边黄色叹号，提示错误，在多少行 - 可以临时修改，然后写到文件里面 ## VScode Emment语法 ### Emment快速生成html标签 ***!感叹号代表生成HTML5类型*** | 写法 | 说明 | | ----------- | ----------------------- | | E | 代表HTML标签 | | E#id | 代表id属性 | | E.class | 代表class属性 | | E[attr=foo] | 代表某一个特定属性 | | E{foo} | 代表标签包含的内容是foo | | E>N | 代表N是E的子元素 | | E+N | 代表N是E的同级元素 | | E^N | 代表N是E的上级元素 | | E*N | 代表生成N个E标签 | | $ | 代表从1的自增 | ### 快速生成css >输入属性全名的部分字母，按tab自动补全，如w200生成width:200px; ## VScode插件和配置 | 插件 | 说明 | | ---------------------------------- | ------------------------------------------ | | Chinese (Simplified) Language Pack | 中文语言包 | | open in browser | 浏览器打开 | | live server | 浏览器自动刷新，配合自动保存，不用手动刷新 | | vscode-icons | 好看的图标 | | Bracket Pair Colorizer | 成对的彩色括号 | | Path Intellisense | 路径自动补全 | | Auto Rename Tag | 自动重命名标签 | | CSS Peek | 样式追踪 | | Beautify和Prettier | 都是格式化代码 | | git | 软件仓库版本控制 | | markdown one for all | markdown插件 | ### 打开设置,在setting.json中设置，添加以下语句 ```json "editor.formatOnSave":true, 保存完自动格式化 "editor.formatOnType":true, 输完一行自动格式化 例如： { "editor.fontSize": 18, "window.zoomLevel": 0, //保存时格式化 "editor.formatOnSave": true, // 换行 "editor.wordWrap": "on", //图标主题 "workbench.iconTheme": "vscode-icons", "workbench.colorTheme": "One Dark Pro", } ``` *5.4* 补充前面，继续复习 === ## css选择器2 ### 复合选择器：多个条件进行组合，精确选择，提高权重 #### 子集选择器（后代选择器） `E1 E2 {}` 中间空格隔开选择E1里面所有E2元素，孙子也算 #### 子元素选择器 `E1>E2 {}` 只选直接后代，亲儿子 #### 并集选择器 并集选择器是多个选择器通过逗号连接而成的，同时选中各个基本选择器所选择的范围，任何形式的选择器都可以 `E1,E2 {}` #### 交集选择器 由两个基本选择器连接构成，选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写 例如：E.class {}和E#id {} #### 伪类选择器 ##### 链接伪类选择器 ```css a:link 选择所有未被访问的链接 a:visited 选择所有已访问的链接 a:hover 选择鼠标在其上的链接 a:active 选择活动链接（鼠标按下未松开） ``` ***!为了确保生效，请按照LVHA顺序声明*** ***!常用组合：a {} a:hover {}*** ##### 焦点伪类选择器 `:focus` >选择光标焦点所在元素，一般\<input>类表单元素才能获取 ***!常用组合： input:focus {}*** ## css元素显示模式 ### 以什么方式进行显示 ### 块元素 block #### 特点 - 独占一行 - 宽高内外边距可控 - 宽度默认父级100% - 是一个容器盒子，可以放行内或块元素 #### 常见： `<h1>-<h6> <p> <div> <ul> <ol> <li>` ### 行内元素（内联元素）inline #### 特点 - 相邻元素在一行上，一行可以显示多个 - 宽高直接设置会无效 - 默认宽度是内容的宽度 - 只能容纳文本或其他行内元素，不能装块元素 - #### 常见：文字相关标签 `<span> <a> <em> <i> <strong> <b> <del> <s> <ins> <u>等` ***!a链接里面不能再放a链接，特殊情况\<a>里面可以放块元素，但转换模式最安全*** ### 行内块元素 inline-block #### 特点 - 和相邻元素在一行，一行多个，但是会有空白缝隙(行内元素) - 默认宽度就是内容宽度（行内元素） - 高度、行高、内外边距可以控制（块元素） #### 常见： `<img> <input> <td>` ### 行内元素和块级元素的区别 行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。 因此，行内元素适合显示具体内容，而块级元素适合做布局。常用的行内和块级元素如下： | 级别 | 元素 | | -------- | ------------------------------------------------------------ | | 行内元素 | a,b,strong,span,img,label,button,input,select,textarea | | 块级元素 | header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer | ### 显示模式转换 #### display: | block | 块级 | | ------------ | ---------- | | inline | 行内元素 | | inline-block | 行内块元素 | ### 案例:06.小米侧边栏.html ## 辅助工具的使用 ### snipaste >F1截图 F3贴图 截图后按c复制取色 shift转十六进制颜色 ### FSCapture >截图、标尺等 ### PhotoShop >窗口菜单，标尺，像素（ctrl+R），放大缩小(z)，拉参考线，选区量(v)宽高，吸管取色(i)，文字颜色大小(t),变形(ctrl+t) 切图 >右键图层，导出为png >多个图层用合并功能 >切片选中，保存为web所用格式，保存选区 >cutterman插件，快速导出 ## 背景属性系列 | background-color | 背景颜色 | | ----------------------- | -------------------- | | background-image:url(); | 背景图片 | | background-repeat | 背景图片是否重复平铺 | >背景图片平铺设置 no-repeat 不平铺 repeat-x repeat-y 在x（y）轴上平铺 ### background-position：x y; 背景图片位置 `left right top bottom center` >也可以是精确数值或百分比 ***!方位名词顺序没关系，只写一个另一个则默认居中，精确数值是先写x再写y*** ### 案例：07-1.成长守护平台.html 07-2.王者荣耀大图居中.html ### background-attachment 背景图片附着 是否随页面滚动 `scroll 滚动 fixed 不滚动` ### 背景复合写法 `background: [bg-color] [bg-image] [bg-repeat] [bg-attachment] [bg-position]` ### 背景色半透明 `background: rgba(0,0,0,0.5);` >第四个数是透明度，0-1之间，0.3的0可以省略 ***!背景颜色半透明，内容不受影响，新属性，IE9+才支持*** ### 案例：08.五彩导航.html ## css三大特性 ### 层叠性 - 给相同元素或类设置冲突样式，就会发生样式层叠覆盖 - 样式冲突，遵循就近原则，离哪个近就执行哪个，不冲突则不层叠 ### 继承性 #### 子元素可继承父元素某些样式，部分不继承，通过文档中的inherited：yes来判断 #### 可以继承的属性 - 字体系列属性： `font系列` - 文本系列属性： | text-indent | 文本缩进 | | -------------- | ---------------------------------- | | text-align | 文本水平对齐 | | line-height | 行高 | | word-spacing | 增加或减少单词间的空白（即字间隔） | | letter-spacing | 增加或减少字符间的空白（字符间距） | | text-transform | 控制文本大小写 | | direction | 规定文本的书写方向 | | color | 文本颜色 | - 元素可见性：`visibility` - 表格布局属性：`caption-side、border-collapse、border-spacing、empty-cells、table-layout` - 列表布局属性：`list-style系列` - 生成内容属性：`quotes` - 光标属性：`cursor` - 页面样式属性：`page、page-break-inside、windows、orphans` - 声音样式属性：`speak系列、volume、voice-family、pitch、pitch-range、stress、richness、azimuth、elevation` #### 所有元素可以继承的属性 - 元素可见性：`visibility` - 光标属性：`cursor` #### 内联元素可以继承的属性 - 字体系列属性 - 除`text-indent、text-align`之外的文本系列属性 #### 块级元素可以继承的属性 - `text-indent、text-align` #### 不能继承的属性： - `display`：规定元素应该生成的框的类型 - 文本属性： | vertical-align | 垂直文本对齐 | | --------------- | -------------------- | | text-decoration | 规定添加到文本的装饰 | | text-shadow | 文本阴影效果 | | white-space | 空白符的处理 | | unicode-bidi | 设置文本的方向 | - 盒子模型的属性： `width height以及margin padding border系列` - 背景属性：`background系列` - 定位属性：`float、clear、position系列、(min|max)-(width|height)、overflow、clip、z-index` - 生成内容属性：`content系列` - 轮廓样式属性：`outline系列` - 声音样式属性：`pause系列、cue系列、play-during` ### 优先性 #### css权重是指样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。 #### css权重由4个数组成，左大右小，使用子集/交集/并集选择器等可叠加权重，但不进位 #### 权重计算： | 选择器 | 说明 | 权重 | | ------------------------------------------------------------------------- | -------------------- | ---------- | | !important | 加在样式属性值后 | 最大 10000 | | 内联样式 | 如：style="" | (1,0,0,0) | | ID选择器 | 如：#content | (0,1,0,0) | | 类 伪类和属性选择器 | 如：content、：hover | (0,0,1,0) | | 标签选择器和伪元素选择器 | 如：div,p,:before | (0,0,0,1) | | 通配符选择器（*） 子选择器（>）<br>相邻选择器（+）同胞选择器（~）以及继承 | | 0 | ***!特别注意：继承来的属性无论父级权重多大，子级都是0*** ***!\<a>标签在浏览器中默认指定了样式，无法用继承来覆盖，如要修改需对\<a>单独指定*** ## 盒子模型 - 把布局元素看做一个矩形盒子，装内容的容器 - 外边距-边框-内边距-内容 ### 边框 border | 属性 | 说明 | | ------------ | ---------- | | border-width | 边框粗细px | | border-style | 边框样式 | | border-color | 边框颜色 | **常见边框样式有：** solid 实线 dotted 点线边框 dashed 虚线边框 #### 分开写法 - order-方位词，单独设置上 下 左 右的边框 #### 复合写法 `border: #000 1px solid;` 没有顺序随意写 ***!边框会影响盒子大小*** - 可以测量盒子大小时不量边框 - 包含了边框则需用宽/高减去边框 #### border-radius 圆角边框 - 跟1个值是四角，2值是左上+对角和另一对角，4值是从左上顺时针设置 #### 可以单独设置 >如：border-top-left-radius 顺序先写上下 再左右 ### 内容 content 就是里面的内容 ### 内边距 padding #### 设置边框和内容之间的距离 `padding-方位词` 单独设置上 下 左 右边框到内容的距离 #### 复合写法 | 属性：值 | 说明 | | ----------------- | ----------------------- | | padding: x； | | padding: x y； | 两个值，上下x 左右y | | padding: a b c； | 三个值，上a 左右b 下c | | padding: a b c d; | 四个值，上a 右b 下c 左d | ***!当盒子指定了width或height时，padding就会影响宽高撑大盒子，如果不设置就没影响，如果一定要用，宽或高需要减去内边距*** ***!常用做法：这个特性可以用于无法设置固定宽度的情况，左右padding撑开盒子，如导航栏*** ### 案例：09.新浪导航.html ***!行内块元素之间有缝隙，因为换行符也被当做空白符了*** >解决办法 https://www.cnblogs.com/phoebeyue/p/9125195.html ### 外边距 margin #### 控制盒子之间的距离，写法和padding类似 ***!margin不会撑开盒子尺寸*** ***!常用做法：*** `margin:0 auto;` - 只要左右是auto就可以水平居中 *！对行内（行内块）元素无效，需要给父级加`text-align:center`* ***!嵌套块元素，外边距会塌陷，几种解决办法：父级加上边框，上内边距，overflow:hidden，子级加浮动，固定，绝对定位*** ***!为了兼容性，行内元素尽量不设上下内外边距，左右可以，或者把他转换一下*** ***!初始化css：清除默认内外边距*** `*{margin:0;padding:0;}` ### 案例：10.产品模块.html ***!测量时发现，部分元素间有缝隙，测量不准确，一般是5px* ### 案例：11.快报模块.html ***!list-style:none; 去掉li前面的小圆点*** #### 行内元素和块级元素：内联(行级)元素不能设置margin-top 内联(行级)元素 不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。 *5.5* 这么记笔记太慢了，换个方法 === ## 阴影 - box-shadow 盒子阴影效果 - text-shadow 文本阴影效果 ### 语法： `box-shadow: h-shadow v-shadow blur spread color inset;` 水平阴影位置 垂直阴影位置 模糊半径 阴影扩散半径 颜色 内外阴影（改为inset就是内阴影outset就是外阴影） ***!前两个值必须写*** ## 网页布局三种方式 ### 标准流 - 按照标签默认规定的方式排列，最基本的布局方式 - 块级元素独占一行，从上往下顺序排列 - 行内元素从左到右按顺序排列，碰到父元素边缘自动换行 ### 浮动 - float属性创建浮动块，将其移动到一边，直到左/右边缘触及包含块或另一个浮动框的边缘 ### 定位(后面学) ## 浮动特性 ### 脱标：浮动元素会脱离标准流（浮）移动到指定位置（动），浮动的盒子不再保留原先位置 ***!浮动的盒子只会影响他后面的标准流，不会影响前面的标准流*** ### 如果多个盒子都浮动，他们会按属性值一行内显示并顶端对齐排列 ***!浮动元素是紧靠的没有缝隙，父盒子宽度装不下会自动另起一行*** ### 任何元素都可以浮动，浮动元素具有行内块特性 ***!设置了浮动，不需要转换就可以给宽高，如果没有给宽高，则盒子按内容大小决定*** ## 网页布局相关 ### 案例：12.浮动布局.html ### 常见网页布局 - 一列固定宽度且居中：top-banner-main-footer - 两列左窄右宽型：top-banner-(left+right)-footer - 通栏平均分布型：top-banner-(box.hd+box.bd)*4-footer ### CSS版心和布局流程、清除浮动 https://blog.csdn.net/tichimi3375/article/details/82794074 - 通栏：宽度为屏幕100%的盒子 - 版心（可视区）：指主体内容所在区域，一般水平居中，常见宽度为960px、980px、1000px、1200px等。 ### 布局流程 >为了提高网页制作的效率，布局时通常要遵守一定的布局流程： 1. 确定页面的版心（可视区） 2. 分析页面中的行模块，以及每个行模块中的列模块（第一准则） 3. 一行中列模块经常浮动，确定列的大小后，再确定列的位置（第二准则） 4. 制作HTML结构 ，结构最重要 5. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块 ### 案例：13.通栏平均分布布局.html ***!标准流父元素排列上下位置，内部子元素浮动排列左右位置*** ***!一浮全浮：一个盒子里面有多个盒子，如果其中一个浮动，为了避免不利影响，其他盒子也要浮动*** ## 清除浮动 有的盒子不方便给高度，子级浮动会导致父级高度为0，理想状态是随内容撑开高度 ### 本质：清除浮动元素造成的影响 ***!如果父盒子有高度则不需要清除浮动*** ***!清除浮动后，父级会根据内容自动检测高度，不会影响后面的标准流*** clear:both; 清除浮动 both|left|right 清除两侧（左、右）浮动元素的影响 ### 策略：闭合浮动，不让浮动影响父级外面 ### 三种方法 - 额外标签法（隔墙法） 在后面加一个块级元素的空标签<br>之类的 >不能加行内元素 >缺点：结构不简洁 - 父级加overflow属性 >父级加overflow:hidden; 缺点：无法显示溢出部分 - 父级加after伪元素 >隔墙法升级版，利用::after伪元素，给父级调这个类 ```css .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } ``` - 父级加双伪元素 > 同上，父级调用类就行 ```css .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } ``` ## 图片格式 | 类型 | 说明 | | ---- | ------------------------------------------------- | | jpg | 清晰，色彩多，产品类图片 | | gif | 256色，可以保存透明背景和动画效果，用于图片小动画 | | png | 色彩多，背景可透明 | | psd | ps专用格式，美工给前端的 | ## 综合案例：14.学成在线.html ### 案例总结 #### 规定自己习惯的顺序 { 定位属性 定位、浮动、转换等 外边距、内边距、上右下左定位 自身属性 宽、高 背景 边框 字体属性 字体大小、粗细、风格 颜色 文本属性 行高 对齐方式 新增样式 圆角边框 阴影 } #### 盒子之间距离用margin，盒子边框与内容之间用padding，需要特别样式可以混用，简单看法就是看内容的某个方向上能否直接碰到父级的边框，能碰到就内边距，被其他元素挡住就外边距 ***!一般li设外边距，a设内边距，如果a点击区需要连续排列没缝隙，就不给li对应边的外边距*** ### header的横条nav做法 #### div>ul>li>a（ul本身就是盒子，可以不要div） #### ul设置高度和左右外边距，再设行高继承给子级控制文字上下，li设置外边距，a设置内边距，浮动，完成 ```html <div> <ul> <li><a></li> <li><a></li> </ul> <div> ``` ### 通栏+版心写法 #### div>div.layout 第一个div设高度，不设宽或设100%，背景色设好，再弄layout里面 <div> <div class="layout"> </div> ### banner部分竖直nav写法 #### div>ul>li>a>span #### div设置宽高，ul上外边距,li或者a设置高度、行高，li外边距，a内边距，a左浮动，span箭头右浮动，右内边距调整 ```html <div> <ul> <li><a></li> <li><a></li> </ul> </div> ``` ### 课程部分快报写法 #### div>div.hd+div.bd>(ul>li>a+xxx) >hd可以是标题标签，设置行高即可，ul设置左右和上内边距，li或a设置高、行高，最后按钮什么的类似吧，上外边距和高度行高设置好 ```html <div> <div class="hd">巴拉巴拉</div> <div class="bd"> <ul> <li><a></li> <li><a></li> </ul> <巴拉巴拉> </div> </div> ``` ### 版心产品模块 #### div>ul>li>产品模块 #### div设好宽度，li设好宽高，设外边距，浮动，最后一排放不下的解决办法： - div宽度给大一点，溢出的overflow:hidden - 选择器选中手动清除边距 ```html <div> <ul> <li>产品模块</li> <li>产品模块</li> </ul> </div> ``` ### 单产品模块 #### img+h4+p>i (i或者span或者em，一般用i配合伪元素做小图标) #### img设好宽高，然后设h4左右内边距，上内或外边距，宽高可设定，改h4样式，接着p上外边距，span设置特殊样式 ```html <div> <img src=""> <h4>标题</h4> <p>文字<span>特别样式</span></p> </div> ``` ### footer模块 #### div>div.layout>div.left+div.right >也可能不是左右，是上下排布的，用dl>dt>dd做 ```html <div> <div class="layout"> <div class="leftbox">巴拉巴拉</div> <div class="rightbox"> <dl> <dt></dt> <dd></dd> <dd></dd> </dl> </div> </div> </div> ``` *5.6* 学习用git管理版本 === ## 定位 position - 静态定位 static >默认的定位方式 - 相对定位 relative >相对自己原先位置，不脱离标准流，保留原位置 - 绝对定位 absolute >相对父级定位元素，或者相对页面，脱离标准流，不保留原位置，比浮动更高 - 粘性定位 sticky >相对浏览器可视窗口，必须给至少一个定位值，在随滚轴滚动到定位值的位置之前和普通元素一样可以动，在到达位置后就固定不动了 ### 案例：16.粘性定位.html - 固定定位 fixed >相对浏览器可视窗口，固定不动，脱标 ***！fixed固定定位的盒子一定要给宽度，因为他是相对于浏览器可视区来定位，和父级没有关系，默认没有宽度*** *!子绝父相* >!*绝对定位般配合相对定位约束来使用，因为相对定位不脱标* ### 层叠顺序 z-index - 设置定位元素的层叠顺序，数值越大层级越高 - 只能用于定位元素 ### 定位的特殊特性 - **定位元素具有行内块特性** - 行内元素添加定位可以直接设宽高 - 块级元素添加定位，如果不给宽高，宽高就是内容决定 - **脱标的盒子不触发外边距塌陷** ### 定位和浮动的一个区别 >绝对（固定）定位会完全压住盒子，浮动会压住盒子但不压住文字（浮动起初是为了做文字环绕） ### 案例：15.学成在线定位修改版.html ### 版边悬浮窗写法 #### div固定定位position:fixed ***!算法：*** - 假如要贴靠版心右侧，先定位脱标，再写外边距 ```css { position:absolute; left:50%; margin-left:版心宽度一半; } ``` ### hot new小图标写法 #### 给大盒子相对定位，然后em>img绝对定位即可 ### 案例：18.淘宝轮播图模块.html #### 淘宝焦点轮播图模块写法 #### div.focus>img+div.prev>a+div.next>a+div.nav>ul>li>a - 给div相对定位，然后控件div绝对定位，左右箭头垂直居中算法，半透明背景色 li小圆点水平居中算法 ***!算法：*** - 绝对定位元素,水平或垂直居中： ```css { position:absolute; left:50%; margin-left:负的盒子宽度一半; } ``` ### 案例：17.绝对定位的居中算法.html ### 案例：19.遮罩效果.html #### 遮罩效果写法 #### div>(div.mask+div.content) - 给大盒子div指定宽高后设置相对定位，子元素宽高就100%，然后给mask设置绝对定位（top:0)，设置display:none将其隐藏 - 接着.content:hover .mask{display:block;} 让鼠标经过content就将mask显示出来 ## 三种隐藏元素的方法 - display:none; >不保留元素标准流位置，设置属性值为block可再次显示 - visibility:hidden; >保留元素标准流位置，设置属性值为visible可见 - overflow:hidden; >溢出隐藏，scroll添加滚动条，auto当溢出时添加滚动条 ## css高级运用 ### 精灵图（雪碧图sprite） - 把很多小图标放在一张图上，减少图片请求次数 - 通过background-image设置图片，bgposition设置位置 ### 案例：20.拼写名字.html #### 一般先量背景图宽高，然后量xy轴距离 ### 字体图标 #### 一种矢量图标做成的字体，可以方便控制大小颜色 1. 去网上下载下来icomoon icofont等 2. 把font文件夹放入网页根目录，然后把style.css文件引入网页，可以用link来写 3. 可以根据demo.html看图标 4. 使用时设置字体为"icomoon"，然后把demo.html里面图标对应的方框复制到网页即可 5. 也可以用伪元素content:"\字符编码" 此方法需要加反斜杠 ### 三角形做法 ```css { width:0; height:0; font-size:0; /*照顾兼容性*/ border: 20px transparent solid; border-top-color: red; 通过控制各个边框的宽度，可以改变三角形的形状 } ``` ### 案例：21.制作三角形.html ### cursor 鼠标样式 | 属性 | 说明 | | ----------- | ---- | | default | 默认 | | pointer | 小手 | | move | 移动 | | text | 文本 | | not-allowed | 禁止 | ### outline:none 取消表单轮廓线（焦点框外面那个蓝色框框） ### resize:none 禁止文本域拖拽大小 ### vertical-align 行内元素的垂直对齐方式 | 属性 | 说明 | | -------- | -------------- | | baseline | 默认，基线对齐 | | top | 顶线对齐 | | middle | 中线对齐 | | bottom | 底线对齐 | ### 图片和文字垂直居中 vertical-align:middle; #### 清除图片底部默认空白缝隙（行内、行内块元素底部缝隙也可以清除） - 方法一：给图片添加vertical-align:不是baseline就行 原理：因为图片属于行内块，行内块默认基线对齐，空白缝隙是留给文字基线下面部分的 - 方法二：转换为块元素 ## 为了方便复制和查看旧文档，现修改之后的文档命名规则 - 数字总序-内容-目的-版本序号 - 头部注释，写和上版本相比，修改了什么 - 5-25再次修改 案例名采用教程的序号来命名，版本 日期等写到注释里面 *5.7* 技巧提高和新特性 学习git使用，git教程百度有 === ## 溢出文字省略号显示 >推荐给后端做，后端做没有兼容性问题 ### 单行文本： >必须满足三个条件 - white-space: nowrap; 禁止换行，强制一行显示 - overflow:hidden; 溢出隐藏 - text-overflow:ellipsis; 溢出文字省略号替代 ### 多行文本： ```css { 有兼容性问题，适合webkit内核 overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制块元素显示的文本行数 */ -webkit-line-clamp: 3; /* 设置或检索伸缩盒子对象的子元素排列 */ -webkit-box-orient: vertical; } ``` ### 案例：22.溢出文字省略号显示.html ## 布局技巧 ### margin负值 #### 多个浮动li盒子边框合并在一起，看上去会变粗 `margin-left:边框宽度` ***!使用这个后边框被压住，用相对定位提高层级，如果li都有定位，用z-index来提高层级*** *z-index不生效问题：https://blog.csdn.net/apple_01150525/article/details/76546367* ### 浮动文字环绕特性巧妙运用 #### 新闻快报模块写法 #### 设置大盒子宽高和内边距后，给pic.div(用div包起来方便以后修改)加浮动,设宽高，文字不用设宽高，就自动围绕到旁边了 ```html <div> <div class="pic"><img></div> <p>文字</p> <div> ``` ### 行内块巧妙运用 #### 底部页码跳转模块写法 #### 给大div加text-align:center，把a转换行内块，设置行高，这样就可以水平垂直居中，且一行排列，不用给大div设宽度，让a撑开div ```html <div> <a></a> 特殊样式单独指定 <a></a> <a></a> <a></a> 特殊样式单独指定 <input type="text"> <button> <div> ``` ### css三角形运用 #### 直角三角形做法 #### 把左边框和下边框设为0，然后根据需要调整宽度，只保留一个边框有颜色 ```css .triangle { height: 0; width: 0; border-style: solid; border-width: 50px 100px 0 0; /* 只保留右边框颜色 */ border-color: transparent red transparent transparent; } ``` ### 案例： 23.css巧妙运用.html ## 更换了初始化css，修改了snippet用户代码模板，以后默认在首行添加注释区做修改记录 # H5C3提高，新增特性 >html5新标签 ***!兼容性差，基本上IE9+支持*** ### html5语义化标签 ```html <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签 ``` - 语义化标签是针对搜索引擎的 - 可以使用多次 - IE9中需要转换为块级元素 - 移动端更喜欢这些标签 ### 案例：24.语义化标签.html ### 视频标签 `<video>` - 尽量mp4，再或者来个ogg - 兼容性写法： ```html <video src=""> <source src="xx.mp4" type="video/mp4"> <source src="xx.ogg" type="video/ogg"> 您的浏览器不支持video标签 </video> ``` #### 常见属性 | 属性 | 值 | 说明 | | ------------ | ----------- | ------------------------------------------------- | | autoplay | autoplay | 视频就绪自动播放，谷歌浏览器默认禁用，加muted解决 | | controls | controls | 显示播放控件 | | width height | 像素 百分比 | 宽高 | | loop | loop | 循环播放 | | preload | auto none | 是否预加载 | | src | url | 视频地址 | | poster | img-url | 加载等待的画面图片 | | muted | muted | 静音播放 | ### 音频标签 `<audio>` - 必须添加controls属性 - 大都支持mp3格式，照顾兼容性弄个ogg格式 - 兼容性写法： ```html <audio src="" controls="controls"> <source src="xx.mp3" type="audio/mp3"> <source src="xx.ogg" type="audio/ogg"> 您的浏览器不支持audio标签 </audio> ``` #### 常见属性 | 属性 | 值 | 说明 | | -------- | -------- | ------------------------------------ | | autoplay | autoplay | 音频就绪自动播放，谷歌浏览器默认禁用 | | controls | controls | 显示播放控件 | | loop | loop | 循环 | | src | url | 音频地址 | ### 案例：25.视频音频标签.html) ### html5新增的input类型(type="xx") | email | 限制输入必须为邮箱类型 | | ------ | ---------------------- | | url | 必须URL类型 | | date | 选择日期 | | time | 选择时间 | | month | 选择月份 | | week | 选择周 | | number | 必须数字类型 | | tel | 必须为手机号码 | | search | 搜索框 | | color | 生成一个颜色选择表单 | #### 属性 | required="required" | 必须填写 不能为空 | | ----------------------- | ------------------------------------------------------------ | | placeholder | 提示文本(常用) | | autofocus | 自动获取焦点 不用写值 | | autocomplete="off/on" | 根据之前键入的值，列出可填写的字段选项（为了保护隐私 手动把他设为off） | | **multiple="multiple"** | 上传文件允许多选（常用） | ***!autocomplete="on"需要有name，并且成功提交过才可显示*** ***!通过input::placeholder伪元素修改提示文本样式，有时需加私有前缀*** ## css3新特性 ### css新增选择器 #### 属性选择器 权重(0,0,1,0) | E[ att ] | 选择E元素中属性为att的 | | ------------- | ----------------------------------------- | | E[att="val"] | 选出E元素中属性为attr,且他的值为val的 | | E[att^="val"] | 选出E元素中属性为attr,且他的值为val开头的 | | E[att$="val"] | 选出E元素中属性为attr,且他的值为val结尾的 | | E[att*="val"] | 选出E元素中属性为attr,且他的值里含有val的 | #### 结构性伪类选择器 权重(0,0,0,1) >常根据文档结构来选择元素，根据父级来匹配 | E:first-child | 选择父元素中第一个子元素E | | ---------------- | --------------------------- | | E:last-child | 选择父元素中最后一个子元素E | | E:nth-child(n) | 选择父元素中第n个元素E | | E:first-of-type | 选择指定类型E的第一个 | | E:last-of-type | 选择指定类型E的第一个 | | E:nth-of-type(n) | 指定类型E的第n个 | ***! E:nth-child(n) 可以是数字、关键字、公式，公式的字母只能是n，n从0开始自增*** | odd | 选择所有奇数子级元素 | | ---- | -------------------- | | even | 选择所有偶数子级元素 | | 2n | 选偶数 | | 2n+1 | 选奇数 | | n+5 | 从第5个开始 | | -n+5 | 选择前5个 | 使用公式（an+ b） 描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 - 两类选择器的区别 - nth-child(n) 先看第n个元素，再看元素是否符合匹配条件 （关注孩子，给所有子级排序在再匹配） - nth-of-type(n) 先看指定元素类型，再给元素排序去找 （关注类型，先匹配类型，再排序查找） #### 伪元素选择器 权重(0,0,0,1) >伪元素选择器可以用css创建标签，结构更简单 `::before|::after` - 在元素内部的前面|后面插入内容，属于子级，创建的盒子是行内元素 ***!!必须要写content属性，值可以为空*** ```css div::before { content: ''， } ``` ***!字体图标另一写法 伪元素选择器做法*** ```css i::after{ position:absolute; 绝对定位脱标，方便调整位置 font-family:icomoon; content:'\xxxx'; } ``` ***!遮罩案例另一写法 伪元素选择器做法*** ```css .box::before { content:''; display:none; position:absolute; left:0; w|h|bg-color; } .box:hover::before{ display:block; } ``` ***!伪元素清除浮动*** ```css /* 清除浮动 */ .clearfix:after { 插入一个盒子 visibility: hidden; 把他隐藏起来 clear: both; 清除浮动 display: block; 必须插入块级盒子才能清浮动 content: "."; 空内容 height: 0 让盒子非常小，不影响后面排版 } .clearfix:before, .clearfix:after { content: ""; display: table; 转换为块级元素并且一行显示 } .clearfix:after { clear: both; } ``` ### css3盒子模型 `box-sizing:content-box;` - 默认模型，盒子大小为width+padding+border `box-sizing:border-box;` - css3新的盒子模型,把边框和padding也算进盒子大小，不会撑大盒子，这样就不用额外去计算了（前提border和padding不超过width） ### css3函数 #### css3滤镜filter `filter: 函数();` 例如：filter:blur(5px); blur模糊处理，数值越大越模糊 #### css3 calc函数 >声明css属性值时执行一些计算，可以+-*/，需要加单位 ***!注意，符号与数值之间空格隔开，否则不生效*** 例如：width:calc(100%-80%); height:calc(100%-30px); 子盒子永远比父盒子小80%|30px ### 案例：26.新input和新选择器和函数.html ### css3过渡特性（重要） - transition是css3最具颠覆性的特性之一，不用flash或者js就能添加动画效果 - ie9以下不支持，经常搭配:hover使用 - 语法： `transition:要过渡的属性 花费时间 运动速度曲线 延迟开始时间` >后面两个可以省略 >运动曲线值： ```css linear 匀速 ease 开始快，逐渐变慢 ease-in 开始慢，加速，后面快 ease-out 开始快，减速，后面慢 ease-in-out 开始慢，加速，再减速，最后慢 { /*贝塞尔（贝兹）曲线*/ /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/ /*超出再缩回的弹性效果*/ transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435); } ``` #### 谁做过渡给谁加 >例如: ```css div { w200h200 bgcolor#000; transition: width 1s ease 1s,height 1s ease 1s; } div:hover {w400h400} ``` #### 多个属性过渡，用逗号分开，全部属性过渡，写all即可 ### 案例：27.进度条案例-过渡属性.html ## git+gitee+vscode - 下载安装git，生成公钥私钥，上传公钥到gitee后台，设置用户名和邮箱，拉取或者初始化本地仓库，拖到vscode里面 - git有本地仓库和远程仓库，修改后需要先暂存修改，提交到本地仓库，然后推送远程仓库git add . >> git commit -m "" >>git push >>git pull - 有不同的地方修改，需要创建分支，然后可以修改后再合并 - 更多内容百度 ## 星期的单词忘记了顺手记一下 星期一：Monday（Mon.） 星期二：Tuesday（Tues.） 星期三：Wednesday（Wed.） 星期四：Thursday（Thur./Thurs.） 星期五：Friday（Fri.） 星期六：Saturday（Sat.） *5.8* 阿里云数据可视化 datav使用 笔记改为markdown格式 项目案例:品优购静态页面 === # 综合案例：品优购项目 ## 网站制作流程 1.客户沟通指定方案 2.签订合同 3.预付定金 4.初稿审核《==美工制作原型图和ps效果图 5.前台页面设计、后台功能开发 6.测试验收 7.上线培训 8.后期维护 ## 开发准备 ### 开发工具：VScode Photoshop/Fw Chrome浏览器 ### 技术栈 - html5+css3手动布局，可以大量使用html5标签和样式 - 采取结构与样式相分离，模块化开发 - 遵循统一代码规范（素材文件夹--品优购代码规范.md）(为此装了Markdown one for all插件) ### 额外补充markdown语法 \#-######代表一级到六级标题，与文字要空格隔开 ==和--代表一级二级标题，写在第二行 *包裹是斜体，**包裹是粗体，三个就是粗体加斜体 换行，末尾要两空格 部分符号不能直接打，要加\转义 -代表无序列表，可以嵌套，数字加小点就是有序列表 四个空格或者>代表文本块 用`包裹就是单行代码 用```包裹就是多行代码 [名称](url)超链接 表格使用 表头\|表头\| -\|- 内容\|内容 | 内容\|内容 | | :--------: ||代表居中 *5.9* 结合markdown重写了笔记 继续品优购 === <!-- 现在是四点，睡觉。。。 --> ### 建立网站目录 | css | 放css文件 | | ------ | ---------------- | | upload | 放商品类图片 | | img | 放背景类图片 | | fonts | 放字体 | | js | 放javascript文件 | ### favicon #### 必须ico格式，可以去bitbug等转换格式 `<link href="xx.ico" rel="shortcut ico">` ### TDK #### 为了迎合搜索引擎的规则，页面进行SEO优化，更容易被抓取，排名更容易靠前 ```html <!-- 不要只写title 把网站名 网址 优势点也写出来 --> <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！<title> <!-- 描述网站 优势内容放前面 --> <meta content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" name="description"> <!-- 关键词一般6-8个 越靠前权重越高--> <meta content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" name="keywords" /> ``` ### 模块化开发 *把相同的可复用样式写到common.css，提高简洁度，减少重复工作* ### 模块命名 | 快捷导航栏 | shortcut | | ------------ | -------------------- | | 头部 | header | | 标志 | logo | | 购物车 | shopcar | | 搜索 | search | | 热点词 | hotwords | | 导航 | nav | | 左侧下沉导航 | dropdown 包含.dd .dt | | 右侧项目导航 | navitems | | 底部 | footer | | 底部服务模块 | mod_service | | 底部帮助模块 | mod_help | | 底部版权模块 | mod_copyright | *5-11* 写完了，记笔记 === ### 整体分析：头部和尾部有多处共用，因此写在common.css里面，其他页面复制后只需稍加修改 ### 首页index.html分析 #### 纵向分为： - shortcut 快捷导航 - header 头部 - nav 导航栏 - main 主视区 - recom 推荐区 - floor 楼层区 - footer 尾部 #### 横向布局细分 - shortcut 横向整齐，左右浮动即可 ``` section 通栏 d.layout 版心 d.fl 左浮盒 p+a d.fr 右浮盒 ul>lia*n nth-child竖线盒子 ::after字体图标箭头 ``` - header 横向不整齐，浮动排布不方便，用定位 ``` d.layout 版心 d.logo 图标 h1>a SEO优化 font-size:0 d.search 搜索框 input+button d.hotwords 热词 ul>lia*n d.shopcar 购物车 relative a ::before+::after字体图标 i 红色count模块 absolute ``` - navigation 横向整齐，均左浮 由于内容相关性，注意下拉导航连在一起 ``` d.nav 通栏，做红色线条 d.layout 版心 d.dropdown 下拉列表 d.dt 表头 d.dd 详细条目 ul>lia ::after字体图标 d.items-nav 左浮 ul>lia 左浮 ``` - main 焦点图focus和快报flash-news，再加便利模块convenient，减价品bargain 排布整理，左右浮动，右盒子内纵向排布，便利区需浮动 ``` d.layout d.main 装focus和fn .focus i.prev+i.next+ul>lia*n 轮播图控件 ul>liimg*n 轮播图 焦点图 d.flash-news 快报box d.fn-hd 快报头部 h4+a.more 左右浮动 ::after字体图标 d.fn-bd ul>lia*n 超出省略号替代 d.convenient ul>liaip*n i精灵图 d.bargain>img 降价品 ``` - recommend推荐模块 横向整齐，用浮动 ``` d.recom-hd 左浮 d.recom-bd 左浮 ul>liaimg*n 左浮 ``` - floor楼层区 分成多个类似的版块楼层，不给高度让它撑开，楼层内又分上下，上面左右浮动，下面5列box，总体比较整齐，还是浮动，box里再细分 ``` d.floor d.floor1 楼层1 d.floor-hd h4+d.tab-list>ul>lia 具有标签切换效果，必须这么写 d.floor-bd d.tab-content 标签内容区 d.tab-item1 标签1的内容 d.col1 第一列 ullia*n aimg d.col2 aimg d.col3 col3-top>aimg 上下图片 col3-bottom>aimg d.col4 aimg d.col5 col5-top>aimg col5-bottom>aimg ``` - footer尾部 纵向细分service help copyright 横向整齐，用浮动，注意最后没给高度的盒子要清除浮动 ``` d.footer 通栏灰色 d.service 左浮动 ul>liih4p*n 精灵图 左浮 用浮动特性挤开文字 d.help dl>(dtdda*n)*n 左浮 dt+ddimg 帮助中心二维码 d.copyright d.links 文本居中 ul>lia*n ::after做竖线 d.copyright-module 1<br>2 ``` ### list.html(seckill.html)列表页分析 #### shortcut一样 header相似，尾部一样 复制过来 #### 纵向 - shortcut - header - nav - sk-container 秒杀区容器 - footer #### 横向 - shortcut和header几乎一样，往header加个d.sklogo即可 - navigation 左边是sk-list秒杀列表，右边是sk-con秒杀内容,ul>li>a浮动即可 - sk-container 上下分为sk-hd>img和sk-bd>ul>li>巴拉巴拉，下面用浮动排布，最后父级clearfix清除浮动 鼠标放上有边框变红，但初始应有透明色边框，否则box会位移 - footer 一样，复制粘贴即可 ### register.html #### 保护隐私不要搜索引擎抓取，不要SEO优化 #### footer部分可以复用 #### 用版心box全部包住 #### 纵向 - header - form-area - footer #### 横向 - layout 版心全部包住 - d.header img - form-area 分为上下form-area-hd和bd,上面细分左右，下面用ul>li*n写 ``` form-area formm-area-hd form-area-hd h4 form-area-hd p+a.login form-area-bd ul li>label+input+span>i *n label转inline-block，设宽，然后右对齐 li>i*3 安全强度，用内边距调位置，浮动不行 li>checkbox+a li>submit ``` - footer 复制粘贴就行 ## 服务器概念 - 服务器（主机）是提供计算服务的设备，他也是计算机。可分为文件服务器、数据库服务器、应用程序服务器、web服务器 - web服务器一般指网站服务器，可放置网站文件让网络其他人浏览，放置数据文件给人下载。 - 按网络位置可分为本地服务器和远程服务器 - 本地服务器，把本地计算机配置成局域网的服务器，要ajax - 把网站上传到别人的服务器上，通过域名来访问 ## css3新特性补充 ### 2D转换：改变标签的平面上的位置形状 #### transform - 移动 translate(x,y) - 旋转 rotate - 缩放 scale - 注意：y轴往下为正方向 ### 移动盒子的几个方法：定位、边距、translate ### translate - 语法：translateX(n) translateY(n) 空格隔开，可单独写一个，也可分开写，还可合写成translate(n,m) - 优点：不会影响其他盒子位置，类似相对定位 - 百分比单位是相对元素自身的 - **对行内标签无效** - 算法：水平垂直方向盒子居中算法优化写法 ```css {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} ``` ### 案例：28.translate运用.html ### rotate - 语法：rotate(45deg); 顺时针旋转45度 - deg是单位度 - 负数表示逆时针旋转 ### 案例：29.translate+rotate案例.html ### 设置转换中心点 - 语法 - transform-origin: x y; - 默认是宽高的中心 transform-origin: 50% 50%（空格分开） - 可以用精确数值，百分比数，也可以用方位词 ### 案例：29.transform-origin案例.html ### scale - 语法 - transform:scale(x,y); - 参数不跟单位，表示倍数，大于1是放大，小于1大于0是缩小 - 规范和细节 xy之间用逗号隔开 scale(1,1) 宽高都放大到原来的一倍，相当于没有放大 scale(2) 只写一个参数默认第二个相同，相当于宽高放大到原本的两倍 scale(0.5,0.5) 缩小到原来的0.5倍 默认以矩形中心缩放 *!scale缩放最大优势：可以设置缩放的中心点，而且不影响其他盒子* ### 案例：30.scale案例+分页按钮.html ### 复合写法 - transform: translate(x,y) rotate(xdeg) scale(x,y); *!代码有执行顺序，当同时有位移其他属性时，需要把位移放最前面* ## animation 动画 - 先定义动画，再调用动画 - 用keyframes定义动画关键帧 - 给元素设置animation-name和animation-duration属性调用动画，分别设置动画名称和动画持续时间 ```css /* 定义动画 */ @keyframes move { /* 动画序列，0%-100%按顺序执行 */ 0% { transform:translate(0px); } 100% { transform: translate(1000px); } } /* 调用动画 */ div { w+h:200px; bgc:red; /* 动画名称 */ animation-name:move; /* 持续时间 */ animation-duration:1s; } ``` - from和to相当于0%和100% - 可以定义多个关键帧 ```css @keyframes move2 { 0% { transform: translate(0px); } 25% { transform: translate(1000px, 0); } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0px); } } .box2 { width: 200px; height: 200px; background-color: red; /* 动画名称 */ animation-name: move2; /* 持续时间 */ animation-duration: 5s; } ``` ### 动画常用属性 | 属性 | 描述 | | ------------------------- | ------------------------------------------------------------------------ | | @keyframes | 定义动画 | | animation | 所有动画属性的简写属性，除了animation-play-state | | animation-name | @keyframes 动画名称 必须写 | | animation-duration | 完成一个周期花费的秒或毫秒，默认为0 必须写 | | animation-timing-function | 动画的速度曲线，默认ease | | animation-delay | 动画何时开始，默认0 | | animation-iteration-count | 动画播放次数，默认1，还有infinite | | animation-direction | 动画是否在下一周期逆向播放，默认normal，逆向播放alternate，有1个周期无效 | | animation-play-state | 动画是否正在运行或暂停，默认running，还有paused | | animation-fill-mode | 动画结束后的状态，forwards保持现状，backwards回到起始 | - animation: name duration timing-function delay iteration-count direction fill-mod; 先写持续时间，再写延迟时间 - name和duration必须写，否则动画不生效 ### 案例：32.大数据热点图案例.html - opacity 透明度 0-1 0表示完全透明 ### 速度曲线 `animation-timing-function:value` - 规定动画的速度曲线，默认ease | 值 | 描述 | | --------------------- | -------------------------------------------------------------- | | linear | 初速中，匀速运动 | | ease | 默认，初速小，初加速度大，加速度增大，快结束时快速减小，末速小 | | ease-in | 初速小，初加速度大，加速度减小，最后匀速，末速中 | | ease-out | 初速中，初加速度小，加速度减小，最后减速，末速小 | | ease-in-out | 初速小，初加速度大，加速度先增大再减小，末速小 | | steps() | 指定时间函数中的间隔数量（步长） | | cubic-bezier(n,n,n,n) | 贝塞尔曲线，回弹效果，在 cubic-bezier参数的值可能是从 0 到 1 | [cubic-bezier动态设置](http://yisibl.github.io/cubic-bezier/) #### steps() 就是动画分几步完成，有这个就不要速度曲线了 ### 案例：33.steps速度曲线步长运用.html ### 综合案例：34.奔跑的熊大.html ## 3D转换 ### 网页坐标系 - x轴，水平向右，右为正 - y轴，垂直向下，下面是正 - z轴，垂直屏幕，外屏幕外为正，往里为负 **初始坐标系**（**initial coordinate system**） 每一个DOM元素都有一个这样的初始坐标系。其中，原点位于元素的左上角，z轴指向观察者（也就是屏幕外的我们）。初始坐标系的z轴并不算是三维空间，而是像`z-index`那样作为参照，决定网页元素的绘制顺序，绘制顺序靠后的元素将覆盖绘制顺序靠前的。 ### 网页三维坐标系 **transform所参照的并不是初始坐标系，而是一个新的坐标系** - 相比初始坐标系，他的原点位置移动到了元素的正中心，想要改变这个坐标系的原点位置，使用`transform-origin`。`transform-origin`的默认值是`50% 50%` *！坐标系是相对于当前盒子本身所在平面来建立的* - 如果想要改变坐标原点位置，使用`transform-origin:x x [x];`，该属性默认值为`50% 50%` ### 3d位移 - `translate3d(x,y,z)` 复合写法 - - `translateX/Y/Z(100px)` 单独写法，z轴单位一般用px，z轴结合透视才有效果 ### 3D透视 - `perspective:none/num px;` - 想要网页产生3D效果，需要透视 - 模拟人类视觉位置，可理解为模拟一个人的眼睛去看 - 透视单位是像素 - 透视也称为视距，眼睛到屏幕的距离 - 视距越大，成像越大，反之越小，近大远小 *！透视写在被观察元素的父级* *！z就是z轴，z轴（正值）越大， 离视点越近，成像越大* ### translateZ *！写在被观察元素身上* *5.13* 今天上午学完css3提高 === ### 3D旋转 rotate3d - transform:ratateX/Y/Z(45deg) 绕某轴旋转，正值为顺时针，负值逆时针 - transform:ratate3d(x,y,z,deg) xyz为旋转轴矢量，旋转轴为矢量相加的和，deg是旋转角度 - 判断旋转方向：左手定则：左手握拳，拳心平行于旋转轴，大拇指指向正方向，其他手指弯曲方向即为旋转方向 ### transform-style：preserve-3d 3D呈现（重要） - 控制子元素是否开启三维立体环境,让盒子内所有元素位于同一个三维空间 - 默认值为`flat`不开启，改为`preserve-3d`，子元素开启3d空间 *！写给父级，但是影响的是子级* ### perspective-origin - 定义3D 元素所基于的 X 轴和 Y 轴 该属性允许改变 3D 元素的 - 透视原点perspective-origin是指观察者的位置，一般地，观察者位于与屏幕平行的另一个平面上，观察者始终是与屏幕垂直的。观察者的活动区域是被观察元素的盒模型区域 ### 三维空间搭建要点 - 摄像机是观察三维空间的视点位置，用摄像机属性`perspective`和`perspective-origin`可以简单控制观察位置 - 在网页里，无论你搭建了怎样的三维场景，只要你希望它显示出来，就应该把构成场景的三维物体都放在一个容器元素里，然后为容器元素添加摄像机属性，从而改变视点位置 - 此外，还需要注意添加`transform-style: preserve-3d;`以保证多个三维物体都位于同一空间 ### 案例：35.两面翻转盒子.html `d.box-3d>d.box>d.a+d.b` - .box-3d添加透视，.3d添加3d保留，让子盒子进入同一个3d空间，.a提高层级，.b翻转180度，让a和b背靠背，最后给.box加过渡效果，并且hover翻转180度 ### 案例：36.3d导航栏.html `ul>li>d.box>d.a+d.b` - li加透视，.box加3d呈现，设置宽高，.a层级1，.b先下移，再-90deg旋转，最后.a前移，让旋转轴在.box中心，.box:hover翻转 过渡 *!当有移动和其他效果同时存在时，先做移动* ### 综合案例：37.照片旋转木马效果.html - 分析：box里面装6个狗图片和1个猪图片 - 空间搭建：由于box需要和图片一起旋转，因此body加透视，然后box加`transform-style:preserve-3d;`，把box和图片放进同一个空间 - 接着调整图片位置，6张狗图先rotateY分别旋转60度，一圈360度，然后沿Z轴移动相同距离即可 - 最后定义动画效果，沿Y轴旋转360度，box调用 ## 浏览器私有前缀 通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但w3c制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。 为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。 等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。 ### 私有前缀是为了兼容老版本的写法，新版本无需添加 - -moz- firefox - - ms- ie(微软后面不更新了，改edge) - -webkit- safari chrome - -o- Opera **提倡的写法，私有前缀写到前面，不能识别标准写法就按私有前缀，能识别就把前面覆盖掉** ```css -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; ``` *5-15* *想起来个事，补充记一个vscode用户代码片段的功能，可以自定义快速输入代码，挺好用的，用法百度*
本作品采用
《CC 协议》
，转载必须注明作者和本文链接