兆。

python全栈-前端

文章目录

HTML
标签
- 段落p、换行br、水平线hr
- 图片img
- 路径src
- 超文本链接a
- 超链接之锚点href#id
- 文本
- 有序列表ol
- 无序列表ul
- 自定义列表
- 表格table
- 表格属性
- 单元格合并
表单Form
- input标签
- HTML5新增type属性
- HTML5新增常用属性
实体字符
块元素与行内元素/内联元素
容器元素div
HTML5新增布局标签
视频音频
- 视频
- 音频
- source
HTML5新增标签
CSS
- CSS的引入方式
- - 内联/行内样式
  - 内部样式
  - 外部样式（推荐）
  - 导入式
- CSS特征
- - 继承性
  - 层叠性
  - 优先级
  - CSS注释
- CSS选择器
- div+css布局布局的重要性
- 布局
CSS常用属性
- 字体属性
- 背景属性
- 文本属性
- 列表属性
- 表格属性
- 其他常用属性
CSS选择器
- 关系选择器
- 伪类选择器
- 伪对象/伪元素选择器
- 属性选择器（了解即可）
CSS盒子模型
- 内容区域（Content）
- 内边距（Padding）
- 边框（Border）
- 外边距（margin）
- 怪异盒模型(IE盒子模型)box-sizing: border-box;
- 弹性盒子模型（flex box）
- - 父元素上的属性
  - 子元素上的属性
浏览器内核
浮动和定位
- Dispaly属性
- 文档流（排列方式）
- 浮动
- 清除浮动
- 定位
定位实操-下拉列表效果
定位实操-图片上面定位文字
定位实操-照片墙
CSS3新特性
- 圆角 border-radius
- 阴影
- 背景渐变
- 转换（变形)transform
- - 2D
  - 3D
- 过渡
- 动画
- 绘制特殊图形
- 媒体查询（适配屏幕）
- 响应式布局-媒体查询的思维
- 栅格系统
- 多列
- 雪碧图
- 字体图标
- 滑动门

前端三剑客：HTML，JS，CSS

应用场景：APP，网页，小程序

HTML

超文本标记语言

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：

标签有两种表现形式：
1 双标签，例如：
2 单标签，例如：
HTML5的DOCTYPE声明
DOCTYPE是 document type (文档类型) 的缩写。是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。就是

html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开
始点和结束点。

head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

body标签
body 元素定义文档的主体，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

