纳米606

HTML5+CSS3

HTML

1. 浏览器内核

五大浏览器四大内核
- 浏览器：IE(edge), 火狐， Safari, chrome, Opera
- 内核： Trident, Gecko, webkit, chromium/Blink, blink

注1: 提到Chrome浏览器，一般人会认为使用的Webkit内核(移动设备多)，这种说法不完全确。Chrome发布于2008年，使用的渲染内核是Chromium，它是fork自Webkit，但把Webkit梳理得更有条理可读性更高，效率提升明显。2013年，由于Webkit2和Chromium在沙箱设计上的冲突，谷歌联手Opera自研和发布了Blink引擎，逐步脱离了Webkit的影响。所以，可以这么认为：Chromium扩展自Webkit止于Webkit2，其后Chrome切换到了Blink引擎。另外，Chrome的JS引擎使用的V8引擎，应该算是最著名和优秀的开源JS引擎，大名鼎鼎的Node.js就是选用V8作为底层架构。_

注2: Opera在2013年V12.16之前使用的是Opera Software公司开发的Presto引擎，之后连同谷歌研发和选择Blink作为Opera浏览器的排版内核_

2. web 标准

结构（html）, 表现（css）, 行为（JavaScript）

3. 工具

3.1 vscode

vscode 插件
- vscode-icons 各种漂亮的图标
- vscode-fileheader 头部注释 ctrl+alt+i
- Visual Studio IntelliCode 智能提示
- Regex Previewer 实时预览正则
- Prettier - Code formatter 格式化代码ctrl+shift+p
- Path Intellisense 智能路径
- Path Autocomplete 自动感知目录
- open in browser 启动浏览器
- JavaScript (ES6) code snippets ES6智能提示
- HTML Snippets 智能提示HTML标签及含义
- HTML CSS Support 智能提示CSS类名及ID
- Highlight Matching Tag 高亮显示HTML标签
- Guides 代码参考线
- GitLens — Git supercharged 代码参考线
- ESLint JS语法纠错
- CSScomb CSS书写顺序 Ctrl + Shift + P
- Color Highlight 直观的看见css定义的颜色
- Bracket Pair Colorizer 成对的彩色括号
- Auto Rename Tag 自动修改成对HTML标签
- Auto Close Tag 自动开/闭HTML/XML标签
- Vetur Vetur —— 语法高亮、智能感知、Emmet等
  包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

3.2 sublime

sublime初始安装
- 以管理员运行sublime,按Ctrl+esc调出sublime text的console
粘贴 import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ + ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ', ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
命令面板简单操作
- 重启再preferrnces中最下面由各package Control就是安装成功
- ctrl + shift + p调出命令窗口，输入install package
- 删除插件remove，选择Package: Remove package选项回车

激活

点击Help–>Enter License

ZYNGA INC.
50 User License
EA7E-811825
927BA117 84C9300F 4A0CCBC4 34A56B44
985E4562 59F2B63B CCCFF92F 0E646B83
0FD6487D 1507AE29 9CC4F9F5 0A6F32E3
0343D868 C18E2CD5 27641A71 25475648
309705B3 E468DDC4 1B766A18 7952D28C
E627DDBA 960A2153 69A2D98A C87C0607
45DC6049 8C04EC29 D18DFA40 442C680B
1342224D 44D90641 33A3B9F2 46AADB8F

然后就会温馨提示升级注册码，点击取消

插件
- 插件emmet 快速编写html/css
- HTML5 插件
- SublimeCodeIntel代码提示
快捷键与设置
- 分屏 alt + shift + 1,2,3,4,5,8,9(单屏，2竖屏，3竖屏，4竖屏， 2横屏，3横屏，分4屏)
- 取消右边代码缩略图 view - hideMiniMap
- ctrl + enter 下一行插入
- ctrl + shift + enter上一行插入
- shift + ctrl + [ 折叠代码块
- shift + ctrl + ] 打开代码块
- ctrl + k + 0 展开所有的代码块
- ctrl + alt + ↑↓ 添加多行光标，同时编辑多行
- ctrl + shift + L 选中代码同时编辑
- ctrl + f 搜索
- ctrl + g 输入 :xx(冒号与所在的行)
自定义快捷键
ctrl + shift + p 输入key，选择preferences: key Bindings,找到快捷键的代码，复制放到右边，该快捷键就行
- ctrl + down 复制到下一行
- alt + up 向上移动代码
- alt + down 向下移动代码
- ctrl + d 删除整行
问题
- There are no packages available for installation
  解决:打开Sublime Text,然后点击Preferences->Browse Packages…,进入Sublime Text的packages的目录,然后将文件channel_v3.json(网盘有)拷贝到目录文件User旁边,接着修改Package Control的用户配置，点击Preferences->Package Settings->Package Control->Settings – User，新增或者修改”channels”的配置信息，其路径为channel_v3.json文件的路径：

"channels":
[
   "C:\\Users\\AilsonJack\\AppData\\Roaming\\Sublime Text 3\\Packages\\channel_v3.json"
]
    重启就OK了

4. HTML

4.1 HTML基本结构

HTML是超文本标记语言(Hyper Text Markup Language)用来描述网页的一种语言
HTML不是编程语言，而是一种标记语言

4.2 XHTML

XHTML是更严格更纯净的HTML代码
XHTML指可扩展超文本标记语言(Extensible HyperText Markup Language)
XHTML的目标是取代HTML
XHTML与HTML4.01几乎相同
XHTML是作为一种XML应用被重心定义的HTML
XHTML是一个w3c的标准
XHTML得到所有浏览器的支持

4.3 HTML头部

标签包含所有的头部标签