title标签
1 可定义文档的标题。
2 它显示在浏览器窗口的标题栏或状态栏上。
3 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title 4 <title> 的增加有利于SEO优化 SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求 meta标签 meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8” 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8 ，或是 gbk ，这些都是编码格式，通常使用 utf-8 。 <ul> <li>注释</li> </ul> <pre><code class="prism language-html">  </code></pre> 在开始标签中有一个叹号，但是结束标签中没有 <h2>标签</h2> 标题介绍与应用 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。 <h1> 定义最大的标题 <h6> 定义最小的标题 <ul> <li> 正确使用标题 请确保将 HTML 标题标签只用于标题。 不要仅仅是为了生成粗体或大号的文本而使用标题。 正确使用标题有益于SEO 应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要的），再其次是 <h3> ，以此类推 </li> <li> 标题标签位置摆放 在标签中添加属性： align=“left | center | right” 默认居左 </li> </ul> <h3>段落p、换行br、水平线hr</h3> 段落是通过 标签定义的 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 元素是一个空的 HTML 元素。 水平线 <hr/> 标签在 HTML 页面中创建水平线，使用率很低 水平线的属性： 1 color：设置水平线的颜色 2 width：设置水平线的长度px 3 size：设置水平线的高度 4 align：设置水平线的对齐方式（默认居中），可取值left|right <h3>图片img</h3> 网站中最多的元素 网站中最多的元素毋庸置疑，一定是图片<img> 标签定义 HTML 页面中的图像<img> 是单标签，不需要进行闭合操作 属性： 1 src：路径（图片地址与名字）网络图片最好了。本地图片最好在项目文件里面 2 alt：规定图像的替代文本，当图片不能显示的时候，就会显示一个碎裂的图片，后面显示alt的文本内容 3 width：规定图像的宽度 4 height：规定图像的高度 5 title：鼠标悬停在图片上给予提示 如果高度或者宽度只设置了一个，那么这个图片就会等比例缩放 如果宽高都设置了，与原图片的比例不一致，这个图片就会被拉伸 <h3>路径src</h3> 绝对路径，绝对路径是电脑的盘符存储与访问的具体地址 相对路径，两者相对关系，两者在同⼀路径下可以直接访问 1 ⼦级关系: / 2 ⽗级关系: …/ 3 同级关系: ./ 网络路径，具体的⽹络地址 <h3>超文本链接a</h3> HTML使用标签 <a> 来设置超文本链接 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 超链接属性 在标签 <a> 中使用了 href 属性来描述链接的地址 默认情况下，链接将以，以下形式出现在浏览器中： 1 一个未访问过的链接显示为蓝色字体并带有下划线。 2 访问过的链接显示为紫色并带有下划线。 3 点击链接时，链接显示为红色并带有下划线。按住不松手是红色 后期我们会通过CSS样式修改掉这些效果 超链接表现 当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手 <h3>超链接之锚点href#id</h3> 超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。跳转到当前文档的某个部分的形式就是“锚点 类似哔哩哔哩首页的页面，两侧有视频推荐。点击某一类视频的时候，就会把当前的页面跳转过去，就是上下滑动。 锚点实现方式 <pre><code class="prism language-html"><a href="#hello">跳转到当前页</a> <p id="hello">文本信息</p> </code></pre> a标签是超链接，在href后面写#号，后面跟想要跳转元素的id值。回到页面之后，点击超链接，就可以跳转过去了 可以成对出现，实现来回跳转的功能 <h3>文本</h3> <ul> <li>em 着重文字，有斜体效果</li> <li>b 粗体文字</li> <li>i 斜体字</li> <li>strong 加重语气，有加粗效果</li> <li>sub 下标字，比正常的行靠下一点点</li> <li>sup 上标字，靠上一点</li> <li>del 删除字，就是有一个横线，类似原价和折扣价</li> <li>span 没有什么含义，后期通过CSS设计</li> </ul> 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇 <h3>有序列表ol</h3> 有序列表 有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于 <li> 标签。 就是整个列表，需要使用ol包住，每一个列表元素需要使用li包住 <pre><code class="prism language-html"><ol> <li>第一项元素</li> <li>第二个</li> </ol> </code></pre> 在页面显示的时候会自动生成序号 <ul> <li> type属性<ol> 的属性type 拥有的选项 <ul> <li>就是ol列表标签，自带的type属性。默认是type=‘1’</li> <li>1 表示列表项目用数字标号（1,2,3…）</li> <li>a 表示列表项目用小写字母标号（a,b,c…）</li> <li>A 表示列表项目用大写字母标号（A,B,C…）</li> <li>i 表示列表项目用小写罗马数字标号（i,ii,iii…）</li> <li>I 表示列表项目用大写罗马数字标号（I,II,III…）</li> </ul> </li> <li> 有序列表嵌套 列表是可以进行嵌套的 </li> </ul> <pre><code class="prism language-html"><ol> <li>111</li> <li> <ol> <li>1.1</li> <li>1.2</li> </ol> </li> <li>222</li> </ol> </code></pre> <h3>无序列表ul</h3> 无序指的是没有序号 在有序列表的序号位置是一个小黑点 使用方式和有序列表一样，但是ol变成ul了 <ul> <li>ul也有自己的type <ul> <li>disc 默认实心圆</li> <li>circle 空心圆</li> <li>square 小方块</li> <li>none 不显示</li> </ul> </li> </ul> 无序列表也可以像有序列表嵌套，方式也一样 <ul> <li>应用场景 <ul> <li>导航</li> <li>虽然导航是左右排列，那也是后续使用CSS设计的</li> </ul> </li> </ul> <h3>自定义列表</h3> 有三种标签：dl,dt,dd 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 作为了解即可，其他列表也可以实现这个效果 <h3>表格table</h3> 表格在数据展示方面非常简单，并且表现优秀 有border属性的时候，可以清晰的看到页面设计。如果没有border属性，可以利用表格的对齐方式，设计页面布局 <ul> <li>表格组成与特点 行、列、单元格 单元格特点：同行等高、同列等宽</li> </ul> 整个表格需要用table标签包裹，每一行元素需要用tr包住，每一行里面的每一列要用td包住 <ul> <li>表格其他标签 <ul> <li>表格名字： <caption></li> <li>表格头部： <thead> 就是首行效果，字体自动加粗</li> <li>特殊单元格： <th> 搭配头部使用</li> <li>表格的身： <tbody> 就是表格元素都放在表格身体包住</li> <li>表格的尾部： <tfoot> 尾行效果</li> </ul> </li> </ul> 实际上效果不大，都可以使用普通表格加CSS设计出来 <ul> <li>复杂且并不常用的表格标签</li> </ul> <pre><code class="prism language-html"><table> <caption>表格名字</caption> <thead> 表格头部，首行 <th>姓名</th> 特殊单元格，其实没什么 <th>年龄</th> </thead> <tbody> 表格身 <tr> <td>张三</td> <td>30</td> </tr> </tbody> <tfoot> 表格尾部 <tr> <td>李四</td> <td>20</td> </tr> </tfoot> </table> </code></pre> <h3>表格属性</h3> <ul> <li>表格整体属性table，单位基本上是px <ul> <li>border：设置表格的边框厚度</li> <li>width：设置表格的宽度</li> <li>height：设置表格的高度</li> <li>align：设置表格相对于页面的水平对齐方式，左left,中center,右right</li> <li>cellpadding：设置内容距离边框的距离，内边距</li> <li>cellspacing：设置单元格之间的距离，就是外边距，也是每个单元格和整个表格边框的距离</li> <li>bgcolor：设置表格背景颜色</li> <li>bordercolor：设置边框颜色</li> <li>background：设置背景图片</li> <li>当cellspacing=0的时候，每个单元格彼此相连，还和大的边框相连，就会形成一个正常的表格</li> </ul> </li> <li>行属性tr <ul> <li>height：设置一行的高度</li> <li>bgcolor：设置一行的背景颜色</li> <li>background：设置一行的背景图片</li> <li>align：设置行里内容水平对齐方式，取值：left、center、right</li> <li>valign：设置行里内容垂直对齐方式，取值：top、middle、bottom</li> </ul> </li> <li>列属性td <ul> <li>width：设置单元格的宽度，同列等宽</li> <li>height：设置单元格的高度，同行等高</li> <li>align：设置单元格内容水平对齐方式</li> <li>valign：设置单元格内容垂直对齐方式</li> <li>bgcolor：设置单元格背景颜色</li> <li>background：设置单元格背景图片</li> </ul> </li> </ul> 单元格特点：同行等高、同列等宽 单元格的长宽都需要跟他所在的行列对齐，所以设置宽度，就是设置这一列的宽度。设置单元格高度，就是设置这一行的高度。 属性很多，根本记不住，有个概念即可，到时候回来看看就够了 <h3>单元格合并</h3> 水平合并：colspan 垂直合并：rowspan 合并几个单元格，就写数字几。虽说是合并单元格，不如说是把当前的单元格做拉伸。 如果不修改单元格的数量，因为一些单元格做了调整，剩下的单元格都会被迫让步，并不会消失覆盖，就有很多单元格相对于原表格来说突出来了。 为了表格美观，还需要对一些单元格进行删除。 一个单元格如果被别的单元格拉伸所影响，这个单元格只会不断的向右移动。比如，一个单元格，受到了上一行单元格的拉伸，这个单元格就会向右移动。 水平合并和垂直合并可以同时使用 <pre><code class="prism language-html"><table align="center" border="1" width="500px" height="200px" cellspacing="0"> <tr> <td colspan="3">单元格1单元格2单元格3</td> 把单元格1.1横向拉伸3格，原本的1.2和1.3单元格需要删除 <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td rowspan="2">单元格6-11</td> <td>单元格7</td> <td rowspan="3">单元格8</td> <td colspan="2" rowspan="2">单元格9</td> </tr> <tr> <td>单元格10</td> </tr> <tr> <td>单元格11</td> <td>单元格12</td> <td>单元格13</td> <td>单元格14</td> </tr> </table> </code></pre> <h2>表单Form</h2> 主要是实现用户输入，保证网站的交互性 表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框 表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件 <ul> <li> 格式：<code><form action="url" method="get|post" name="myform"></form></code> </li> <li> 属性说明 <ul> <li>action服务器地址，就是url</li> <li>name表单名称</li> <li>method中Get和Post的区别，就是请求方式 <ul> <li>数据提交方式，get把提交的数据url可以看到，post看不到。因为post看不到所以post是安全方式，对应的get是不安全的会暴露信息。一般登录操作需要使用post实现</li> <li>get一般用于提交少量数据，post用来提交大量数据</li> </ul> </li> </ul> </li> </ul> 对于现阶段来说，不与服务器交互，这些网络属性没啥用 form表单是一个容器，不放控件，这个表单看不到 <ul> <li>表单元素</li> </ul> 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮 就是输入框和按钮 <h3>input标签</h3> <ul> <li>文本框/文本域 input type=text</li> </ul> 就是输入框，需要使用input标签，同时typr属性需要是text 有name属性，与服务器交互的时候使用 <ul> <li>密码框 input type=password</li> </ul> 密码字段字符不会明文显示，而是以星号或圆点替代 <ul> <li>单选按钮 input type=radio</li> </ul> 需要有一个value属性，也就是告诉服务器用户选择了哪个选项 使用name属性，把独立的单选按钮按照name的值，组合成一个选项组，没有name属性，单选按钮就变成了普通按钮 <ul> <li>复选框 input type=checkbox</li> </ul> 必要的属性：name区分这个选项是哪个组的，value <ul> <li>文件 input type=file</li> </ul> 定义文件选择字段和 “浏览…” 按钮，供文件上传 <ul> <li>提交按钮 input type=submit</li> </ul> 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 属性有value，value的值/内容，会显示在按钮上面 <ul> <li>重置按钮 input type=reset</li> </ul> 定义重置按钮（重置所有表单值为默认值）。就是清空输入框 也可以使用value把重置按钮的文字内容修改 请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情 <ul> <li>按钮 button</li> </ul> 不再是input标签了，是button标签 是独立的标签，可以在表单外面。任意一个地方都可以。就是一个按钮。 把文本内容写在标签里面，就可以直接显示在页面的按钮上了，不需要使用value属性 <ul> <li>图片按钮 input type=image src=图片路径</li> </ul> 定义图像作为提交按钮。就是把一个图片作为一个按钮 <ul> <li>下拉列表 select包住 option选项</li> </ul> 下拉列表，就是提供多个选项的，显示一个那种。需要使用select包住，option是创建选项的。optgroup可以创建选项组，比如几个选项是一组，这个组可以显示在下拉式列表里面，但是这个组不能被选择，只能选择选项。 有选项组的时候，是select包住optgroup，optgroup再包住选项option 选项组optgroup，需要使用属性label，显示选项组的名称 选项想要显示文本，直接写在option中间就可以 <ul> <li>多行文本框textarea</li> </ul> 可以容纳无限文本内容，使用属性cols和rows控制这个多行文本框的大小。最好的方式还是使用CSS的width和height <ul> <li>标签label</li> </ul> 没有任何特殊效果，但是有一个for属性，使用label的for属性可以绑定其他的控件 在其他元素中设置id属性，然后把id的值交给label的for属性。我们在点击label文本的时候，就会自动跳转到for绑定的元素。 如果for绑定的是按钮，点击label的时候就是勾选按钮。如果绑定的是输入框，点击label的时候，就是点击了输入框，可以直接输入信息 <h3>HTML5新增type属性</h3> <ul> <li>邮箱字段验证 input type=email</li> </ul> 在提交表单的时候，自动验证这个email类型的输入框文本是不是邮箱类型，比如必须包含@符号 <ul> <li>网址验证input type=url</li> </ul> 检查这个标签里面填写的文本是不是一个网址。 <ul> <li>含有删除符号的输入框input type=search</li> </ul> 就是一个正常的输入框，但是在输入框的末尾有一个×，点击这个符号的时候，就会清空输入框，只对那一个输入框有效 类似在哔哩哔哩查找视频的时候，输错了内容，需要把内容全删，重新输入，这时候有了叉，就可以直接清空了 <ul> <li>识别手机号tel</li> </ul> 这个标签，没有任何提示，输入非数字内容也可以提交。没有效果。 <ul> <li>拾色器 input type=color</li> </ul> 这个标签就是一个拾色器，点击这个标签，就会打开一个拾色器窗口。显示颜色的RGB <ul> <li>type=number</li> </ul> 定义输入数字的区间。这个标签会自动生成选项，类似下拉式列表，列表里面是纯数字。通过属性min和max控制数字的区间大小。用户可以点击输入框右侧的上下箭头选择数字。 如果用户直接输入数字，就可以跳过这个限制。 <ul> <li>拖动条range</li> </ul> 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 是一个拖动条，用户可以随意拖动，背后是代表数值。类似播放音乐的音量，可以随意拖动。 使用下面的属性来规定限制： max : 规定允许的最大值。 min : 规定允许的最小值。 step : 规定合法数字间隔。 value : 规定默认值。就是拖动条的按钮一开始所在的位置 <ul> <li>日期type=date</li> </ul> 点开这个标签的时候，弹出一个类似日历的窗口，然后让用户选择日期 <ul> <li>月份input type=month</li> </ul> 刚刚的日期点开后，可以选择的是月份。就是没有几号了，只能选择这一年中的几月。 <ul> <li>周 week</li> </ul> 选择日期的周，使用率很低 <h3>HTML5新增常用属性</h3> <ul> <li>autofocus 自动获取焦点属性</li> </ul> 就是打开这个页面的时候，自动点击的控件。比如百度网页，打开百度的时候，自动点击搜索框。 只需要在控件中，加入autofocus属性就行 <ul> <li>placeholder 输入框的提示文本</li> </ul> 就是输入框的提示内容，比如，登录界面告诉你这个输入框可以填写什么内容，手机号，邮箱，或者qq号。这种提示内容。 鼠标选中这个输入框的时候，提示信息还有，但是一写文本，提示自动消失。 <ul> <li>required 判空条件</li> </ul> 输入框不能为空，为空的时候，不让提交，类似之前设计登录界面的时候对各种输入框进行判空操作。 在想要添加判空条件的输入框加上这个属性就可以。 <h2>实体字符</h2> 就是关键字，比如大于小于号，在html网页中是特殊符号。 想要输出他们到网页上，不能直接写。需要使用别的符号代替 <ul> <li>空格；；</li> <li>大于 <；<；</li> <li>小于 >；>；</li> <li>and &；&；</li> <li>双引号 "；"；</li> <li>单引号 &apos；'；</li> <li>版权© ©；©；</li> <li>商标® ®；®；</li> <li>人民币￥¥；¥；</li> </ul> 大小写不能忽略 前面是实体符号，后面是实体编号，效果一样 <h2>块元素与行内元素/内联元素</h2> <ul> <li>块元素</li> </ul> 在页面中独占一行，垂直排列 可以设置长宽 块元素可以包含块元素和内联元素 常见块元素：div,form,h1~h6,hr,p,table,ul等 <ul> <li>内联元素</li> </ul> 在页面中只占自身的大小，长宽设置无效 内联元素只能包含内联元素 常见内联元素：a,b,em,i,span,strong等 <ul> <li>既是内联元素也是块元素：input，button，img等</li> </ul> 一般使用CSS设计样式，宽高什么的 <h2>容器元素div</h2> 主要是作为页面划分的容器，一种布局工具 通过CSS设计布局大小和样式,在css里面设计宽高的时候,可以使用%,占全屏的多少 <h2>HTML5新增布局标签</h2> HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定 在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫SEO对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的语义化标签 因为是新增标签，在老版本的浏览器上不能使用这些标签。也就是兼容性不好，对于用户量很大的网站，比如购物网站，只能采用老的办法去设计布局 常见新增标签： <ul> <li>header头部</li> <li>nav导航</li> <li>section章节，页眉，页脚</li> <li>aside侧边栏</li> <li>footer脚部</li> <li>article内容块，比如评论，帖子，博客</li> </ul> <h2>视频音频</h2> HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。 <h3>视频</h3> Video标签定义视频，比如电影片段或其他视频流 因为老旧浏览器不支持这个标签，可以在video标签里面提醒用户一下。 <pre><code class="prism language-html"><video >您的浏览器不支持视频播放</video> </code></pre> 当用户不能正常使用这个标签的时候，就会显示这段话。 属性： <ul> <li>src 要播放的视频的 URL</li> <li>autoplay 自动播放</li> <li>controls 显示控件,比如播放按钮，没有这个属性，就不能播放视频</li> <li>loop 循环播放</li> <li>muted 输出被静音</li> <li>preload 页面加载的时候,自动预加载资源，先加载视频，不用全部的框架被加载出来</li> <li>height 设置播放器高度</li> <li>width 设置播放器宽度</li> <li>poster 视频封面，如果有自动播放，封面就会一闪而过</li> </ul> 在谷歌浏览器想要使用自动播放功能，必须搭配muted静音播放 设置宽高的时候，如果只设置一个长或宽，视频会等比例缩放。 如果宽高都设置了，这个视频会按照最长边缩放，其余部分用空白补全 <h3>音频</h3> Audio 标签定义声音，比如音乐或其他音频流 属性： <ul> <li>src 要播放的音频的 URL</li> <li>autoplay 自动播放</li> <li>controls 显示控件,比如播放按钮</li> <li>loop 循环播放</li> <li>muted 输出被静音</li> <li>preload 页面加载的时候,自动预加载资源</li> </ul> <h3>source</h3> 因为浏览器对视频或者音频的解码方式不同，所以有了这个标签 这个标签要在视频或音频标签里面 <pre><code class="prism language-html"><audio controls> <source src="horse.ogg" > 视频解码格式 <source src="horse.mp3" > </audio> </code></pre> <h2>HTML5新增标签</h2> 使用率比较低，了解即可 <ul> <li>figure 给图片加注释</li> </ul> 就是给一个正常的图片下面写描述 <pre><code class="prism language-html"><figure> <img src="img.gif" alt="figure标签"title="figure标签" /> 图片资源 <figcaption>figure的标题</figcaption> 图片的描述 </figure> </code></pre> <ul> <li>details 一个按钮，用于展示内容</li> </ul> 用于描述文档或文档的某个部分的细节，类似于下拉列表 就是一个详情按钮，点开的时候，可以展示一些东西，文本等等 具有一个open属性，有这个属性的时候，我们想要展示的内容自动打开。也可以手动关闭。 <ul> <li>mark 高亮效果</li> </ul> 用于包裹一些内容，高亮背景 <ul> <li>meter 进度条</li> </ul> 类似拖动条 <code><meter min="0" max="100" value="81" low="20" high="80"></meter></code> <ul> <li> 参数： <ul> <li>low:最低临界点</li> <li>high：最高临界点</li> <li>Min：最小值</li> <li>Max：最大值</li> <li>Value：当前值</li> </ul> </li> <li> progress 进度条 </li> <li> datalist 配合input构成下拉列表的效果 </li> <li> canvas 定义图标，盛放图形等内容 </li> </ul> <h2>CSS</h2> 文件的后缀名是.css 如果是在html文件里面设计css样式，就不用创建css文件了 css就是一个皮肤修改器，对网页中已有的标签进行样式的设计 <ul> <li>语法选择器{声明}</li> </ul> 我们通过各种属性设计的样式就是声明 <h3>CSS的引入方式</h3> 一般是这几种样式混合使用,允许混合使用 <h4>内联/行内样式</h4> 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性 <ul> <li>缺乏整体性和规划性，不利于维护，维护成本高,只能给一个标签设计</li> </ul> 比如:<code>CSS</code> <h4>内部样式</h4> 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表 <ul> <li>单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱</li> </ul> <pre><code class="prism language-html"><head> <style> h1 { background: red; } </style> </head> </code></pre> <h4>外部样式（推荐）</h4> 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在（文档的）head头部 <code><link rel="stylesheet" type="text/css" href="xxx.css"></code> type代表是css文件,文件格式 href是css文件路径 rel代表外部样式表 <h4>导入式</h4> 此种方式使用率比较低,因为会影响加载速度 <pre><code class="prism language-html"><style type="text/css"> @import url("css文件路径"); </style> </code></pre> <ul> <li> @import和link的区别 <ul> <li> @import 是 CSS 提供加载样式的一种方式，只能用于加载 CSS 。 link 标签除了可以加载 CSS外，还可以做很多其它的事情，比如定义 rel 连接属性等 </li> <li> 加载顺序的差别。当一个页面被加载的时候， link 引用的 CSS 会同时被加载， @import 引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显 兼容性的差别。 </li> <li> @import 在 IE5 以上才能识别，而 link 标签无此问题 </li> <li> 使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 dom 操作元素的样式时，用 @import 方式的样式也许还未加载完成 </li> <li> 使用 @import 方式会增 HTTP 请求，会影响加载速度，所以谨慎使用该方法 </li> </ul> </li> </ul> 就是别用导入式就完了,用外部样式就可以 <h3>CSS特征</h3> <ul> <li>继承性层叠性优先级</li> </ul> <h4>继承性</h4> 指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-height，但有些属性不能继承，比如：border、padding、margin 我们在设计样式的时候,一般对容器设置,容器里面的标签也可以使用容器的样式,容器的样式也不是全都可以直接拿来用,所以有了继承性的概念,有的样式可以被拿来直接使用,有的不可以 <h4>层叠性</h4> 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。 例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果 <h4>优先级</h4> 样式定义冲突时，按照不同样式规则的优先级来应用样式 行内样式>内部样式（外部样式） 内部样式和外部样式优先级一样，写在后面的生效 <h4>CSS注释</h4> 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它 CSS注释以 /* 开始, 以 */ 结束, <code>/* 这是注释 */</code> <h3>CSS选择器</h3> <ul> <li> 主要作用: 选择哪些标签,设计什么属性 </li> <li> 全局选择器* <ul> <li> 可以与任意选择器匹配,优先级最低,不推荐使用.也叫通配符,所有元素都生效 </li> <li> 一般用于初始化操作,比如网页预留的内边距和外边距 </li> <li> <pre><code class="prism language-html">*{ margin=0; padding=0; 清空浏览器默认的边距 } </code></pre> </li> <li> 对于所有的标签元素来说,都有一个默认的边距,可以使用这个初始化操作,把所有的标签边距归零 </li> </ul> </li> <li> 元素选择器 <ul> <li>HTML文档中的元素， p、b、div、a、img、body 等.按照标签类型来选择</li> <li>标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”…意思就是选择所有类型的标签,不能单独给一个同类型的标签开小差</li> <li>所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等</li> <li>无论这个标签藏的多深，一定能够被选择上</li> <li>选择的所有，而不是一个</li> </ul> </li> <li> class类选择器 (最常用的) <ul> <li> 规定用圆点 . 来定义，针对你想要的所有标签使用 </li> <li> <pre><code class="prism language-html"><h2 class="oneclass">你好</h2> /*定义类选择器*/ .oneclass{ width:800px; } </code></pre> </li> <li> 只要给这个标签设置一个class属性,然后在css里面使用点+class值的方式,就可以对某个标签进行设计 </li> <li> 而且这个类选择器是通用的,按照class属性设计的样式,可以给任何含有这个class属性相同的任何标签进行使用. </li> <li> 我们一开始只给一个p标签设计了class属性,拿着他的值进行设置,后面又创建了一个h标签,感觉p的设计很好,直接给h标签添加这个class属性就可以了.这个p标签和h标签共用一个类选择器. </li> </ul> </li> <li> class属性的特点 <ul> <li>类选择器可以被多种标签使用</li> <li>类名不能以数字开头</li> <li>同一个标签可以使用多个类选择器。用空格隔开 class=“test1 tt2” 一个标签使用两个类选择器</li> <li>一个标签里面只能有一个class属性,不能是多个class</li> </ul> </li> <li> ID选择器 <ul> <li> 针对某一个特定的标签来使用，只能使用一次。 id后面的属性值,只能出现一次. </li> <li> css 中的 ID选择器以 #来定义 </li> <li> <pre><code class="prism language-html"><h2 id="mytitle">你好</h2> #mytitle{ border:3px dashed green; } </code></pre> </li> <li> ID是唯一的 </li> <li> ID不能以数字开头 </li> </ul> </li> <li> 合并选择器 <ul> <li>就是在设计样式的时候,有很多相同的设计,因为在不同的选择器里面,导致不通用.合并选择器就是解决这个问题的</li> <li>作用：提取共同的样式，减少重复代码</li> <li>和别的选择器写法一样,就是使用逗号隔开,比如类名等等</li> </ul> </li> <li> 选择器的优先级 <ul> <li>CSS中,权重用数字衡量</li> <li>元素选择器的权重为: 1</li> <li>class选择器的权重为: 10</li> <li>id选择器的权重为: 100</li> <li>内联样式的权重为: 1000</li> <li>优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器</li> </ul> </li> </ul> <h3>div+css布局布局的重要性</h3> <ul> <li> 优点 <ul> <li>符合W3C标准</li> <li>使页面载入得更快</li> <li>保持视觉的一致性</li> <li>修改设计时更有效率</li> <li>搜索引擎友好</li> </ul> </li> <li> 布局时常用的属性 <ul> <li>width 宽度</li> <li>height 高度</li> <li>background-color 背景颜色</li> <li>float 浮动（div不在独占一行，左右摆放）是当前标签相对于父级容器的摆放方式</li> </ul> </li> </ul> <h3>布局</h3> float的默认是垂直摆放,float=left是水平靠左摆放，float=right是水平靠右摆放 <h2>CSS常用属性</h2> <h3>字体属性</h3> CSS字体属性定义字体，加粗，大小，文字样式 <ul> <li>color 文本的颜色，常用十六进制</li> </ul> <pre><code class="prism language-html">div{ color:red;} 直接写英文单词 div{ color:#ff0000;} 用十六进制，常用的 div{ color:rgb(255,0,0);} 用rgb值，颜色取值范围是0-255 div{ color:rgba(255,0,0,.5);} rgba的a代表透明度，a的取值范围是0-1，0是完全透明，1是完全不透明 </code></pre> 一般美工，或者设计师会给你十六进制的颜色取值。按照美工的设计去编写前端页面 <ul> <li>font-size 文本的大小</li> </ul> <pre><code class="prism language-html">h1 {font-size:40px;} p {font-size:14px;} </code></pre> chrome浏览器接受最小字体是12px，再小就小不了了 如果确实有再小的字体要求，还有特殊方法实现 <ul> <li>font-weight 文本的粗细，常用数值取值，比较灵活 <ul> <li>bold 粗体字符</li> <li>bolder 更粗的字符，在视觉上和bold没有区别</li> <li>lighter 更细的字符</li> <li>100~900 定义由细到粗 400等同默认，而700等同于bold</li> </ul> </li> </ul> <pre><code class="prism language-html">div{font-weight:bold;} p{font-weight:900;} 常用数值取值 </code></pre> <ul> <li> font-style 文本的字体样式 <ul> <li>normal 默认值</li> <li>italic 斜体字</li> </ul> </li> <li> font-family 指定一个元素的字体 </li> </ul> 每个值用逗号分开，如果字体名称包含空格，它必须加上引号 <code>font-family:"Microsoft YaHei","Simsun","SimHei";</code> 可以一次性设置多个字体，浏览器按照从左到右去使用，第一个不支持就第二个字体，以此类推 <h3>背景属性</h3> CSS背景属性主要有以下几个 <ul> <li> background-color 设置背景颜色 </li> <li> background-image 设置背景图片 <ul> <li>下面是基于背景图片的设置</li> <li>background-attachment 设置背景图片是随内容滚动还是固定</li> <li>background-position 设置背景图片显示位置</li> <li>background-repeat 设置背景图片如何填充</li> <li>background 复合属性</li> </ul> </li> <li> background-color 背景颜色 </li> </ul> <pre><code class="prism language-html"><div class="box"></div> .box{ width: 300px; height: 300px; background-color: red; } </code></pre> 和字体颜色的取值方式一样 <ul> <li>background-image 背景图像</li> </ul> 在网页中显示图片的方式有两种：1. 使用img标签 2. 使用背景图片 元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分 <pre><code class="prism language-html"><div class="box"></div> .box{ width: 600px; height: 600px; background-image: url("img1.jpg"); } </code></pre> 因为是背景图片，我们还可以写文字内容，文字内容会浮现在图片上面。 如果使用的是img图片，就不可以直接写文字在图片上面。 <ul> <li>background-repeat 如何平铺背景图像，图片的填充方式 <ul> <li>repeat 默认值</li> <li>repeat-x 只向水平方向平铺，垂直方向不够的话就是空，不进行填充</li> <li>repeat-y 只向垂直方向平铺</li> <li>no-repeat 不平铺</li> </ul> </li> </ul> 这个是不改变图形大小，只是把有空余的地方使用图片填充。不缩放图片 <pre><code class="prism language-html">.box{ width: 600px; height: 600px; background-image: url("img1.jpg"); background-repeat: no-repeat; } </code></pre> <ul> <li>background-size 背景图像的大小，常用cover <ul> <li>length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto(自动)</li> <li>percentage 计算相对容器的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto</li> <li>cover 图片充满容器，自动等比例放大</li> <li>contain 等比缩放至完整的显示图片，不会占满容器。缩放到正好和容器一致。</li> </ul> </li> </ul> <pre><code class="prism language-html">.box{ width: 600px; height: 600px; background-image: url("img1.jpg"); background-size: 100% 100%; } </code></pre> 如果使用了length设置了长宽，图片的格式不一致，就会按照设置的长宽进行拉伸。如果只设置了一个长度，就会按照哪个长度对图片进行等比放大。多余的地方不显示。 <ul> <li>background-position 背景图像的起始位置，其默认值是：0% 0% <ul> <li>第一个是x轴，第二个是y轴</li> <li>left top 左上角，默认</li> <li>left center 左中</li> <li>left bottom 左下</li> <li>right top 右上角</li> <li>right center 右中</li> <li>right bottom 右下</li> <li>center top 中上</li> <li>center center 中中</li> <li>center bottom 中下</li> <li>x% y% 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50% 默认是0% 0%</li> <li>xpos ypos 单位是像素</li> </ul> </li> </ul> <pre><code class="prism language-html">.box{ width: 600px; height: 600px; background-image: url("img1.jpg"); background-position: center; } </code></pre> <ul> <li> background-attachment 固定或者随页面滚动，正常是scroll <ul> <li>scroll 背景图片随页面滚动而滚动。就是图片相对于容器是固定的。滑动页面的时候，图片平行上移</li> <li>fixed 背景图片固定，就是背景图片相对于页面是固定的。我们上移页面的时候，容器也会上移，而图片不动，有一个图片从下面逐渐消失的过程。</li> </ul> </li> <li> background 在一个声明中设置所有的背景属性。不利于初学者掌握 </li> </ul> background-image、background-repeat、background-position其中background-size单独书写 就是第一个值代表图片，第二个值是重复方式，第三个是起始位置 <pre><code class="prism language-html">.box{ width: 600px; height: 600px; background: url("img1.jpg") center scroll; 融合了 background-size: 100% 100%; } </code></pre> <h3>文本属性</h3> 控制文本显示效果 <ul> <li> text-decoration:none;去除超链接的下划线 </li> <li> text-align 水平对齐方式 <ul> <li>left 文本居左排列，默认值</li> <li>right 把文本排列到右边</li> <li>center 把文本排列到中间</li> </ul> </li> <li> text-decoration 下划线、上划线、删除线 <ul> <li>underline 下划线</li> <li>overline 上划线</li> <li>line-through 删除线</li> </ul> </li> </ul> <pre><code class="prism language-html">h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} </code></pre> <ul> <li> text-transform 大小写 <ul> <li> captialize 每个单词开头大写 </li> <li> uppercase 全大写 </li> <li> lowercase 全小写 </li> </ul> </li> </ul> <pre><code class="prism language-html">h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;} </code></pre> <ul> <li>text-indent 首行文本缩进</li> </ul> <code>p{ text-indent:50px;}</code> 负值是允许的。如果值是负数，将第一行左缩进.就是最左侧的内容被遮盖了 <h3>列表属性</h3> <ul> <li> line-height 列表字体高度 </li> <li> list-style-type <ul> <li>none 无标记</li> <li>disc 标记是实心圆</li> <li>circle 标记是空心圆</li> <li>square 标记实心方块</li> <li>decimal 标记是数字</li> </ul> </li> </ul> 就跟之前使用列表标签的效果一样，但是这是CSS设计的 <code>ul.a {list-style-type: circle;} ul.b {list-style-type: square;}</code> <ul> <li>list-style-image 把列表前面的序号改成图片</li> </ul> 使用图像来替换列表项的标记 <code>ul {list-style-image: url('sqpurple.gif');}</code> <ul> <li> list-style-position 指示如何相对于对象的内容绘制列表项标记 <ul> <li> inside 列表项目标记放置在文本内 </li> <li> outside 列表项目标记放置在文本外 </li> </ul> </li> </ul> <code>ul { list-style-position: inside;}</code> 就是列表前面的符号或图片，是否包含在列表项里面 给列表项设置边框，就可以看到列表项前面的符号在不在列表项里面了 <ul> <li>list-style 简写设置列表属性</li> </ul> 可以设置的属性（按顺序）： list-style-type, list-style-position,list-style-image 就跟设置背景属性那个一样，除非特别熟练，否则别用 <code>ul { list-style: none;}</code> 这是唯一的作用，删除列表前面的标记 <h3>表格属性</h3> <ul> <li>表格边框 border</li> </ul> <code>table, td {border: 1px solid black;}</code> 第三个参数是颜色，第二个参数是边框为实线的意思 <ul> <li>折叠边框 border-collapse</li> </ul> 设置表格的边框是否被折叠成一个单一的边框或隔开 <code>table { border-collapse:collapse; }</code> 就是每个单元格之间有没有空隙，或者说，单元格和表格之间有没有空隙 <ul> <li>表格宽度和高度 width和height</li> </ul> <code>table { width:300px; height=500px}</code> <ul> <li>表格内部单元格文字对齐 text-align</li> </ul> 属性设置水平对齐方式，向左left，右right，中心center <code>td { text-align:right; }</code> 垂直对齐属性设置垂直对齐，上top，中center，下bottom <code>td { vertical-align:bottom; }</code> <ul> <li>表格填充内边距</li> </ul> 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性 <code>td { padding:15px; }</code> 设置这个内边距的时候，不要设置表格整体的大小了，会限制单元格大小的 <ul> <li>表格颜色指定边框的颜色，和th元素的文本和背景颜色</li> </ul> <code>table, td, th { border:1px solid green; }</code> 这里面的第三个参数就是表格的颜色 <code>td { background-color:green; color:white; }</code> 指定背景颜色background-color <h3>其他常用属性</h3> <ul> <li>letter-spacing 字符间距</li> </ul> length 定义字符间的固定空间 <code>h1 {letter-spacing:10px}</code> 字间距可以为负数，就叠在一起了，没有意义 <ul> <li>line-height 行高</li> </ul> <code>h1 {line-height:30px}</code> 一般是在一个容器里面，对一行文本进行垂直居中操作。比如给一个div设置高度为80px，把这个p标签的行高设置成80px。就是垂直居中了。 <ul> <li> overflow 常用auto <ul> <li>visible 默认值，有多少文本就显示多少，会超出容器</li> <li>hidden 超出容器内容被修剪，超出的部分被隐藏</li> <li>scroll 内容会被修剪，但是可以滚动查看剩余内容。多了一个滚动条，可以上下拉，左右拉</li> <li>auto 如果内容被修剪，可以滚动滚动查看剩余内容。只能上下滚动，不能左右滚动，左右方向也没有滚动条</li> </ul> </li> <li> white-space 元素内的空白怎样处理 <ul> <li>pre 空白会被浏览器保存</li> <li>nowrap 文本不会换行</li> </ul> </li> </ul> 就是在只有一行文本的情况下，超出的部分，会以。。。的形式隐藏 <code>p { white-space: nowrap; 不会换行，以省略号的方式代替 overflow: hidden; 超出部分隐藏 text-overflow: ellipsis; 隐藏的部分用省略号代替 }</code> 这三个属性必须同时使用，互相配合。。。 <ul> <li>verticle-align 元素的垂直对齐方式 <ul> <li>text-top 把元素的顶端与父元素字体的顶端对齐</li> <li>middle 把此元素放置在父元素的中部。</li> <li>text-bottom 把元素的底端与父元素字体的底端对齐。</li> </ul> </li> </ul> 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 <code>img{vertical-align:middle;}</code> 就是当图片和文本混合在一起的时候，文本相对于图片的对齐方式。比如一句话和一个图片，假设图片固定，这句话可以在图片的顶部对齐，也可以在底部对齐，也可以垂直居中对齐。 垂直方向对齐 <ul> <li>opacity 透明度</li> </ul> 取值0-1,0表示完全透明，1表示不透明 和字体属性里面的color的rgba的a一样 <h2>CSS选择器</h2> <h3>关系选择器</h3> 回顾一下： <ul> <li> 基础选择器 <ul> <li>全局选择器*{}</li> <li>类选择器 .class{}</li> <li>元素选择器 div{}</li> <li>id选择器 #ID{}</li> </ul> </li> <li> 关系选择器分类 <ul> <li>后代选择器常用</li> <li>子代选择器常用</li> <li>相邻兄弟选择器</li> <li>通用兄弟选择器</li> </ul> </li> <li> 后代选择器选择所有被A元素包含的B元素，中间用空格隔开 </li> </ul> 比如<code>div p{}</code> 意思是对在div容器里面所有p标签进行设计 也可以使用类选择器搭配后代选择器 <code><div class="test">111111111</div></code> 可以使用<code>.test p{}</code> 前面的点，是类选择器，后面是后代选择器 因为是后代选择器，那上边的例子来说，是div容器里面的所有p标签都会生效。无论p标签被嵌套多少层。 <ul> <li>子代选择器选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示</li> </ul> 比如<code>div>p{}</code> 只对与div紧贴着的p标签生效。如果p标签被嵌套在内层，就没有效果 <ul> <li>相邻兄弟选择器 E+F{}</li> </ul> 选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素 在同一容器里面有很多标签，比如a标签和p标签 使用相邻兄弟选择器，就是设计a标签后面的第一个p标签有效。其余的无效 <ul> <li>通用兄弟选择器 E~F{}</li> </ul> 选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开 a标签后面的所有p标签都有效。a前面的p标签无效 <h3>伪类选择器</h3> 同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示 对于网页中的超链接，如果是没有点击过是蓝色，鼠标按住不松手是红色。点击之后是紫色 <ul> <li>超链接 <ul> <li>:link “链接”：点击之前（只适用于a）</li> <li>:visited “访问过的”：点击之后（只适用于a）</li> <li>:hover “悬停”：鼠标放到标签上的时候（适用于所有标签）</li> <li>:active “激活”：鼠标点击不松手时。（适用于所有标签）</li> </ul> </li> </ul> <pre><code class="prism language-html">/*让超链接点击之前是红色*/ a:link{ color:red; } /*让超链接点击之后是橘色*/ a:visited{ color:orange; } /*鼠标悬停，放到标签上的时候是绿色*/ a:hover{ color:green; } /*鼠标点击链接，但是不松手的时候是黑色*/ a:active{ color:black; } </code></pre> 记住，在css中，这四种状态必须按照固定的顺序写。如果不按照顺序，那么将失效。“爱恨准则” love hate 。必须先爱，后恨。 悬停和激活适用于所有标签 激活操作一般用在按钮上面 <ul> <li>:first-child 选择器</li> </ul> 匹配其父元素中的第一个子元素 <code>li:first-child{background:yellow;}</code> 类似相邻兄弟选择器 <ul> <li>:last-child 选择器</li> </ul> 匹配父元素中最后一个子元素 <code>p:last-child{background:#ff0000;}</code> <ul> <li>:nth-child(n) 选择器列表的奇偶选择，倍数选择</li> </ul> 匹配父元素中的第 n 个子元素，元素类型没有限制. n 可以是一个数字，一个关键字 奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数odd或偶数even（该索引的第一个子节点是1）。在这里，我们为奇数和偶数p元素指定两个不同的背景颜色 一般是奇偶选择，倍数选择 <code>p:nth-child(odd){ 把odd换成2，就是第二个 background:#ff0000; } p:nth-child(even){ background:#0000ff; }</code> <ul> <li>:only-child 选择器</li> </ul> 属于父元素中唯一子元素的元素. 就是在多个容器里面有不同数量的标签。唯一子元素，指的是在一个容器里面只能有一个设置的子元素。这个子元素才会生效。 比如，下面的这个。在div容器里面只有一个p标签的p标签才会生效 <code>div p:only-child{ background:#ff0000; }</code> <ul> <li>:empty 选择器</li> </ul> 没有任何子级的元素（包括文本节点） 空的p元素的背景色<code>p:empty{background:#ff0000;}</code> 假设有很多个p标签，有的p标签里面有内容，有的p标签是空的。这个选择器就可以对空的p标签进行设计。 任何内容都不行，空格也不行。 <ul> <li>:not() 选择器就是取反选择器，只要不是括号里面的标签，都可以生效</li> </ul> 为每个并非 p 元素的元素设置背景颜色 <code>:not(p){ background:#ff0000;}</code> <ul> <li>:focus 选择器具有焦点的元素</li> </ul> 就是输入框，因为想要在输入框打字，就需要点击一下输入框，俗称把页面的焦点转移到输入框。 因为输入框可以有很多个，我们可以对用户正在输入的输入框进行选择。比如对选中的输入框修改背景颜色等等 <ul> <li>:checked 匹配选中的输入元素（仅适用于单选按钮或复选框）</li> </ul> 就是选中哪个按钮，哪个按钮就可以应用样式。 <h3>伪对象/伪元素选择器</h3> <ul> <li>before和after</li> </ul> before，after 选择器在被选元素的“内容”前面或后面插入内容，用来和content 属性一起使用。 虽然 E:before/after 可转化为 E::before/after ，但是你写伪元素是要规范，用两个冒号 <code>ul::before{ content:"这是ul的伪元素"; color: blue; } ul::after{ content:"这是之后的伪元素"; }</code> 就是在不修改已经设计好的样式的情况下，在原来的基础上增加内容。 就像之前学习的类方法，或类属性。在类创建完之后，还有别的方法再次添加方法或属性。 <h3>属性选择器（了解即可）</h3> 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id属性 <ul> <li>[attribute] 选择器带有指定属性的元素</li> </ul> 为带有 target 属性的 a 元素设置样式 <code>a[target]{ background-color:yellow;}</code> a标签是：<code><a href="#" target="_blank"></code> <ul> <li>[attribute=value] 带有指定属性和值的元素</li> </ul> 为 target=“_blank” 的 a 元素设置样式 <code>a[target=_blank]{background-color:yellow;}</code> <ul> <li>[attribute~=value] 属性值中包含指定词汇的元素</li> </ul> 选择 titile 属性包含单词 “flower” 的元素，并设置其样式 <code>[title~=flower]{ background-color:yellow;}</code> 因为在给标签添加属性的时候，可以添加多个属性值，比如class="test lll"等等 这个是含有某个属性值就可以 <ul> <li>[attribute|=value] 带有以指定值开头的属性值的元素</li> </ul> 该值必须是整个单词，比如 lang=“en” ，或者后面跟着连字符，比如 lang=“en-us”，这个-是一个分隔符。en-us实际是两个单词en和us 选择 lang 属性值以 “en” 开头的元素，并设置其样式 <code>[lang|=en]{ background-color:yellow;}</code> en是一个独立的单词，完整的单词 <ul> <li>[attribute^=value] 属性值以指定值开头的每个元素</li> </ul> 和上面的效果一样。但是这个要求更松，不需要-来分隔单词了。只要属性值开头能匹配上就行。 <ul> <li>[attribute$=value] 属性值以指定值结尾的每个元素</li> </ul> 刚刚是匹配开头单词，现在是匹配结尾 <ul> <li>[attribute*=value] 包含指定值的每个元素</li> </ul> 这回是含有指定单词就可以了，不论开头结尾或中间 <h2>CSS盒子模型</h2> 在网页的设计和布局使用 它包括：外边距（margin），边框（border），内边距（padding） <ul> <li>Margin(外边距) - 清除边框外的区域，外边距是透明的</li> <li>Border(边框) - 围绕在内边距和内容外的边框</li> <li>Padding(内边距) - 清除内容周围的区域，内边距是透明的</li> <li>Content(内容) - 盒子的内容，显示文本和图像</li> </ul> 之前使用的border：10px solid red；这三个参数，分别是：厚度，线的形状，边框的颜色 <ul> <li>盒子模型分类 <ul> <li>标准盒子模型</li> <li>怪异盒子模型</li> <li>弹性盒子模型</li> </ul> </li> </ul> <h3>内容区域（Content）</h3> Content内容区域包含宽度（width）和高度（height）两个属性 块级元素默认宽度为100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开 块级元素可以设置宽高属性，行内元素设置宽高属性不生效 <ul> <li>块级元素可以设置宽度百分比%，但是不能设置高度百分比%，高度只能写px。</li> </ul> 宽度（width）和高度（height）可以取值为像素（px）和百分比（%） 就是不设计盒子模型。可以直接往里面放置内容，盒子的大小由内容决定。产生了一个问题，必须把内容对齐，或者说内容一致才可以。不然从整体来看，由于内容不一致，盒子就会大大小小的，不美观。就需要手动设置宽高。 一般是在移动端使用百分比。pc端使用px像素。 设计盒子大小的时候必须写单位。 <h3>内边距（Padding）</h3> 边框与内容之间的空间，即上下左右的内边距 内边距在设置大小的时候，一般使用像素来设置，就可以通用全部的屏幕了 <ul> <li>单边内边距属性</li> </ul> 在CSS中，它可以指定不同的侧面不同的填充 <ul> <li>上内边距 padding-top:25px;</li> <li>下内边距 padding-bottom:25px;</li> <li>右内边距 padding-right:50px;</li> <li>左内边距 padding-left:50px;</li> </ul> 简写属性 为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding Padding属性，可以有一到四个值 顺时针，上右下左 padding:25px 50px 75px 100px; 顺序：上右下左 padding:25px 50px 75px; 顺序：上 (左右) 下，不常用 padding:25px 50px; 顺序：上下左右 padding:25px; 顺序：所有方向 Padding需要注意的问题：会撑大容器 <h3>边框（Border）</h3> CSS边框属性允许你指定一个元素边框的样式和颜色 有三个属性：边框样式border-style，边框宽度border-wdith，边框颜色border-color C3新特性：边框圆角效果border-radius 取值是0%-50%.也可以是px <ul> <li>边框样式border-style</li> </ul> 边框样式属性指定要显示什么样的边界 border-style属性用来定义边框的样式 border-style ：dotted点边框 dashed虚线边框 solid实线边框 double双层实线边框 <ul> <li>边框宽度border-wdith</li> </ul> 通过 border-width 属性为边框指定宽度，单位是px <ul> <li>边框颜色border-color</li> </ul> border-color属性用于设置边框的颜色 border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式 <ul> <li>边框单独设置各边</li> </ul> 在CSS中，可以指定不同的侧面不同的边框 上边 border-top: 1px solid red; 下边 border-bottom: 1px solid red; 右边 border-right: 1px solid red; 左边 border-left: 1px solid red; <ul> <li>边框简写属性</li> </ul> border 属性中设置 border : border-width border-style(必写项) border-color; <ul> <li>border-style属性可以有1-4个值实际开发没人使用</li> </ul> border-style:dotted solid double dashed; 顺序：上右下左 border-style:dotted solid double; 顺序：上(左右) 下 border-style:dotted solid; 顺序：上下左右 border-style:dotted; 顺序：所有方向 <h3>外边距（margin）</h3> CSS margin(外边距)属性定义元素周围的空间。不会增加自身大小，只是把元素之间分开。 <ul> <li> 取值 <ul> <li>Auto 居中</li> <li>定义一个固定的像素px</li> <li>定义一个使用百分比的边距</li> </ul> </li> <li> 单边外边距属性 </li> </ul> 在CSS中，它可以指定不同的侧面不同的边距 margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; <ul> <li>简写属性</li> </ul> 为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。所有边距属性的简写属性是 margin margin属性可以有一到四个值 margin:25px 50px 75px 100px; 顺序：上右下左 margin:25px 50px 75px; 顺序：上 (左右) 下 margin:25px 50px; 顺序：上下左右 margin:25px; 顺序：所有方向 <ul> <li>margin需要注意的问题</li> </ul> 外边距合并问题 垂直方向上外边距相撞时，取较大值 就是两个盒子都存在外边距的时候，两个外边距不会累加，而是取两个容器外边距最大的值。 是两个盒子之间的外边距。不是四周 <h3>怪异盒模型(IE盒子模型)box-sizing: border-box;</h3> 是IE老版本的盒子模型 在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此) 盒子总宽度/高度=width/height +margin <ul> <li>Box-sizing CSS3指定盒子模型种类</li> </ul> box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素 <ul> <li> box-sizing: content-box; 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框 </li> <li> box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 </li> </ul> 即 box-sizing 属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为怪异盒模型 一般怪异盒模型用在页面已经设计好了，不想让新增的容器破坏页面布局，就可以使用这个模型。 怪异盒模型的特点就是不会撑大容器 主要应用在移动端。 <h3>弹性盒子模型（flex box）</h3> 弹性盒子是 CSS3 的一种新的布局模式，新版本才有。 CSS2是旧版本。CSS3是新版本。C3新增：圆角效果，弹性盒子模型。 CSS3可能存在兼容性问题。 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 主要应用在移动端。。。。。。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 <ul> <li>CSS3弹性盒内容</li> </ul> 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 默认弹性盒里内容横向摆放 <code> .flex-container { display: flex; width: 400px; height: 250px; }</code> <h4>父元素上的属性</h4> <ul> <li> display 属性 <ul> <li>display:flex; 开启弹性盒</li> <li>display:flex; 属性设置后子元素默认水平排列</li> </ul> </li> <li> flex-direction 弹性子元素在父容器中的位置 <ul> <li>row：横向从左到右排列（左对齐），默认的排列方式</li> <li>row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面</li> <li>column：纵向排列</li> <li>column-reverse：反转纵向排列，从后往前排，最后一项排在最上面</li> </ul> </li> <li> justify-content 属性水平对齐方式 <ul> <li> flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放 <ul> <li>就是靠左</li> </ul> </li> <li> flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 <ul> <li>靠右</li> </ul> </li> <li> center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出） <ul> <li>居中</li> </ul> </li> <li> space-between 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。 <ul> <li>左右对齐，元素之间填充空隙</li> </ul> </li> <li> space-around 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px） <ul> <li>平分空隙，也是左右对齐，但是把空隙平分。</li> </ul> </li> <li> 一般不用最后两种，使用第三种和margin属性就够了 </li> </ul> </li> <li> align-items 垂直方向对齐 <ul> <li>flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 <ul> <li>上，默认</li> </ul> </li> <li>flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 <ul> <li>下</li> </ul> </li> <li>center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） <ul> <li>居中</li> </ul> </li> </ul> </li> </ul> <h4>子元素上的属性</h4> 经常用在移动端 <ul> <li>flex-grow 权重 <ul> <li>扩展因子作为比率来分配剩余空间</li> <li>默认为0，即如果存在剩余空间，也不放大</li> <li>如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%</li> </ul> </li> </ul> 设置的子元素宽度就失效了 宽度失效。 <code>.flex-item2 { height: 150px; background-color: green; flex-grow: 2; 权重 } .flex-item3 { height: 150px; background-color: blue; flex-grow: 1; 权重 }</code> <h2>浏览器内核</h2> 浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染（显示）网页。 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同 一些较新的css3特性，需要添加以上前缀兼容每个浏览器 <ul> <li>IE浏览器 Trident（IE内核） -ms-</li> <li>火狐浏览器 Gecko（Firefox内核） -moz</li> <li>Chrome和Safari浏览器 Webkit（Safari内核，Chrome内核） -webkit</li> <li>Chrome浏览器 Blink内核 -webkit-</li> <li>360浏览器、猎豹浏览器 IE+Chrome双内核 -ms-/-webkit-</li> </ul> <code>.box{ flex: 1; -ms-flex: 1; -moz-flex:1; -webkit-flex:1; } .root{ display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; 全都写上，可以让浏览器自动选择 }</code> <h2>浮动和定位</h2> <h3>Dispaly属性</h3> display 可以修改元素的类型，让块级元素和内联元素相互转换 可以隐藏元素 <ul> <li>none 此元素不会被显示</li> <li>block 此元素将显示为块级元素</li> <li>inline 此元素会被显示为内联元素</li> <li>inline-block 行内块元素</li> <li>flex 弹性盒模型</li> </ul> 块级元素可以设置宽高，行内元素不可以设置宽高。但是给行内元素设置display属性为block，就可以设置宽高了。并且变成了上下摆放。 只有块级元素才是上下摆放。就是独占一行的定义。 也可以给块级元素变成行内元素，设置display是inline 行内块元素，是可以设置大小，且横向摆放 <ul> <li>元素隐藏属性对比 <ul> <li>display:none; 隐藏自己，隐藏后原位置不保留</li> <li>visibility:hidden; 隐藏自己，隐藏后原位置保留</li> <li>opacity:0; 隐藏自己，隐藏后原位置保留。其实是透明度调整，透明度=0，就消失了，但是还在。还可以随意设置透明度</li> <li>overflow:hidden; 溢出部分隐藏</li> </ul> </li> </ul> <h3>文档流（排列方式）</h3> 就是标签的排列方式 例如：块元素自上而下摆放。内联元素，从左到右摆放 标准流里面的限制非常多，导致很多页面效果无法实现 <ul> <li>问题： <ul> <li>高矮不齐，底边对齐。</li> <li>空白折叠现象 <ul> <li>无论多少个空格、换行、tab，都会折叠为一个空格</li> <li>img标签之间有空隙，不是紧密连接</li> </ul> </li> </ul> </li> </ul> 当文本内容和图片在一个容器中时。会出现高低不齐的情况，图片总是比文本大一些。默认效果是文本和图片的底部对齐。很丑。 <ul> <li> 如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！ </li> <li> 脱离文档流 </li> <li> 使⼀个元素脱离标准文档流有三种方式 <ul> <li>浮动</li> <li>绝对定位</li> <li>固定定位</li> </ul> </li> </ul> <h3>浮动</h3> float 属性定义元素在哪个方向浮动，任何元素都可以浮动。 left 元素向左浮动 right 元素向右浮动 <ul> <li>浮动的原理 <ul> <li>浮动以后使元素脱离了文档流</li> <li>浮动只有左右浮动，没有上下浮动</li> </ul> </li> </ul> 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右 当容器不足以横向摆放内容时候，会在下一行摆放 可以把两张图片之间的空隙删除，紧密贴合 浮动默认横向摆放，放不了就往下放 <h3>清除浮动</h3> 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动 <ul> <li> 浮动元素会造成父元素高度塌陷。 <ul> <li>就是把父级容器的高度清楚了，因为子元素浮动了，就脱离了父容器，父容器为空，就不能正常显示了</li> </ul> </li> <li> 后续元素会受到影响 <ul> <li>如果我们后面再创建新的元素，没有使用浮动，就会被浮动元素掩盖</li> </ul> </li> <li> 解决方案有很多种 <ul> <li>父元素设置高度</li> <li>受影响的元素增加clear属性 <ul> <li>clear: both; 同时清除左右浮动。就是给新增的元素添加这个属性</li> </ul> </li> <li>overflow清除浮动 <ul> <li>这种情况下，父布局不能设置高度。父级标签的样式里面加: overflow:hidden;</li> </ul> </li> <li>伪对象方式 <ul> <li>为父标签添加伪类 after ,设置空的内容，并且使用 clear:both ;display:block;</li> <li>这种情况下，父布局不能设置高度</li> </ul> </li> </ul> </li> </ul> 一般是同时写两个方案：overflow:hidden;clear: both; <h3>定位</h3> position 属性指定了元素的定位类型 <ul> <li>relative 相对定位</li> <li>absolute 绝对定位</li> <li>fixed 固定定位</li> </ul> 脱离文档流的有绝对定位和固定定位 设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom <ul> <li>相对定位position: relative;</li> </ul> <code>.box{ width: 200px; height: 200px; background-color: red; position: relative; 一个启动相对定位的开关 left: 100px; top:100px; }</code> 启动相对定位之后，可以之间使用上下左右了，但是实际效果是相反的，使用左+像素单位，是往右移。其他的也一样，写上+距离，是往下移动。 <ul> <li>绝对定位absolute 脱离文档流</li> </ul> 是设定的元素距离父级容器边框的绝对位置，如果是左100px，就是距离父级容器最左边100px，在左上角。如果是right100px，就是距离最右边100px，在右上角。如果是下100px，就是距离底部100px，在底下排列 会随着页面的滚动而发生变化 和相对定位一样，也有上下左右四个方向 <ul> <li>固定定位fixed 脱离文档流</li> </ul> 和绝对定位的设置方式一样，但是固定定位跟盗版网站的广告一样，会一直在页面的某个位置，不会随着页面的滚动而消失。就像小说网站的目录一样，一直在页面的左侧保持不动 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档 想要定位跟着父级容器移动，父级容器也要设置定位模式。如果所有的父级容器都没定位，就会根据页面去移动。 固定定位只根据页面定位，无论父级有没有定位模式。 <ul> <li>Z-index 就是图层顺序</li> </ul> z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 只有脱离文档流的元素才有堆叠顺序，也就是绝对位置和固定位置可以使用 <code>.box1{ width: 200px; height: 200px; background-color: red; position:absolute; z-index: 2; } .box2{ width: 300px; height: 300px; background-color: green; position:absolute; z-index: 1; 图层是第一层 }</code> <h2>定位实操-下拉列表效果</h2> 当鼠标移动到导航位置的时候，出现一个列表，可以再次选择。 就像在电影网站里一样，鼠标移到某个分类，然后这个分类还能再次选择种类 思路： <ol> <li>一个div容器存放导航列表</li> <li>列表项由一个超链接和一个div容器构成</li> <li>div容器设置宽度100%，脱离文档流，使用绝对定位。调整左边框位置left=0；设置隐藏效果</li> <li>使用li:hover>div 使用子代选择器，当鼠标移动到列表项的时候，就使用设计。解除隐藏效果</li> </ol> <pre><code>.nev ul li:hover>.nev-list{ 当列表项上有鼠标悬浮，就触发设计 display: block; 取消隐藏 } .nev-list{ width: 100%; height: 200px; position: absolute; left: 0; display: none; 默认隐藏效果 } </code></pre> <h2>定位实操-图片上面定位文字</h2> 在图片上面显示文字，就像你收到消息的时候，手机应用图标上那个小红点 <ul> <li>.container ul li:nth-child(4n) 把列表项的第4列元素的右边距归零</li> <li>下面整个都是对浮动的文字设计</li> </ul> <pre><code class="prism language-html">.product-sign { position: absolute; 脱离文档流 top: 30px; 定位 left: 30px; 定位 display: block; 块级元素 width: 60px; height: 60px; line-height: 60px; 垂直居中 color: #fff; font-size: 16px; text-align: center; 水平居中 border-radius: 50%; 圆角效果 background-color: #ff64a6; } </code></pre> <h2>定位实操-照片墙</h2> 用到了C3的新特性，动画里面的旋转：transform：rotate(deg) deg是角度，顺时针十度就是10deg，逆时针十度就是-10deg 先定位才可以旋转 <h2>CSS3新特性</h2> <h3>圆角 border-radius</h3> 使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角” <ul> <li>border-radius 属性，可以使用以下规则： <ul> <li>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</li> <li>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</li> <li>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角</li> <li>一个值：四个圆角值相同</li> </ul> </li> </ul> 可以设置百分比，0-50%，0是直角效果，50%是圆。 也可以使用像素，0-50px，0是直角，50px是圆。 <h3>阴影</h3> <ul> <li> 盒阴影 box-shadow 向框添加一个或多个阴影。 </li> <li> 语法：<code>box-shadow: h-shadow v-shadow blur spread color inset;</code> <ul> <li>h-shadow 必选，水平阴影的位置</li> <li>v-shadow 必选，垂直阴影的位置</li> <li>blur 可选，模糊距离。单位px，值越大，阴影越模糊。</li> <li>spread 可选，阴影的尺寸</li> <li>color 可选，阴影的颜色</li> <li>inset 可选，外部引用修改为内部阴影</li> </ul> </li> <li> 三个方向的阴影效果 <ul> <li>因为前两个必选项，分别对应的是x轴y轴，也是偏移量，想要实现三个方向都有阴影，只需要把x或y设成0即可。</li> </ul> </li> <li> 四个方向阴影效果 <ul> <li>xy都设成0，然后使用模糊效果</li> </ul> </li> <li> 如果阴影效果不明显，使用第四个参数spread，设置阴影的尺寸。单位px </li> </ul> 盒阴影是阴影效果向盒子外模糊。 <ul> <li> 内阴影效果阴影向盒子中心模糊。 <ul> <li>和外阴影的设置方法一样，只需要把第六个参数写入</li> <li>语法：<code>box-shadow: 0 0 5px 5px red inset;</code></li> </ul> </li> <li> 字阴影 text-shadow 属性向文本设置阴影 </li> <li> 语法：<code>text-shadow: h-shadow v-shadow blur color;</code> <ul> <li>h-shadow 必选，水平阴影的位置</li> <li>v-shadow 必选，垂直阴影的位置</li> <li>blur 可选，模糊距离</li> <li>color 可选，阴影的颜色</li> </ul> </li> </ul> <h3>背景渐变</h3> CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度） <ul> <li> 语法：background: linear-gradient(direction, color-stop1, color-stop2, …); </li> <li> 使用background属性，使用linear-gradient处理。第一个参数是方向，后面是颜色节点 </li> <li> 不给方向的情况下，默认是从上到下 <ul> <li>direction的参数： <ul> <li>to right 往右渐变</li> <li>to left 往左</li> <li>to bottom 往下</li> <li>to top 往上</li> </ul> </li> </ul> </li> <li> 还可以是对角渐变，因为是上下左右四个方向。使用任意相邻的两个方向，就可以实现对角效果。右下角to right bottom。 </li> <li> 使用角度 <ul> <li>如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、tobottom right，等等）</li> <li>角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变</li> <li>0度是to top，然后顺时针使用角度。90deg是to right。</li> <li>一共是180度。角度往左边渐变就是负数了。-90deg是to left</li> <li>度的单位是deg，45度就是45deg</li> </ul> </li> <li> 之前学的图片上的标签，图片上面定位文字，实现渐变。background: linear-gradient(120deg,#ff3149,#ff64a6); </li> </ul> <h3>转换（变形)transform</h3> 转换的效果是让某个元素改变形状，大小和位置 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 <h4>2D</h4> <ul> <li>translate(x,y) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动</li> </ul> <code>.box { width: 100px; height: 80px; transform: translate(50px, 100px); }</code> 就是把当前元素重新找个地方放。两个参数是偏移量。 <ul> <li>rotate(angle) 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</li> </ul> <code>.box { width: 100px; height: 80px; transform: rotate(30deg); }</code> 就是之前实现照片墙的操作。把一个元素进行旋转。 <ul> <li>scale(x,y) 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数</li> </ul> 就是对xy轴进行乘法运算。 之前学浏览器字体设置的时候，知道默认最小字体是12px，说还可以小，需要使用特殊方法，说的就是现在。 缩放实现将Chrome默认12px缩小为6px。 <code>p{font-size: 12px; transform: scale(0.5);}</code> <ul> <li>skew方法两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜</li> </ul> <code>.box { width: 100px; height: 80px; transform: skew(30deg,20deg); }</code> <h4>3D</h4> CSS3 允许您使用 3D 转换来对元素进行格式化 <ul> <li>rotateX 围绕其在一个给定度数X轴旋转的元素</li> <li>transform: rotateX(120deg);</li> </ul> 向屏幕里面旋转，从上面往后倒的那种感觉，就是元素倒向屏幕后面。 <ul> <li> rotateY() 是从左往里面旋转 </li> <li> translate3d(x,y,z) <ul> <li>3D旋转，根据设定的xyz轴。进行旋转。</li> <li>把y值设为负数，整体元素有一个上移的效果，类似选中，或者鼠标移到按钮上面。</li> <li>如果是正数就是下移了。</li> </ul> </li> </ul> <h3>过渡</h3> CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 通过过渡 transition ，可以让web前端开发人员不需要 javascript 就可以实现简单的动画交互效果 <ul> <li>属性 <ul> <li>transition 简写属性，用于在一个属性中设置四个过渡属性</li> <li>transition-property 过渡属性：all|transition-property 选中需要使用过渡的元素</li> <li>transition-duration 定义过渡效果花费的时间，默认是0。</li> <li>transition-timing-function 过渡效果的时间曲线：ease|ease-in|ease-out|ease-in-out <ul> <li>对应上面的时间曲线：匀速，先慢后快，先快后慢，先慢再快再慢</li> </ul> </li> <li>transition-delay 规定过渡效果何时开始，默认是0。延时执行过渡的时间</li> </ul> </li> </ul> <pre><code class="prism language-html">.box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transition: width 2s ease 1s; 过渡设置，这里是改变宽度。如果想改变多个属性，比如高宽，就需要使用all } .box:hover{ 当鼠标悬浮时，下面的设置生效 width: 500px; 改变宽度的范围 } </code></pre> 上面这个代码实现的效果是，当鼠标悬浮到元素上时，等待1秒，元素宽度开始增大，增到500px，耗时两秒。一共耗时3秒。 当我们把鼠标移开的时候，也会耗时2秒，宽度从500变成100； 想要实现多个效果，同时改变宽高，需要使用transition: all 2s ease 1s; 使用all，可以实现多个属性发生改变。 就是我们之前写伪类属性的时候，比如鼠标悬浮操作等等。都是瞬间的事，有了这个过渡效果，是放慢了变换的速度。 transition的参数，至少有第一个参数，作用的元素。还有过渡时间，就是第二个参数。 <h3>动画</h3> 跟过渡的效果一样，但是更加灵活。可以调整的地方更多 过渡就是一种简单的动画。 动画是使元素从一种样式逐渐变化为另一种样式的效果 可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 过渡只能由一种状态变成另一状态。只能变化一次。而动画可以多次变化。 创建完动画之后，记得加上执行动画操作。 <ul> <li>@keyframes创建动画</li> </ul> <pre><code class="prism language-html">.box{ animation: anima 5s linear 5s infinite; } @keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } } </code></pre> name：动画名称，开发人员自己命名； percent：为百分比值，可以添加多个百分比值； <ul> <li> animation执行动画 </li> <li> 语法：<code>animation: name duration timing-function delay iteration-count direction;</code> <ul> <li>name 设置动画的名称</li> <li>duration 设置动画的持续时间</li> <li>timing-function 设置动画效果的速率（如下）</li> <li>delay 设置动画的开始时间（延时执行）</li> <li>iteration-count 设置动画循环的次数，infinite为无限次数的循环</li> <li>direction 设置动画播放的方向（如下）</li> <li>animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放</li> </ul> </li> <li> timing-function的参数 <ul> <li>ease 逐渐变慢（默认）</li> <li>linear 匀速</li> <li>ease-in 加速</li> <li>ease-out 减速</li> <li>ease-in-out 先加速后减速</li> </ul> </li> <li> direction参数 <ul> <li>normal 默认值为normal表示向前播放</li> <li>alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放</li> </ul> </li> </ul> <h3>绘制特殊图形</h3> <ul> <li>绘制三角形</li> </ul> 制作三角型使用的是border属性，内容区宽高值为0。 就是设置一个盒子，宽高都是0.只设置边框的颜色和边框厚度。还有边框设计是实线。 如果设计了四个边框，就会发现是四个直角三角形合成一个正方形。因此想要绘制三角形，只需要保留一条边即可。又因为一个多边形不能只存在一条边，所以把其他三个方向的边框颜色设为透明，既保留了边框，也不会妨碍绘制图形。 透明颜色是 border-right: 50px solid transparent; <ul> <li>绘制梯形</li> </ul> 绘制三角型时宽和高都是0像素，给它加100的宽度看看效果 <ul> <li>个人理解：边框是从元素表面向盒子外延申的像素。当一个盒子没有高宽的时候，盒子本身是一个点，设置边框厚度之后，从这个点向外延申像素。由于四个边框的地位是相等的，不会出现遮盖现象，所以对于一个正方形来说，四个边框平分正方形，也就是四个直角三角形。想要实现梯形效果，只需要给盒子设置宽或高，任意一个即可。刚刚盒子本身是一个点，现在盒子是一条线，对于线来说，平行于线的边框是最大的。垂直于线的边框是最小的。垂直于线的边框依旧是一个直角三角形，平行于线的边框就是梯形了。因为边框向外延申，所以边框的边框边长要比线长很多，也就是梯形的底边和顶边。</li> </ul> <h3>媒体查询（适配屏幕）</h3> <ul> <li>本质：预先设计不同设备的样式。通过meta获取用户使用屏幕的大小，然后根据不同的大小展示不同的样式。想要适配多少屏幕，就要设计多少样式。一般是手机，电脑，平板三种样式。</li> </ul> 媒体查询能使页面在不同在终端设备下达到不同的效果 媒体查询会根据设备的大小自动识别加载不同的样式 就是根据用户的屏幕去分配样式。 <ul> <li>设置meta标签</li> </ul> 使用设备的宽度作为视图宽度并禁止初始的缩放。在 head 标签里加入这个meta标签。 在新建一个html文件的时候，会加载一些初始框架，在head框架里面，有一下参数 <ul> <li>meta charset=“UTF-8” 页面的编码方式</li> <li>meta http-equiv=“X-UA-Compatible” contect=“IE=edge” 使用浏览器最新版本</li> <li><code><meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no"></code> <ul> <li>参数解释</li> <li>name=“viewport” 开始操作窗口</li> <li>width = device-width 宽度等于当前设备的宽度</li> <li>initial-scale 初始的缩放比例（默认设置为1.0）。就是不缩放，网页是多大元素，手机也是多大</li> <li>maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）</li> <li>user-scalable 用户是否可以手动缩放（默认设置为no）</li> </ul> </li> <li>这些参数没必要了解，在需要的时候，直接把这句话放进去就行。</li> </ul> 媒体查询语法 <pre><code class="prism language-html">@media screen and (max-width: 768px) { /* 设备小于768px加载样式 */ body{ background-color: red; } } @media screen and (max-width: 992px) and (min-width: 768px) { /* 设备小于768px但小于992px加载样式 */ body{ background-color: pink; } } @media screen and (min-width: 992px) { /* 设备大于992px加载样式 */ body{ background-color: green; } } </code></pre> 这是三个屏幕规格，设计了三个不同的样式body。 <h3>响应式布局-媒体查询的思维</h3> 本意是，让一套代码在多个设备同时显示 而且在不同的设备上显示不同的样式 <ul> <li>响应式布局的优缺点 <ul> <li>优点 <ul> <li>面对不同分辨率设备灵活性强</li> <li>能够快捷解决多设备显示适应问题</li> </ul> </li> <li>缺点 <ul> <li>兼容各种设备工作量大，效率低下</li> <li>代码累赘，会出现隐藏无用的元素，加载时间加长</li> </ul> </li> </ul> </li> </ul> 就是在设计好网页布局之后，在style下面再写一个style，使用meta标签识别屏幕大小，然后隐藏一些元素，就是使用display隐藏。网页就是display显示 目前标准是：手机屏幕768px，平板768-992，笔记本992-1240，大屏1240以上 <h3>栅格系统</h3> 把元素做成单元格的形式，设置盒子属性，根据不同设备，一行显示几个单元格。手机屏小一行就显示一个元素，平板是一行3个，笔记本电脑是一行6个，大屏幕是一行12个 需要引入CSS样式 <h3>多列</h3> 可以将文本内容设计成像报纸一样的多列布局 <ul> <li>创建多列 column-count 需要分割的列数 <ul> <li>column-count: 3;</li> </ul> </li> <li>列与列之间的间隙 column-gap <ul> <li>column-gap: 40px;</li> </ul> </li> <li>列边框 column-rule-style <ul> <li>column-rule-style: solid; 列与列间的边框样式</li> <li>column-rule-width 边框厚度</li> <li>column-rule-color 边框颜色</li> <li>column-rule 属性是 column-rule-* 所有属性的简写 <ul> <li>column-rule: 1px solid lightblue;</li> </ul> </li> </ul> </li> </ul> <h3>雪碧图</h3> CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去 <ul> <li>优点 <ul> <li>减少图片的字节</li> <li>减少网页的http请求，从而大大的提高页面的性能</li> </ul> </li> <li>原理 <ul> <li>通过background-image引入背景图片</li> <li>通过background-position把背景图片移动到自己需要的位置</li> </ul> </li> </ul> <h3>字体图标</h3> 我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题 去网上随便找一个图标库就行。阿里图标库就有很多免费的图标。 <ul> <li> 优点 <ul> <li>轻量性：加载速度快，减少http请求</li> <li>灵活性：可以利用CSS设置大小颜色等</li> <li>兼容性：网页字体支持所有现代浏览器，包括IE低版本</li> </ul> </li> <li> 使用字体图标 <ul> <li>注册账号并登录</li> <li>选取图标或搜索图标</li> <li>添加购物车</li> <li>下载代码</li> <li>解压缩包，有一个html文件，是使用说明</li> <li>选择 font-class 引用</li> </ul> </li> </ul> 图标太小，使用css设计的时候，如果不生效，看看选择器的优先级顺序 <h3>滑动门</h3> 当鼠标悬浮到列表的时候，出现一个新的列表展示内容的效果 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1904438239507312640"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(python全栈,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943993659967991808.htm" title="系统学习Python——并发模型和异步编程：进程、线程和GIL" target="_blank">系统学习Python——并发模型和异步编程：进程、线程和GIL</a> <div>分类目录：《系统学习Python》总目录在文章《并发模型和异步编程：基础知识》我们简单介绍了Python中的进程、线程和协程。本文就着重介绍Python中的进程、线程和GIL的关系。Python解释器的每个实例都是一个进程。使用multiprocessing或concurrent.futures库可以启动额外的Python进程。Python的subprocess库用于启动运行外部程序（不管使用何种</div> </li> <li><a href="/article/1943992776169418752.htm" title="Flask框架入门：快速搭建轻量级Python网页应用" target="_blank">Flask框架入门：快速搭建轻量级Python网页应用</a> 「已注销」 <a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令</div> </li> <li><a href="/article/1943991891796226048.htm" title="Python Flask 框架入门：快速搭建 Web 应用的秘诀" target="_blank">Python Flask 框架入门：快速搭建 Web 应用的秘诀</a> Python编程之道 <a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>PythonFlask框架入门：快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用？Flask作为“微框架”代表，凭借轻量、可扩展的特性，成为初学者和小型项目的首选。本文将从Flask的核心概念出发，结合生活化比喻、代码示例和实战案例，带你一步步掌握：如何用Flask搭建第一个Web应用？路由</div> </li> <li><a href="/article/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> Auscy <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943988487875260416.htm" title="python_虚拟环境" target="_blank">python_虚拟环境</a> 阿_焦 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>第一、配置虚拟环境：virtualenv（1）pipvirtualenv>安装虚拟环境包（2）pipinstallvirtualenvwrapper-win>安装虚拟环境依赖包（3）c盘创建虚拟目录>C:\virtualenv>配置环境变量【了解一下】：（1）如何使用virtualenv创建虚拟环境a、cd到C:\virtualenv目录下：b、mkvirtualenvname>创建虚拟环境nam</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943985208218939392.htm" title="Python爱心光波" target="_blank">Python爱心光波</a> <div>系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Python爱心光波②7Python满天繁星8Python五彩气球9Python白色飘雪10Pyt</div> </li> <li><a href="/article/1943985208697090048.htm" title="Python流星雨" target="_blank">Python流星雨</a> Want595 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录系列文章写在前面技术需求完整代码代码分析1.模块导入2.画布设置3.画笔设置4.颜色列表5.流星类(Star)6.流星对象创建7.主循环8.流星运动逻辑9.视觉效果10.总结写在后面系列文章序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python</div> </li> <li><a href="/article/1943983065500020736.htm" title="Python之七彩花朵代码实现" target="_blank">Python之七彩花朵代码实现</a> PlutoZuo <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python之七彩花朵代码实现文章目录Python之七彩花朵代码实现下面是一个简单的使用Python的七彩花朵。这个示例只是一个简单的版本，没有很多高级功能，但它可以作为一个起点，你可以在此基础上添加更多功能。importturtleastuimportrandomasraimportmathtu.setup(1.0,1.0)t=tu.Pen()t.ht()colors=['red','skybl</div> </li> <li><a href="/article/1943982902379343872.htm" title="Python 脚本最佳实践2025版" target="_blank">Python 脚本最佳实践2025版</a> <div>前文可以直接把这篇文章喂给AI,可以放到AI角色设定里,也可以直接作为提示词.这样,你只管提需求,写脚本就让AI来.概述追求简洁和清晰：脚本应简单明了。使用函数(functions)、常量(constants)和适当的导入(import)实践来有逻辑地组织你的Python脚本。使用枚举(enumerations)和数据类(dataclasses)等数据结构高效管理脚本状态。通过命令行参数增强交互性</div> </li> <li><a href="/article/1943982558085705728.htm" title="（Python基础篇）了解和使用分支结构" target="_blank">（Python基础篇）了解和使用分支结构</a> EternityArt <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录一、引言二、Python分支结构的类型与语法（一）if语句（单分支）（二）if-else语句（双分支）（三）if-elif-else语句（多分支）三、分支结构的应用场景（一）提示用户输入用户名，然后再提示输入密码，如果用户名是“admin”并且密码是“88888”则提示正确，否则，如果用户名不是admin还提示用户用户名不存在,（二）提示用户输入用户名，然后再提示输入密码，如果用户名是“adm</div> </li> <li><a href="/article/1943982558555467776.htm" title="（Python基础篇）循环结构" target="_blank">（Python基础篇）循环结构</a> EternityArt <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、什么是Python循环结构？循环结构是编程中重复执行代码块的机制。在Python中，循环允许你：1.迭代处理数据：遍历列表、字典、文件内容等。2.自动化重复任务：如批量处理数据、生成序列等。3.控制执行流程：根据条件决定是否继续或终止循环。二、为什么需要循环结构？假设你需要打印1到100的所有偶数：没有循环：需手动编写100行print()语句。print(0)print(2)print(4)</div> </li> <li><a href="/article/1943982559000064000.htm" title="（Python基础篇）字典的操作" target="_blank">（Python基础篇）字典的操作</a> EternityArt <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、引言在Python编程中，字典（Dictionary）是一种极具灵活性的数据结构，它通过“键-值对”（key-valuepair）的形式存储数据，如同现实生活中的字典——通过“词语（键）”快速查找“释义（值）”。相较于列表和元组的有序索引访问，字典的优势在于基于键的快速查找，这使得它在处理需要频繁通过唯一标识获取数据的场景中极为高效。掌握字典的操作，能让我们更高效地组织和管理复杂数据，是Pyt</div> </li> <li><a href="/article/1943981927514042368.htm" title="Python七彩花朵" target="_blank">Python七彩花朵</a> Want595 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Python爱心光波②7Python满天繁星8Python五彩气球9Python白色飘雪10Pyt</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943975627472302080.htm" title="用OpenCV标定相机内参应用示例（C++和Python）" target="_blank">用OpenCV标定相机内参应用示例（C++和Python）</a> <div>下面是一个完整的使用OpenCV进行相机内参标定（CameraCalibration）的示例，包括C++和Python两个版本，基于棋盘格图案标定。一、目标：相机标定通过拍摄多张带有棋盘格图案的图像，估计相机的内参：相机矩阵（内参）K畸变系数distCoeffs可选外参（R,T）标定精度指标（如重投影误差）二、棋盘格参数设置（根据自己的棋盘格设置）：棋盘格角点数：9x6（内角点，9列×6行）；每个</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> 老马聊技术 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943974492640440320.htm" title="Anaconda 详细下载与安装教程" target="_blank">Anaconda 详细下载与安装教程</a> <div>Anaconda详细下载与安装教程1.简介Anaconda是一个用于科学计算的开源发行版，包含了Python和R的众多常用库。它还包括了conda包管理器，可以方便地安装、更新和管理各种软件包。2.下载Anaconda2.1访问官方网站首先，打开浏览器，访问Anaconda官方网站。2.2选择适合的版本在页面中，你会看到两个主要的下载选项：AnacondaIndividualEdition：适用于</div> </li> <li><a href="/article/1943972473032732672.htm" title="python中 @注解及内置注解的使用方法总结以及完整示例" target="_blank">python中 @注解及内置注解的使用方法总结以及完整示例</a> 慧一居士 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>在Python中，装饰器（Decorator）使用@符号实现，是一种修改函数/类行为的语法糖。它本质上是一个高阶函数，接受目标函数作为参数并返回包装后的函数。Python也提供了多个内置装饰器，如@property、@staticmethod、@classmethod等。一、核心概念装饰器本质：@decorator等价于func=decorator(func)执行时机：在函数/类定义时立即执行装饰</div> </li> <li><a href="/article/1943971717185597440.htm" title="Python中的静态方法和类方法详解" target="_blank">Python中的静态方法和类方法详解</a> <div>在Python中，`@staticmethod`和`@classmethod`是两种装饰器，它们用于定义类中的方法，但是它们的行为和用途有所不同。###@staticmethod`@staticmethod`装饰器用于定义一个静态方法。静态方法不接收类或实例的引用作为第一个参数，因此它不能访问类的状态或实例的状态。静态方法可以看作是与类关联的普通函数，但它们可以通过类名直接调用。classMath</div> </li> <li><a href="/article/1943971211121848320.htm" title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a> 前端视界 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div> </li> <li><a href="/article/1943969448046161920.htm" title="Python中类静态方法：@classmethod/@staticmethod详解和实战示例" target="_blank">Python中类静态方法：@classmethod/@staticmethod详解和实战示例</a> <div>在Python中，类方法(@classmethod)和静态方法(@staticmethod)是类作用域下的两种特殊方法。它们使用装饰器定义，并且与实例方法(deffunc(self))的行为有所不同。1.三种方法的对比概览方法类型是否访问实例(self)是否访问类(cls)典型用途实例方法✅是❌否访问对象属性类方法@classmethod❌否✅是创建类的替代构造器，访问类变量等静态方法@stati</div> </li> <li><a href="/article/1943968314044772352.htm" title="Python多版本管理与pip升级全攻略：解决冲突与高效实践" target="_blank">Python多版本管理与pip升级全攻略：解决冲突与高效实践</a> 码界奇点 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/python3.11/1.htm">python3.11</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E4%BB%A3%E7%A0%81%E7%AE%A1%E7%90%86/1.htm">源代码管理</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E7%8E%B0%E5%AE%9E/1.htm">虚拟现实</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E5%80%92%E7%BD%AE%E5%8E%9F%E5%88%99/1.htm">依赖倒置原则</a> <div>引言Python作为最流行的编程语言之一，其版本迭代速度与生态碎片化给开发者带来了巨大挑战。据统计，超过60%的Python开发者需要同时维护基于Python3.6+和Python2.7的项目。本文将系统解决以下核心痛点：如何安全地在同一台机器上管理多个Python版本pip依赖冲突的根治方案符合PEP标准的生产环境最佳实践第一部分：Python多版本管理核心方案1.1系统级多版本共存方案Wind</div> </li> <li><a href="/article/1943967555555225600.htm" title="基于Python的健身数据分析工具的搭建流程day1" target="_blank">基于Python的健身数据分析工具的搭建流程day1</a> weixin_45677320 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>基于Python的健身数据分析工具的搭建流程分数据挖掘、数据存储和数据分析三个步骤。本文主要介绍利用Python实现健身数据分析工具的数据挖掘部分。第一步：加载库加载本文需要的库，如下代码所示。若库未安装，请按照python如何安装各种库（保姆级教程）_python安装库-CSDN博客https://blog.csdn.net/aobulaien001/article/details/133298</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a> ui设计前端开发老司机 <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div> </li> <li><a href="/article/1943960369345130496.htm" title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</a> 可曾去过倒悬山 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div> </li> <li><a href="/article/1943952054795956224.htm" title="seaborn又一个扩展heatmapz" target="_blank">seaborn又一个扩展heatmapz</a> qq_21478261 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">Python可视化</a><a class="tag" taget="_blank" href="/search/matplotlib/1.htm">matplotlib</a> <div>推荐阅读：Pythonmatplotlib保姆级教程嫌Matplotlib繁琐？试试Seaborn！</div> </li> <li><a href="/article/1943951549751422976.htm" title="NGS测序基础梳理01-文库构建（Library Preparation）" target="_blank">NGS测序基础梳理01-文库构建（Library Preparation）</a> qq_21478261 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9%E4%BF%A1%E6%81%AF/1.htm">生物信息</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9%E5%AD%A6/1.htm">生物学</a> <div>本文介绍Illumina测序平台文库构建（LibraryPreparation）步骤，文库结构。写作时间：2020.05。推荐阅读：10W字《Python可视化教程1.0》来了！一份由公众号「pythonic生物人」精心制作的PythonMatplotlib可视化系统教程，105页PDFhttps://mp.weixin.qq.com/s/QaSmucuVsS_DR-klfpE3-Q10W字《Rg</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943943735205228544.htm" title="Python 常用内置函数详解（七）：dir()函数——获取当前本地作用域中的名称列表或对象的有效属性列表" target="_blank">Python 常用内置函数详解（七）：dir()函数——获取当前本地作用域中的名称列表或对象的有效属性列表</a> <div>目录一、功能二、语法和示例一、功能dir()函数获取当前本地作用域中的名称列表或对象的有效属性列表。二、语法和示例dir()函数有两种形式，如果没有实参，则返回当前本地作用域中的名称列表。如果有实参，它会尝试返回该对象的有效属性列表。如果对象有一个名为__dir__()的方法，那么该方法将被调用，并且必须返回一个属性列表。dir()函数的语法格式如下：C:\Users\amoxiang>ipyth</div> </li> <li><a href="/article/101.htm" title="数据采集高并发的架构应用" target="_blank">数据采集高并发的架构应用</a> 3golden <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>问题的出发点：最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。 &n</div> </li> <li><a href="/article/228.htm" title="不停止 MySQL 服务增加从库的两种方式" target="_blank">不停止 MySQL 服务增加从库的两种方式</a> brotherlamp <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a> <div>现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku</div> </li> <li><a href="/article/355.htm" title="Quartz——SimpleTrigger触发器" target="_blank">Quartz——SimpleTrigger触发器</a> eksliang <a class="tag" taget="_blank" href="/search/SimpleTrigger/1.htm">SimpleTrigger</a><a class="tag" taget="_blank" href="/search/TriggerUtils/1.htm">TriggerUtils</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl</div> </li> <li><a href="/article/482.htm" title="Informatica应用（1）" target="_blank">Informatica应用（1）</a> 18289753290 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/lookup/1.htm">lookup</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6/1.htm">组件</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a> <div>1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置（比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要</div> </li> <li><a href="/article/609.htm" title="python 获取图片验证码中文字" target="_blank">python 获取图片验证码中文字</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>根据现成的开源项目 http://code.google.com/p/pytesser/改写在window上用easy_install安装不上看了下源码发现代码很少于是就想自己改写一下添加支持网络图片的直接解析 #coding:utf-8 #import sys #reload(sys) #sys.s</div> </li> <li><a href="/article/736.htm" title="AJAX" target="_blank">AJAX</a> 永夜-极光 <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担 2.代码结构: <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... </div> </li> <li><a href="/article/863.htm" title="创业OR读研" target="_blank">创业OR读研</a> 随便小屋 <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A/1.htm">创业</a> <div> 现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。研一的生活刚刚过去两个月，我们学校主要的是</div> </li> <li><a href="/article/990.htm" title="需求做得好与坏直接关系着程序员生活质量" target="_blank">需求做得好与坏直接关系着程序员生活质量</a> aijuans <a class="tag" taget="_blank" href="/search/IT+%E7%94%9F%E6%B4%BB/1.htm">IT 生活</a> <div> 这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完</div> </li> <li><a href="/article/1117.htm" title="如何定义和区分高级软件开发工程师" target="_blank">如何定义和区分高级软件开发工程师</a> aoyouzi <div>在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。　　初</div> </li> <li><a href="/article/1244.htm" title="Servlet的请求与响应" target="_blank">Servlet的请求与响应</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/get%E6%8F%90%E4%BA%A4/1.htm">get提交</a><a class="tag" taget="_blank" href="/search/java%E5%A4%84%E7%90%86post%E6%8F%90%E4%BA%A4/1.htm">java处理post提交</a> <div> Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介 1,Http的请求方式(get ,post); 客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法, http的get方式 servlet就是都doGet(</div> </li> <li><a href="/article/1371.htm" title="web.xml配置详解之listener" target="_blank">web.xml配置详解之listener</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a> <div>一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener> 二.作用该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响</div> </li> <li><a href="/article/1498.htm" title="Web页面性能优化（yahoo技术）" target="_blank">Web页面性能优化（yahoo技术）</a> Bill_chen <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Yahoo/1.htm">Yahoo</a> <div>1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文</div> </li> <li><a href="/article/1625.htm" title="【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序" target="_blank">【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序</a> bit1129 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>游标游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括声明打开循环抓去一定数目的文档直到结果集中的所有文档已经抓取完关闭游标游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize</div> </li> <li><a href="/article/1752.htm" title="ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法" target="_blank">ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法</a> 白糖_ <a class="tag" taget="_blank" href="/search/ORA-12514/1.htm">ORA-12514</a> <div> 今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息： # listener.ora Network Configuration File: D:\database\Oracle\net</div> </li> <li><a href="/article/1879.htm" title="Eclipse 问题 A resource exists with a different case" target="_blank">Eclipse 问题 A resource exists with a different case</a> bozch <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&</div> </li> <li><a href="/article/2006.htm" title="编程之美-小飞的电梯调度算法" target="_blank">编程之美-小飞的电梯调度算法</a> bylijinnan <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class AptElevator { /** * 编程之美小飞电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪</div> </li> <li><a href="/article/2133.htm" title="SQL注入相关概念" target="_blank">SQL注入相关概念</a> chenbowen00 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。首先让我们了解什么时候可能发生SQ</div> </li> <li><a href="/article/2260.htm" title="[光与电]光子信号战防御原理" target="_blank">[光与电]光子信号战防御原理</a> comsci <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86/1.htm">原理</a> <div> 无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢? 我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下根据光</div> </li> <li><a href="/article/2387.htm" title="oracle 11g新特性:Pending Statistics" target="_blank">oracle 11g新特性:Pending Statistics</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dbms_stats/1.htm">dbms_stats</a> <div>oracle 11g新特性:Pending Statistics 转从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。在 11g 之前的版本中，D</div> </li> <li><a href="/article/2514.htm" title="快速理解RequireJs" target="_blank">快速理解RequireJs</a> dengkane <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/requirejs/1.htm">requirejs</a> <div>RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能：声明不同js文件之间的依赖可以按需、并行、延时载入js库可以让我们的代码以模块化的方式组织初看起来并不复杂。在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to</div> </li> <li><a href="/article/2641.htm" title="C语言学习四流程控制if条件选择、for循环和强制类型转换" target="_blank">C语言学习四流程控制if条件选择、for循环和强制类型转换</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu</div> </li> <li><a href="/article/2768.htm" title="dictionary的使用要注意" target="_blank">dictionary的使用要注意</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username", </div> </li> <li><a href="/article/2895.htm" title="Android 中的资源访问(Resource)" target="_blank">Android 中的资源访问(Resource)</a> finally_m <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/String/1.htm">String</a><a class="tag" taget="_blank" href="/search/drawable/1.htm">drawable</a><a class="tag" taget="_blank" href="/search/color/1.htm">color</a> <div> 简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生</div> </li> <li><a href="/article/3022.htm" title="Spring使用Cache、整合Ehcache" target="_blank">Spring使用Cache、整合Ehcache</a> 234390216 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%40Cacheable/1.htm">@Cacheable</a> <div>Spring使用Cache 从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的</div> </li> <li><a href="/article/3149.htm" title="当druid遇上oracle blob(clob)" target="_blank">当druid遇上oracle blob(clob)</a> jackyrong <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】用Druid连接池，通过JDBC往Oracle数据库的</div> </li> <li><a href="/article/3276.htm" title="easyui datagrid pagination获得分页页码、总页数等信息" target="_blank">easyui datagrid pagination获得分页页码、总页数等信息</a> ldzyz007 <div>var grid = $('#datagrid'); var options = grid.datagrid('getPager').data("pagination").options; var curr = options.pageNumber; var total = options.total; var max =</div> </li> <li><a href="/article/3403.htm" title="浅析awk里的数组" target="_blank">浅析awk里的数组</a> nigelzeng <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/awk/1.htm">awk</a> <div>awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。有这么一组数据： abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1</div> </li> <li><a href="/article/3530.htm" title="搭建 CentOS 6 服务器(6) - TigerVNC" target="_blank">搭建 CentOS 6 服务器(6) - TigerVNC</a> rensanning <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser</div> </li> <li><a href="/article/3657.htm" title="Spring 数据库连接整理" target="_blank">Spring 数据库连接整理</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>1、数据库连接jdbc.properties配置详解　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举　　接下来，详细配置代码如下：　　 Spring连接池 </div> </li> <li><a href="/article/3784.htm" title="Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常" target="_blank">Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常</a> xp9802 <div>用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常导入包 jaxen-1.1-beta-6.jar 解决; &nb</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>