head区域标签
- </p> <ul> <li> <p>网站名(产品名) - 网站介绍</p> </li> <li> <blockquote> <p>小米商城 - 小米9 Pro、小米MIX Alpha、Redmi Note 8，小米电视官方网站</p> <p>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</p> </blockquote> </li> <li> <p>定义浏览器工具栏的标题</p> </li> <li> <p>在网页添加到收藏夹时,显示在收藏夹中的标题</p> </li> <li> <p>显示在搜索引擎结果页面标题</p> </li> </ul> </li> <li> <p><style></p> <ul> <li>定义HTML样式引用地址</li> <li>@import指令: @import url(css1.css); 必须放在其他CSS的前面,链接的双引号可选</li> </ul> </li> <li> <p><meta></p> <ul> <li>被用于页面的描述,关键词,文档的作者,最后修改的时间和其他元素</li> <li>为搜索引擎定义关键字 6-8个关键字 <ul> <li><meta name = “keywords” content = “HTML,CSS,XML,XHML,JavaScript/”></li> </ul> </li> <li>为网页定义描述内容,不超过120个汉字 <ul> <li><meta name = “description” content = “Free Web tutorials on HTML, CSS, XML”></li> </ul> </li> <li>定义网页的作者 <ul> <li><meta name = “author” content = “userName”></li> </ul> </li> </ul> </li> <li> <p><link> 链接外部样式表</p> <ul> <li>rel(relation) = “icon” 规定文档与被链接文档之间的关系,这个是图片关系,可自定义,一般stylesheet <ul> <li>alternate stylesheet仅当拥护自己选择,文档才会使用<strong>候选样式表</strong>渲染</li> <li>候选样式表在浏览器–>查看–> 页面样式–>就会有选项,我没有找到</li> </ul> </li> <li>title = “Default”,一旦rel的stylesheet的link元素设置了title就是<strong>首选样式表</strong>,它要优于候选样式表,显示文档默认使用,如果有一组则会触发一个,不设置标题则为<strong>永久样式表</strong></li> <li>sizes = "xx * xx"规定链接的尺寸</li> <li>href = “… .cn” : 链接地址或路径</li> <li>type = “text/css”/“text/JavaScript”: 规定被链接的类型</li> <li>charset = "utf-8"规定被链接文档的字符编码方式(HTML5不支持)</li> <li>media,它的值是一个或多个多媒体描述符(media descriptor),指明媒体的类型和具有的功能,多个多媒体类型与逗号隔开</li> <li><link charset = “utf-8” rel = “stylesheet” type = “text/css” href = “…/CSS/页面CSS.css”></li> </ul> </li> <li> <p><script></p> <ul> <li>async 规定异步执行脚本（仅适用于外部脚本）</li> <li>defer 延迟脚本</li> <li><script type = “text/javascript”></li> <li><script charset=“utf-8” src=“https://www.baidu.com/” async = “async”></script></li> </ul> </li> <li> <p><base></p> <ul> <li>为页面上所有链接规定默认地址或默认目标(target)</li> <li><base href = “www.baidu.com” target="_blank _self _parent _top"></li> </ul> </li> </ul> </li> </ul> <h3>4.4 排版标签</h3> <blockquote> <p>h$(1-6) ,p , hr, br ,div ,space</p> </blockquote> <h4>4.4.1 标题标签</h4> <blockquote> <p>h1 - h6文字逐渐变小，但是字体加粗了；一般用于标题，h1文字最大，一般用于主标题</p> </blockquote> <p>**注：**01标题demo.html里面有示例</p> <h4>4.4.2 段落标签</h4> <blockquote> <p><p> 内容区域 </p> 文章分段，属于双标签</p> </blockquote> <h4>4.4.3 水平线标签</h4> <blockquote> <p><hr /> 属于单标签</p> </blockquote> <h4>4.4.4 换行标签</h4> <blockquote> <p><br /> 属于单标签</p> </blockquote> <p>**注意：**换行标签与段落标签的区别，换行标签，另起一行，上下行间隔小；段落标签，另起一段，上下换大一些</p> <h4>4.4.5 div和span标签</h4> <blockquote> <p>div和span诗没有语义的，div属于块元素；span属于行内元素（内联元素）</p> </blockquote> <h3>4.5 HTML格式化</h3> <blockquote> <p><b></b> <strong></strong> 文字加粗(XHTML推荐strong)<br> <i></i> <em></em> 文字倾斜（XHTML推荐em）<br> <s></s> <del></del> 文字加删除线，不赞成使用s,使用del代替<br> <u><\u> <ins><\ins> 为名字加下划线，不赞成使用u，使用样式ins代替</p> </blockquote> <p><strong>注意：</strong> <b>只是单纯的加粗；<strong>除了加粗还有强调语句</p> <table> <thead> <tr> <th align="center">HTML</th> <th align="left">格式化标签</th> <th align="center">HTML</th> <th align="left">引用引文标签</th> <th align="center">HTML</th> <th align="left">计算机输出标签</th> </tr> </thead> <tbody> <tr> <td align="center"><b></td> <td align="left">定义粗文本</td> <td align="center"><code></td> <td align="left">定义计算机代码</td> <td align="center"><abbr></td> <td align="left">定义缩写</td> </tr> <tr> <td align="center"><big></td> <td align="left">定义粗文本</td> <td align="center"><kdb></td> <td align="left">定义键盘码</td> <td align="center"><acronym></td> <td align="left">定义首字母缩写</td> </tr> <tr> <td align="center"><em></td> <td align="left">定义着重文字</td> <td align="center"><samp></td> <td align="left">定义计算机代码样本</td> <td align="center"><address></td> <td align="left">定义地址</td> </tr> <tr> <td align="center"><i></td> <td align="left">定义倾斜文字</td> <td align="center"><tt></td> <td align="left">定义计算机代码</td> <td align="center"><bdo></td> <td align="left">定义文字方向</td> </tr> <tr> <td align="center"><small></td> <td align="left">定义小号文字</td> <td align="center"><var></td> <td align="left">定义变量</td> <td align="center"><blockquote></td> <td align="left">定义长的引用</td> </tr> <tr> <td align="center"><strong></td> <td align="left">定义加重语句</td> <td align="center"><pre></td> <td align="left">定义预格式文本</td> <td align="center"><q></td> <td align="left">定义短的引用</td> </tr> <tr> <td align="center"><sub></td> <td align="left">定义下标字</td> <td align="center"></td> <td align="left"></td> <td align="center"><cite></td> <td align="left">定义引用引证</td> </tr> <tr> <td align="center"><sup></td> <td align="left">定义上标字</td> <td align="center"></td> <td align="left"></td> <td align="center"><dfn></td> <td align="left">定义一个定义项目</td> </tr> <tr> <td align="center"><ins></td> <td align="left">插入字</td> <td align="center"></td> <td align="left"></td> <td align="center"></td> <td align="left"></td> </tr> <tr> <td align="center"><del></td> <td align="left">定义删除字</td> <td align="center"></td> <td align="left"></td> <td align="center"></td> <td align="left"></td> </tr> </tbody> </table> <p><span><strong>注：</strong>01标题demo.html里面有pre的示例与解释</span></p> <h3>4.6 标签属性</h3> <p><标签名属性1 = “属性值1” 属性2 = “属性值2”…>内容</标签名></p> <pre><code class="prism language-HTML"><p width = "20px" height = "30px" border ="1">I</p> </code></pre> <h3>4.7 HTML图像</h3> <blockquote> <p>语法： <image src = “url” /></p> </blockquote> <table> <thead> <tr> <th align="left">属性</th> <th align="left">属性值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">src</td> <td align="left">URL</td> <td align="left">图片路径</td> </tr> <tr> <td align="left">alt</td> <td align="left">文本</td> <td align="left">图像不能显示时替换的文本</td> </tr> <tr> <td align="left">title</td> <td align="left">文本</td> <td align="left">鼠标悬浮图片显示的信息</td> </tr> <tr> <td align="left">width</td> <td align="left">像素(XHTML不支持百分比)</td> <td align="left">设置图片的宽度</td> </tr> <tr> <td align="left">height</td> <td align="left">像素(XHTML不支持百分比)</td> <td align="left">是指图片的高度</td> </tr> <tr> <td align="left">border</td> <td align="left">像素</td> <td align="left">设置图片边框</td> </tr> </tbody> </table> <h3>4.8 HTML链接</h3> <blockquote> <p>语法：<a href = “跳转目标” target = “目标窗口弹出的方式”>Link text</a></p> </blockquote> <ul> <li>通过a标签在HTML中创建链接,有两种方式 <ul> <li>方式一: 通过href属性-创建指向另一个文档的链接</li> <li>targer:窗口弹出方式 <ul> <li>-blank: 新页面打开</li> <li>-self: 在原窗口打开(默认)</li> <li>-parent: 父级窗口打开,如果,没有父级窗口就和_self一样</li> <li>-top: 将会清除所有包含子框架,并将文档整入整个浏览器中</li> </ul> </li> <li>方式二: 通过name属性-创建文档内的书签(跳)</li> </ul> </li> </ul> <h4>4.8.1 链接与target</h4> <ul> <li><a></li> <li>href属性: 创建指向另一个文档链接(#空链接)/路径，</li> <li>name: 创建文档内标签</li> </ul> <blockquote> <p><a href = “url” target = “_blank”>Link text</a></p> </blockquote> <pre><code class="prism language-HTML"><a href = "https://www.baidu.com/">百度</a> </code></pre> <h4>4.8.2 name || id属性</h4> <p>name(id)属性规定锚: 使用锚我们可以创建直接跳至该命名的锚的链接,这样就无须滚动了,比如商场向下滚动,会有个回到顶部的箭头</p> <blockquote> <p><a name = “tips”>锚(显示页面上的文本)<br> <a name = “#tips”>回到顶部</p> </blockquote> <pre><code class="prism language-HTML"><a id = "tips">123</a> <a href = "#tips" target = "_blank">456</a>  <a href="http://www.w3school.com.cn/html/html_links.asp/#tips">有用的提示</a>  </code></pre> <p><strong>注意</strong>: 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”</p> <h3>4.9 注释</h3> <pre><code class="prism language-HTML"> 内容区  </code></pre> <h3>4.10 路径</h3> <blockquote> <p>路径分为相对路径和绝对路径<br> 相对路径: 相对当前的文件的路径， …/上一级<br> 绝对路径：从盘符开始详细的指定文件</p> </blockquote> <h3>4.11 HTML表格</h3> <table> <thead> <tr> <th align="center">表格标签</th> <th align="left">标签含义</th> </tr> </thead> <tbody> <tr> <td align="center"><table></td> <td align="left">定义表格</td> </tr> <tr> <td align="center"><tr></td> <td align="left">定义表格行</td> </tr> <tr> <td align="center"><th></td> <td align="left">定义表格表头,内容居中加粗</td> </tr> <tr> <td align="center"><td></td> <td align="left">定义表格单元</td> </tr> <tr> <td align="center"><caption></td> <td align="left">定义表格标题，在表格上面内容相对于居中</td> </tr> <tr> <td align="center"><colgroup></td> <td align="left">定义表格列的组</td> </tr> <tr> <td align="center"><col></td> <td align="left">用于表格的属性</td> </tr> <tr> <td align="center"><thead></td> <td align="left">定义表格的页眉</td> </tr> <tr> <td align="center"><tbody></td> <td align="left">定义表格的主体</td> </tr> <tr> <td align="center"><tfoot></td> <td align="left">定义表格的页脚,一般总结</td> </tr> </tbody> </table> <ul> <li><colgroup span = “6” width = “100px”> </li> <li><colgroup span = “1” width = “200px”> <ul> <li><col width = “100px”></li> <li><col width = “100px”></li> <li><col width = “100px”></li> <li><col width = “100px”></li> <li><col width = “100px”></li> <li><col width = “100px”></li> <li><col width = “200px”></li> </ul> </li> <li>属性: <ul> <li>width = “100px” </li> <li>border = “1px” </li> <li>cellspacing = “0” </li> <li>cellpadding = “0” </li> <li>align = “left/center/right” </li> <li>colspan = “7” </li> <li>rowspan = “4” </li> <li>border-collapse: collapse; 在table里面设置这个合并单元格</li> </ul> </li> </ul> <p><span style="color = “red;”><strong>注： </strong>02表格demo01/02/03有表格示例</p> <h3>4.12 HTML列表</h3> <h4>4.12.1 无序列表</h4> <blockquote> <p>标签: <ul> <li><br> 属性:type=“dicel(实心圆) || circle(空心圆) || square(方块)”</p> </blockquote> <p><span><strong>注意</strong>:ul嵌套最外层默认是实心圆,然后嵌套是空心圆,然后一直是实心方块,ol嵌套不受影响<br><br> <strong>示例</strong>：03无序列表demo01.html<br> </span></p> <h4>4.12.2 有序列表</h4> <blockquote> <p>标签 <ol> <li><br> 属性reversed: 倒序<br> 属性strat = “value”: 从value开始<br> 属性type = “value”: 顺序类型</p> </blockquote> <p><span><em>示例：04有序列表demo01.html</em></span></p> <h4>4.12.3 自定义列表</h4> <blockquote> <p>标签 <dl> <dt> <dd></p> </blockquote> <p><span><em>示例：05自定义列表demo01.html</em></span></p> <p>注意:去掉列表前面的符号,可以使用CSS属性(list-style : none)</p> <h3>4.13 HTML表单</h3> <blockquote> <p><form method = “post(表单提交数据) || get(表单获取数据)”><br> action属性: 提交表单时执行的动作,通常会提交到web服务器的网页<br> method属性: 规定在提交表单时所用的 HTTP 方法,(get,post)<br> name属性: 如果要正确地被提交，每个输入字段必须设置一个 name 属性</p> </blockquote> <ul> <li><strong>get与post区别:</strong> <ul> <li>get请求通常表示获取数据</li> <li>post请求通常表示提交数据</li> <li>get请求发送的数据都写在地址栏上,用户可见</li> <li>post请求发送的数据用户不可见<sup>注</sup></li> <li>get请求不能提交大量数据,但是post可以,因此不要混用</li> </ul> </li> </ul> <p>注: post请求在隐藏起来了,上方链接栏没有,需要F12(右击检查)–>netWork–>Name–>第一个www.baidu.com点击–>Headers–>最下面的Form Date就显示了提交的信息</p> <ul> <li><form> <ul> <li><input> 输入,单标签 <ul> <li>type 属性 <ul> <li>"text"文本输入框</li> <li>"password"密码输入框</li> <li>“button” 按钮</li> <li>“submit” 提交按钮</li> <li>“reset” 重置按钮</li> <li>"“file” 文件框</li> <li>"radio"单选框</li> <li>“checkbox” 复选框</li> <li>“image” 图像形式的按钮组，必须有src</li> <li>“email” 限制用户输入必须为Email类型(H5)</li> <li>“url” 限制用户输入必须为url类型(H5)</li> <li>"date"限制用户输入必须为time类型(H5)</li> <li>"month"限制用户输入必须为月类型(H5)</li> <li>"week"限制用户输入必须为周类型(H5)</li> <li>"number"限制用户输入必须为数字类型(H5)</li> <li>“tel” 限制用户输入必须为手机号码类型(H5)</li> <li>“search” 搜索框(H5)</li> <li>"color"生成颜色表单(H5)</li> </ul> </li> <li>name 属性(自定义名称)，用于区分表单，后台使用</li> <li>value 在按钮上显示文字或者输入框的内容</li> <li>checked 默认选择，单选按钮和复选按钮有</li> <li>size input默认在页面中显示的长度</li> <li>maxlength允许控件输入最多的字符</li> <li>required: required; 表单的属性不能为空,必填(H5)</li> <li>enctype: multipart/form-data; 将表单数据编写成二进制形式,用户上传图片之类</li> <li>placeholder: 提示文本(占位符); 表单的提示信息,存在默认值将不显示(H5)</li> <li>autofocus: autofocus; 自动聚焦属性,页面加载完成自动聚焦到表单(H5)</li> <li>autocomplete当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,需要在表单内同时加上name属性,同时提交成功(H5) <ul> <li>off</li> <li>on(默认打开)</li> </ul> </li> <li>multiple: multiple可以多选文件提交(H5)</li> </ul> </li> <li><label>: 点击文本就会触发表单,比input改进 <ul> <li>for</li> <li>id</li> </ul> </li> <li><fieldset>: 包含一组相关的表单元素,并使用边框包起来</li> <li><textarea>: 文本域 <ul> <li>cols: 宽度2</li> <li>rows: 高度 1</li> <li>resize:none; 不可拖动</li> </ul> </li> <li><legend>: 定义一个<fieldset>标题</li> <li><select>: 定义下拉列表 <ul> <li> <p><optgroup>: 定义下拉列表标题(不可选)</p> <ul> <li>label: 禁用这一组不可选<optgroup label = “”></li> </ul> </li> <li> <p><option>:定义下拉列表标题的子元素(可选)</p> <ul> <li> <p>selected: 打开默认显示这一个子元素,一般显示第一个</p> </li> <li> <p>disabled: 不可选</p> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <p><span> **实例:**06表单demo01</span></p> <h3>4.14 HTML框架</h3> <h4>4.14.1 结构框架</h4> <ul> <li><frameset>框架结构标签 <ul> <li><frame>框架标签</li> <li><noframes>不支持框架的浏览器</li> </ul> </li> </ul> <blockquote> <p>可以拖动边框来改变大小。避免这种情况发生，可以在 <frame> 标签中加入：noresize=“noresize”。<br> 不能将 <body> 标签与 <frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes>标签，就必须将这段文字嵌套于 <body> 标签内</p> </blockquote> <p><span><strong>注意:</strong>07结构框架demo01</span></p> <h4>4.14.2 内联框架</h4> <ul> <li><iframe>用于在网页内显示网页 <ul> <li>width: 宽度</li> <li>height: 高度</li> <li>frameborder =“0”;设置框架边框为0</li> <li>name与target 内联跳转链接 <ul> <li>iframe可用作链接目标</li> <li>链接的target属性必须引用iframe的name属性</li> </ul> </li> <li>语法: <iframe src = “URL” frameborder=“0” width=“200” height=“200”></iframe></li> </ul> </li> </ul> <p><span><strong>注意:</strong>08内联框架demo01,里面有一点注意事项,建议看一下</span></p> <h2>5. CSS</h2> <h3>5.1 CSS概念</h3> <p>CSS(Cascading Style Sheet):通常称为CSS样式表"层叠样式表"或"级联样式表",是一组格式设置规则,核心优势是可以为文档中某种类型的元素全部应用相同的规则</p> <h3>5.2 CSS书写位置</h3> <ul> <li>外部样式 <ul> <li><link rel=“stylesheet” type=“text/css” href=“mystyle.css” /></li> <li>style type=“text/css”> @import url(mystyle.css);</style> <ul> <li>注意@import外接样式必须第一行</li> </ul> </li> </ul> </li> <li>内部样式(内嵌样式表) <ul> <li><style type=“text/css”></style> <ul> <li>HTML5中type="text/css"可以省略</li> <li>style标签可以放在任何一个地方,建议放在head里面,title之下</li> </ul> </li> </ul> </li> <li>行内样式 <ul> <li><p style=“color: sienna; margin-left: 20px”></p></li> </ul> </li> </ul> <h3>5.3 CSS选择器</h3> <ul> <li>CSS选择器 <ul> <li>* 通用选择器: 会匹配页面所有的元素,降低页面的响应速度,不建议随便使用</li> <li>div 标签选择器(派生选择器)</li> <li># id选择器</li> <li>. 类选择器,可以多写</li> <li>[] 属性选择器(CSS2) <ul> <li>E[att] 属性选择器 --> E标签(元素), att 标签行内块里面的的属性</li> <li>E[att = “val”] 选择器具有att属性且属性值等于val的E元素</li> <li>E[att |= “val”] 选择元素有att属性,值以val或val-开头的元素</li> <li>E[att ~= “val”] 选择元素有att属性,其中以空格分隔val,例:att=“one val"或者"val one”</li> <li>E[att ^= “val”] 匹配具有att属性,且值以val开头的E元素</li> <li>E[att $= “val”] 匹配具有att属性,且值以val结尾的E元素</li> <li>E[att *= “val”] 匹配具有att属性,且值中含有val的E元素</li> <li>E[att $= “val” i] 匹配元素不区分大小写,在结束方括号前加i个</li> </ul> </li> </ul> </li> </ul> <p>注意: 类选择器名是可以重复的,ID选择器的名字不能重复</p> <ul> <li>CSS 优先级与权重值,最高权重,在属性值的后面添加!important <ul> <li>行内样式(1000) > ID选择器(100) > 类选择器(10) = 属性选择器(10) = 伪类选择器(10) > 伪元素 = 标签选择器(1) > 通用选择器(0)</li> <li>选择器选择的范围越小越精确,优先级越高</li> </ul> </li> </ul> <p><span>**实例:**09基本选择器demo01.html</span></p> <h3>5.4 选择符</h3> <ul> <li>后代选择符: 父类子类{}; <ul> <li>例: h1 em{} --> h1标签下的所有em标签,没有距离可言,对孙子元素及以下都起作用</li> </ul> </li> <li>子元素选择符: 父类>子类{}; <ul> <li>例: h1>em{} --> h1标签第一层级子元素em的所有标签,对孙子及以下不起作用</li> </ul> </li> <li>兄弟选择符:ul + ol {}; 同一级必须相邻元素,生效的是后面的弟弟元素ol <ul> <li>相同标签第一个不会生效,后面全生效</li> </ul> </li> <li>同胞连接符: h1 ~ h2{ } h1后面的所有h2元素全生效,只限于同级</li> </ul> <h3>5.5 伪类选择符</h3> <ul> <li>: root 选择根元素 <ul> <li>html文档中所有元素的根元素的html元素</li> </ul> </li> <li>: empty 空选择标签 <ul> <li>没有任何子代标签,文本节点,空格,换行符,里面可以是注释,对img,input,textarea也生效</li> </ul> </li> <li>: only-child 唯一子代标签(可以是后代),选择的那个后代元素必须是父类独生子 <ul> <li>p span:only-child{} -->p标签里面的只能有一个span标签,其他标签都不行,span必须我是独生子</li> </ul> </li> <li>only-of-type 表示父元素有很多子元素,而且在子元素里面其中有一个是唯一的</li> <li>: first-child 选择父元素(同胞)中第一个子元素,不可以指定类型</li> <li>: last-child 选择父元素(同胞)中最后一个子元素,不可以指定类型 <ul> <li>:first-child:last-child{} === only-child{}</li> </ul> </li> <li>: first-of-type 选择父元素中第一个相同的子元素,可以指定类型 <ul> <li>例 span: first-of-type 指定父(同胞)元素下的第一个span元素</li> </ul> </li> <li>:last-of-type 选择父元素中最后一个相同的子元素,可以指定类型 <ul> <li>:first-of-type:last-of-type{} === :only-of-type{}</li> </ul> </li> <li>:nth-child(n可以使数字,公式,关键字:even(偶数) odd(奇数)) <ul> <li>:first-child == :nth-child(1)</li> </ul> </li> <li>: nth-last-child(n) 从一组同胞元素的最后一个开始往前算 <ul> <li>:nth-child(1):nth-last-child(1) === :only-child</li> </ul> </li> <li>:nth-of-type() 从前开始选择同胞元素</li> <li>:nth-last-of-type() 从后向前的同胞元素中选择 <ul> <li>:nth-of-type(1):nth-last-of-type(1) === :only-of-type</li> </ul> </li> </ul> <h3>5.5 动态伪类</h3> <p><strong>超链接伪类</strong></p> <ul> <li>:link 未访问链接,和所有的超链接</li> <li>:visited 已访问的超链接</li> </ul> <p><strong>用户操作伪类</strong></p> <ul> <li>: focus 获取当前输入焦点元素,如表单元素,可编辑内容的元素</li> <li>: hover 当鼠标指针悬浮在元素上</li> <li>: active 当用户输入激活的元素,按下的时刻</li> </ul> <p>顺序: link --> visited --> focus --> hover --> active</p> <h3>5.6 UI状态伪类</h3> <ul> <li> <p>:enabled 启用的用户界面元素(表单元素),接收输入元素</p> </li> <li> <p>:disabled 禁用用户界面元素,不接受输入元素</p> </li> <li> <p>:checked 用户或文档默认选中的单选按钮或复选框</p> </li> <li> <p>:indeterminate 没有选中的单选框或者复选框,这个状态只能由DOM脚本设定,不能用户设定</p> </li> <li> <p>:default 默认选中单选按钮,复选框或选项</p> </li> <li> <p>:valid 满足所有数据的有效性语义的输入框</p> </li> <li> <p>:invalid 不满足所有数据有效性语义的输入框</p> </li> <li> <p>:in-range 输入的值在最小值与最大值之间的输入框</p> </li> <li> <p>:out-of-range 输入的值小于空间允许的最小值或大于空间允许的最大值的输入框</p> </li> <li> <p>:required 必须输入值的输入框</p> </li> <li> <p>:optional 可选输入值的输入框</p> </li> <li> <p>:read-write 用户编辑输入框</p> </li> <li> <p>:read-only 不能由用户编辑的输入框</p> </li> </ul> <h3>5.7:target伪类</h3> <p>URL中有个片段标识伪类,它所指向的是文档片段称为目标(target).URL片段标识符指向的目标元素可以使用:target伪类装饰</p> <blockquote> <p>片段标识符: https://www.baidu.com/#target-pseudo</p> </blockquote> <p>这个url中的target-pseudo部分就是片段标识符,由#符号标记</p> <p>借助这个元素可以可以显示文档中任何目标元素或者为不同的目标元素定义不同的样式; 例如: a:target{color: red},对id = "target-pseudo"也会生效</p> <p>伪类定义的样式在两种请款下不会应用</p> <ul> <li> <ol> <li>页面的URL中没有片段标识符</li> <li>页面的URL中有片段标识符,但是文档中没有相匹配的元素</li> </ol> </li> </ul> <h3>5.8 :lang伪类</h3> <p>使文本选择语言选择符,可以使用:lang()伪类,在匹配方式上,:lang()与伪类与 |= 属性选择符类似;伪类选择符与属性选择符之间的主要区别是语言信息有多个来源,有时可能来自元素本身之外.对属性选择符而言元素自身必须有lang属性才能匹配,而:lang伪类能匹配设定语言的元素后代</p> <p>在HTMl中语言可以通过lang属性判断,也可以通过meta元素和协议(HTTP)判断.XML使用xml:lang属性,还有可能有文档语言专用方法</p> <p>:lang伪类可以使用各种信息,而 |= 属性选择符只能用于标记中有lang属性元素,因此伪类比属性选择符更可靠</p> <pre><code class="prism language-HTML">*:lang(fr){ font-style: italic; } *[lang |= "fr"]{ font-style: italic; } </code></pre> <h3>5.9 否定伪类</h3> <p>:not(选择符),否定可以连写</p> <pre><code class="prism language-HTML">*.link:not(li):not(p){ /*class属性包含link这个词,但不是li或p的所有元素*/ } </code></pre> <h3>5.10 伪元素选择符</h3> <p>在文档中插入虚构的元素,伪类 ’ : ’ ;伪元素’ :: ’</p> <p>::first-letter和::first-line只能用于块级元素上</p> <p><strong>1. 装饰首字母</strong></p> <blockquote> <p>::first-letter{ color: red;}</p> </blockquote> <p>常用于首字母大写,或者首字母下沉</p> <pre><code class="prism language-HTML">第一种:  p:first-of-type::first-letter{font-size: 200%;} 第二种:  <p> <p-first-letter> T </p-first-letter> his is a p element, with a styled first <p> </code></pre> <p><strong>2. 装饰首行</strong></p> <blockquote> <p>::first-line</p> </blockquote> <p>常用于装饰首行文本</p> <pre><code class="prism language-HTML">第一种:  p::first-line { color: red; } 第二种:  <p> <p-first-line> T </p-first-line> his is a p element, with a styled first <p> </code></pre> <p><strong>3. 创建前置和后置内容元素</strong></p> <blockquote> <p>前置 ::before</p> <p>后置 ::after</p> </blockquote> <pre><code class="prism language-HTML">/*在h2元素前面添加HELLO并且为红色*/ h2::before{ content: "HELLO" color: red; } </code></pre> <ul> <li>before与after必须有content属性,会创建一个元素,属于行内元素</li> <li>作用在字体图标可以content: '\ea50’和’口’都可以,一般ea50</li> <li>可以用于清除浮动</li> </ul> <h3>5.11 CSS背景</h3> <blockquote> <p>background: url() no-repeat 5px center;/<em>后面两个元素是背景定位</em>/</p> </blockquote> <ul> <li> <p>background 背景</p> <ul> <li>color: #234; 背景颜色</li> <li>image: url(https://www.baidu.com/image/); 背景图片</li> <li>image:url(file:///C:/Users/a4244/Desktop/MD/59.png);背景图</li> <li>repeat:背景图片重复 <ul> <li>repeat-x(水平)</li> <li>repeat-y(纵向)</li> <li>no-repeat(不平铺);</li> </ul> </li> <li>position: 背景定位 <ul> <li>center</li> <li>top</li> <li>bottom</li> <li>right</li> <li>left</li> <li>50% 50%</li> <li>50px 50px</li> </ul> </li> <li>attachment: 固定的背景图像 <ul> <li>scroll(默认值,随内容一起滚)</li> <li>fix(页面滚背景不滚)</li> <li>inherit(继承父元素)</li> </ul> </li> </ul> <ul> <li>rgba(255,255,255, .5) (背景半透明)</li> </ul> </li> </ul> <p><span><strong>科普:背景图片与插入图片的区别</strong></span></p> <blockquote> <p>1.插入突变用的最多,比如产品展示,移动位置只能靠盒子模型padding margin<br> 2.背景图片我们一半用于小图标背景或者超大背景图片,背景图片只能通过background-position</p> </blockquote> <h3>5.12 CSS字体</h3> <blockquote> <p>font: italic bold 10px/35px arial, sans-serif,“微软雅黑”(斜体字加粗字体大小/行高默认字体,备用字体,“微软雅黑”); font-size;font-family属性必须写,其他可选</p> </blockquote> <ul> <li>font 字体 <ul> <li> <p>family 定义字体系列</p> <ul> <li>arial,sans-serif,“宋体”,“微软雅黑”(如果没有就会一直向后找,如果都没有就会默认)</li> </ul> </li> <li> <p>style 字体风格</p> <ul> <li>normal(标准)</li> <li>italic(斜体)</li> <li>oblique(倾斜)</li> <li>none(关闭所有风格)</li> </ul> </li> <li> <p>variant 字体变形</p> <ul> <li>normal(默认值,浏览器会显示一个标准字体)</li> <li>small-caps(浏览器会显示小型大写字母的字体)</li> <li>inherit(继承父类)</li> </ul> </li> <li> <p>weight 文本加粗</p> <ul> <li>normal(默认值,定义标准字符)</li> <li>bold (定义粗体)</li> <li>bolder (定义更粗的字符)</li> <li>lighter (定义更细的字符)</li> <li>100-900,400默认值,700(bold)</li> </ul> </li> <li> <p>size 字体大小,默认16px,浏览器各不相同,最好自定义</p> <ul> <li>xx-small,x-small,small,medium(默认),large,x-large,xx-large(字体尺寸从小到大)</li> <li>smaller (比父元素更小)</li> <li>larger (比父元素更大)</li> <li>length(一个固定的值或者百分比)</li> <li>inherit (继承父类)</li> </ul> </li> <li> <p>font-kerning字距</p> <ul> <li>auto 用户自动调整</li> <li>normal 正常</li> <li>none 忽略</li> </ul> </li> <li> <p>@font-face 自定义字体</p> <p>惰性加载字体,指定文本渲染时才会加载</p> <p>把下载字体包,解压,把里面的font文件夹放到网页文件夹的fonts里面</p> <pre><code class="prism language-HTML"><style> @font-face {/*声明字体引用字体*/ font-family: "icomoon"; /*icomoon官网的名字,可自定义*/ src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal;/*倾斜字体变正常*/ } span { font-family: "icomoon"; } /*或者*/ span::after{ content: '口'; font-family: "icomoon"; } /*或者*/ span::after{ content: '\ea50';/*右边小口左边的字码*/ font-family: "icomoon"; } </style> <body>  <span>口</span> </body> </code></pre> <p>追加字体图标,在网站上点击import icons(导入icons),选中下载的文件夹中的下来的selection.jsonselection.json就可以</p> </li> <li> <p>CSSUnicode字体<br> 在CSS中设置字体名称,直接写中文是可以的,但是在文件编码(GB2312,UTF-8等)不匹配时会产生乱码的错误,XP系统不支持类似的字体中文<br> 解决:<br> 方案一:用英文代替, 比如: font-family: “Microsoft Yahei”<br> 方案二: 在CSS中直接使用Unicode编码来写字体名称可以避免这些错误,使用Unicode写中文字体名称,浏览器会正确的解析</p> </li> </ul> </li> </ul> <table> <thead> <tr> <th align="left">字体名称</th> <th align="left">英文名称</th> <th align="left">Unicode编码</th> </tr> </thead> <tbody> <tr> <td align="left">宋体</td> <td align="left">SimSun</td> <td align="left">\5B8B\4F53</td> </tr> <tr> <td align="left">新宋体</td> <td align="left">NSimSun</td> <td align="left">\65B0\5B8B\4F53</td> </tr> <tr> <td align="left">黑体</td> <td align="left">SimHei</td> <td align="left">\9ED1\4F53</td> </tr> <tr> <td align="left">微软雅黑</td> <td align="left">Microsoft YaHei</td> <td align="left">\5FAE\8F6F\96C5\9ED1</td> </tr> <tr> <td align="left">楷体_GB2312</td> <td align="left">KaiTi_GB2312</td> <td align="left">\6977\4f53_GB2312</td> </tr> <tr> <td align="left">隶书</td> <td align="left">LiSu</td> <td align="left">\96B6\4e66</td> </tr> <tr> <td align="left">幼圆</td> <td align="left">YouYuan</td> <td align="left">\5E7C\5706</td> </tr> <tr> <td align="left">华文细黑</td> <td align="left">STXihei</td> <td align="left">\534E\6587\7EC6\9ED1</td> </tr> <tr> <td align="left">细明体</td> <td align="left">MingLiU</td> <td align="left">\7EC6\660E\4F53</td> </tr> <tr> <td align="left">新细明体</td> <td align="left">PMingLiU</td> <td align="left">\65B0\7EC6\660E\4F53</td> </tr> </tbody> </table> <table border="1"> <caption> <h3>文本格式化标签样式</h3> </caption> <colgroup> <col width="25%"> <col width="15%"> <col width="15%"> <col width="45%"> </colgroup> <tbody> <tr> <th>标签</th> <th>含义</th> <th>样式</th> <th>属性</th> </tr> <tr> <td><em></em></td> <td rowspan="2">倾斜</td> <td>添加倾斜</td> <td>font-style: italic</td> </tr> <tr> <td><i></i></td> <td>取消倾斜</td> <td>font-style: normal</td> </tr> <tr> <td><strong></strong></td> <td rowspan="2">加粗</td> <td>添加加粗</td> <td>font-weigth: 700(bold)</td> </tr> <tr> <td><b></b></td> <td>取消加粗</td> <td>font-weigth: 400(normal)</td> </tr> <tr> <td><u></u></td> <td rowspan="2">下划线</td> <td>添加下划线</td> <td>text-decoration: underline</td> </tr> <tr> <td><ins></ins></td> <td>删除下划线</td> <td>text-decoration: none</td> </tr> <tr> <td><s></s></td> <td rowspan="2">删除线</td> <td>添加删除线</td> <td>text-decoration : line-through</td> </tr> <tr> <td><i></i></td> <td>取消删除线</td> <td>text-decoration : none</td> </tr> </tbody> </table> <h3>5.13 CSS文本</h3> <ul> <li>text 文本 <ul> <li>indent: 5em(可以负值,百分比,像素值); 首行缩进 <ul> <li>1px = 16em,一个em就是一个字的距离</li> </ul> </li> <li>align: 文本对齐 <ul> <li>left(左对齐)</li> <li>right(右对齐)</li> <li>center(居中对齐)</li> <li>justify(两端对齐)</li> <li>inherit(看父元素)</li> </ul> </li> <li>spacing: 字符间距 <ul> <li>normal (默认值,和0一样)</li> <li>length(可正可负)</li> <li>inherit (看父元素)</li> </ul> </li> <li>transform 处理文本大小写 <ul> <li>none(默认)</li> <li>uppercase(全转为大写)</li> <li>lowercase(全转为小写)</li> <li>capitalize(首字母大写)</li> </ul> </li> <li>decoration 文本装饰,可以多个属性值一起写 <ul> <li>none(关闭所有装饰)</li> <li>underline(文本加下划线)</li> <li>overline(文本顶端加下划线)</li> <li>line-through(文本中间画贯穿线)</li> <li>blink (文本闪烁)</li> </ul> </li> </ul> </li> <li>direction: 文本方向 <ul> <li>ltr (默认.文本方向从左到右)</li> <li>rtl (文本方向从右到左)</li> <li>inherit (继承父类)</li> </ul> </li> <li>white-space(处理空白字符) <ul> <li>pre-line(合并空白符,保留换行符,允许自动换行)</li> <li>normal (合并空白符,忽略换行符,允许自动换行)</li> <li>nowrap (合并空白符,忽略换行符,不允许自动换行)</li> <li>pre (保留空白符,保留换行符,不允许自动换行)</li> <li>pre-wrap(保留空白符,保留换行符,允许自动换行)</li> </ul> </li> <li>a 链接状态(按照这个顺序不能换) <ul> <li>a:link {color:#FF0000;} (未被访问的链接)</li> <li>a:visited {color:#00FF00;}(已被访问的链接)</li> <li>a:hover {color:#FF00FF;} (鼠标指针移动到链接上)</li> <li>a:active {color:#0000FF;} (正在被点击的链接)</li> </ul> </li> <li>line-height (行高,行间距)</li> <li>color (文本颜色)</li> </ul> <h3>5.14 CSS盒子模型</h3> <p><a href="http://img.e-com-net.com/image/info8/56321e4f68a240f193b0410f8a49c7a6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/56321e4f68a240f193b0410f8a49c7a6.png" alt="HTML5+CSS3_第1张图片" width="462" height="484" style="border:1px solid black;"></a></p> <ul> <li>盒子边距 <ul> <li>margin: (top,right,bottom,left)盒子的外边距,会重叠合并(盒子塌陷)</li> <li>padding: (top,right,bottom,left)盒子边框内边距,会撑开盒子(子盒子没有宽度,不会撑开)</li> </ul> </li> <li>盒子边框 <ul> <li>border-style:(border-top/right/bottom/left-style)边框样式 <ul> <li>none(无边框)</li> <li>hidden(与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突)</li> <li>dotted(点状边框,很细,密密麻麻的点,有的浏览器直接实现实现)</li> <li>dashed(定义虚线,有的浏览器也会显示实线)</li> <li>solid(实现)</li> <li>double(双线)</li> <li>groove(定义 3D 凹槽边框。其效果取决于 border-color 的值)</li> <li>ridge(定义 3D 垄状边框。其效果取决于 border-color 的值)</li> <li>inset(定义 3D inset 边框。其效果取决于 border-color 的值。)</li> <li>outset(定义 3D outset 边框。其效果取决于 border-color 的值)</li> <li>dotted solid double dashed(上右下左)</li> <li>dotted solid double(上左右下)</li> <li>dotted solid(上下左右)</li> <li>dotted(上下左右)</li> </ul> </li> <li>border-width: (border-top/right/bottom/left-width)边框宽度 <ul> <li>thin(细边框)</li> <li>medium(默认中等边框)</li> <li>thick(定义粗边框)</li> <li>length(自定义边框宽度)</li> <li>inherit(继承父类)</li> </ul> </li> <li>border-color: (border-top/right/bottom/left-color)边框颜色 <ul> <li>transparent(默认值,边框透明)</li> <li>inherit(继承父类)</li> </ul> </li> <li><span>border-radius: 50%(圆) || 1px (圆角边框)(CSS3)</span></li> <li>圆角矩形,按照下面的顺序写 border-radius: 左上右上右下左下; <ul> <li>border-top-left-radius 左上角圆弧</li> <li>border-top-right-radius右上角圆弧</li> <li>border-bottom-right-radius 右下角圆弧</li> <li>border-bottom-left-radius 左下角圆弧</li> </ul> </li> <li>border-collapse <ul> <li>collapse: 表格边框合并是1+1=2,变粗,然后使用这方法相邻边框合并在一起</li> <li>separate: 表格边框合并是1+1=2</li> <li>inherit</li> </ul> </li> <li><span>box-shadow盒子阴影(按照这顺序可以连写)(CSS3)</span> <ul> <li>h-shadow(必须,水平x轴阴影位置,允许负值)</li> <li>v-shadow(必须,垂直y轴阴影的位置,允许负值)</li> <li>blur(可选,模糊阴影,数值越大越模糊)</li> <li>spread(可选,阴影大小)</li> <li>color(可选,阴影的颜色)</li> <li>inset(默认外部阴影,修改为内部阴影;注意外部阴影不能写)</li> </ul> </li> </ul> </li> </ul> <p>box-shadow:0 2px 4px rgba(0,0,0,.2);</p> <p><span><strong>科普1:盒子居中</strong></span></p> <blockquote> <p>盒子水平居中要满足两个条件1.必须指定宽度;2.然后给左右两个外布局设置为auto<br> 写法一: margin-left: auto; margin-right: auto;<br> 写法二: margin: auto;因为上下auto是没有用的<br> 写法三: margin: 0 auto;</p> </blockquote> <p><span><strong>科普2:边距</strong></span></p> <blockquote> <p>行内元素上下外边距设置没用,低版本IE设置内边距也没用,为了兼容性尽量写左右内外边距,不要写上下</p> </blockquote> <h3>5.15 盒子塌陷解决办法</h3> <ul> <li>overflow: 内容溢出元素框时,发生的事情 <ul> <li>visible(默认值。内容不会被修剪，会呈现在元素框之外)</li> <li>hidden (内容会被修剪，并且其余内容是不可见的)</li> <li>scroll (一直显示滚动条，超出部分滚动可见)</li> <li>auto (当超出元素框后，显示滚动条，超出部分滚动可见)</li> <li>inherit(规定应该从父元素继承 overflow 属性的值。)</li> </ul> </li> </ul> <h3>5.16 标签显示模式(display)</h3> <ul> <li> <p>块级元素 (block-level)</p> <ul> <li>特点: 宽度默认独占一行(100%)</li> <li>div,p,h1-h6,ul,li,ol,form,table等</li> </ul> </li> <li> <p>行内元素 (inline-level)</p> <ul> <li>特点: 宽高无效,默认内容的宽高,所有内容排在一排</li> <li>a,strong,b,em,i,del,s</li> </ul> </li> <li> <p>行内块 (lnline-block)</p> <ul> <li>行内元素只能放行内元素,(float,绝对定位,固定定位都会把标签转为行内块)</li> <li>既能设置宽高大小,又能排在一排显示</li> <li>img,input,td</li> </ul> </li> <li> <p>模式转换</p> <ul> <li>块转行内: display:inline</li> <li>行内转块: display: block</li> <li>块与行内转成行内块: display: inline-block</li> </ul> </li> </ul> <h3>5.17 盒子布局的三种机制</h3> <blockquote> <p>网页布局的核心-就是用css布局</p> </blockquote> <p>css提供三种机制来设置盒子的摆放,分别是普通流(标准流),浮动和定位</p> <ul> <li> <p>普通流(标准流);</p> <ul> <li> <p>块级元素会独占一行,从上向下顺序排列</p> <ul> <li>常用元素: div, hr, p, h1-h6, ul , ol ,dl ,form, table</li> </ul> </li> <li> <p>行内元素会按照顺序,从左到右顺序排列.碰到父元素就会换行</p> <ul> <li>常用元素: span, a, i, em等</li> </ul> </li> </ul> </li> <li> <p>浮动</p> <ul> <li>让盒子从普通流中浮起来,主要作用是让多个盒子一行显示</li> </ul> </li> <li> <p>定位</p> <ul> <li>将盒子定在浏览器的某一个位置–css离不开定位,特别是后面的js特效</li> </ul> </li> </ul> <h3>5.18 浮动</h3> <blockquote> <p>float: left(左浮动123) || left(右浮动321)||none无浮动</p> </blockquote> <ul> <li>浮动元素重叠问题 <ul> <li>浮动不会覆盖文字内容</li> <li>浮动不会覆盖图片内容</li> <li>浮动不会覆盖表单内容</li> <li>任何元素都可以浮动,无论它本身是什么元素.浮动起来就是块级框(和行内块相似)</li> <li>浮动只会影响当前或者后面的标准流盒子,不会影响到前面的标准流</li> </ul> </li> </ul> <h3>5.19 清除浮动</h3> <p> 很多情况下,父盒子不方便给高度,但是子盒子浮动就不占位置,最后父级盒子高度为0,就会影响到下面的盒子</p> <p> 清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题,清除浮动后,父级就会根据浮动的子盒子自动检测高度,父级就有了高度,就不会影响下面的标准流了</p> <blockquote> <p>语法: 选择器 { clear: left/ right/ both}/<em>清除左侧 /右侧 / 左右两侧的浮动</em>/</p> </blockquote> <ul> <li>清除浮动有四种方法</li> </ul> <p><strong>方法一:额外标签法</strong></p> <blockquote> <p>w3c推荐的做法: 通过浮动元素,末尾添加一个空标签,例如<div style = “clear:both”></div></p> </blockquote> <p>优点: 通俗易懂,书写方便</p> <p>缺点: 添加许多无意义的标签,结构差</p> <p><span>示例10: </span>清除浮动之额外标签法demo01.html</p> <p><strong>方法二: 父级添加overflow属性的方法</strong></p> <blockquote> <p>可以给父级添加: overflow: hidden | auto | scroll都可以实现</p> </blockquote> <p>优点: 代码简洁</p> <p>缺点: 内容增多时候容易造成不会换行导致内容被隐藏掉,无法显示需要溢出的元素</p> <p><span>示例11: </span>清除浮动之overflow demo01.html</p> <dl> <dt> <strong>方法三: 使用after为元素清除浮动</strong> </dt> <dd> after方式为空标签额外标签法的升级版本,好处是不用单独加标签 </dd> </dl> <pre><code class="prism language-HTML">.clearfix: after { diplay: block; overflow: hidden;/*可选*/ clear: both; height: 0; visibility: hidden; content: ""; } .clearfix { *zoom: 1;/*IE6,7专有*/ } </code></pre> <p>优点: 符合闭合浮动思想</p> <p>缺点: 由于IE6,7不支持: after,使用zoom:1触发hasLayout(百度,淘宝,网易等都有)</p> <p><span>示例12: </span>清除浮动之单伪元素demo01.html</p> <p><strong>方法四: 双为元素清除浮动</strong></p> <pre><code class="prism language-HTML">.clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } </code></pre> <p>优点: 代码更简洁,语义化正确</p> <p>缺点: 由于IE6,7不支持: after,使用zoom:1触发hasLayout(腾讯,小米等都有)</p> <p><span>示例13: </span>清除浮动之双伪元素demo01.html</p> <h3>5.20 绝对定位</h3> <blockquote> <p>口诀: 子绝父相</p> </blockquote> <ul> <li>position:位置 <ul> <li>relative : 相对定位的元素,对象不可层叠,absolute开始相对它定位 ,本体移走,位置保留 <ul> <li>left</li> <li>right</li> <li>top</li> <li>bottom</li> </ul> </li> <li>absolute: 绝对定位,可以相对absolute,relative,fixed定位,但是第一个必须是relative,fixed,浏览器窗口,本体移走,位置不保留 <ul> <li>left</li> <li>right</li> <li>top</li> <li>bottom</li> </ul> </li> <li>fixed: 固定定位，相对于浏览器窗口进行定位</li> <li>static: 默认值。静态定位，元素出现在正常的流中</li> <li>inherit: 规定应该从父元素继承 position 属性的值</li> </ul> </li> </ul> <h3>5.21 绝对定位盒子居中</h3> <pre><code class="prism language-HTML">div { position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; border: 1px solid #ff0000; } /*或者*/ div{ position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; border: 1px solid #ff0000; transform: translate(-50%, -50%); } </code></pre> <h3>5.22 堆叠顺序(z-index)</h3> <p> 在使用定位布局时,可能会出现盒子重叠情况,加了定位盒子,默认后来者区上,后面的盒子会压住前面的盒子,应用z-index层叠等级属性可以调整盒子的堆叠顺序</p> <ul> <li>属性值: 正数负数或0,默认值0,数值越大盒子越上</li> <li>如果属性值相同后来者区上</li> <li>数字后面不能加单位</li> </ul> <p>**注意: **z-index只能应用于相对定位, 绝对定位和固定定位的元素,其他标准流,浮动,静态定位无效</p> <ul> <li></li> </ul> <h2>6. CSS高级</h2> <h3>6.1 元素显示与隐藏</h3> <h4>6.1.1 diaplay 显示</h4> <ul> <li>block : 块对象的默认值,同时还有显示元素</li> <li>inline : 转为行内块(内联对象)</li> <li>inline-block: 转为行内块对象</li> <li>none: 隐藏对象,不保留位置。与visibility: hidden(保留位置)不同</li> <li>还有表格操作元素,查手册</li> </ul> <h4>6.1.2 visiblity 可见性</h4> <ul> <li>visible: 显示</li> <li>hidde: 隐藏(保留位置); 清除浮动</li> <li>inherit: 继承父级</li> <li>collapse: 隐藏表格的行和列</li> </ul> <h4>6.1.3 overflow 溢出</h4> <ul> <li>visible: 不剪辑溢出内容,内容也不添加滚动条</li> <li>hidden: 不显示超出的部分,超出的部分隐藏</li> <li>scroll: 不管内容超出与否,都添加滚动条</li> <li>auto: 超出自动显示滚动条,不超出不显示滚动条</li> </ul> <h3>6.2 用户界面样式</h3> <h4>6.2.1 鼠标样式 cursor</h4> <ul> <li>default: 小白(默认) <a href="http://img.e-com-net.com/image/info8/733d9556569f414e95834ee51920601b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/733d9556569f414e95834ee51920601b.png" alt="在这里插入图片描述" width="36" height="37"></a></li> <li>pointer: 小手 <a href="http://img.e-com-net.com/image/info8/eda7e21538d54f288b7db688ebb8b352.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eda7e21538d54f288b7db688ebb8b352.jpg" alt="在这里插入图片描述" width="36" height="36"></a></li> <li>move: 移动<img src="http://img.e-com-net.com/image/info8/7f75878a6fed4940b4f3f0961def0d9b.png" alt="在这里插入图片描述" width="31" height="31"></li> <li>text: 文本<img src="http://img.e-com-net.com/image/info8/24382a474bfb4b8488276d333f753440.png" alt="在这里插入图片描述" width="30" height="30"></li> <li>not-allowed: 禁止<img src="http://img.e-com-net.com/image/info8/edcd6f30e3724ee5909ccb41d80b94cc.png" alt="在这里插入图片描述" width="24" height="24"></li> </ul> <h4>6.2.2 轮廓线 outline</h4> <p>轮廓线: 文本输入框选中会出现蓝色的边框的外围,可起到凸起元素的作用</p> <blockquote> <p>outline: outlone-color | outline-style | outline-width</p> </blockquote> <p>但是一般不关心可以设置多少,平时一般去掉,直接写法: outline: 0;或者outline: none;</p> <blockquote> <p><input type = “text” style = “outline: 0;” /></p> </blockquote> <h4>6.2.3 防止拖拽文本域 resize</h4> <blockquote> <p>< textarea style = “resize: none;”></textarea> /<em>防止拖拽</em>/</p> </blockquote> <h3>6.3 垂直对齐 vertical-align</h3> <ol> <li>有宽度的块级元素居中对齐,是margin: 0 auto;</li> <li>让文字居中对齐,test-align: center;</li> </ol> <p>vertical-align垂直对齐,他只针对<strong>行内元素</strong>或者<strong>行内块元素</strong>有效果,块元素没用</p> <p><a href="http://img.e-com-net.com/image/info8/ef9ef7de17eb43a5ab4da147821b9767.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ef9ef7de17eb43a5ab4da147821b9767.jpg" alt="HTML5+CSS3_第2张图片" width="650" height="178" style="border:1px solid black;"></a></p> <p><strong>行高</strong>指基线与基线的距离</p> <blockquote> <p>vertical-align: baseline(基线对齐,默认) | top(顶线对齐) | midde(中线对齐) | bottom(底线对齐)</p> </blockquote> <h4>6.3.1 去除图片低侧空白缝隙</h4> <p>父盒子由图片撑开,图片下面会有空白缝隙,因为图片或者表单等行内块元素,它的底线会和父级盒子的基线对齐,就是图片低侧会有的空白缝隙<br> 解决方案1 : 给img添加vertiacl-align:middle| top | midde都可以,让图片不要和基线对齐<br> 解决方案2: 给img添加 diaplay: block; 把图片转换为块级元素,就不会生效</p> <h3>6.4 溢出文字解决</h3> <ul> <li>while-space(文本显示方式) <ul> <li>normal;(默认处理,文字会自动换行)</li> <li>nowrap; (强制在同一行显示,直到文本结束或br)</li> <li>pre 保留格式</li> <li>pre-wrap: 保留空白符序列,但是正常的进行换行</li> <li>pre-line: 合并空白,保留换行</li> </ul> </li> <li>overflow <ul> <li>hidden;(隐藏)</li> </ul> </li> <li>text-overflow <ul> <li>clip (文本溢出不显示省略号,简单的裁切)</li> <li>ellipsis(文本溢出显示省略号标记)</li> </ul> </li> </ul> <pre><code class="prism language-HTML">/*第一步: 先强制一行内显示文本*/ white-space: nowrap; /*第二步: 超出的部分隐藏*/ overflow: hidden; /*第三步: 文字省略号待敌超出的文本*/ text-overflow:ellipsis; </code></pre> <h3>6.5 CSS精灵技术</h3> <h4>6.5.1 精灵技术产生背景</h4> <p><a href="http://img.e-com-net.com/image/info8/c448010bd98741e49af3cb317b028969.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c448010bd98741e49af3cb317b028969.jpg" alt="HTML5+CSS3_第3张图片" width="650" height="225" style="border:1px solid black;"></a><br> 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。<br> 　然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。</p> <h4>6.5.2 精灵技术本质</h4> <p> CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为王者荣耀网站中的一个精灵图<br> <a href="http://img.e-com-net.com/image/info8/2a2d25857aed4021b85476b7108e6013.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2a2d25857aed4021b85476b7108e6013.jpg" alt="HTML5+CSS3_第4张图片" width="403" height="600" style="border:1px solid black;"></a></p> <pre><code class="prism language-HTML">.icon01 { width: 23px; height: 23px; background: url(file:///C:/Users/a4244/Desktop/MD/59.png) 0px -106px; /*background-position: 0(左右不动) -106(背景图上移)*/ } </code></pre> <h3>6.6 滑动门技术</h3> <p> 为了各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种形状的背景能够自动拉伸,以适应元素内部的文本内容,可用性很强,常见于各种导航栏的滑动门</p> <p><strong>核心技术</strong></p> <p> 核心技术就是利用css精灵(主要是背景位置)和盒子padding撑开,以便于能使用不同字数的导航栏.一般经典布局是:</p> <p>精灵图:<a href="http://img.e-com-net.com/image/info8/37530ab8f4334d4d80d4127a21df1d54.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/37530ab8f4334d4d80d4127a21df1d54.png" alt="在这里插入图片描述" width="384" height="33"></a></p> <pre><code class="prism language-HTML"><style> /*a设置左侧(背景)门*/ a { /*需要用文字撑开内容,所以用行内块元素*/ display: inline-block; height: 33px; background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat; padding-left: 15px; } /*span设置右(背景)边门*/ a span { display: inline-block; height: 33px; background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat right; padding-right: 15px; } a:hover, a:hover span { background-image: url(file:///C:/Users/a4244/Desktop/MD/61.png); } </style> </head> <body> <a href="#"> <span>导航栏内容</span> </a> </body> </code></pre> <h3>6.7 margin负值</h3> <h4>6.7.1 解决边框1+1=2</h4> <blockquote> <p>利用margin去掉盒子与盒子合并的1+1 = 2的问题</p> </blockquote> <pre><code class="prism language-html">div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; border: 1px solid #ccc; margin-left: -1px; margin-top: -1px; } /*鼠标经过div 的意思 p:hover */ div:hover { /*我要让当前鼠标经过的这个div 升到最高处来就好了*/ /*定位的盒子是最高层的 */ border: 1px solid #f40; /*我们只要保证当前的这个盒子是定位就会压住标准流和浮动盒子*/ position: relative; /*我们只能用相对定位它是占位置的*/ } </code></pre> <pre><code class="prism language-HTML">div { position: relative; /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; border: 1px solid #ccc; margin-left: -1px; margin-top: -1px; } /*鼠标经过div 的意思 p:hover */ div:hover { /*我要让当前鼠标经过的这个div 升到最高处来就好了*/ /*定位的盒子是最高层的 */ border: 1px solid #f40; /*都是定位的盒子，我们通过z-index 来实现层级关系*/ z-index: 1; } </code></pre> <h4>6.7.2 制作三角</h4> <p> 用CSS边框可以模拟三角结果,宽度高度都为0,我们4个边框都要写,只保留边框的颜色,其余不能省略,都改为transparent(透明色)就好<br> 为了照顾兼容性,低版本浏览器,加上font-size: 0; line-height: 0;</p> <pre><code class="prism language-HTML"><style> div { width: 0; height: 0; border-top: 10px solid red; border-bottom: 10px solid green; border-left: 10px solid blue; border-right: 10px solid pink; } p { width: 0; height: 0; border-style: solid; border-width: 10px; border-color: red transparent transparent transparent; font-size: 0; line-height: 0; } </style> </head> <body> <div></div> <p></p> </body> </code></pre> <h3>6.8 引入icon</h3> <blockquote> <p>在网站的链接后面添加favicon.ico</p> </blockquote> <pre><code class="prism language-HTML"> /*https://www.jd.com/favicon.ico*/ /*在head之间引入*/ <link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon"> /*或者*/ <link rel = "icon" href = "favicon.ico"> </code></pre> <p>##　７. HTML5</p> <h3>7.1 HTML5 简介</h3> <p> 万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新的HTML语言,具有新的元素,属性和行为<br> HTML5它有更大的技术集,允许多样化和强大的网站和应用程序<br> 增加了新特性: 语义特性, 本地存储特性, 设备兼容特性, 连接特性, 网页多媒体特性, 三维, 图形及特效特性, 性能与集成特性, CSS3特性<br> XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求</p> <h3>7.2 H5新增语义化标签</h3> <table> <thead> <tr> <th align="left">标签</th> <th align="left">含义</th> <th align="left">标签</th> <th align="left">含义</th> <th align="left">标签</th> <th align="left">含义</th> </tr> </thead> <tbody> <tr> <td align="left"><header></td> <td align="left">头部标签</td> <td align="left"><nav></td> <td align="left">导航栏标签</td> <td align="left"><article></td> <td align="left">内容标签</td> </tr> <tr> <td align="left"><section></td> <td align="left">块级标签</td> <td align="left"><aside></td> <td align="left">侧边栏标签</td> <td align="left"><footer></td> <td align="left">尾部标签</td> </tr> <tr> <td align="left"><audio></td> <td align="left">音频标签</td> <td align="left"><video></td> <td align="left">视频标签</td> <td align="left"><footer></td> <td align="left">尾部标签</td> </tr> </tbody> </table> <p>注意: 这些语义化标签主要是针对搜索引擎的; 一个页面可以多次使用; 在IE9中需要把他们转换为块级元素</p> <h3>7.3 autio音频标签</h3> <blockquote> <p>语法: <autio src=“autio.mp3” controls = “controls”></autio></p> </blockquote> <ul> <li>属性 <ul> <li>autoplay: autoplay; 如果出现该属性,则音频就绪后会马上播放(谷歌禁用)</li> <li>controls: controls; 如果出现该属性,则向用户显示控件,比如播放按钮</li> <li>loop: loop; 如果出现该属性,则每当音频结束时重新开始播放</li> <li>src: url; 要播放的音频URL</li> </ul> </li> </ul> <pre><code class="prism language-HTML5"> <audio controls = "controls"> <source src = "media/snow.mp3" type = "audio/mpeg"> <source src = "media/snow.ogg" type = "audio/ogg"> 你的浏览器不支持audio音频 </audio> </code></pre> <h3>7.4 video视频标签</h3> <blockquote> <p>语法: <video src=“video.mp4” controls = “controls”></video></p> </blockquote> <ul> <li>video属性 <ul> <li>autoplay: autoplay; 视频就绪自动播放</li> <li>controls: xontrols; 向用户显示播放界面(不使用)</li> <li>width: pixels(像素); 设置播放器的宽度</li> <li>height: pixels(像素); 设置播放器的高度</li> <li>loop: loop; 播放完继续播放该视频,循环</li> <li>preload: 规定是否预加载视频(如果有了autoplay就会忽略该属性) <ul> <li>auto(预先加载视频)</li> <li>none(不应加载视频)</li> </ul> </li> <li>src: url; 视频url地址</li> <li>poster: imgurl; 加载等待画面图片</li> <li>muted: muted; 静音播放</li> </ul> </li> </ul> <table> <thead> <tr> <th>格式</th> <th>IE</th> <th>火狐</th> <th>Opera</th> <th>Chrome</th> <th>Safari</th> </tr> </thead> <tbody> <tr> <td>Ogg</td> <td>NO</td> <td>3.5+</td> <td>10.5+</td> <td>5.0+</td> <td>NO</td> </tr> <tr> <td>MPEG 4</td> <td>9.0+</td> <td>No</td> <td>No</td> <td>5.0+</td> <td>3.0+</td> </tr> <tr> <td>Ogg</td> <td>NO</td> <td>4.0+</td> <td>10.6+</td> <td>6.0+</td> <td>NO</td> </tr> </tbody> </table> <pre><code class="prism language-HTML5"> <video controls = "controls" width = "300"> <source src = "video/snow.mp4" type = "video/mpeg"> <source src = "video/snow.ogg" type = "video/ogg"> 你的浏览器不支持video视频 </video> </code></pre> <h2>8 CSS3</h2> <h3>8.1 2D转换</h3> <p>转换(transform): 实现元素位移,旋转,缩放等效果(变形)</p> <ul> <li>移动: translate</li> <li>旋转: rotate</li> <li>变形: scale <ul> <li>综合写法transfrom: translate(150px,150px) rotate(180deg) scale(1.2)…等</li> </ul> </li> </ul> <p><strong>1. 移动: translate</strong></p> <pre><code class="prism language-CSS3">/*语法: 百分比单位相对于自身元素的translate:(50%,50%)*/ transform: translate(x, y) /*或者*/ transform: translateX(x); transform: translateY(y); </code></pre> <p>优点: 不会影响其他元素的位置,对行内标签没有效果</p> <p><strong>2.旋转: rotate</strong></p> <pre><code class="prism language-CSS3">transform: rotate(度数); </code></pre> <ul> <li>rotate里面跟度数,单位deg,如rotate(45deg)</li> <li>角度为正时,顺时针; 负时,为逆时针</li> <li>默认旋转的中心点是元素的中心点</li> </ul> <p><strong>3.旋转的中心点: transform-origin</strong></p> <pre><code class="prism language-CSS3">transform-origin: x y; /*x,y(默认中心点50%,50%), 还可以给x,y设置像素,方位名词: top, bottom, left, center*/ </code></pre> <p><strong>4. 缩放: scale</strong></p> <pre><code class="prism language-CSS3">/*语法: transform: scale(x,y)*/ transform: scale(1,1): 放大一倍,相当于没有放大 transform: scale(2,2): 放大两倍 transform: scale(2) == transform: scale(2,2) transform: scale(0.5,0.5): 缩小一半 /*可以设置中心点缩放,默认就是中心点,而且不会影响其他盒子*/ </code></pre> <h3>8.2 过渡动画CSS3</h3> <p>过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。</p> <p>过渡动画：是从一个状态渐渐的过渡到另外一个状态</p> <p>可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。</p> <p>我们现在经常和 :hover 一起搭配使用。</p> <p>语法格式:</p> <pre><code>transition: 要过渡的属性花费时间运动曲线何时开始; </code></pre> <table> <thead> <tr> <th>属性</th> <th>描述</th> <th>CSS</th> </tr> </thead> <tbody> <tr> <td>transition</td> <td>简写属性，用于在一个属性中设置四个过渡属性。</td> <td>3</td> </tr> <tr> <td>transition-property</td> <td>规定应用过渡的 CSS 属性的名称。</td> <td>3</td> </tr> <tr> <td>transition-duration</td> <td>定义过渡效果花费的时间。默认是 0。</td> <td>3</td> </tr> <tr> <td>transition-timing-function</td> <td>规定过渡效果的时间曲线。默认是 “ease”。</td> <td>3</td> </tr> <tr> <td>transition-delay</td> <td>规定过渡效果何时开始。默认是 0。</td> <td>3</td> </tr> </tbody> </table> <ul> <li>属性</li> </ul> <p> 属性就是你想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。</p> <ul> <li> <p>花费时间</p> <p>transition-duration 花费时间单位是秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒</p> </li> <li> <p>运动曲线 ease(默认)</p> </li> </ul> <p>运动曲线示意图：</p> <p><a href="http://img.e-com-net.com/image/info8/217b9f1f648e485cb470d540dac09705.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/217b9f1f648e485cb470d540dac09705.jpg" alt="HTML5+CSS3_第5张图片" width="650" height="246" style="border:1px solid black;"></a></p> <ul> <li> <p>何时开始</p> <p>默认是 0s 鼠标触发就立即开始可以设置延迟触发时间</p> </li> </ul> <p><strong>案例：</strong></p> <pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> <span class="token comment">/* transition: 要过渡的属性花费时间运动曲线何时开始; */</span> <span class="token comment">/*transition: width 0.6s ease 0s, height 0.3s ease-in 1s, background-color 1s ease 0s;*/</span> <span class="token comment">/* transtion 过渡的意思这句话写到div里面而不是 hover里面 */</span> <span class="token comment">/*二选一*/</span> <span class="token property">transition</span><span class="token punctuation">:</span> all 0.6s<span class="token punctuation">;</span> <span class="token comment">/* 所有属性都变化用all 就可以了后面俩个属性可以省略 */</span> <span class="token punctuation">}</span> <span class="token selector">div:hover</span> <span class="token punctuation">{</span> <span class="token comment">/* 鼠标经过盒子，我们的宽度变为400 */</span> <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h3>8.3 动画</h3> <blockquote> <p>动画(animation): 可通过设置多个节点来精确控制一个或一组动画,用用来实现复杂的动画效果</p> </blockquote> <p>相比于过渡,动画实现跟多变化,更多控制,连续自动播放等效果</p> <p>制作动画: 先定义动画,然后使用(调用)动画</p> <ul> <li>动画序列 <ul> <li>0%是动画的开始,100%是动画完成,这样的规则就是动画序列</li> <li>在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果</li> <li>动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数</li> <li>请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%</li> </ul> </li> <li>动画属性 <ul> <li>@keyframes 规定动画</li> <li>animation 所有动画属性的简写属性,除animation-play-state属性</li> <li>animation-name 规定@keyframes动画名称(必须的)</li> <li>animation-duration 规定动画完成一个周期多花费的秒或毫秒,默认是0(必须的)</li> <li>animation-timing-function 规定动画运动曲线 <ul> <li>linear 动画从头到尾的速度相同,匀速</li> <li>ease 默认. 动画以低速开始,然后加快,在结束前变慢</li> <li>ease-in 动画低速开始</li> <li>ease-out 动画低速结束</li> <li>ease-in-out 动画以低速开始低速结束</li> <li>steps() 指定了时间函数中的间隔数量</li> </ul> </li> <li>animation-delay 规定动画何时开始,默认是0</li> <li>animation-iteration-count 规定动画播放的次数,默认是1,还有infinite</li> <li>animation-direction 规定动画是否在下一周期逆向播放,默认是"normal",alternate逆向播放</li> <li>animation-play-state 规定动画是否正在运行或暂停,默认是"running"还有"paused"</li> <li>animation-fill-mode 规定动画后的结束状态,保持forwards,回到起始backwards</li> <li>简写: animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态,第二个动画;</li> </ul> </li> </ul> <pre><code class="prism language-CSS3">/*1. 定义动画*/ @keyframes move{ 0%{/*开始状态*/ transform: translateX(0px, 0px); } 100%{/*结束状态*/ transform: translateX(1000px, 0px); opacity: 1; /*透明度[0-1]*/ } /*或者*/ from{/*开始状态*/ transform: translateX(0px); } to {/*结束状态*/ transform: translateX(1000px); } } div{ width: 200px; height: 200px; /*2. 调用动画*/ animation-name: move; /*持续时间*/ animation-duration: 3s; /*运动曲线*/ animation-timing-function: ease; /*开始时间*/ animation-delay: 1s; /*动画播放次数: 无限*/ animation-iteration-count: infinite /*动画的播放方向: 逆向*/ animation-deiection: alternate } <div><div> </code></pre> <h3>8.4 3D转换</h3> <ul> <li>3D位移: translate3d(x, y, z)</li> <li>3D旋转: rotate3d(x, y, z)</li> <li>透视: perspective</li> <li>3D呈现: transfrom-style</li> </ul> <p><strong>1. 3D移动: translate3d</strong></p> <p>translform: translateX(100px); 仅在X轴上移动</p> <p>translform: translateY(100px); 仅在Y轴上移动</p> <p>translform: translateZ(100px); 仅在Z轴上移动</p> <p>translform: translateX(100px) translateY(100px) translateZ(100px);</p> <p>translform: translate3d(x,y,z); 分别指定x, y, z轴移动方向的距离</p> <p><strong>2. 透视: perspective</strong></p> <p>perspective: 200px;<br> 透视的属性一般写在被观察的父盒子的身上</p> <p><strong>3. 3D旋转: rotate3d</strong></p> <p>transform: rotateX(45deg): 沿着x轴的正方向旋转45度<br> transform: rotateY(45deg): 沿着y轴的正方向旋转45度<br> transform: rotateZ(45deg): 沿着z轴的正方向旋转45度<br> transform: rotate3d(x, y, z, deg);沿着自定义轴旋转deg为角度</p> <p><strong>4. 3D呈现: transfrom-style</strong></p> <ul> <li>控制子盒子是否开启三维立体环境</li> <li>transfrom-style: flat子元素不开启3d立体空间,默认的</li> <li>transfrom-style: preserce-3d; 子元素开启立体空间</li> <li>代码写给父级,但是影响的却是子盒子</li> </ul> <h3>8.5 渐变</h3> <p><strong>1 线性渐变</strong></p> <pre><code class="prism language-html">background: linear-gradient(起始方向,颜色1,颜色2,...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue); 要加私有前缀,不然不显示 </code></pre> <h3>8.5 浏览器私有前缀</h3> <p>浏览器私有前缀是为了兼容老版本,比较新的就不用添加</p> <ul> <li>-moz-: 代表火狐(firefox)</li> <li>-ms-: IE</li> <li>-webkit-: safari, chrome</li> <li>-o-: Opera</li> </ul> <pre><code class="prism language-css"><span class="token comment">/*例如圆角*/</span> <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">-o-border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> </code></pre> <h2>9 移动端</h2> <p>视口(viewport):浏览期限是页面的屏幕区域,视口可以分: 布局视口, 视觉视口, 理想视口*</p> <ul> <li>布局视口(layout viewport)</li> </ul> <p>一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。<br> iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页,手机显示电脑网页</p> <ul> <li>视觉视口(visual viewport)</li> </ul> <p>字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。<br> 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。</p> <ul> <li> <p>理想视口(ideal viewport)<br> 为了使网站在移动端有最理想的浏览和阅读宽度而设定</p> <p>理想视口，对设备来讲，是最理想的视口尺寸</p> <p>需要手动添写meta视口标签通知浏览器操作</p> <p>meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽</p> <p><strong>总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口</strong></p> </li> </ul> <h3>9.1 视口标签meta</h3> <blockquote> <p><meta name = “viewport” content = “width=device-width, use-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0”></p> </blockquote> <p>content = width = device-width(设备的宽度)<br> use-scalable = no (不允许用户放大(no,0))<br> initial-scale = 1.0(初始缩放)<br> maximum-scale = 1.0(最大缩放比)<br> minimum-scale = 1.0(最小缩放比)</p> <h3>9.2 二倍图</h3> <p><strong>图片缩放</strong><br> 设定图片大小为100px*100px,手机一般是2:1 img{width: 50px; height: 50px}</p> <p><strong>背景图缩放background-size</strong></p> <ul> <li>background-size: 背景图宽度背景图片高度; <ul> <li>cover: 等比例拉伸,背景放大至完全覆盖,可能有些部分显示不全</li> <li>contain: 等比例拉伸,当宽度或高度铺满盒子就不会在拉伸,可能有部分空白区域</li> </ul> </li> <li>精灵图二倍缩放 <ul> <li>先把精灵图缩小至原来的两倍,然后量坐标与大小</li> <li>background-size也要缩放</li> </ul> </li> </ul> <h3>9.3 移动端主流方案</h3> <ol> <li> <p>单独制作移动端页面(主流)</p> <ul> <li>流式布局(百分比布局); <strong>flex弹性布局</strong>; less+rem+媒体查询布局; 混合布局</li> </ul> <ul> <li>通常情况下,网址域名前面加m(mobile)可以打开移动端.通过判断设备打开,则跳转移动端页面,例:m.taobao.com</li> </ul> </li> <li> <p>响应式页面兼容移动端(其次)</p> </li> </ol> <ul> <li>媒体查询; bootstarp</li> </ul> <ul> <li>判断屏幕宽度来改变样式,以适应不同终端,制作麻烦,花大量的精力调兼容性问题</li> </ul> <p>移动端浏览器基本以webkit内核为主,因此只要考虑webkit的兼容性问题,可以使用H5,CSS3</p> <p>移动端CSS初始化文件: normalize.css</p> <ul> <li> <p>Normalize.css</p> <ul> <li>保护了有价值的默认值</li> <li>修复了浏览器的bug <ul> <li>是模块化</li> </ul> </li> <li>拥有详细的文档</li> <li>官网:http://necolas.github.io/normalize.css/</li> </ul> </li> <li> <p>CSS3的盒子模型: box-sizing</p> <ul> <li>box-sizing: content-box; 传统模式</li> <li>box-sizing: border-box; CSS3模式</li> <li>传统盒子模型: 盒子宽度 = width + border + padding;</li> <li>CSS3盒子模型: 盒子的宽度 = CSS中设置的宽度,里面包含border和padding,也就是说不会撑大盒子</li> </ul> </li> </ul> <p><strong>特殊样式</strong></p> <p>CSS3盒子模型</p> <blockquote> <p>box-sizing: border-box;</p> <p>-webkit-box-sizing: border-box;</p> </blockquote> <p>点击高亮我们需要清除: 设置为transparent;</p> <blockquote> <p>-webkit-tap-heighlight-color: transparent;</p> </blockquote> <p>在移动端ios默认外观加上这个属性才能给按钮和输入框自定义样式</p> <blockquote> <p>-webkit-appearance: none;</p> </blockquote> <p>禁用长按页面时的弹出菜单</p> <blockquote> <p>img,a{-webkit-touch-callout: none;}</p> </blockquote> <h2>10 fiex布局</h2> <p>传统布局: 兼容性好, 布局繁琐,局限性,不能在移动端很好的布局<br> fiex布局: 操作方便,布局简单,移动端应用广泛,pc支持较差,IE不支持</p> <p><strong>布局原理</strong>: 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式</p> <p>flexible Box的缩写(弹性布局),用来为盒转模型提供最大的灵活性,任何一个容器都可以指定为flex布局</p> <ul> <li>当我们为父盒子设为flex布局后,子元素的float,clear,vertical-align属性会失效</li> <li>伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局</li> <li>采用flex布局的元素,称为Flex容器(flex container),简称"容器",他的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目" <ul> <li>div就是flex父容器,大的叫容器,小的叫项目</li> <li>span就是自容器flex项目</li> <li>自容器可以横向排列也可以纵向排列</li> </ul> </li> </ul> <h3>10.1 flex的父类属性</h3> <blockquote> <p>给父元素: display: flex;</p> </blockquote> <ul> <li>flex-direction: 设置主轴的方向 <ul> <li>flex布局中,分为主轴和侧轴两个方向或者叫行和列,或者X,Y轴,子元素是根据主轴排列的</li> <li>主轴默认方向就是x轴的方向,水平向右;侧轴方向是y轴的方向,水平向下</li> <li>主轴和侧轴是可以变换的,就可flex-direction设置谁是主轴,剩下的就是侧轴</li> <li>属性: <ul> <li>row: 默认从左到右</li> <li>row-reverse 从右到左</li> <li>column 从上到下</li> <li>column-reverse 从下到上</li> </ul> </li> </ul> </li> <li>justify-content: 设置主轴上的子元素排列方式 <ul> <li>使用这个元素之前一定要确定主轴是哪个</li> <li>属性: <ul> <li>flex-start: 默认值,从头开始,如果主轴是x轴,则从左向右</li> <li>flex-end: 尾部开始排列</li> <li>center: 主轴区中对齐(如果主轴是x轴则水平区中)</li> <li>space-around: 平分剩余空间</li> <li>space-between: 先两边贴边,再平分剩余空间(重要)</li> </ul> </li> </ul> </li> <li>flex-wrap: 设置子元素排列方式 <ul> <li>默认的情款下,盒子都排在一条轴上,flex布局默认不换行</li> <li>属性值: <ul> <li>nowrap: 默认值,不换行</li> <li>wrap换行</li> </ul> </li> </ul> </li> <li>align-content: 设置侧轴上的子元素的排列方式(多行),单行无效果 <ul> <li>属性: <ul> <li>flex-start 在侧轴的头部开始排列</li> <li>flex-end 在侧轴的尾部开始排列</li> <li>center 在侧轴的中间显示</li> <li>stretch 设置子项元素高度平分父元素高度</li> <li>space-around 子项在侧轴平分剩余空间</li> <li>space-between 子项在侧轴先分布在两头.在平分剩余空间</li> </ul> </li> </ul> </li> <li>align-items: 设置侧轴上的子元素排列方式(单行) <ul> <li>该属性是控制侧轴(默认y轴),上的排列顺序,在子项为单向的时候使用</li> <li>属性: <ul> <li>flex-start 默认值从上到下</li> <li>flex-end 从下到上</li> <li>center 挤在一起区中(垂直区中)</li> <li>stretch 拉伸</li> </ul> </li> </ul> </li> <li>flew-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap简写 <ul> <li>flexflow: row wrap;</li> </ul> </li> </ul> <h3>10.2 flex的子项属性</h3> <p>flex属性定义了子项目分配剩余控件,用flex来表示占多少份数</p> <blockquote> <p>flex: number;默认是0</p> </blockquote> <p><strong>align-self</strong>属性允许单个项目与其他项目不一样的对齐方式.可以覆盖align-items属性,默认值为auto,标识继承父元素的align-items属性,如果没有父元素,则等同于stretch</p> <blockquote> <p>span:nth-child(2){align-self: flex-end;}</p> </blockquote> <p><strong>order</strong>属性定义项目的排列顺序<br> 数值越小,排列越靠前面,默认为0</p> <h2>11 rem适配布局</h2> <h3>11.1 rem基础</h3> <p>rem(root em)是相对单位, 类似于em,em是父元素字体大小,不同的是rem的基准是相对于html元素的字体大小<br> 优点:可以通过修改html里面的文字大小来改变页面中元素的大小可以实现整体控制<br> 例如: 根元素html设置font-size: 12px;非根元素设置width:2rem;则换成px表示就是24px;</p> <pre><code class="prism language-html">html { font-size: 14px; } div { font-size: 12px; } p{ /*em相对于父元素div的字体大小来说,生成一个120x120的盒子*/ width: 10em; height: 10em; /*rem相对于html元素字体大小来说,生成140x140的盒子*/ width: 10rem; 10*14=140 height: 10rem; } </code></pre> <h3>11.2 媒体查询</h3> <p>媒体查询(Media Query)是CSS3的语法</p> <ul> <li>使用@media查询,可以针对不同的媒体类型定义不同的样式</li> <li>@media可以针对不同的屏幕尺寸设置不同的样式</li> <li>当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面</li> <li>目前针对很多苹果手机,android手机,平板等设备都用得到多媒体查询</li> </ul> <blockquote> <p>语法: media mediatype and|no|only (media feature){CSS-Code;}</p> </blockquote> <ul> <li>用@media开头注意@符号</li> <li>mediatype媒体类型 <ul> <li>all 用于所有的设备</li> <li>print 用于打印机和打印预览</li> <li>scree 用于电脑屏幕,平板电脑,智能手机</li> </ul> </li> <li>关键字 and not only <ul> <li>and可以将多个多媒体特性连接在一起,相当于且的意思</li> <li>not: 排除某个媒体类型,相当于非得意思,可以省略</li> <li>only: 指定某个特定的媒体查询类型,可以省略</li> </ul> </li> <li>media featrue 媒体特性必须由小括号包含 <ul> <li>width:定义输出设备中页面可见区域的宽度</li> <li>min-width: 定义输出设备中页面最小可见区域宽度</li> <li>max-width: 定义输出设备中页面最大可见区域宽度</li> </ul> </li> </ul> <pre><code class="prism language-html">/*在屏幕上,最大的宽度为800px*/ @media screen and (max-width: 800px){ body { background-color: pink; } } @media scree and (min-width: 320px) and (max-width: 500px) { body { background-color: purple; } } </code></pre> <pre><code class="prism language-html">例: 实现放大缩小 * { margin: 0; padding: 0; } media screen and (min-width: 32px) { html { font-size: 50px; } } media screen and (min-width:640px) { html { font-size: 100px; } } .top { height: 1rem; font-size: .5rem; background-color: green; color: #fff; text-align: center; line-height: 1rem; } <div class = "top">购物车<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <h3>10.3 媒体查询引入css</h3> <blockquote> <p>语法: <link rel = “stylesheet” media = “mediatype and|not|only (media feature)” href = “mystyle.css”></p> </blockquote> <h2>11 less</h2> <p>less(Leaner Style Sheets): 一门扩展语言,也是CSS的预处理器,作为CSS的一种形式的扩展,他并没有减少CSS的功能,而是在现有的CSS的语法上,为CSS加入了程序式语言特性,在CSS的语法基础上,引入了Mixin(混入),运算一级函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本<br> 常见的CSS预处理器: Sass, Less, Stylus</p> <h3>11.1 less安装</h3> <ul> <li>安装nodejs,可以选择版本(8.0)</li> <li>检查是否安装成功,使用cmd,node-v查看版本号</li> <li>基于nodejs在线安装Less,使用cmd,"npm install -g less</li> <li>检查是否安装成功,使用cmd命令, "lessc -v"查看版本就可以啦</li> </ul> <p>less使用: 新建less后缀的文件,在这个less文件里面书写less语句</p> <ul> <li>less变量</li> <li>less编译</li> <li>less嵌套</li> <li>less运算</li> </ul> <h3>11.2 less变量</h3> <blockquote> <p>@变量名: 值;</p> </blockquote> <p>变量名规范: 必须以@作为前缀, 不能包含特殊字符, 不能以数字开头, 大小写敏感</p> <pre><code class="prism language-HTML">//新建一个my.less文件 @color: pink; //定义一个粉色变量 @font14: 14px; //定义字体为14号字体 body { background-color: @color; font-size: @font14; } div { background-color: @color; } </code></pre> <h3>11.3 less编译</h3> <p>本质上,less包含一套自定义的语法及一个解析器, 用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件,所以less文件需要编译生成CSS文件,这样html才能使用</p> <p>Easey LESS插件用来把less文件编译成为CSS文件,只要保存就会自动生成CSS文件,然后引入生成的CSS文件</p> <h3>11.4 嵌套</h3> <blockquote> <p>伪类,伪元素,或者交集选择器需要在前面加&符号,然后写伪元素, 伪类和交集选择器</p> </blockquote> <pre><code class="prism language-HTML"> /*less文件*/ .header { width: 200px; height: 200px; background-color: pink; a { color: red; &:hover { color: green; } } } /*less文件生成的CSS文件*/ .header { width: 200px; height: 200px; background-color: pink; } .header a { color: red; } .header a:hover { color: green; }  <header> <a herf = "#"></a> </header> </code></pre> <h3>11.5 less运算</h3> <blockquote> <p>运算符有: + - * /</p> </blockquote> <ul> <li>运算符左右必须加空格</li> <li>运算的顺序和数学一样</li> <li>两个数参与运算, 如果一个有单位,则最后的结果的以这个单位为准</li> <li>如果两个都有单位,而且不一样,最后的结果以第一个单位为准</li> </ul> <pre><code class="prism language-HTML">// less文件 @border: 5px + 5; div { width: 200px - 50; height: 200px * 2; border: @border solid red; background-color: #666 - #222; } header { width: 82 / 50rem; height: 82 / 50rem; } /*生成CSS文件*/ div { width: 150px; height: 400px; border: 10px solid red; background-color: #444; } header { width: 1.64rem; height: 1.64rem; } </code></pre> <h3>11.6 rem适配方案</h3> <ul> <li>让一些不能等比自适应元素,达到当设备尺寸发生改变的时候,等比例适配当前的元素</li> <li>使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做单位的尺寸</li> </ul> <p>技术方案一: less, 媒体查询, rem</p> <ul> <li>动态设置htmlfont-size大小 <ul> <li>假设设计稿是750px</li> <li>于是我们就可以把设计稿划分为15等分(20等份,等分不一),每份html大小就是50px</li> <li>在320px设备的时候,字体大小就是320/15就是21.33</li> <li>页面元素大小除以不同的html字体大小会发现他们的比例还是不相同的</li> <li>比如750px的设计稿,在100<em>10像素的页面元素750屏幕下,就是100/50转换为rem,就是2rem</em>2rem比例是1:1</li> <li>320屏幕下,html字体大小为21.33,则2rem = 42.66px,此时宽和高都是42.66,但是宽和高比例还是1:1</li> <li>元素取值方法 <ul> <li>页面元素rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)</li> <li>屏幕宽度 / 划分的份数 = html font-size的大小</li> <li>或者: 页面元素的rem值 = 页面元素值(px) / html font-size字体大小<br> 技术方案二: flexible.js, rem</li> </ul> </li> </ul> </li> </ul> <h2>CSS规范</h2> <h3>1. CSS属性书写顺序</h3> <ul> <li>遵循以下顺序 <ul> <li>布局定位(显示)属性: display, position, float, clear, visibility, overflow</li> <li>自身属性: width, height, margin, padding, border, background(透明背景CSS3除外)</li> <li>文本属性: color, font, text-decoration, text-align, vertical-align, white-space, break-word</li> <li>其他属性(CSS3): content, currsor, border-radius, box-shadow, text-shadow, background: linear-gradient …</li> </ul> </li> </ul> <h3>2. CSS布局流程</h3> <p> 为了提高网页制作的效率,布局时通常有以下的布局流程,具体如下:</p> <ul> <li>必须确定页面版心(可视区),我们测量可以得知</li> <li>分析页面中的行模块,以及每个行模块中的列模块.其实页面布局就是一行一行罗列出来的</li> <li>制作HTML结构,我们还是遵循,先有结构后有样式的原则,结构永远最重要</li> <li>然后开始运行盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块</li> </ul> <h3>3. CSS文件名</h3> <pre>主要的 master.css 模块 module.css　基本共用 base.css　布局、版面 layout.css　　主题 themes.css　专栏 columns.css　文字 font.css　　表单 forms.css　　补丁 mend.css　　打印 print.css 公共样式: common.css </pre> <h3>4. 常用的CSS命名</h3> <pre><code class="prism language-HTML">头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar　　栏目：column　　页面外围控制整体佈局宽度：wrapper　　左右中：left right center　　登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot　　新闻：news　　下载：download　　子导航：subnav　　菜单：menu　　标签：tags　　子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer　　版权：copyright　　滚动：scroll　　内容：content　　文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title　　加入：joinus　　指南：guide　　服务：service　　注册：regsiter　　状态：status　　投票：vote　　合作伙伴：partner </code></pre> <pre><code class="prism language-HTML">关于: about　　账户: account　箭头图标: arrow　　文章: article　　边栏: aside 音频: audio　　头像: avatar　　背景: bg,background　　栏（工具类): bar 品牌化: branding　　分类: category　　面包屑: crumb,breadcrumbs　　按钮: btn,button 标题，说明: caption　　图表: chart　　清除浮动: clearfix　　关闭: close　　列: col,column 评论: comment　　社区: community　　容器: container　　内容: content　　版权: copyright 当前态，选中态: current　　默认: default　　描述: description　　细节: details 　　不可用: disabled　　文章，博文: entry　　错误: error　　偶数，常用于多行列表或表格中: even 失败（提示): fail　　专题: feature　　收起: fewer　　用于表单的输入区域: field 　　图: figure 筛选: filter　　第一个，常用于列表中: first　　隐藏: hide　　页脚: footer　　论坛: forum 画廊: gallery　　模块，清除浮动: group　　页头: header　　帮助: help　　高亮: hightlight 主页: home 　　图标: icon　　信息: info,information　　最后一个,常用语列表: last　　链接: links　　登录: login　　退出: logout　　标志: logo　　主题: main　　菜单: menu 作者、更新时间等信息栏，一般位于标题之下: meta　　模块: module　　更多（展开): more 消息: msg,message　　导航: nav,navigation　　下一页: next　　小块: nub 奇数，常用于多行列表或表格中: odd　　鼠标离开: off 　　鼠标移过: on　　输出: output 分页: pagination　　弹窗: pop,popup　　预览: preview 　　上一页: previous 主要: primary　　进度条: progress 　　促销: promotion　　推荐: rcommd,recommendations 注册: reg,register　顶部导航: shortcut 保存: save　　搜索: search　　次要: secondary　　区块: section 已选: selected　　分享: share　　显示: show　　边栏，侧栏: sidebar 　　排序: sort 幻灯片，图片切换: slide 　　次级的，子级的: sub 　　提交: submit 　　订阅: subscribe 副标题: subtitle 　　成功（提示): success 　　摘要: summary 　　标签: tab 　　表格: table 文本: txt,text 　　缩略图: thumbnail 　　时间: time 　　提: tips 　　标题: title 　　视频: video 容器，包，一般用于最外层: wrap 　　容器，包，一般用于最外层: wrapper </code></pre> <h3>5. id命名</h3> <p><strong>1. 页面结构</strong></p> <pre>容器: container　　页头：header　　内容：content/container　　页面主体：main　　页尾：footer　　导航：nav　　侧栏：sidebar　栏目：column　　页面外围控制整体佈局宽度：wrapper　　左右中：left right center </pre> <p><strong>2. 导航</strong></p> <pre>导航：nav　　主导航：mainnav　　子导航：subnav　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu　　标题: title　　摘要: summary </pre> <p><strong>3. 功能</strong></p> <pre>标志：logo　　广告：banner　　登陆：login　　登录条：loginbar　　注册：register　　搜索：search　　功能区：shop　　标题：title　　加入：joinus　　状态：status　　按钮：btn　　滚动：scroll　　标籤页：tab　　文章列表：list　　提示信息：msg　　当前的: current　　小技巧：tips　　图标: icon　　注释：note　　指南：guild　　服务：service　　热点：hot　　新闻：news　　下载：download　　投票：vote　　合作伙伴：partner　　友情链接：link　　版权：copyright 按钮: btn,button 标题，说明: caption　　图表: chart　　清除浮动: clearfix　　关闭: close　　列: col,column 评论: comment　　社区: community　　容器: container　　内容: content　　版权: copyright 当前态，选中态: current　　默认: default　　描述: description　　细节: details 　　不可用: disabled　　文章，博文: entry　　错误: error　　偶数，常用于多行列表或表格中: even 失败（提示): fail　　专题: feature　　收起: fewer　　用于表单的输入区域: field 　　图: figure 筛选: filter　　第一个，常用于列表中: first　　隐藏: hide　　页脚: footer　　论坛: forum 画廊: gallery　　模块，清除浮动: group　　页头: header　　帮助: help　　高亮: hightlight 主页: home 　　图标: icon　　信息: info,information　　最后一个,常用语列表: last　　链接: links　　登录: login　　退出: logout　　标志: logo　　主题: main　　菜单: menu 作者、更新时间等信息栏，一般位于标题之下: meta　　模块: module　　更多（展开): more 消息: msg,message　　导航: nav,navigation　　下一页: next　　小块: nub 奇数，常用于多行列表或表格中: odd　　鼠标离开: off 　　鼠标移过: on　　输出: output 分页: pagination　　弹窗: pop,popup　　预览: preview 　　上一页: previous 主要: primary　　进度条: progress 　　促销: promotion　　推荐: rcommd,recommendations 注册: reg,register　顶部导航: shortcut 保存: save　　搜索: search　　次要: secondary　　区块: section 已选: selected　　分享: share　　显示: show　　边栏，侧栏: sidebar 　　排序: sort 幻灯片，图片切换: slide 　　次级的，子级的: sub 　　提交: submit 　　订阅: subscribe 副标题: subtitle 　　成功（提示): success 　　摘要: summary 　　标签: tab 　　表格: table 文本: txt,text 　　缩略图: thumbnail 　　时间: time 　　提: tips 　　标题: title 　　视频: video 容器，包，一般用于最外层: wrap 　　容器，包，一般用于最外层: wrapper ``` ### 5. id命名 **1. 页面结构** ```tes 容器: container　　页头：header　　内容：content/container　　页面主体：main　　页尾：footer　　导航：nav　　侧栏：sidebar　栏目：column　　页面外围控制整体佈局宽度：wrapper　　左右中：left right center ``` **2. 导航** ```tes 导航：nav　　主导航：mainnav　　子导航：subnav　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu　　标题: title　　摘要: summary ``` **3. 功能** ```tes 标志：logo　　广告：banner　　登陆：login　　登录条：loginbar　　注册：register　　搜索：search　　功能区：shop　　标题：title　　加入：joinus　　状态：status　　按钮：btn　　滚动：scroll　　标籤页：tab　　文章列表：list　　提示信息：msg　　当前的: current　　小技巧：tips　　图标: icon　　注释：note　　指南：guild　　服务：service　　热点：hot　　新闻：news　　下载：download　　投票：vote　　合作伙伴：partner　　友情链接：link　　版权：copyright ``` </pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1281905387825545216"></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">你可能感兴趣的:(HTML5+CSS3,html5,css3,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1903883482262728704.htm" title="Electron打包文件生成.exe文件打开即可使用" target="_blank">Electron打包文件生成.exe文件打开即可使用</a> <span class="text-muted">糕冷小美n</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、Electron打包，包括需要下载的内容和环境配置步骤注意：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js和npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环境命令node-vnpm-v输出版本号，说明安装成功2、创建Electron项目2.1创建项目目录打开命令行工具，创建一</div> </li> <li><a href="/article/1903873756976181248.htm" title="致现在的我与未来的我：编程长河中的摆渡手札" target="_blank">致现在的我与未来的我：编程长河中的摆渡手札</a> <span class="text-muted">星糖曙光</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF%E8%AF%AD%E8%A8%80%EF%BC%88node/1.htm">后端语言（node</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue%E7%AD%89%E7%AD%89%EF%BC%89/1.htm">vue等等）</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>致现在的我与未来的我：编程长河中的摆渡手札一、技术积累：从萤火微光到星河初现（约3000字）前端的启蒙：HTML/CSS与"所见即所得"的魔法“代码是诗，但诗未必能成为产品”，初学编程时，我如《禅与摩托车维修艺术》中追寻"良质"的探索者，在W3School的教程中笨拙地敲下第一行。记得仿写京东首页时，一个浮动布局的错位让我通宵调试，最终发现竟是未闭合的标签——这让我想起《代码大全》中的警示：“计算</div> </li> <li><a href="/article/1903866571588169728.htm" title="C++在线OJ负载均衡项目" target="_blank">C++在线OJ负载均衡项目</a> <span class="text-muted">平凡的小y</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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.项目所用技术和开发环境所用技术C++STL标准库Boost准标准库(字符串切割)cpp-httplib第三方开源网络库ctemplate第三方开源前端网页渲染库jsoncpp第三方开源序列化、反序列化库负载均衡设计MySQLCconnectAce前端在线编辑器html/css/js/jquery/ajax开发环境Ubuntu云服务器vscodeMysqlWorkben</div> </li> <li><a href="/article/1903855977975836672.htm" title="大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版）" target="_blank">大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版）</a> <span class="text-muted">FFF-X</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放，通过以下关键步骤实现：基准比例锁定：基于设计稿宽高比（16:9）建立基准比例视口实时检测：通过resize事件监听窗口变化智能比例判断：当视口更宽时：保持高度基准，</div> </li> <li><a href="/article/1903855472880971776.htm" title="Font Awesome 的使用" target="_blank">Font Awesome 的使用</a> <span class="text-muted">FFF-X</span> <div>第一种直接使用命令npminstallfont-awesome--save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了入口js中引入import'font-awesome/css/font-awesome.min.css'然后就可以使用了，例如下面这样第二种cdn要使用FontAwesome图标，请在HTML页面的部分中添加以下行：1、国内推荐CDN：2、海外推荐CDN推荐第二</div> </li> <li><a href="/article/1903809437764743168.htm" title="前端性能优化-知识点" target="_blank">前端性能优化-知识点</a> <span class="text-muted">甲亿</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>Web性能优化意义1.减少整体加载时间：减小文件体积、减少HTTP请求、使用预加载。2.使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载。3.平滑和交互性：使用CSS替代JS动画、减少UI重绘。4.加载表现形式：使用加载动画、进度条、骨架屏等过渡信息，让用户感觉到页面加载更快。5.性能监测：性能指标、性能测试、性能监控持续优化等Web性能指标RAIL性能模型Response(响应)：快速</div> </li> <li><a href="/article/1903804271321739264.htm" title="性能优化中如何“避免链接关键请求”" target="_blank">性能优化中如何“避免链接关键请求”</a> <span class="text-muted">混血哲谈</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：</div> </li> <li><a href="/article/1903769711456350208.htm" title=".net 4.0 webServices 的使用，从前端到后端，代码超全。" target="_blank">.net 4.0 webServices 的使用，从前端到后端，代码超全。</a> <span class="text-muted">静静香甜</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin</div> </li> <li><a href="/article/1903758738213367808.htm" title="HTML+CSS案例展示(CSS3D效果旋转相册)" target="_blank">HTML+CSS案例展示(CSS3D效果旋转相册)</a> <span class="text-muted">hacalili</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其</div> </li> <li><a href="/article/1903757352520183808.htm" title="html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册" target="_blank">html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册</a> <span class="text-muted">岑依惜</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%86%8C%E7%BF%BB%E8%BD%AC%E6%95%88%E6%9E%9C/1.htm">相册翻转效果</a> <div>这篇博客的目的是因为上篇HTML5CSS3专题诱人的实例CSS3打造百度贴吧的3D翻牌效果中有个关于CSS3D效果的比较重要的知识点没讲到，就是perspective和tranlateY效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~1、perspectiveperspective属性包括两个属性：none和具有单位的长度值。其中perspective属</div> </li> <li><a href="/article/1903756469484974080.htm" title="HTML5+CSS实现图片3D旋转效果，附音乐" target="_blank">HTML5+CSS实现图片3D旋转效果，附音乐</a> <span class="text-muted">宁醉小白</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>利用程序呈现图片，可以俘获一众女生的心，增加音乐可以实现图片变化的同时也带上了想要得到效果，如此一程序实乃众人之喜。先看看程序呈现的效果，还是特别吸引人的。先在网上爬取想要呈现的美女照片，存放在文件夹img-one，与程序路径一致。图片像素需进行调整，同一面图片可以使用同一个图片，保持图片像素一致的同时也增加了立体感。第二张02.jpg和2.jpg可以倒着放，这样在程序实现的时候，可以和其他方向的</div> </li> <li><a href="/article/1903755965526765568.htm" title="炫酷的HTML5粒子动画特效实现详解" target="_blank">炫酷的HTML5粒子动画特效实现详解</a> <span class="text-muted">木木黄木木</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>炫酷的HTML5粒子动画特效实现详解这里写目录标题炫酷的HTML5粒子动画特效实现详解项目介绍技术栈项目架构1.HTML结构2.样式设计核心实现1.粒子类设计2.动画效果实现星空效果烟花效果雨滴效果3.鼠标交互性能优化效果展示总结项目介绍本文将详细介绍如何使用HTML5Canvas技术实现一个炫酷的粒子动画特效系统。该系统包含三种不同的动画效果：星空、烟花和雨滴，并支持鼠标交互功能，能够为网页增添</div> </li> <li><a href="/article/1903753561662091264.htm" title="HTML实现酷炫3D相册" target="_blank">HTML实现酷炫3D相册</a> <span class="text-muted">算法与编程之美</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd</div> </li> <li><a href="/article/1903753056751775744.htm" title="CSS动画：逐帧动画与steps()函数" target="_blank">CSS动画：逐帧动画与steps()函数</a> <span class="text-muted">双囍菜菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9A%8F%E8%AE%B0/1.htm">前端随记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代</div> </li> <li><a href="/article/1903752297968627712.htm" title="【Html+CSS】3D旋转相册" target="_blank">【Html+CSS】3D旋转相册</a> <span class="text-muted">小木荣</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a> <div>3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s</div> </li> <li><a href="/article/1903740444278321152.htm" title="SassScript：Sass中的编程特性详解" target="_blank">SassScript：Sass中的编程特性详解</a> <span class="text-muted">jiajia651304</span> <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变</div> </li> <li><a href="/article/1903736158651740160.htm" title="OpenLayers集成天地图服务开发指南" target="_blank">OpenLayers集成天地图服务开发指南</a> <span class="text-muted">喆星时瑜</span> <a class="tag" taget="_blank" href="/search/WebGIS/1.htm">WebGIS</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E5%9C%B0%E5%9B%BE/1.htm">天地图</a><a class="tag" taget="_blank" href="/search/OpenLayers/1.htm">OpenLayers</a><a class="tag" taget="_blank" href="/search/GIS/1.htm">GIS</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E5%9C%B0%E5%9B%BE/1.htm">天地图</a><a class="tag" taget="_blank" href="/search/WebGIS/1.htm">WebGIS</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9B%BE/1.htm">地图</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9B%BEAPI/1.htm">地图API</a> <div>以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：一、开发环境搭建1.1OpenLayers库引入ol.css：包含地图控件、图层等可视化样式ol.js：OpenLayers核心功能库推荐使用固定版本号（如v7.3.0）确保稳定性1.2地图容器设置.map{//设置地图控件显示尺寸height:95vh;width:95vw;}使用视口单位(vh/vw)实现响应式布局保留</div> </li> <li><a href="/article/1903699821768798208.htm" title="为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？" target="_blank">为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？</a> <span class="text-muted">z2637305611</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、为什么后端路由需要携带/api作为前缀？1.区分API端点与其他路由在Web应用程序中，后端不仅需要处理API请求，还可能需要处理静态资源（如HTML、CSS、JS文件）或其他服务（如WebSocket）。通过为API路由添加/api前缀，可以清晰地将其与其他请求区分开来，避免路由冲突。例如：API请求：https://example.com/api/users静态资源请求：https://e</div> </li> <li><a href="/article/1903687217507790848.htm" title="Scrapy 入门教程" target="_blank">Scrapy 入门教程</a> <span class="text-muted">zru_9602</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a> <div>Scrapy入门教程Scrapy是一个用于爬取网站数据的Python框架，功能强大且易于扩展。本文将介绍Scrapy的基本概念、安装方法、使用示例，并展示如何编写一个基本的爬虫。1.什么是Scrapy？Scrapy是一个开源的、用于爬取网站数据的框架，主要特点包括：高效、异步的爬取机制强大的XPath和CSS选择器解析能力内置中间件，支持代理、去重等功能易于扩展，适用于各种爬虫需求2.安装Scra</div> </li> <li><a href="/article/1903633702395637760.htm" title="前端开发：这就是终点吗？" target="_blank">前端开发：这就是终点吗？</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而</div> </li> <li><a href="/article/1903596056646578176.htm" title="HTML5实现左右滑动数据变化" target="_blank">HTML5实现左右滑动数据变化</a> <span class="text-muted">ice_junjun</span> <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8A%A8/1.htm">左右滑动</a> <div>在HTML中怎么样实现左右滑动？代码附上Bootstrap实例-下拉菜单（Dropdowns）-->-->欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。学习更多-->响应式表格布局产品付款日期状态产品123/11/2013待发货产品210/11/2013发货中产品320/10/2013待确认产品420/10/2013已退货产品123/11/2013待发货产品210/11/2013发货</div> </li> <li><a href="/article/1903429327760977920.htm" title="HTTP请求过程详解" target="_blank">HTTP请求过程详解</a> <span class="text-muted">酥暮沐</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>一、整体流程概述HTTP请求过程从用户输入URL开始，到页面完成渲染结束，主要分为DNS解析、建立连接、发送请求、处理响应、渲染页面、断开连接六个核心阶段。重要：当用户输入URL后，浏览器首先解析域名，通过DNS查询获取服务器IP。接着通过三次握手建立TCP连接，如果是HTTPS还会进行TLS加密协商。然后浏览器发送HTTP请求，服务器处理后返回响应数据。浏览器解析HTML/CSS，构建DOM和渲</div> </li> <li><a href="/article/1903415088333778944.htm" title="前端如何实现鼠标移上这个元素，另外一个元素变色" target="_blank">前端如何实现鼠标移上这个元素，另外一个元素变色</a> <span class="text-muted">=^_^=银爪</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定</div> </li> <li><a href="/article/1903411680512110592.htm" title="html hover作用另外一个对象,css:hover状态改变另一个元素样式的使用" target="_blank">html hover作用另外一个对象,css:hover状态改变另一个元素样式的使用</a> <span class="text-muted">吃货喵</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/hover%E4%BD%9C%E7%94%A8%E5%8F%A6%E5%A4%96%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1/1.htm">hover作用另外一个对象</a> <div>效果演示css:hover状态改变另一个元素样式的使用.box{width:150px;height:150px;background-color:#069;line-height:150px;text-align:center;margin:20px0;color:#FFF;}.change{font-size:20px;color:#0cf;}/*情景一：两个是兄弟元素*/.box:hover</div> </li> <li><a href="/article/1903408274821148672.htm" title="单页响应式图片懒加载HTML页面" target="_blank">单页响应式图片懒加载HTML页面</a> <span class="text-muted">Wiktok</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>设计说明响应式设计：使用CSSGrid布局，根据屏幕宽度自动调整色块数量在不同设备上都有良好的显示效果懒加载：使用标签的loading="lazy"属性实现原生懒加载图片在滚动到视口附近时才会加载色块展示：使用随机生成的色块作为内容展示每个色块都有独特的颜色和编号色块有悬停效果和阴影效果分类展示：将色块分为自然风光、城市建筑和抽象艺术三类每类都有独立的标题和网格布局响应式懒加载页面*{margin</div> </li> <li><a href="/article/1903406003735556096.htm" title="CSS特效花样鼠标悬停效果" target="_blank">CSS特效花样鼠标悬停效果</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8BCSS/1.htm">前端基础入门三大核心之CSS</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a> <div>CSS特效花样鼠标悬停效果鼠标悬停效果概述基本概念与作用示例一：基本的颜色变化代码解释示例二：渐变背景色代码解释示例三：放大与阴影效果代码解释示例四：文字提示代码解释示例五：旋转和翻转代码解释实际工作中的使用技巧在现代Web开发中，良好的用户体验往往意味着不仅仅要有一个功能完备的应用程序，还需要具备吸引人的视觉效果。鼠标悬停效果便是提升网站交互性和吸引力的一种常见方式。本文将探讨如何运用CSS来实</div> </li> <li><a href="/article/1903404862289276928.htm" title="CSS实现当鼠标停留在一个元素上时，使得两个元素的样式发生改变" target="_blank">CSS实现当鼠标停留在一个元素上时，使得两个元素的样式发生改变</a> <span class="text-muted">Lipn</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>这里我们实现一个鼠标停留在input框时，使得input和button两个元素的边框都变颜色首先该元素结构如下，HTML是这样的第一步：当鼠标悬停在input上时，使用css伪类选择器，代码如下：这里空格是后代选择器，:hover是伪类选择器.testinput:hover{}第二步：当鼠标悬停在input上时，选中button元素：从html可以看到input和button属于兄弟关系，相邻兄弟</div> </li> <li><a href="/article/1903402342573731840.htm" title="CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果" target="_blank">CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果</a> <span class="text-muted">Wiktok</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现：1.使用兄弟选择器（AdjacentSiblingSelector）如果两个元素是兄弟关系（即它们有相同的父元素），可以使用+或~选择器来实现。示例代码：.element1:hover+.element2{background-color:yellow;}悬停在我上面另一个元素在这个例子中，当鼠标悬</div> </li> <li><a href="/article/1903386076056186880.htm" title="Geotrust SSL证书和SymantecSSL证书哪个好?" target="_blank">Geotrust SSL证书和SymantecSSL证书哪个好?</a> <span class="text-muted">weixin_34293246</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>GeoTrust是全球第二大数字证书颁发机构(CA)，也是身份认证和信任认证领域的领导者，GeoTrust始终坚持低成本地部署SSL数字证书和实现各种身份认证。其在2001年到2006年占领全球市场25%的市场分额，在全球150多个国家有超过10万个用户在使用GeoTrust的安全产品，为用户的网站信息进行保驾护航。Symantec作为信息安全领域全球领先的解决方案提供商，也是全球最大的信息安全厂</div> </li> <li><a href="/article/1903379388280401920.htm" title="HTML5前端第七章节" target="_blank">HTML5前端第七章节</a> <span class="text-muted">NaZiMeKiY</span> <a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>本章节为前端网页页面实战，包含我们之前所学的全部内容一.创建项目目录1.网站根目录：网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等2.根目录之下的文件夹（1）.images文件夹：存放固定使用的图片素材（2）.uploads文件夹：存放非固定使用的图片素材（3）.CSS文件夹：存放CSS文件（使用link标签引入）在CSS文件夹中又分为</div> </li> <li><a href="/article/61.htm" title="Enum用法" target="_blank">Enum用法</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ"; </div> </li> <li><a href="/article/188.htm" title="【Spark九十七】RDD API之aggregateByKey" target="_blank">【Spark九十七】RDD API之aggregateByKey</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. aggregateByKey的运行机制 /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type</div> </li> <li><a href="/article/315.htm" title="hive创建表是报错： Specified key was too long; max key length is 767 bytes" target="_blank">hive创建表是报错： Specified key was too long; max key length is 767 bytes</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>今天在hive客户端创建表时报错，具体操作如下 hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto</div> </li> <li><a href="/article/442.htm" title="Map 与 JavaBean之间的转换" target="_blank">Map 与 JavaBean之间的转换</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%9C%81/1.htm">自省</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E6%8D%A2/1.htm">转换</a><a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%B0%84/1.htm">反射</a> <div> 最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb</div> </li> <li><a href="/article/569.htm" title="java连接ftp下载" target="_blank">java连接ftp下载</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f</div> </li> <li><a href="/article/696.htm" title="web报表工具FineReport使用中遇到的常见报错及解决办法（二）" target="_blank">web报表工具FineReport使用中遇到的常见报错及解决办法（二）</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div> 抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、没有返回数据集：在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S</div> </li> <li><a href="/article/823.htm" title="linux 系统cpu 内存等信息查看" target="_blank">linux 系统cpu 内存等信息查看</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/cpu/1.htm">cpu</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/liunx/1.htm">liunx</a> <div>1 查看CPU 　　1.1 查看CPU个数　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数　　# cat /proc/cpuinfo | grep "cpu cores" | u</div> </li> <li><a href="/article/950.htm" title="Spring中的AOP" target="_blank">Spring中的AOP</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div> Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。来一个简单的Sample: 目标类： [java] view plain copy print ? package&nb</div> </li> <li><a href="/article/1077.htm" title="placeholder(HTML 5) IE 兼容插件" target="_blank">placeholder(HTML 5) IE 兼容插件</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery+jQuery%E6%8F%92%E4%BB%B6/1.htm">jquery jQuery插件</a> <div>placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function</div> </li> <li><a href="/article/1204.htm" title="Object类,值域,泛型等总结(适合有基础的人看)" target="_blank">Object类,值域,泛型等总结(适合有基础的人看)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B%E7%9A%84%E7%BB%A7%E6%89%BF%E5%92%8C%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">泛型的继承和通配符</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E7%9A%84%E5%80%BC%E5%9F%9F/1.htm">变量的值域</a><a class="tag" taget="_blank" href="/search/Object%E7%B1%BB%E8%BD%AC%E6%8D%A2/1.htm">Object类转换</a> <div>java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个问题,所以在家的这几天回忆一下过去不知道的每个小知识点变量的值域; package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo</div> </li> <li><a href="/article/1331.htm" title="JDK1.5 Condition接口" target="_blank">JDK1.5 Condition接口</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Condition/1.htm">Condition</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。条件（也称为条件队列或条件变量）为线程提供了一</div> </li> <li><a href="/article/1458.htm" title="开源中国OSC源创会记录" target="_blank">开源中国OSC源创会记录</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/MemSQL/1.htm">MemSQL</a> <div>一.Strata+Hadoop World（SHW）大会是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。二.Hadoop &nbs</div> </li> <li><a href="/article/1585.htm" title="【Java范型七】范型消除" target="_blank">【Java范型七】范型消除</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在</div> </li> <li><a href="/article/1712.htm" title="【Spark九十四】spark-sql工具的使用" target="_blank">【Spark九十四】spark-sql工具的使用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store 关于Hive build into Spark</div> </li> <li><a href="/article/1839.htm" title="js做的各种倒计时" target="_blank">js做的各种倒计时</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/js+%E5%80%92%E8%AE%A1%E6%97%B6/1.htm">js 倒计时</a> <div> 第一种：精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="middle"</div> </li> <li><a href="/article/1966.htm" title="java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接" target="_blank">java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){</div> </li> <li><a href="/article/2093.htm" title="mongoDB安装" target="_blank">mongoDB安装</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb%E5%AE%89%E8%A3%85+%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C/1.htm">mongodb安装基本操作</a> <div>mongoDB的安装 1:mongoDB下载 https://www.mongodb.org/downloads 2:下载mongoDB下载后解压 </div> </li> <li><a href="/article/2220.htm" title="[开源项目]引擎的关键意义" target="_blank">[开源项目]引擎的关键意义</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a> <div> 一个系统，最核心的东西就是引擎。。。。。而要设计和制造出引擎，最关键的是要坚持。。。。。。现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的 </div> </li> <li><a href="/article/2347.htm" title="软件度量的一些方法" target="_blank">软件度量的一些方法</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95/1.htm">方法</a> <div>软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的</div> </li> <li><a href="/article/2474.htm" title="XSD中的targetNameSpace解释" target="_blank">XSD中的targetNameSpace解释</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/namespace/1.htm">namespace</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a><a class="tag" taget="_blank" href="/search/targetnamespace/1.htm">targetnamespace</a> <div>参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找：例如：以下xsd文件，就出现了该错误，即便是在一</div> </li> <li><a href="/article/2601.htm" title="什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式?" target="_blank">什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式?</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/raid/1.htm">raid</a> <div>RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir</div> </li> <li><a href="/article/2728.htm" title="yii2 restful web服务快速入门" target="_blank">yii2 restful web服务快速入门</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。特别是，Yii 支持以下关于 RESTful 风格的 API：支持 Active Record 类的通用API的快速原型涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化适当的格式的数据采集和验证错误 </div> </li> <li><a href="/article/2855.htm" title="MongoDB查询(3)——内嵌文档查询（七）" target="_blank">MongoDB查询(3)——内嵌文档查询（七）</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/MongoDB%E6%9F%A5%E8%AF%A2%E5%86%85%E5%B5%8C%E6%96%87%E6%A1%A3/1.htm">MongoDB查询内嵌文档</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%9F%A5%E8%AF%A2%E5%86%85%E5%B5%8C%E6%95%B0%E7%BB%84/1.htm">MongoDB查询内嵌数组</a> <div>MongoDB查询内嵌文档转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。二、查询整个文档例如:有如下文档 db.emp.insert({ &qu</div> </li> <li><a href="/article/2982.htm" title="android4.4从系统图库无法加载图片的问题" target="_blank">android4.4从系统图库无法加载图片的问题</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */</div> </li> <li><a href="/article/3109.htm" title="网页特效大全 jQuery等" target="_blank">网页特效大全 jQuery等</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/ini/1.htm">ini</a> <div>HTML5和CSS3知识和特效 asp.net ajax jquery实例分享一个下雪的特效 jQuery倾斜的动画导航菜单选美大赛示例你会选谁 jQuery实现HTML5时钟功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序推荐一个jQuery分页插件 jquery animate</div> </li> <li><a href="/article/3236.htm" title="swift objc_setAssociatedObject block(version1.2 xcode6.4)" target="_blank">swift objc_setAssociatedObject block(version1.2 xcode6.4)</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/version/1.htm">version</a> <div> import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value </div> </li> <li><a href="/article/3363.htm" title="Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO" target="_blank">Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO</a> <span class="text-muted">MagicMa_007</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/Aegis/1.htm">Aegis</a><a class="tag" taget="_blank" href="/search/xfire/1.htm">xfire</a> <div> Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服务类与 POJO,它为你生成 XML schema/wsdl XML 和注解映射概览默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果</div> </li> <li><a href="/article/3490.htm" title="js get max value in (json) Array" target="_blank">js get max value in (json) Array</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/max/1.htm">max</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>// Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"</div> </li> <li><a href="/article/3617.htm" title="XMLhttpRequest 请求 XML,JSON ,POJO 数据" target="_blank">XMLhttpRequest 请求 XML,JSON ,POJO 数据</a> <span class="text-muted">Luob.</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/XMLhttpREquest/1.htm">XMLhttpREquest</a> <div>在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP</div> </li> <li><a href="/article/3744.htm" title="jquery" target="_blank">jquery</a> <span class="text-muted">wuai</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <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>