:代表了网页的头部,</code>代表网页的标题(内容会显示在浏览器的窗口栏上),<code><meta charset="utf-8"></code>定义的网页的编码集。</p> <pre> <!-- 定义网页的关键字 -->
<meta name="keywords" content="蜗牛学苑,蜗牛创想,IT培训,Java培训,Java开发,Java学习,Web培训,软件测试,成都IT培训,重庆IT培训,西安IT培训,it培训机构,Web,Web前端培训,自动化测试,软件测试培训,软件测试自学">
<!-- 定义的网页描述 -->
<meta name="description" content="【蜗牛学苑】高端IT人才培养,0基础0元入学,免积分试听,合同式保障就业,专家面授,项目驱动教学。专注Java全栈开发、软件测试、Web前端开发等课程方向,誓做IT培训界的一股清流。"></pre>
<ul>
<li> <p>meta:可以定义网页的关键字和描述,用于搜索引擎收录,有利于SEO优化</p> </li>
</ul></li>
<li> <p><code><body></code>:代表网页的主体,内容区域,body主要用于书写网页的结构代码</p> </li>
</ul>
<p>!DOCTYPE</p>
<p>h5:既可以采用严格模式,又可以采用混杂模式解析网页</p>
<pre> <!DOCTYPE html></pre>
<p>h4:</p>
<pre> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"></pre>
<p>xhtml</p>
<pre> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></pre>
<p>作用:</p>
<pre> 1. 声明文档类型
2. 申明html版本,告诉浏览器采用哪种版本的解析规则解析网页
3. 决定了浏览器的加载模式,告诉浏览器采用严格模式或者混杂模式解析网页</pre>
<p>浏览器的加载模式</p>
<ul>
<li> <p>严格模式(标准模式):严格按住w3c的规范解析代码</p> </li>
<li> <p>混杂模式(兼容模式):浏览器按照自己的规则解析代码</p> </li>
</ul>
<p>!DOCTYPE不写</p>
<ul>
<li> <p>如果!DOCTYPE不写或者dtd约束条件不写或错误,浏览器采用兼容模式解析网页</p> </li>
<li> <p>doctype申明正确并且dtd的约束条件正确时,浏览器采用严格模式解析网页</p> </li>
</ul>
<h3>开发工具</h3>
<h3>开发工具</h3>
<ul>
<li> <p>记事本</p>
<ul>
<li> <p>编程太麻烦</p> </li>
</ul></li>
<li> <p>Dreamweaver</p>
<ul>
<li> <p>更新太慢</p> </li>
</ul></li>
<li> <p>webstorm</p>
<ul>
<li> <p>默认内置了很多插件,很多开发不会用到的插件都安装了,导致电脑出现卡顿</p> </li>
</ul></li>
<li> <p>HBuilder</p>
<ul>
<li> <p>vue推荐一款开发工具,一款小巧的开发工具,一边开发一边看网页效果,也内置一些插件,比较耗内存,启动慢</p> </li>
</ul></li>
<li> <p>vscode——目前市场上比较主流的开发工具</p>
<ul>
<li> <p>微软开发的一款开发工具,不仅可以开发前端,还可以开发后端,前端需要使用什么插件自己安装,不会安装不用的插件。</p> </li>
</ul></li>
</ul>
<h4>插件的安装</h4>
<ul>
<li> <p><code>Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code</code>汉化</p> </li>
<li> <p><code>Auto Rename Tag</code>:自动补全标签</p> </li>
<li> <p><code>HTML CSS Support</code>:在html中支持css提示</p> </li>
<li> <p><code>HTML Snippets</code>:自动生成html代码结构,专门针对html代码格式,h5版本的文档结构</p> </li>
<li> <p><code>Image preview</code>:可以在代码中显示引入的图片的缩略图</p> </li>
<li> <p><code>IntelliSense for CSS class names in HTML</code>:在HTML中显示css的class名的提示</p> </li>
<li> <p><code>Live Server</code>:将vscode作为一台服务器,让浏览器进行访问,可以实时更新数据</p> </li>
<li> <p><code>open in browser</code>:可以指定浏览器打开网页,需要刷新页面进行更新</p> </li>
</ul>
<h2>文本标签</h2>
<h3>常用的HTML标签</h3>
<p>所有的标签默认是没有样式,默认的样式是浏览器默认添加</p>
<h4>文本标签</h4>
<ul>
<li> <p>用于组织页面上的文本</p> </li>
</ul>
<p>标题标签 h1~h6</p>
<ul>
<li> <p>语法:</p> <pre> <h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6></pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>数字越大,字号越小</p> </li>
<li> <p>默认文本会加粗,默认标签上下有外边距margin</p> </li>
<li> <p>独占一行</p> </li>
<li> <p>优点:有利于搜索引擎收录,利于SEO优化</p> </li>
</ul></li>
</ul>
<p>段落标签 p</p>
<ul>
<li> <p>语法:</p> <pre> <p>
文本
</p>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>独占一行,默认标签上下有外边距margin</p> </li>
<li> <p>一个段落就是一个p标签</p> </li>
<li> <p>p标签不能相互嵌套</p> </li>
</ul></li>
</ul>
<p>span标签</p>
<ul>
<li> <p>用于一些简短的文本或者提示性的信息</p> </li>
<li> <p>语法:</p> <pre> <span>文本</span>
</pre> </li>
<li> <p>注意 :</p>
<ul>
<li> <p>可以同行显示</p> </li>
</ul></li>
</ul>
<p>label标签</p>
<ul>
<li> <p>语法:</p> <pre> <label>文本</label>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>可以同行显示</p> </li>
<li> <p>label标签有特殊用法,需要配合表单元素一起使用</p> </li>
</ul></li>
</ul>
<p>b/strong</p>
<ul>
<li> <p>用于文本加粗</p> </li>
<li> <p>语法:</p> <pre> <b>文本</b>
<strong>文本</strong>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>推荐使用strong标签</p> </li>
<li> <p>可以同行显示</p> </li>
</ul></li>
</ul>
<p>em/i</p>
<ul>
<li> <p>斜体</p> </li>
<li> <p>语法:</p> <pre> <em>文本</em>
<i>文本</i>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>推荐使用i标签</p> </li>
<li> <p>可以同行显示</p> </li>
</ul></li>
</ul>
<p>br</p>
<ul>
<li> <p>换行标签,是一个单标签</p> </li>
<li> <p>语法:</p> <pre> <br>
等价于
<br/>
</pre> </li>
</ul>
<p>hr</p>
<ul>
<li> <p>文本中的分割线,是一个单标签</p> </li>
<li> <p>语法:</p> <pre> <hr>
等价于
<hr/>
</pre> </li>
<li> <p>注意:独占一行</p> </li>
</ul>
<h2>图片标签</h2>
<h4>图片标签 img</h4>
<ul>
<li> <p>专门用了引入图片的</p> </li>
<li> <p>语法:</p> <pre> <img src="需要连接的图片的文件路径" alt="图片加载失败时显示的解释说明的信息" title="图片加载成功时鼠标移入显示的内容" width="设置图片的宽度" height="设置图片的高度" >
</pre> </li>
<li> <p>路径:是指目标文件的具体位置</p>
<ul>
<li> <p>绝对路径:是指目标文件在目录下的具体的位置,直到找到目标文件为止</p> <p>在开发中,一般是指以http或https开头的路径或者磁盘盘符的路径</p> </li>
<li> <p>相对路径:是指以某个文件出发找到目标文件的路径</p> <p>在开发中,一般是从当前文件出发找到目标文件</p> <p>返回上一级:../ 返回多个上一级:多个../</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>图片设置宽度和高度时,如果只设置其中一个值,图片等比例缩放,如果同时设置两个值,图片可能会被拉伸变形</p> </li>
</ul></li>
</ul>
<h2>超链接标签</h2>
<h4>超链接 a</h4>
<ul>
<li> <p>主要用于网页的跳转</p> </li>
<li> <p>语法:</p> <pre><a href="连接需要跳转的文件路径" target="新开网页的打开方式" >文本或图片</a>
</pre>
<ul>
<li> <p>href:连接的文件路径可以是网络路径(是以http或者https开头的路径),还可以是本地路径(建议使用相对路径)</p> </li>
<li> <p>target:设置网页的打开方式</p>
<ul>
<li> <p><code>_self</code>:默认值,当前窗口打开网页</p> </li>
<li> <p><code>_blank</code>:新开窗口打开网页</p> </li>
</ul></li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p><code>href=""</code>:刷新</p> </li>
<li> <p><code>href="#"</code>:刷新</p> </li>
<li> <p><code>href="#id名"</code>:锚点,可以指定跳转到网页的指定位置</p>
<ul>
<li> <p>id名是唯一的,同一个网页相同的id名只能出现一次</p> </li>
<li> <p>id命名规则:是以数字、字母、_或-构成,不能以数字开头,不能包含特殊的符号</p> </li>
</ul></li>
</ul></li>
</ul>
<h2>Table标签</h2>
<h4>表格标签</h4>
<ul>
<li> <p>主要用于网页上表格的制作</p> </li>
<li> <p>语法:</p> <pre> 创建一个3行3列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</pre>
<ul>
<li> <p>table:代表表格,一个table就是一个表格</p>
<ul>
<li> <p>border:设置表格的边框的宽度</p> </li>
<li> <p>width:设置表格的宽度</p> </li>
<li> <p>height:设置表格的高度</p> </li>
<li> <p>align:设置表格在页面中对齐方式 left默认值,左对齐 center 居中 right 右对齐</p> </li>
<li> <p>bgcolor:设置表格的背景颜色 单词,#十六进制</p> </li>
<li> <p>cellspacing:设置表格中单元格与单元格之间的间距<strong>(重点)</strong></p> </li>
<li> <p>cellpadding:设置表格单元格中内容与单元格边框自己的间距<strong>(重点)</strong></p> </li>
</ul></li>
<li> <p>tr:代表行,一个tr就是一行</p>
<ul>
<li> <p>height:设置整行的高度</p> </li>
<li> <p>align:设置整行文本在单元格中内容的对齐方式 left默认值,左对齐 center 居中 right 右对齐</p> </li>
<li> <p>bgcolor:设置整行的背景颜色</p> </li>
</ul></li>
<li> <p>td:代表列,一个td就是一列,一个单元格</p>
<ul>
<li> <p>width:设置单元格的宽度,会影响整列的宽度</p> </li>
<li> <p>height:设置单元格的高度,会影响整行的高度</p> </li>
<li> <p>align:设置当前单元格中内容的对齐方式 left默认值,左对齐 center 居中 right 右对齐</p> </li>
<li> <p>bgcolor:设置当前单元格的背景颜色</p> </li>
</ul></li>
</ul></li>
<li> <p>注意:<strong>(重点)</strong></p>
<ol>
<li> <p>algin设置table上,是控制表格在页面中对齐方式,设置在tr或td控制的是单元格中内容在单元格中的对齐方式</p> </li>
<li> <p>bgcolor设置背景颜色时,优先级:td>tr>table</p> </li>
<li> <p>table里面只能放tr标签,tr标签中只能发td标签</p> </li>
<li> <p>table表格是可以相互嵌套的,不能破坏外层表格的结构,内层表格只能放在外层表格的单元格td中</p> </li>
</ol></li>
</ul>
<p>表格的合并(合并单元格)(重点)</p>
<ul>
<li> <p><code>rowspan</code>:跨行合并单元格,垂直方向上合并单元格</p> </li>
<li> <p><code>colspan</code>:跨列合并单元格,水平方向上合并单元格</p> </li>
<li> <p>注意:这两个属性写在td标签上,合并几个单元格,属性值就写几</p> </li>
</ul>
<h2>表单组件</h2>
<h4>表单标签</h4>
<ul>
<li> <p>登录注册等需要数据交互的标签</p> </li>
</ul>
<p>普通输入框</p>
<ul>
<li> <p>语法:</p> <pre> <input type="text" placeholder="文本框中提示性信息" value="设置文本框中默认值">
</pre> </li>
</ul>
<p>密码框</p>
<ul>
<li> <p>语法:</p> <pre><input type="password">
</pre> </li>
<li> <p>注意:密码框输入的内容不可见</p> </li>
</ul>
<p>单选框</p>
<ul>
<li> <p>语法:</p> <pre> <input type="radio" name="sex" id="nan" ><label for="nan">男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv">女</label>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>单选框需要设置相同的name值进行绑定,才能实现单选的效果</p> </li>
<li> <p>label的特殊用法:通过label标签上for属性指定表单元素的id名,通过点击label里面的内容控制指定的表单元素获取焦点</p> </li>
</ul></li>
</ul>
<p>复选框</p>
<ul>
<li> <p>语法:</p> <pre> 爱好:
<input type="checkbox" checked>LOL
<input type="checkbox">吃鸡
<input type="checkbox">斗地主
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>单选框和复选框可以设置checked属性控制默认选中状态</p> </li>
</ul></li>
</ul>
<p>选择文件</p>
<pre> <input type="file">
</pre>
<p>下拉列表</p>
<ul>
<li> <p>语法:</p> <pre> <select name="" id="" multiple>
<option value="">身份证</option>
<option value="" selected>结婚证</option>
<option value="">离婚证</option>
</select>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>一个选项就是一个option标签</p> </li>
<li> <p>下拉列表默认选中第一个选项,可以在option标签上设置selected控制默认选中的选项</p> </li>
<li> <p>下拉列表默认只能选中一个选项,如果需要选中多个,可以在select标签上设置multiple属性</p> </li>
</ul></li>
</ul>
<p>文本域</p>
<ul>
<li> <p>语法:</p> <pre><textarea rows="设置文本域可以显示行数" cols="设置一行显示的字符数" ></textarea>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>rows和cols可以变相的控制文本域的宽度和高度</p> </li>
</ul></li>
</ul>
<p>按钮</p>
<ul>
<li> <p>语法:</p> <pre> input:
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
button:
<button>按钮</button>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>提交和重置按钮需要配合form标签一起使用,才有效果</p> <p></p> </li>
</ul></li>
</ul>
<h2>表单标签</h2>
<p>form标签</p>
<ul>
<li> <p>会将form标签中的表单标签的数据提交或重置</p> </li>
<li> <p>语法:</p> <pre> <form action="提交数据的服务器地址" method="数据的提交方式">
</form>
</pre>
<ul>
<li> <p>method:设置提交数据的方式</p>
<ul>
<li> <p><code>get</code>:从服务器获取数据,也有提交数据的功能,数据会显示在浏览器的地址栏</p> </li>
<li> <p><code>post</code>:提交数据给服务器,数据不会显示在浏览器的地址栏</p> </li>
</ul></li>
</ul></li>
</ul>
<h2>列表标签</h2>
<h4>列表标签</h4>
<p>无序列表ul</p>
<ul>
<li> <p>语法:</p> <pre> <ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>ul标签默认上下有16px的外边距margin,有40px的左边内边距padding-left</p> </li>
<li> <p>ul、li标签独占一行</p> </li>
<li> <p>ul标签里面只能放li标签</p> </li>
</ul></li>
<li> <p>应用:常用于导航等布局</p> </li>
</ul>
<p>有序列表 ol</p>
<ul>
<li> <p>语法:</p> <pre> <ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>xxxxxxxxxx <ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ol> <ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ol>html
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>ol标签默认上下有16px的外边距margin,有40px的左边内边距padding-left</p> </li>
<li> <p>ol、li标签独占一行</p> </li>
<li> <p>ol标签里面只能放li标签</p> </li>
</ul></li>
</ul>
<p>定义列表 dl</p>
<ul>
<li> <p>语法:</p> <pre> <dl>
<dt>中国</dt>
<dd>中华人民共和国</dd>
<dt>可乐</dt>
<dd>冒着泡泡的肥仔快乐水</dd>
</dl>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>dt:设置需要解释说明的名词</p> </li>
<li> <p>dd:针对名词进行解释说明</p> </li>
</ul></li>
</ul>
<h2>补充标签</h2>
<h4>其他标签</h4>
<p>div标签</p>
<ul>
<li> <p>没有任何的样式,可以看作布局的容器</p> </li>
<li> <p>独占一行</p> </li>
</ul>
<p>marquee标签</p>
<ul>
<li> <p>跑马灯,内容会从右边进入页面,滚动到左边,从左边消失,无限循环,以后通过动画来实现</p> </li>
<li> <p>语法:</p> <pre><marquee behavior="" direction="">公告:明天不上课,是真是假?假的</marquee>
</pre> </li>
</ul>
<p>iframe标签</p>
<ul>
<li> <p>可以将网页嵌套进当前的页面中</p> </li>
<li> <p>语法:</p> <pre> <iframe src="需要嵌套的网页的文件路径" frameborder="1" width="1000px" height="500px"></iframe>
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>src:需要嵌套的网页的文件路径</p> </li>
<li> <p>frameborder:设置网页的显示区域的边框</p> </li>
<li> <p>需要设置宽度和高度,显示不下时,会产生滚动条,不建议使用,因为网页的宽高无法确定</p> </li>
</ul></li>
</ul>
<p>del标签</p>
<ul>
<li> <p>删除线标签</p> </li>
<li> <p>语法:</p> <pre> <del>998</del>
</pre> </li>
</ul>
<p>fielset标签</p>
<ul>
<li> <p>带边框和标题的标签</p> </li>
<li> <p>语法:</p> <pre> <!-- 带边框的标签 -->
<fieldset>
<legend>登录区域</legend>
<form action="">
用户名:<input type="text">
<br>
密码:<input type="password">
<br>
<button>登录</button>
</form>
</fieldset>
</pre>
<ul>
<li> <p>legend:设置的是边框上的标题</p> </li>
</ul></li>
</ul>
<p></p>
<h2>空格HTML</h2>
<p>HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格( )在不同浏览器中宽度各异。</p>
<h3><code> ;</code></h3>
<p>它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,</p>
<p>该空格占据宽度受字体影响明显而强烈。</p>
<h3><code> </code></h3>
<p>它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,</p>
<p>就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。</p>
<h3><code> </code></h3>
<p>它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,</p>
<p>就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。</p>
<h3><code>&thinsp;</code></h3>
<p>它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。</p>
<h3><code></code></h3>
<p>叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为(zero width non-joiner,U+200C),HTML字符值引用为;</p>
<h3><code></code></h3>
<p>叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个原本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML字符值引用为 );</p>
<h2>样式来源 (CSS)</h2>
<h3>CSS</h3>
<p>网页主要由三部分构成:</p>
<ul>
<li> <p>HTML:网页的骨架,网页的结构设计</p> </li>
<li> <p>CSS:网页的样式,用于美化网页,有了css就可以实现像素级的还原</p> </li>
<li> <p>JavaScript:动态脚本,控制页面中的动态效果、数据交互等</p> </li>
</ul>
<h3>基本概念</h3>
<ul>
<li> <p>概念:CSS(Cascading Style Sheets),主要用于控制网页的样式,不能单独使用,它需要作用在HTML</p> <p>标签上,控制标签的样式。</p> </li>
<li> <p>层叠:css样式可以写在多个地方,首先检查代码中有没有样式,有的话会将内联样式、内部样式、外部样式、浏览器默认的样式、浏览器用户自定义的样式叠加在一起,最新形成一套样式,相同的属性的样式层叠掉,不同的属性的样式直接作用在标签上。</p> </li>
<li> <p>样式表:指的是css样式代码,页面上通过css编写的代码渲染的样式。页面中通过标签上style属性书写的样式、在style标签中书写的样式代码,在外部css文件中书写的css代码。</p> </li>
</ul>
<h3>网页中样式的来源</h3>
<p>所有的标签默认都没有样式</p>
<h4>浏览器默认的样式</h4>
<ul>
<li> <p>h标签、p标签等默认没有任何样式,浏览器在渲染页面时,默认给不同的标签添加不同的样式</p> </li>
</ul>
<h4>浏览器用户自定义的样式</h4>
<ul>
<li> <p>浏览器默认给每个标签添加样式,还提供了用户可以自己更改对应的一些样式,比如,字号,字体样式等</p> </li>
</ul>
<h4>内联样式</h4>
<ul>
<li> <p>通过在标签上添加style属性,在属性值中书写css样式代码</p> </li>
<li> <p>语法:</p> <pre><p style="css属性名1:css属性值1;css属性名2:css属性值2; css属性名3:css属性值3;">文本</p>
</pre> </li>
<li> <p>注意:每个html标签上都有一个style属性</p> </li>
<li> <p>好处:</p>
<ul>
<li> <p>哪儿需要添加在哪个标签上即可</p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>多个标签需要设置相同的样式时,需要重复添加</p> </li>
</ul></li>
</ul>
<h4>内部样式</h4>
<ul>
<li> <p>通过在head标签中,添加style标签,在style标签中通过选择器来书写css代码</p> </li>
<li> <p>语法:</p> <pre> <head>
<style>
选择器{
css属性名1:css属性值1;
css属性名2:css属性值2;
css属性名3:css属性值3;
}
</style>
</head>
</pre> </li>
<li> <p>好处:</p>
<ul>
<li> <p>结构代码和样式分离</p> </li>
<li> <p>结构代码更加清晰,便于后期维护</p> </li>
<li> <p>多个标签使用相同的样式时,可以提取公共样式,可以同时设置多个标签的样式</p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>结构代码和样式没有完全分离</p> </li>
</ul></li>
</ul>
<h4>外部样式</h4>
<ul>
<li> <p>先创建一个后缀名为.css的文件,在css文件中通过选择器书写代码,再在head标签中通过link标签引入的css文件</p> </li>
<li> <p>语法:</p> <pre> <link rel="stylesheet" href="需要引入的css文件的文件路径">
</pre> </li>
<li> <p>好处:</p>
<ul>
<li> <p>结构代码和样式代码完全分离</p> </li>
<li> <p>便于后期维护,维护根据方便,一处改处处改</p> </li>
<li> <p>以后我们可以将css文件进行压缩,减少文件的体积,优化网页</p> </li>
</ul></li>
</ul>
<p>注意:</p>
<ul>
<li> <p>相同选择器时,优先级:内联样式的优先级(权重)最高,内部和外部样式采用的就近原则,离标签最近的优先作用</p> </li>
<li> <p>同一个标签上作用相同的css样式时,后面的样式盖住前面的样式</p> </li>
</ul>
<h3>选择器</h3>
<ul>
<li> <p>用来找到页面中满足条件的标签,作用的css样式</p> </li>
</ul>
<h4>标签选择器</h4>
<ul>
<li> <p>通过标签名找到满足条件的标签,默认找到页面中所有的标签</p> </li>
<li> <p>语法:</p> <pre>法:
标签名{
css属性名1:css属性值1;
css属性名2:css属性值2;
css属性名3:css属性值3;
}
</pre> </li>
</ul>
<h2>选择器语法</h2>
<h3>选择器</h3>
<ul>
<li> <p>用来找到页面中满足条件的标签,作用的css样式</p> </li>
</ul>
<h4>标签选择器</h4>
<ul>
<li> <p>通过标签名找到满足条件的标签,默认找到页面中所有的标签</p> </li>
<li> <p>语法:</p> <pre> 标签名{
css属性名1:css属性值1;
css属性名2:css属性值2;
css属性名3:css属性值3;
}
</pre> </li>
</ul>
<h4>类选择器(class选择器)</h4>
<ul>
<li> <p>通过标签上的class名找到满足条件的标签</p> </li>
<li> <p>class可以重复,多个标签可以使用同一个class名,可以用于提取公共样式</p> </li>
<li> <p>同一个标签上,可以设置多个class名,中间使用空格隔开</p> </li>
<li> <p>语法:</p> <pre> .class名{
css属性名1:css属性值1;
css属性名2:css属性值2;
css属性名3:css属性值3;
}
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>选择器可以组合在一起使用,中间没有空格,代表并且的意思</p> <pre> 找到标签上的class名中既有aa又有bb的标签作用样式
.aa.bb{
css样式代码
}
</pre> </li>
</ul></li>
</ul>
<h4>id选择器</h4>
<ul>
<li> <p>通过标签上的id名找到对应的标签</p> </li>
<li> <p>id是唯一的,一个页面同名的id只有一个,id选择器只能找到页面中的一个标签</p> </li>
<li> <p>id命名规则:</p>
<ul>
<li> <p>是以数字、字母、_和-构成</p> </li>
<li> <p>不能以数字开头,不能包含特殊的符号</p> </li>
</ul></li>
<li> <p>语法:</p> <pre> #id名{
css属性名1:css属性值1;
css属性名2:css属性值2;
css属性名3:css属性值3;
}
</pre> </li>
<li> <p>注意:id是唯一的,以后的js会通过id名来找到页面中标签,id选择器慎用。</p> </li>
</ul>
<h4>优先级(权重大小)</h4>
<ul>
<li> <p>相同的选择器(相同权重)时,内联的权重最大,内部和外部样式采用就近原则,离标签最近的样式优先作用</p> </li>
<li> <p>相同选择器时,后面的样式会盖住前面的</p> </li>
<li> <p>不同选择器时,优先级:id选择器>类选择器>标签选择器</p> </li>
</ul>
<h3>背景样式</h3>
<h3>背景样式</h3>
<ul>
<li> <p><code>background-color</code>:设置背景颜色</p>
<ul>
<li> <p>颜色单词</p> </li>
<li> <p><code>#</code>十六进制 #FF0011 FF代表rgb中red,00代表rgb的green,11代表rgb中blue</p> </li>
<li> <p>rgb(0~255,0~255,0~255)</p> </li>
<li> <p>rgba(0~255,0~255,0~255,0-1)(颜色透明) 引申一下:整体透明度用 <code>opacity:value</code>写法,value取值为0-1 。</p> </li>
</ul></li>
<li> <p><code>background-image</code>:设置背景图片</p> <pre> background-image: url(背景图片的文件路径);
</pre>
<ul>
<li> <p>如果背景颜色和背景图片同时设置,背景图片会盖住背景颜色</p> </li>
</ul></li>
<li> <p><code>background-repeat</code>:设置背景图片是否平铺</p>
<ul>
<li> <p><code>repeat</code>:默认值,沿着x轴和y轴都平铺</p> </li>
<li> <p><code>repeat-x</code>:沿着x轴进行平铺</p> </li>
<li> <p><code>repeat-y</code>:沿着y轴进行平铺</p> </li>
<li> <p><code>no-repeat</code>:不平铺</p> </li>
<li> <p>应用:像比较规则的渐变背景,可以使用1px的渐变背景平铺,减少图片的体积,优化网页</p> </li>
</ul></li>
<li> <p><code>background-size</code>:设置背景图片的大小</p>
<ul>
<li> <p><code>contain</code>:宽度和高度铺满一边,另一边不管</p> </li>
<li> <p><code>cover</code>:两边都铺满,超出部分隐藏</p> </li>
<li> <pre>宽度 高度
</pre> <p><code>宽度 高度</code>:如果只设置一个值,代表宽度,高度等比例缩放</p>
<ul>
<li> <p>像素</p> </li>
<li> <p>百分比:参考当前盒子的宽度和高度</p> </li>
</ul></li>
</ul></li>
<li> <p><code>background-position</code>:设置背景图片的显示位置</p> <pre> background-position:x轴 y轴;
</pre>
<ul>
<li> <p>方位单词:两两搭配使用</p> <p>left(左)、right(右)、center(居中)、top(上)、bottom(下)</p> </li>
<li> <p>像素:0px 0px相当于左上角</p> </li>
<li> <p>百分比:50% 50%相当于center center</p>
<ul>
<li> <p>注意:默认是参考的当前盒子的宽高,如果一旦设置了背景图片固定,那么参考的是整个显示区域</p> </li>
</ul></li>
</ul></li>
<li> <p><code>background-attachment</code>:设置背景图片是否固定在页面上</p>
<ul>
<li> <p><code>scroll</code>:默认值,随着滚动条滚动</p> </li>
<li> <p><code>fixed</code>:固定在页面上</p> </li>
</ul></li>
<li> <p><code>background</code>:复合属性</p> <pre> background: pink url(img/img-3.jpg) no-repeat 100px 100px /50px 50px; /前面代表显示位置,/后面代表背景图片的大小
</pre>
<ul>
<li> <p>注意:设置两个值代表背景图片的显示位置,如果需要设置背景图片的大小,需要使用<code>/</code>将两组值分隔开,/前面代表显示位置,/后面代表背景图片的大小</p> </li>
</ul></li>
</ul>
<h2>雪碧图实现</h2>
<h4>雪碧图实现</h4>
<ul>
<li> <p>概念:将多张图片有序地组合在一起,形成一张图片,可以减少请求服务器的次数,优化网页</p> </li>
<li> <p>原理:通过<code>background-image</code>引入雪碧图,再通过<code>background-position</code>调整背景图片的显示位置</p> </li>
<li> <p>步骤:</p>
<ol>
<li> <p>创建一个标签,设置宽高,宽高刚好是需要显示的图标的大小</p> </li>
<li> <p>通过<code>background-image</code>引入背景图片(雪碧图)</p> </li>
<li> <p>使用<code>background-position</code>调整雪碧图的显示位置</p> </li>
</ol></li>
<li> <p>注意:在开发中,x轴的正方向是水平向右,y轴的正方向垂直向下</p> </li>
</ul>
<h3>文本样式</h3>
<h3>文本样式</h3>
<ul>
<li> <p><code>color</code>:设置文本的颜色</p>
<ul>
<li> <p>单词</p> </li>
</ul></li>
<li> <p>十六进制</p> </li>
<li> <p>rgb(0~255,0~255,0~255)</p>
<ul>
<li> <p><code>text-align</code>:设置文本的对齐方式</p>
<ul>
<li> <p><code>left</code>:左对齐</p> </li>
<li> <p><code>center</code>:居中对齐</p> </li>
<li> <p><code>right</code>:右对齐</p> </li>
<li> <p>注意:设置在标签上可以控制文本的对齐方式,也可以控制标签中行级元素的对齐方式</p> </li>
</ul></li>
<li> <p><code>line-height</code>:设置行高</p>
<ul>
<li> <p>像素</p> </li>
<li> <p>百分比或数字:参考的是当前标签的字体大小 font-size</p> </li>
<li> <p>注意:针对单行文本的水平垂直居中,设置<code>text-align:center;</code>和<code>line-height:盒子的高度;</code></p> </li>
</ul></li>
<li> <p><code>text-decoration</code>:设置文本的修饰</p>
<ul>
<li> <p><code>none</code>:无,可以用于取消a标签的下划线</p> </li>
<li> <p><code>underline</code>:下划线</p> </li>
<li> <p><code>line-through</code>:中划线,删除线</p> </li>
<li> <p><code>overline</code>:上划线</p> </li>
</ul></li>
<li> <p><code>letter-spacing</code>:设置字符间距,一个中文就是一个字符,一个英文字母就是一个字符</p> </li>
<li> <p><code>word-spacing</code>:设置字间距,以空格来区分</p> </li>
<li> <p><code>text-transform</code>:设置字母的大小写</p>
<ul>
<li> <p><code>none</code>:默认值,无</p> </li>
<li> <p><code>capitalize</code>: 首字母大写</p> </li>
<li> <p><code>uppercase</code>:全大写</p> </li>
<li> <p><code>lowercase</code>:全小写</p> </li>
</ul></li>
<li> <p><code>text-indent</code>:设置首行的缩进</p> </li>
</ul></li>
</ul>
<h3>字体样式</h3>
<h3>字体样式</h3>
<ul>
<li> <p><code>font-family</code>:设置字体类型</p>
<ul>
<li> <p>注意:</p>
<ul>
<li> <p>可以设置多种字体,中间使用逗号隔开,浏览器先在系统中找第一种字体,如果有直接作用,如果没有找第二种字体,依次类推,直到找到最后一种字体。一般最后的serif字体或者其他字体都是通用字体</p> </li>
<li> <p>多种字体风格比较类似,为了保证页面效果</p> </li>
<li> <p>字体名称如果是中文或者多个英文单词,需要使用引号包裹</p> </li>
</ul></li>
</ul></li>
<li> <p><code>font-size</code>:设置字体大小,值越大,字号越大</p> </li>
<li> <p><code>font-weight</code>:设置字体的粗细</p>
<ul>
<li> <p><code>100~900</code>:数字越大,加粗效果越好,不能带单位</p> </li>
<li> <p><code>normal</code>:默认值,正常</p> </li>
<li> <p><code>lighter</code>:更细</p> </li>
<li> <p><code>bold</code>:加粗</p> </li>
<li> <p><code>bolder</code>:更粗</p> </li>
</ul></li>
<li> <p><code>font-style</code>:设置字体的风格</p>
<ul>
<li> <p><code>normal</code>:默认值,正常</p> </li>
<li> <p><code>italic</code>:斜体</p> </li>
<li> <p><code>oblique</code>:倾斜</p> </li>
</ul></li>
</ul>
<h4>字体引用技术</h4>
<ul>
<li> <p>在网页中引用自己的的字体文件</p> </li>
<li> <p>语法:</p> <pre> @font-face{
font-family:字体的名称;
src: url(引入的字体文件格式1的文件路径) , url(引入的字体文件格式2的文件路径) ;
}
div{
font-family: 字体的名称;
}
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>一个@font-face只能引入一种字体</p> </li>
<li> <p>为了解决不同浏览器对字体文件格式的兼容问题,可以引入多种文件格式,中间使用逗号隔开</p> </li>
</ul></li>
</ul>
<h3>行和块分类</h3>
<h3>行和块分类</h3>
<h4>行内标签</h4>
<ul>
<li> <p>一般用于组织页面中文本等信息</p> </li>
<li> <p>特点:</p>
<ul>
<li> <p>可以同行显示,排列不下就会换行显示</p> </li>
<li> <p>不支持宽高,由内容撑开</p> </li>
</ul></li>
<li> <p>常见的标签:span,label,a,b/strong,i/em等</p> </li>
</ul>
<h4>行内块级标签</h4>
<ul>
<li> <p>介于行内元素和块级元素之间,既有行内元素的特点,又有块级元素的一些特点</p> </li>
<li> <p>特点:</p>
<ul>
<li> <p>可以同行显示,排列不下就会换行显示</p> </li>
<li> <p>支持宽高</p> </li>
</ul></li>
<li> <p>常见的标签:img、input(text),button,td等</p> </li>
<li> <p>注意:行内块级元素之间存在5px的间距</p> </li>
</ul>
<h4>块级标签</h4>
<ul>
<li> <p>一般用于页面布局或者组织行级标签</p> </li>
<li> <p>特点:</p>
<ul>
<li> <p>独占一行</p> </li>
<li> <p>支持宽高</p> </li>
</ul></li>
<li> <p>常见的标签:h,p,table,tr,ul,ol,li,div等</p> </li>
</ul>
<p>相互转换</p>
<ul>
<li> <p>通过<code>display</code>属性可以实现相互转换</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p><code>display:inline;</code>:转为行内元素</p> </li>
<li> <p><code>display:inline-block;</code>:转为行内块级元素</p> </li>
<li> <p><code>display:block;</code>:转为块级元素</p> </li>
<li> <p><code>dispaly:none;</code>:隐藏元素,页面进行重新绘制</p> </li>
</ul></li>
</ul>
<h3>超链接</h3>
<h3>超链接</h3>
<ul>
<li> <p>给超链接添加样式</p> </li>
<li> <p>语法:</p> <pre>/* 向未被访问过的超链接添加样式 */
a:link {
color: green;
}
/* 向访问过的超链接添加样式 */
a:visited {
color: yellow;
}
/* 向鼠标悬停的超链接添加样式 */
/* :hover必须放在:link和:visited之后 */
a:hover {
color: red;
}
/* 向获取焦点的超链接添加样式 */
/* :active必须放在:hover之后 */
a:active {
color: blue;
}
</pre> </li>
<li> <p>注意:<code>:hover</code>必须放在<code>:link</code>和<code>:visited</code>之后,<code>:active</code>必须放在<code>:hover</code>之后,顺序:link-visited-hover-active(L-V-H-A)</p> </li>
</ul>
<h3>列表样式</h3>
<h3>列表样式</h3>
<ul>
<li> <p>设置列表项的标志的效果</p> </li>
<li> <p>属性:</p>
<ul>
<li> <p><code>list-style-type</code>:设置列表项标志的类型</p>
<ul>
<li> <p><code>none</code>:无</p> </li>
</ul></li>
<li> <p><code>list-style-position</code>:设置列表项标志的显示位置</p>
<ul>
<li> <p><code>outside</code>:默认值,标志显示在li标签内容之外</p> </li>
<li> <p><code>inside</code>:标志现在li标签内容区域里面</p> </li>
</ul></li>
<li> <p><code>list-style-image</code>:设置图片作为列表项标志,该图片不能通过css来控制大小,只能通过图像软件更改原图的大小,不建议使用</p> </li>
<li> <p><code>list-style</code>:复合属性</p>
<ul>
<li> <p><code>list-style:none;</code>取消列表项的标志</p> </li>
</ul></li>
</ul></li>
<li> <p>注意:可以在ul或ol标签上,设置list-style属性,li标签上可以自动继承来使用</p> </li>
</ul>
<h3>表格样式</h3>
<p>将以下代码设置在table标签中</p>
<ul>
<li> <p><code>border-collapse:collapse;</code>:将表格边框合并为一(推荐使用)</p> </li>
<li> <p><code>boder-spacing;</code>:设置单元格与单元格之间的间距</p> </li>
<li> <p><code>border-spacing</code>: 设置单元格与单元格之间的间距</p> </li>
</ul>
<h2>字体图标设计</h2>
<h3>字体图标</h3>
<ul>
<li> <p>图标是以字体的形成显示,可以使用css字体相关的属性进行控制</p> </li>
<li> <p>设计师在设计字体时,字体是以图标的形状进行设计</p> </li>
<li> <p>font awesome官网:Font Awesome,一套绝佳的图标字体库和CSS框架</p> </li>
<li> <p>font awesome是通过设置不同的class名来使用不同的图标,图标是矢量图</p> </li>
</ul>
<h3>网页优化的方案</h3>
<ol>
<li> <p>合理使用图片格式,可以减少图片的体积,优化网页</p> </li>
<li> <p>使用雪碧图技术,减少请求服务器的次数,优化网页</p> </li>
<li> <p>1px渐变背景平铺,可以减少图片的体积,优化网页</p> </li>
<li> <p>使用外部样式,可以将css文件进行压缩,减少文件的体积,优化网页</p> </li>
<li> <p>使用字体图标也可以优化网页</p> </li>
</ol>
<h3>标准盒模型</h3>
<h2>准盒模型</h2>
<h3>标准盒模型</h3>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/03747e58448348c294e28aea00d0aef7.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第1张图片" src="http://img.e-com-net.com/image/info8/03747e58448348c294e28aea00d0aef7.jpg" width="553" height="338" style="border:1px solid black;"></a></p>
<p>上图就是一个盒模型:</p>
<ul>
<li> <p>content:代表内容区域,存放内容 的空间,存放文本或者其他的盒子</p> </li>
<li> <p>padding:内边距,内容到边框之间的间距,相当于快递中泡沫</p> </li>
<li> <p>border:盒子的边框,四周边框可以分别设置</p> </li>
<li> <p>margin:盒子的外边距,盒子与盒子之间的间距(兄弟关系、父子关系)</p> </li>
</ul>
<h2>边框</h2>
<h3>边框 border</h3>
<ul>
<li> <p>设置盒子四周的边框</p> </li>
<li> <p>语法:</p> <pre> 边框三要素:
border-方位-width: 宽度;
border-方位-style: 类型;
border-方位-color: 颜色;
复合属性:
设置一条边框:
border-方位: 宽度 类型 颜色;
同时设置四条边框的样式:
border:宽度 类型 颜色;
虚线:dashed
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>边框在设置时至少设置两个值,宽度和类型,默认颜色为黑色</p> </li>
</ul></li>
<li> <p>设置边框会撑大盒子,会改变盒子的大小</p>
<ul>
<li> <p>边框的渲染原理:如果只设置一条边框,显示为矩形形状,如果设置了相邻的边框,相接的部分是沿着对角线均分</p> </li>
</ul></li>
</ul>
<h2>内边距</h2>
<h3>内边距padding</h3>
<ul>
<li> <p>设置内容到边框之间的间距</p> </li>
<li> <p>语法:</p> <pre> 分别设置四周的内边距:
padding-left
padding-right
padding-top
padding-bottom
复合属性:
padding
一个值:上下左右
两个值:上下 左右
三个值:上 左右 下
四个值:上 右 下 左
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>padding会撑大盒子,会更改盒子的大小</p> </li>
<li> <p>默认会添加背景的颜色,padding去会填充背景颜色</p> </li>
</ul></li>
<li> <p>应用:</p>
<ul>
<li> <p>可以使用padding撑大盒子,让内容居中</p> </li>
<li> <p>设置内容到边框的显示位置</p> </li>
</ul></li>
</ul>
<h2>外边距</h2>
<h3>外边距margin</h3>
<ul>
<li> <p>设置盒子与盒子之间的间距</p> </li>
<li> <p>语法:</p> <pre> 分别设置四周的外边距:
margin-left
margin-right
margin-top
margin-bottom
复合属性:
margin
一个值:上下左右
两个值:上下 左右
三个值:上 左右 下
四个值:上 右 下 左
</pre> </li>
</ul>
<h4>margin重叠性</h4>
<ul>
<li> <p>盒子与盒子之间是兄弟关系时,margin在垂直方向会发生重叠,以值大的为准</p> </li>
<li> <p>注意:水平方向的margin是叠加在一起,值相加</p> </li>
</ul>
<h4>margin-top传递性</h4>
<ul>
<li> <p>盒子与盒子之间是父子关系,子元素设置margin-top后,会传递给父元素显示</p> </li>
<li> <p>原因:子元素设置margin-top时会去找父元素的边界(参考位置),找不到父元素的边界就会传递父元素显示</p> </li>
<li> <p>解决方案</p>
<ul>
<li> <p>给父元素设置border,会改变父元素的盒子的大小</p> </li>
<li> <p>给父元素设置padding,会改变父元素盒子的大小</p> </li>
<li> <p>给父元素设置<code>overflow:hidden;</code></p>
<ul>
<li> <p><code>overflow:hidden;</code>: 盒子中内容溢出隐藏掉,设置了该属性后,会产生一个BFC容器,该容器里面的元素不会影响盒子外面的元素的排列</p> </li>
</ul></li>
</ul></li>
</ul>
<h2>IE盒模型</h2>
<h3>怪异盒盒模型</h3>
<p>又称为ie盒模型,css中设置width包含了content+padding+border</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/503309e28d4c4ce88781a33d98ef977d.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第2张图片" src="http://img.e-com-net.com/image/info8/503309e28d4c4ce88781a33d98ef977d.jpg" width="554" height="324" style="border:1px solid black;"></a></p>
<p>目前浏览器默认都是标准盒模型,需要使用怪异盒模型,需要转化</p>
<p>盒模型转化:<code>box-sizing</code></p>
<ul>
<li> <p><code>border-box</code>:设置为怪异盒模型</p> </li>
<li> <p><code>content-box</code>:默认值,设置为标准盒模型</p> </li>
</ul>
<h3>怪异盒子大小的计算</h3>
<h4>真正的大小的计算</h4>
<ul>
<li> <p>宽度 = width(包含了content+ padding+border)</p> </li>
<li> <p>高度 = height(包含了content+padding+border)</p> </li>
</ul>
<h4>所占空间的大小的计算</h4>
<ul>
<li> <p>宽度 = width(包含了content+ padding+border)+ margin * 2(左右)</p> </li>
<li> <p>高度 = height(包含了content+padding+border)+ margin * 2(上下)</p> </li>
</ul>
<h2>IE盒模型-拓展知识</h2>
<h3>拓展</h3>
<h4>margin:0 auto;</h4>
<ul>
<li> <p>让块级元素在父标签中水平居中</p> </li>
<li> <p>设置上下为0,左右为auto</p> </li>
<li> <p>auto:代表自适应的意思,可以将父盒子水平方向的剩余空间均分子元素的左右两边</p> </li>
</ul>
<h4>padding&margin设置百分比</h4>
<ul>
<li> <p>padding&margin设置百分比时,无论设置哪个方向的百分比,都是参考父元素的宽度</p> </li>
</ul>
<h2>组合选择器</h2>
<h3>选择器</h3>
<p>css主要由两部分构成:</p>
<ol>
<li> <p>选择器:通过选择器去找到页面中的标签</p> </li>
<li> <p>css样式(多个css样式中间使用分号隔开)</p> </li>
</ol>
<p>对于选择器来说,我们丰富选择器的写法,种类非常多,能够更加的精确找到页面中标签</p>
<h3>选择器</h3>
<p>注意:选择器只能从父标签找到子标签,或者从前面的标签找到后面的标签(从外到内,或从前到后找标签)</p>
<h4>id选择器</h4>
<ul>
<li> <p>通过标签上的id名找到满足条件的标签</p> </li>
<li> <p>语法:</p> <pre> #id名{
css代码
}
</pre> </li>
<li> <p>注意:id是唯一,只能找到页面中唯一的一个标签,以后js会通过id控制页面中标签,id选择器慎用</p> </li>
</ul>
<h4>类选择器</h4>
<ul>
<li> <p>又称为class选择器,通过标签上的class名找到满足条件的标签</p> </li>
<li> <p>一般用于提取公共样式,作用在不同的标签</p> </li>
<li> <p>语法:</p> <pre> .class名{
css代码
}
</pre> </li>
</ul>
<h4>标签选择器</h4>
<ul>
<li> <p>通过标签名找到满足条件的标签,如果没有规定范围时,默认会找到页面中所有满足条件的标签</p> </li>
<li> <p>语法:</p> <pre> 标签名{
css代码
}
</pre> </li>
</ul>
<h4>后代选择器(派生选择器)</h4>
<ul>
<li> <p>通过找到指定标签里面所有满足条件的后代的标签,可以找到儿子、孙子、重孙子…</p> </li>
<li> <p>中间使用空格隔开</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box1的标签里面的所有后代div标签
.box1 div{
}
</pre> </li>
</ul>
<h4>子元素选择器</h4>
<ul>
<li> <p>找到指定标签里面满足条件的直接子标签,只找儿子,不找孙子、重孙子…</p> </li>
<li> <p>中间使用<code>></code>隔开</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box1里面的直接子元素div标签
.box1>div{
}
</pre> </li>
</ul>
<h4>兄弟选择器</h4>
<p>相邻兄弟选择器</p>
<ul>
<li> <p>找到满足条件的标签后面相邻的第一个满足条件的兄弟标签</p> </li>
<li> <p>中间使用<code>+</code>隔开</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签后面相邻的第一个兄弟标签
.box+p{
}
</pre> </li>
</ul>
<p>后续兄弟选择器</p>
<ul>
<li> <p>找到满足条件的标签后面所有的满足条件的兄弟标签</p> </li>
<li> <p>中间使用<code>~</code>隔开</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签后面所有的兄弟p标签
.box ~ p{
}
</pre> </li>
</ul>
<p>选择器分组</p>
<ul>
<li> <p>中间使用逗号隔开,逗号前后的选择器找到对应的标签分别作用一次css样式</p> </li>
<li> <p>语法:</p> <pre> p{
color:red;
}
span{
color:red;
}
label{
color:red;
}
等价于
p , span , label{
color:red;
}
</pre> </li>
</ul>
<h2>属性选择器</h2>
<h4>属性选择器</h4>
<ul>
<li> <p>根据标签上属性名及属性值找到满足条件的标签</p> </li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[属性名]</code></td>
<td>用于选取带有指定属性的元素。</td>
</tr>
<tr>
<td><code>[属性名=属性值]</code></td>
<td>用于选取带有指定属性和值的元素。(精确匹配)</td>
</tr>
<tr>
<td><code>[属性名*=属性值]</code></td>
<td>匹配属性值中包含指定值的某个元素。(模糊匹配)</td>
</tr>
<tr>
<td><code>[属性名~=属性值]</code></td>
<td>用于选取属性值中包含指定词汇的元素。</td>
</tr>
<tr>
<td><code>[属性名^=属性值]</code></td>
<td>匹配属性值以指定值开头的每个元素。</td>
</tr>
<tr>
<td><code>[属性名$=属性值]</code></td>
<td>匹配属性值以指定值结尾的每个元素。</td>
</tr>
</tbody>
</table>
<p><code>[属性名|=属性值]</code> : 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。</p>
<ul>
<li> <p>属性选择器一般用于提取公共样式</p> </li>
</ul>
<h2>伪类选择器</h2>
<h4>伪类选择器</h4>
<ul>
<li> <p>给标签添加一些功能性的效果</p> </li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:link</code></td>
<td>向未被访问过的超链接添加样式</td>
</tr>
<tr>
<td><code>:visited</code></td>
<td>向访问过的超链接添加样式</td>
</tr>
<tr>
<td><code>:hover</code></td>
<td>向鼠标悬停的标签添加样式</td>
</tr>
<tr>
<td><code>:active</code></td>
<td>向被激活的标签添加样式</td>
</tr>
<tr>
<td><code>:focus</code></td>
<td>向拥有键盘输入焦点的标签添加样式</td>
</tr>
</tbody>
</table>
<ul>
<li> <p>注意:</p>
<ul>
<li> <p><code>:hover</code>必须放在<code>:link</code>和<code>:visited</code>之后,<code>:active</code>必须放在<code>:hover</code>之后,才有效果</p> </li>
<li> <p><code>outline</code>:设置边框外面的一圈轮廓线,使用方式border一样</p> <pre>outline: 宽度 类型 颜色;
取消input获取键盘输入焦点时默认样式
input:focus{
outline: none;
}
</pre> </li>
</ul></li>
</ul>
<pre>//sass中hover案例:hover .header-right2后.info显示
.header-right2 {
&:hover .info{
display: block;
}
.info {
display: none;
}
}
</pre>
<p></p>
<h2>伪元素选择器</h2>
<p></p>
<p></p>
<h4>伪元素选择器</h4>
<ul>
<li> <p>概念:可以在HTML标签中通过css代码添加一块渲染区域,该区域可以设置样式</p> </li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>::first-letter</code></td>
<td>找到指定的标签中的第一个字符添加样式</td>
</tr>
<tr>
<td><code>::first-line</code></td>
<td>找到指定标签中的第一行添加样式</td>
</tr>
<tr>
<td><code>::selection</code></td>
<td>向鼠标选中的区域添加样式</td>
</tr>
<tr>
<td><code>::before</code></td>
<td>在指定的标签的内容之前添加的一块渲染区域</td>
</tr>
<tr>
<td><code>::after</code></td>
<td>在指定的标签的内容之后添加一块渲染区域</td>
</tr>
</tbody>
</table>
<ul>
<li> <p>注意:</p>
<ul>
<li> <p><code>::before</code>和<code>::after</code>都必须搭配<code>content:"";</code>一起使用</p> </li>
<li> <p><code>::before</code>和<code>::after</code>渲染出来的是一个<strong>行内元素</strong>,如果需要设置宽高,需要转化为行内块级元素或块级元素</p> </li>
<li> <p>可以<code>::before</code>和<code>::after</code>来渲染三角形</p> </li>
</ul></li>
</ul>
<h4>通配符选择器</h4>
<ul>
<li> <p>找到页面中所有的标签添加样式</p> </li>
<li> <p>语法:</p> <pre> *{
css代码
}
</pre> </li>
</ul>
<h2>选择器权重</h2>
<h3>选择器分类</h3>
<ul>
<li> <p>基础选择器:id选择器、类选择器、标签选择器、属性选择器、伪类选择器、伪元素选择器、通配符选择器</p> </li>
<li> <p>组合选择器:后代选择器、子元素选择器、相邻兄弟选择器、后续兄弟选择器</p> </li>
</ul>
<h3>选择器权重(优先级问题)</h3>
<ul>
<li> <p>在相同的选择器下,内联的权重最大,内部和外部采用就近原则</p> </li>
<li> <p>基础选择器:id选择器 > 类选择器(属性选择器) > 标签选择器 > 通配符选择器 > 继承的样式</p> </li>
<li> <p>组合选择器的权重需要将所有的基础选择器的权重加起来一起比较</p> </li>
</ul>
<h4>选择器权重的计算方法</h4>
<p>加法运算</p>
<ul>
<li> <p>内联样式默认为1000</p> </li>
<li> <p>id选择器默认权重为100</p> </li>
<li> <p>类(属性)选择器默认权重为10</p> </li>
<li> <p>标签选择器默认权重为1</p> <p>将所有的标签的权重进行相加,比较权重值的大小,值大的权重越高,如果权重值一样,后面的盖住前面</p> <p>注意:不满足满10进1的规则,十几个标签选择器都没有一个类选择器的权重高</p> </li>
</ul>
<p>4个0</p>
<p>(0,0,0,0)</p>
<ul>
<li> <p>第一个0代表是否有内联样式,有则为1,无则为0</p> </li>
<li> <p>第二个0代表id选择器的个数</p> </li>
<li> <p>第三个0代表类(属性)选择器的个数</p> </li>
<li> <p>第四个0代表标签选择器的个数</p> <p>计算出每种选择器的个数,从第一个0开始对比,值大的权重最大,值相同,对比第二个0,依次类推,如果最后一个0页相同,说明选择器权重值一样,后面样式盖住前面的样式。</p> </li>
</ul>
<h3>拓展:</h3>
<p><code>!important</code>:比较暴力,会将css样式直接作用标签上,无视选择器的权重大小,比内联样式的权重都大,在开发中尽量少用,权重值的规则被破坏了,用多了样式没有规律,计算权重值失效,后期维护起来比较麻烦</p>
<ul>
<li> <p>语法:</p> <pre> div{
/* !important 比较暴力,会将css样式直接作用在标签上,无视选择器的权重 */
color: blue !important;
}
</pre> </li>
</ul>
<h2>样式继承</h2>
<h3>CSS继承</h3>
<p>继承的概念更多出现在编程语言中,js学习继承</p>
<p>css的继承是指子标签可以从父标签上将css样式继承过来,css样式可以作用在子标签上</p>
<p>CSS的继承分为两类:</p>
<ul>
<li> <p>自动继承:子元素不需要任何的操作,可以从父元素上继承css样式</p> </li>
<li> <p>手动继承:子元素需要敲代码,指定子元素某个属性从父元素上继承样式</p> <p><code>inherit</code>:可以控制子元素的属性从父元素上继承该属性的值</p> <pre>margin: inherit;
</pre> </li>
</ul>
<h4>哪些属性可以被自动继承</h4>
<ul>
<li> <p>文本样式可以被自动继承</p>
<ul>
<li> <p><code>color</code>:设置文本颜色</p> </li>
<li> <p><code>text-align</code>:设置文本的对齐方式</p> </li>
<li> <p><code>line-height</code>:设置行高</p> </li>
<li> <p><code>text-decoration</code>:设置文本修饰</p> </li>
<li> <p><code>letter-spacing</code>:设置字符间距</p> </li>
<li> <p><code>word-spacing</code>:设置字间距</p> </li>
<li> <p><code>text-indent</code>:设置首行缩进</p> </li>
<li> <p><code>text-transform</code>:设置大小写</p> </li>
</ul></li>
<li> <p>font系列的字体样式也可以被自动继承</p>
<ul>
<li> <p><code>font-size</code>:设置字体的大小</p> </li>
<li> <p><code>font-family</code>:设置字体的类型</p> </li>
<li> <p><code>font-weight</code>:设置字体的粗细</p> </li>
<li> <p><code>font-style</code>:设置字体的风格</p> </li>
</ul></li>
<li> <p>list-style属性,li标签可以从ul或ol标签上自动继承</p> </li>
<li> <p>cursor鼠标样式可以自动继承 pointer 抓手,(cursor: pointer;可以修改鼠标为手指)</p> </li>
</ul>
<h4>哪些属性不可以被自动继承</h4>
<ul>
<li> <p>width、height、margin、padding、background、border等等</p> </li>
</ul>
<h2>浮动特点</h2>
<h3>块级元素同行显示</h3>
<ol>
<li> <p>display:inline-block</p>
<ul>
<li> <p>可以让块级元素同行显示,存在兼容问题</p> </li>
<li> <p>盒子之间存在5px的间距</p> </li>
</ul></li>
<li> <p>浮动</p> </li>
</ol>
<h3>浮动</h3>
<ul>
<li> <p>可以让元素同行显示,排列不下会自动换行显示,不存在兼容问题</p> </li>
<li> <p>语法:</p> <pre> float:left | right | none;
</pre>
<ul>
<li> <p>left:设置左浮动</p> </li>
<li> <p>right:设置右浮动</p> </li>
<li> <p>none:默认值,不浮动</p> </li>
</ul></li>
<li> <p>特点:</p>
<ul>
<li> <p>可以让元素同行显示,排列不下时会自动换行显示,不存在兼容问题</p> </li>
<li> <p>浮动元素会脱离文档里,在标准文档流之上</p> </li>
<li> <p>浮动元素不再占用原来的空间</p> </li>
<li> <p>行内元素设置浮动后,行内元素支持宽高</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>多个元素同时设置浮动时,后面浮动的元素会找到前面浮动元素的边界或第一个浮动元素找到父元素浮动的边界就停止下来</p> </li>
<li> <p>只有设置了浮动的元素才可以同行显示,</p> </li>
<li> <p>块级元素没设置宽度时,如果设置浮动,块级元素的宽度由内容决定</p> </li>
</ul></li>
</ul>
<h3>标准文档流</h3>
<ul>
<li> <p>在页面布局过程中,页面中元素会按照从上到下,从左到右,块级元素独占一行,行级元素共享一行的排列规范</p> </li>
</ul>
<h3>脱离文档流</h3>
<ul>
<li> <p>在页面布局过程中个,元素不再遵循标准文档流的规范,按照自己的排列规范进行排列</p> </li>
</ul>
<h3>清除浮动</h3>
<h3>浮动元素对非浮动元素的影响</h3>
<ul>
<li> <p>非浮动的元素会挤占浮动元素原来的空间</p> </li>
<li> <p>非浮动元素中如果有文本,文本会被浮动元素挤开</p>
<ul>
<li> <p>实现图文混排</p> <pre> <style>
img{
float:left;
}
</style>
<img src="引入图片">
<p>
文本
</p>
</pre> </li>
</ul></li>
<li> <p>子元素浮动时,父元素高度会塌陷</p> </li>
</ul>
<h3>清除浮动</h3>
<ul>
<li> <p>清除浮动元素对非浮动元素的影响</p> </li>
<li> <p>语法:</p> <pre> clear: left | right | both;
</pre>
<ul>
<li> <p>left:清除左浮动的影响</p> </li>
<li> <p>right:清除右浮动的影响</p> </li>
<li> <p>both:清除左浮动和右浮动的影响</p> </li>
</ul></li>
</ul>
<h4>清除浮动的方法</h4>
<ol>
<li> <p>给受影响的元素添加clear样式</p> </li>
<li> <p>使用<code><br clear="all"></code>将浮动元素和非浮动元素隔开</p> </li>
<li> <p>使用空白的div添加<code>clear:both;</code>将浮动元素和非浮动元素隔开</p> </li>
<li> <p>给父元素添加伪元素选择器可以清除浮动的影响(推荐使用)</p> <pre> .clearfix::after{
content: "";
clear: both;
display: block;
}
</pre> </li>
</ol>
<p>注意:<code>overflow:hidden</code>:可以解决子元素浮动,父元素高度塌陷的问题,借助是BFC容器的特点,不是清除浮动的方法</p>
<h3>定位</h3>
<h3>如何让盒子移动到指定的位置</h3>
<ul>
<li> <p>margin-top设置负值</p>
<ul>
<li> <p>会破坏文档流进行移动,移动完成之后会回到标准文档流之中</p> </li>
<li> <p>应用:内容和前面部分重叠</p> </li>
</ul></li>
<li> <p>定位</p>
<ul>
<li> <p>是css提出一个比较重要的概念,可以让盒子按照指定的方向进行移动</p> </li>
</ul></li>
</ul>
<h3>标准文档流</h3>
<ul>
<li> <p>在页面布局过程中,元素默认按照从上到下,从左到右,块级元素独占一行,行级元素共享一行的排列规范</p> </li>
</ul>
<h3>脱离文档流</h3>
<ul>
<li> <p>在页面布局过程中,元素不再遵循标准文档流的规范,按照自己的排列规范进行排列</p> </li>
</ul>
<h3>破坏文档流</h3>
<ul>
<li> <p>在页面布局过程中,元素在移动过程中不遵循标准文档流的规范,移动完成之后仍然在标准文档流之中</p> </li>
</ul>
<h3>定位</h3>
<h4>静态定位</h4>
<h4>相对定位</h4>
<h4>绝对定位</h4>
<h4>固定定位</h4>
<h4>粘性定位</h4>
<h2>相对定位</h2>
<h4>相对定位</h4>
<ul>
<li> <p>概念:元素参考原来的位置,按照指定的方向进行移动</p> </li>
<li> <p>语法:</p> <pre> position: relative;
top: ;
bottom:;
left:;
right:;
</pre> </li>
<li> <p>定义偏移量:可以设置正值或负值</p>
<ul>
<li> <p><code>top</code>:设置盒子与参考位置上边缘的距离</p> </li>
<li> <p><code>bottom</code>:设置盒子与参考位置下边缘的距离</p> </li>
<li> <p><code>left</code>:设置盒子与参考位置左边缘的距离</p> </li>
<li> <p><code>right</code>:设置盒子与参考位置右边缘的距离</p> </li>
</ul></li>
<li> <p>特点:</p>
<ul>
<li> <p>设置了相对定位的元素,不会脱离文档流,会破坏文档流进行移动</p> </li>
<li> <p>原来的空间还在</p> </li>
<li> <p>只设置相对定位的元素,元素没有任何变化,一旦设置了偏移量,元素参考<strong>原来的位置</strong>进行移动</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>子元素设置相对定位,如果父元素进行了移动,子元素会跟着移动,原因在于:父元素进行移动后,子元素原来的位置也会跟着移动,而相对定位的元素是参加原来的位置进行移动的,所以也会跟着移动</p> </li>
<li> <p>相对定位一般不会单独使用,一般会配合绝对定位一起使用</p> </li>
</ul></li>
</ul>
<h2>绝对定位</h2>
<h4>绝对定位</h4>
<ul>
<li> <p>设置绝对定位的元素会默认参考整个文档进行移动,按照指定的方向进行移动</p> </li>
<li> <p>语法:</p> <pre> position: absolute;
</pre> </li>
<li> <p>设置偏移量:可以正值也可以负值</p>
<ul>
<li> <p><code>top</code>:设置盒子与参考位置上边缘的距离</p> </li>
<li> <p><code>bottom</code>:设置盒子与参考位置下边缘的距离</p> </li>
<li> <p><code>left</code>:设置盒子与参考位置左边缘的距离</p> </li>
<li> <p><code>right</code>:设置盒子与参考位置右边缘的距离</p> </li>
</ul></li>
<li> <p>特点:</p>
<ul>
<li> <p>绝对定位的元素会脱离文档流,在标准文档流之上</p> </li>
<li> <p>原来的空间不存在</p> </li>
<li> <p>只设置绝对定位的元素,只在当前位置脱离文档流,一旦设置偏移量,绝对定位的元素默认是参考整个文档进行移动或者参考最近的定位父级进行移动</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>后面绝对定位的元素会盖住前面定位的元素</p> </li>
<li> <p>行内元素设置绝对定位后,行内元素支持宽高</p> </li>
</ul></li>
</ul>
<p>结构父级</p>
<ul>
<li> <p>标签在html代码结构中的父元素</p> </li>
</ul>
<p>定位父级</p>
<ul>
<li> <p>绝对定位的元素参考某个满足条件的父级标签进行移动,这个父元素就是定位父级,父级标签可以设置相对定位、绝对定位、固定定位作为定位父级</p> </li>
<li> <p>注意:</p>
<ul>
<li> <p>可以设置相对定位、绝对定位、固定定位作为绝对定位的定位父级,但是一般会采用相对定位(子绝父相)</p> </li>
<li> <p>多个定位父级时,绝对定位的元素是参考最近的定位父级进行移动</p> </li>
<li> <p>定位父级可以父亲、爷爷、曾祖父…..</p> </li>
</ul></li>
</ul>
<h2>固定定位</h2>
<h4>固定定位</h4>
<ul>
<li> <p>概念:固定定位的元素可以固定在页面上,不会随着滚动条而滚动</p> </li>
<li> <p>语法:</p> <pre> position:fixed;
</pre> </li>
<li> <p>设置偏移量:可以正值也可以负值</p>
<ul>
<li> <p><code>top</code>:设置盒子与参考位置上边缘的距离</p> </li>
<li> <p><code>bottom</code>:设置盒子与参考位置下边缘的距离</p> </li>
<li> <p><code>left</code>:设置盒子与参考位置左边缘的距离</p> </li>
<li> <p><code>right</code>:设置盒子与参考位置右边缘的距离</p> </li>
</ul></li>
<li> <p>特点:</p>
<ul>
<li> <p>固定定位的元素会脱离文档流,在标准文档流之上</p> </li>
<li> <p>原来的位置不再占用</p> </li>
<li> <p>只设置固定定位的元素,元素会在当前位置脱离文档流,会固定页面上,不会随着滚动条而滚动,一旦设置了偏移量,固定定位的元素会参考整个文档进行移动</p> </li>
</ul></li>
</ul>
<h3>z-index</h3>
<ul>
<li> <p>设置定位元素(相对定位、绝对定位、固定定位)的层级关系,显示的顺序</p> </li>
<li> <p>语法:</p> <pre> z-index: 数字;
</pre>
<ul>
<li> <p>所有元素相当于默认为0,数字越大,定位层级越高,会显示在上方,数字相同时,按照代码结构显示顺序依次显示</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>相对定位、绝对定位、固定定位的元素默认后面定位的元素会盖住前面定位的元素</p> </li>
<li> <p>z-index只针对与相对定位、绝对定位、固定定位的元素才有效</p> </li>
</ul></li>
</ul>
<h3>拓展:绝对定位元素宽度设置百分比</h3>
<ul>
<li> <p>没有设置绝对定位的元素的宽度设置百分比时,宽度是参考结构父级的宽度</p> </li>
<li> <p>设置绝对定位的元素,宽度设置百分比时,绝对定位的元素的宽度默认是参考整个文档的宽度,如果设置了定位父级,参考最近的定位父级的宽度</p> </li>
</ul>
<h2>粘性定位</h2>
<p>粘性定位<code>position: sticky</code>可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:</p>
<pre>.sticky-header {
position: sticky;
top: 10px;
}
</pre>
<p>在 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到视口回滚到阈值以下。</p>
<p>粘性定位常作用在导航和概览信息(标题,表头,操作栏,底部评论等)上。这样,用户在浏览详细信息时,也能看到信息的概览和做一些操作,给用户带来便捷的使用体验。</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/ec51ad3ce976417c834b4ec4b7f6e6a7.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第3张图片" src="http://img.e-com-net.com/image/info8/ec51ad3ce976417c834b4ec4b7f6e6a7.jpg" width="363" height="195" style="border:1px solid black;"></a></p>
<p>粘性定位看着很简单,但也很容易出现不生效的情况。为帮助大家彻底理解粘性定位,本文会从 3 个方面来介绍:</p>
<ul>
<li> <p>粘性定位的原理。</p> </li>
<li> <p>不生效的情况。</p> </li>
<li> <p>具体的例子。</p> </li>
</ul>
<h3>原理</h3>
<p>为便于理解粘性定位,这里引入四个元素:视口元素,容器元素,粘性约束元素 和 sticky 元素。它们的关系如下:</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/b0a1795810554d668914ced21316f700.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第4张图片" src="http://img.e-com-net.com/image/info8/b0a1795810554d668914ced21316f700.jpg" width="650" height="406" style="border:1px solid black;"></a></p>
<p></p>
<p>视口元素:显示内容的区域。会设置宽,高。一般会设置 <code>overflow:hidden</code>。 容器元素:离 sticky 元素最近的能滚动的祖先元素。 粘性约束元素:粘性定位的父元素。有时,也会出现粘性约束元素就是容器元素的情况。 sticky 元素:设置了 <code>position: sticky;</code> 的元素。</p>
<p>滚动时,sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时,sticky 元素也会滚出视口。</p>
<h3>不生效的情况</h3>
<h4>情况1: 未指定 top, right, top 和 bottom 中的任何一个值</h4>
<p>此时,设置 <code>position: sticky</code> 相当于设置 <code>position: relative</code>。</p>
<p>要生效,要指定 top, right, top 或 bottom 中的任何一个值。</p>
<h4>情况2: 垂直滚动时,粘性约束元素高度小于等于 sticky 元素高度</h4>
<p>不生效的原因:当粘性约束元素滚出视口时,sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小,sticky 元素没有显示固定定位状态的机会。</p>
<p>同样的,水平滚动时,粘性约束元素宽度小于等于 sticky 元素宽度时,也不会生效。</p>
<h4>情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素</h4>
<p>该情况的示例代码:</p>
<pre><div class="viewport">
<div class="container"> <!-- 容器元素 -->
<div style="overflow: hidden">
<div> <!-- 粘性约束元素 -->
<div class="stick-elem">...</div> <!-- sticky 元素 -->
...
</div>
</div>
</div>
</div>
</pre>
<p>要生效,要把 <code>overflow: hidden</code> 的元素移除。</p>
<h3>具体的例子</h3>
<h4>例子1: 页面滚动</h4>
<p>这个例子,我们来实现页面滚动到文章内容时,文章标题吸顶的效果。</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/df65c3ff9b874c80b9c62afad7408701.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第5张图片" src="http://img.e-com-net.com/image/info8/df65c3ff9b874c80b9c62afad7408701.jpg" width="498" height="683" style="border:1px solid black;"></a></p>
<p>HTML 结构如下:</p>
<pre><div class="header">网站头部</div>
<!-- 粘性约束元素 -->
<div class="article">
<!-- sticky 元素 -->
<h2 class="title">彻底理解粘性定位 - position: sticky</h2>
<div class="content">...</div>
</div>
<div class="footer">网站底部</div>
</pre>
<p>在这个例子中,视口元素和容器元素都是 <code>body</code>。sticky 元素是 <code>.title</code>,因此只要在 sticky 元素上设置如下样式即可:</p>
<pre>.title {
position: sticky;
top: 0;
background-color: #fff;
}
</pre>
<h4>例子2: 文章列表</h4>
<p>这个例子,我们来实现一块区域下有多篇文章,区域滚动到文章内容时,对应的标题和操作按钮吸顶的效果。</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/ec51ad3ce976417c834b4ec4b7f6e6a7.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第6张图片" src="http://img.e-com-net.com/image/info8/ec51ad3ce976417c834b4ec4b7f6e6a7.jpg" width="363" height="195" style="border:1px solid black;"></a></p>
<p>HTML 结构如下:</p>
<pre><!-- 视口元素 -->
<div class="viewport">
<!-- 容器元素 -->
<div class="container">
<!-- 文章:粘性约束元素 -->
<div class="article">
<div class="sticky-header">
<h2>彻底理解粘性定位 - position: sticky</h2>
<div class="options">
<button>转发</button>
<button>点赞</button>
</div>
</div>
<div class="article-content">...</div>
</div>
<!-- 文章 -->
<div class="article">...</div>
<div class="article">...</div>
</div>
</pre>
<p>在这个例子中,视口元素是 <code>.viewport</code>,容器元素是 <code>.container</code>。sticky 元素是 <code>.sticky-header</code>。核心样式如下:</p>
<pre>/* 视口元素 */
.viewport {
width: 50%;
overflow: hidden;
height: 200px;
}
/* 容器元素 */
.container {
overflow: auto;
height: 100%;
}
/* 粘性约束元素 */
.article {
margin-bottom: 10px;
}
/* sticky 元素 */
.sticky-header {
position: sticky;
top: 0;
padding: 5px 0;
background-color:#fff;
}
</pre>
<h4>例子3: 甘特图</h4>
<p>最后,我们来做个复杂点的例子:甘特图。如下图所示:</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/e79f3f7768b24fd88b53e5d8ff8960ea.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第7张图片" src="http://img.e-com-net.com/image/info8/e79f3f7768b24fd88b53e5d8ff8960ea.jpg" width="587" height="197" style="border:1px solid black;"></a></p>
<p>需要实现:</p>
<ul>
<li> <p>左侧事项菜单总在最左侧。</p> </li>
<li> <p>菜单的头部和时间轴吸顶。</p> </li>
<li> <p>时间轴的年总在月的最左边。</p> </li>
</ul>
<p>实现代码有点多,就不在这里贴了。获取完整源码,关注公众号: 前端GOGOGO,回复: 粘性定位。</p>
<h2>BFC基础</h2>
<h3>FC</h3>
<h3>FC</h3>
<p>FC(Formatting Context):格式化上下文。它是css 2.1提出一个视觉渲染的概念。</p>
<p>它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何排列,和其他的元素相关之间的关系。</p>
<p>BFC和IFC是常见的FC。分别叫做<code>Block Formatting Contexr</code> 和 <code>Inline Formatting Context</code>。</p>
<h3>BFC</h3>
<p>Block Formatting Context :块级格式化上下文</p>
<p>它是指页面上的一块渲染区域,它有自己的渲染规则,它其实就是页面中一个标签,标签不一定是块级标签,它只有满足条件,它就是一个BFC区域,决定了BFC的内部的HTML标签如何进行排列以及不同的BFC区域如何进行显示。</p>
<h4>BFC区域的特点</h4>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/01d992e9f1ba402da83f4995fb4c2569.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第8张图片" src="http://img.e-com-net.com/image/info8/01d992e9f1ba402da83f4995fb4c2569.jpg" width="650" height="463" style="border:1px solid black;"></a></p>
<ol>
<li> <p>内部的Box会在垂直方向,一个接一个地放置。(标准文档流)</p> </li>
<li> <p>Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠</p>
<ul>
<li> <p>如果说不想让垂直方向上的margin发生重叠,我们可以形成一个新的BFC区域</p> </li>
</ul></li>
<li> <p>每个元素的左外边缘(margin-left), 与包含块的左边(contain box left)相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。</p> </li>
<li> <p>BFC的区域不会与float box重叠。</p>
<ul>
<li> <p>利于这点,可以实现非浮动元素(BFC)和浮动元素同行显示,可以实现三列布局</p> </li>
</ul></li>
<li> <p>BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。</p> </li>
<li> <p>计算BFC的高度时,浮动元素也参与计算</p>
<ul>
<li> <p>可以解决子元素浮动父元素高度塌陷的问题</p> </li>
</ul></li>
</ol>
<h4>如何成为BFC容器(如何升级为BFC)</h4>
<ol>
<li> <p>根标签(html标签就是一个BFC容器)</p> </li>
<li> <p><code>float</code>不为<code>none</code></p> </li>
<li> <p><code>position</code>为<code>absolute</code>或<code>fixed</code></p> </li>
<li> <p><code>display</code>为<code>inline-block</code>、<code>table-cell</code>、<code>table-caption</code>、<code>flex</code>(弹性盒子)</p> </li>
<li> <p><code>overflow</code>不为<code>visible</code>;</p> </li>
</ol>
<h2>BFC应用场景</h2>
<h4>应用场景</h4>
<p>场景一:</p>
<p>每个元素的左外边缘(margin-left), 与包含块的左边(contain box left)相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。除非这个元素形成一个新的BFC区域</p>
<p>场景二:</p>
<p>BFC的区域不会与float box重叠。</p>
<ul>
<li> <p>实现三列自适应布局:左右两边固定宽度,中间自适应</p> </li>
</ul>
<pre>ss:
<style>
/* BFC的区域不会与float box重叠。 */
.container{
width: 100%;
height: 500px;
border: 1px solid red;
}
.left{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: tomato;
float: right;
}
.center{
height: 400px;
background-color: orange;
/* 设置为BFC */
overflow: hidden;
}
</style>
html:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center">center</div>
</div>
</pre>
<p>场景三:</p>
<p>Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。</p>
<ul>
<li> <p>margin重叠性问题解决方案:将其中给一个盒子放进一个新的BFC容器中</p> </li>
</ul>
<pre>html:
<div class="box1"></div>
<!-- 形成一个新的BFC区域 -->
<div class="container">
<div class="box2"></div>
</div>
css:
<style>
/* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 */
/* 属于不同的BFC区域就不会发生margin的重叠 */
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color: tomato;
margin-top: 80px;
}
.container{
/* 设置为BFC容器 */
/* overflow: hidden; */
/* float: left; */
/* position: absolute; */
position: fixed;
}
</style>
</pre>
<p>场景四:</p>
<p>计算BFC的高度时,浮动元素也参与计算</p>
<ul>
<li> <p>用来解决子元素浮动,父元素高度塌陷</p> </li>
</ul>
<h2>IFC基础</h2>
<h3>IFC</h3>
<p>IFC(Inline Formatting Context):行内格式化上下文,和块级格式上下文一样,都是页面进行css渲染时一个视觉概念。</p>
<p>指的是一行区域的渲染规则,确定了一行中行级元素如何进行排列以及对齐。</p>
<h4>IFC区域的特点</h4>
<ul>
<li> <p>在IFC中,盒子水平放置,一个接着一个,从包含块的顶部开始</p> </li>
<li> <p>在盒子间margin和padding在水平方向有效</p>
<ul>
<li> <p>行内元素在垂直方向上的margin和padding是没有效果</p> </li>
</ul></li>
<li> <p>这些盒子会通过不同的方式进行对齐,有些底部和顶部对齐,底部和文本的基线进行对齐等等</p> </li>
<li> <p>IFC负责的矩形区域称为行盒(line-box)</p>
<ul>
<li> <p>行盒的宽度由内容决定</p> </li>
<li> <p>行盒的高度由line-box的最高点和最低点决定</p> </li>
</ul></li>
</ul>
<h4>主要影响行盒高度的css属性(影响行盒的布局)</h4>
<ol>
<li> <p>font-size:字体大小会影响行盒高度</p> </li>
<li> <p>font-family:字体类型会影响行盒的高度</p> </li>
<li> <p>height | line-height: 高度和行高也会影响行盒的高度</p> </li>
<li> <p>vertical-align:设置垂直方向上的对齐的方式,也会影响行盒的高度</p> </li>
</ol>
<h2>IFC应用场景</h2>
<h4>主要影响行盒高度的css属性(影响行盒的布局)</h4>
<ol>
<li> <p>font-size:字体大小会影响行盒高度</p> </li>
<li> <p>font-family:字体类型会影响行盒的高度</p> </li>
<li> <p>height | line-height: 高度和行高也会影响行盒的高度</p> </li>
<li> <p>vertical-align:设置垂直方向上的对齐的方式,也会影响行盒的高度</p> </li>
</ol>
<p>font-size</p>
<ul>
<li> <p>不同的字体大小会影响行盒的高度</p> </li>
<li> <p>字体越大,行盒的高度越高</p> </li>
</ul>
<p>font-family</p>
<ul>
<li> <p>不同的字体类型会影响行盒的高度</p> </li>
<li> <p>原因:设计师在设计字体时,不同的字体类型占据的高度时不一样</p> </li>
</ul>
<p>height | line-height</p>
<ul>
<li> <p>不同的高度和行高会影响行盒的高度</p> </li>
<li> <p>行高是指文本的最顶部到文本最底部,文字在当前的行高中垂直居中</p> </li>
</ul>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/5e30dc03d6224004ab8872d6b7f51fc8.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第9张图片" src="http://img.e-com-net.com/image/info8/5e30dc03d6224004ab8872d6b7f51fc8.jpg" width="553" height="244" style="border:1px solid black;"></a></p>
<p>vertical-align</p>
<ul>
<li> <p>设置行级元素垂直方向上对齐方式,也会影响行盒的高度</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/4d30dcfede374fa4b92fa4f4d503d7b1.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第10张图片" src="http://img.e-com-net.com/image/info8/4d30dcfede374fa4b92fa4f4d503d7b1.jpg" width="554" height="283" style="border:1px solid black;"></a></p> <p>绿色:顶线</p> <p>蓝色:中线</p> <p>红色:基线</p> <p>紫色:底线</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p>baseline:默认值,基线对齐</p> </li>
<li> <p>middle:中线对齐</p> </li>
<li> <p>top:顶部对齐</p> </li>
<li> <p>bottom:顶部对齐</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/f49e6cfe786d4d39b201ba05563ae3bf.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第11张图片" src="http://img.e-com-net.com/image/info8/f49e6cfe786d4d39b201ba05563ae3bf.jpg" width="447" height="268" style="border:1px solid black;"></a></p> </li>
</ul></li>
</ul>
<p>文本之间</p>
<ul>
<li> <p>文本与文本之间对齐方式,文本默认是以基线与其他元素对齐</p> </li>
<li> <p>设置vertical-align控制当前标签的文本的参考位置</p> </li>
</ul>
<p>文本与图片之间</p>
<ul>
<li> <p>文本默认是以基线和图片的底部进行对齐</p> </li>
<li> <p>给文本设置vertical-align:文本是以参考位置和图片进行对齐</p> </li>
<li> <p>给图片设置vertical-align:图片是以参考位置和文本进行对齐</p> </li>
</ul>
<p>表格</p>
<ul>
<li> <p>设置单元格中内容垂直方向上的对齐方式</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p>middle:默认值,居中对齐</p> </li>
<li> <p>top:顶部对齐</p> </li>
<li> <p>bottom:底部对齐</p> </li>
</ul></li>
</ul>
<h2>H5标签</h2>
<h3>H5媒体标签</h3>
<h4>音频 audio</h4>
<ul>
<li> <p>用于在页面中引入音频文件</p> </li>
<li> <p>语法:</p> <pre> 写法一:
<audio src="连接音频文件的文件路径" controls loop muted autoplay></audio>
写法二:为了保证不同的浏览器都可以正常播放音频文件,需要引入多种文件格式的音频文件
<audio controls loop muted autoplay>
<!-- 资源标签,用于引入多媒体的资源 -->
<source src="连接音频文件格式1的文件路径" type="audio/mp3">
<source src="连接音频文件格式2的文件路径" type="audio/ogg">
</audio>
</pre>
<ul>
<li> <p><code>controls</code>:这是一个控制器,控制音频文件的播放暂停等等</p> </li>
<li> <p><code>loop</code>:循环播放,默认音频只播放一次</p> </li>
<li> <p><code>muted</code>:静音</p> </li>
<li> <p><code>autoplay</code>:自动播放</p> </li>
</ul></li>
</ul>
<h4>视频 video</h4>
<ul>
<li> <p>用于在页面中引入视频文件</p> </li>
<li> <p>语法:</p> <pre>写法一:
<video src="连接视频文件的文件路径" controls loop muted autoplay></video>
写法二:为了保证不同浏览器都能正常播放音频文件,需要引入多种文件格式的视频文件
<video controls loop muted autoplay>
<source src="连接视频文件格式1的文件路径">
<source src="连接视频文件格式2的文件路径">
</video>
</pre>
<ul>
<li> <p><code>controls</code>:这是一个控制器,控制视频文件的播放暂停等等</p> </li>
<li> <p><code>loop</code>:循环播放,默认视频只播放一次</p> </li>
<li> <p><code>muted</code>:静音播放</p> </li>
<li> <p><code>autoplay</code>:自动播放</p> </li>
</ul></li>
</ul>
<h2>H5新增控件</h2>
<h3>H5表单标签</h3>
<p>form、input(text)、input(password)、input(radio)、input(checkbox)、select、textarea</p>
<p>按钮:input和button</p>
<h4>邮箱输入框</h4>
<ul>
<li> <p>在提交数据时提供了邮箱格式的验证,验证不准确,以后通过js进行验证</p> </li>
<li> <p>语法:</p> <pre><input type="email">
</pre> </li>
</ul>
<h4>数字输入框</h4>
<ul>
<li> <p>只能输入数字,提供了数字的加减操作</p> </li>
<li> <p>语法:</p> <pre> <input type="number">
</pre> </li>
</ul>
<h4>网址输入框</h4>
<ul>
<li> <p>可以进行网址格式的验证,必须是完整的网址,是以http或者https开头的网址</p> </li>
<li> <p>语法:</p> <pre><input type="url">
</pre> </li>
</ul>
<h4>搜索框</h4>
<ul>
<li> <p>在页面中加入搜索框,提供了清空内容的操作</p> </li>
<li> <p>语法:</p> <pre> <input type="search">
</pre> </li>
</ul>
<h4>选取颜色</h4>
<ul>
<li> <p>可以在页面中选择颜色色值</p> </li>
<li> <p>语法:</p> <pre> <input type="color">
</pre> </li>
</ul>
<h4>选取范围</h4>
<ul>
<li> <p>语法:</p> <pre> <input type="range">
</pre> </li>
</ul>
<h4>文件上传</h4>
<ul>
<li> <p>提供文件上传的功能</p> </li>
<li> <p>语法:</p> <pre> <input type="file" multiple>
</pre> </li>
<li> <p>注意:默认只能上传一个文件,如果需要上传多个文件,需要添加multiple属性</p> </li>
</ul>
<h4>时间控件</h4>
<ul>
<li> <p>提供时间的选择</p> </li>
<li> <p>语法:</p> <pre> <!-- 某年某月某日 -->
<input type="date">
<!-- 某年某月 -->
<input type="month">
<!-- 某年第几周 -->
<input type="week">
<!-- 时/分 -->
<input type="time">
</pre> </li>
</ul>
<h4>选项列表</h4>
<ul>
<li> <p>当在输入框中输入内容时,下方的提示相关开头的内容</p> </li>
<li> <p>语法:</p> <pre> <input type="text" list="datalist的id名">
<datalist id="id名">
<option value="">小猪佩奇</option>
<option value="">小猪乔治</option>
<option value="">小米手机</option>
<option value="">小米电脑</option>
<option value="">大米先生</option>
<option value="">大米小姐</option>
</datalist>
</pre> </li>
<li> <p>注意:输入框需要设置list属性指定datalist的id名进行绑定</p> </li>
</ul>
<h4>表单属性</h4>
<ul>
<li> <p><code>required</code>:必填项,必须填写才可以提交</p> </li>
<li> <p><code>autofocus</code>:自动获取焦点</p> </li>
<li> <p><code>readonly</code>:只读,不能修改,可以复制,可以提交</p> </li>
<li> <p><code>disabled</code>:禁用,不能修改,可以复制,不可以提交</p> </li>
</ul>
<h3>语义化标签</h3>
<h3>语义化标签</h3>
<ul>
<li> <p>通过标签名可以合理正确的表达标签中内容的含义</p> </li>
</ul>
<h4>语义化标签的好处</h4>
<ul>
<li> <p>易于用户阅读,样式丢失的时候让页面结构更加清晰明了</p> </li>
<li> <p>有利于SEO优化,搜索引擎可以根据根据标签名确定上下文和各个关键字之间的关系</p> </li>
<li> <p>方便其他设备的解析,比如盲人阅读器</p> </li>
<li> <p>有利于开发和维护,语义化具有可读性,代码更加好维护</p> </li>
</ul>
<h4>常用的语义化标签</h4>
<table>
<thead>
<tr>
<th>标签名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><header></code></td>
<td>代表网页的头部</td>
</tr>
<tr>
<td><code><main></code></td>
<td>代表网页的主体内容,页面上有且仅有一个</td>
</tr>
<tr>
<td><code><footer></code></td>
<td>代表网页的尾部</td>
</tr>
<tr>
<td><code><nav></code></td>
<td>代表导航</td>
</tr>
<tr>
<td><code><aside></code></td>
<td>代表侧边栏,可以放侧边导航或者推荐信息等等</td>
</tr>
<tr>
<td><code><article></code></td>
<td>代表一个独立的区域,存放内容</td>
</tr>
<tr>
<td><code><section></code></td>
<td>代表网页中一个模块</td>
</tr>
<tr>
<td><code><thead></code></td>
<td>代表表格的头部</td>
</tr>
<tr>
<td><code><tbody></code></td>
<td>代表表格的内容</td>
</tr>
<tr>
<td><code><tfoot></code></td>
<td>代表表格的尾部</td>
</tr>
<tr>
<td><code><audio></code></td>
<td>音频</td>
</tr>
<tr>
<td><code><video></code></td>
<td>视频</td>
</tr>
<tr>
<td><code><source></code></td>
<td>资源标签,用于引入多媒体资源</td>
</tr>
<tr>
<td><code><canvas></code></td>
<td>定义形状,在里面绘制图形</td>
</tr>
</tbody>
</table>
<h4>网页中标签的选择</h4>
<ul>
<li> <p>最外层的标签尽量使用语义化标签,比如header、main、footer等等</p> </li>
<li> <p>标题尽量使用标题标签,主要为了SEO优化</p> </li>
<li> <p>对于网页中的内容区域,该用什么标签就用什么标签,超链接使用a标签,图片使用img等等</p> </li>
</ul>
<h2>CSS兼容性问题处理</h2>
<h3>兼容性来源</h3>
<p>内核是浏览器最底层、最核心的代码。决定了网页如何进行解析的,页面是如何被加载的,脚本如何执行。</p>
<p>不同的浏览器的内核是不一样,每种浏览器对相同的页面有不同的解析方式,最终的效果不一样,将这种情况称为兼容性问题。</p>
<p>同一个页面在不同的浏览器上运行的结果是不一样,就是兼容性。</p>
<p>主流的浏览器:Chrome、firfox、IE、safira</p>
<p>国产浏览器:QQ浏览器、360浏览器,UC浏览器,猎豹等等</p>
<p>目前国内是没有自己的内核,都用的国外的内核。360支持双核浏览器:IE Trident 和 safira 的webkit内核一起集成。</p>
<h4>浏览器的内核</h4>
<p>作用:用于解析网页</p>
<p>解析网页:</p>
<ul>
<li> <p>html内容解析</p> </li>
<li> <p>css内容解析</p> </li>
<li> <p>JavaScript内容解析</p> </li>
</ul>
<p>内核中有个比较重要的概念:渲染引擎</p>
<p>渲染引擎</p>
<p>主要包含一些几部分:</p>
<ul>
<li> <p>HTML解析器:会将html代码解析成一棵DOM数,每个标签就是dom树的一个节点</p> </li>
<li> <p>CSS解析器:会将css样式计算出来,内存会跟着一起工作,会将每个标签上的最终样式计算出来</p> </li>
<li> <p>JavaScript引擎:允许js脚本运行环境</p> </li>
<li> <p>布局:主要网页中模块定位、排列、浮动等等</p> </li>
</ul>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/5ca7c08acc38455eb9769544d54ddeb0.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第12张图片" src="http://img.e-com-net.com/image/info8/5ca7c08acc38455eb9769544d54ddeb0.jpg" width="650" height="230" style="border:1px solid black;"></a></p>
<h4>网页是如何解析出来?</h4>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/1e877baf65cc490c802c266c164c527f.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第13张图片" src="http://img.e-com-net.com/image/info8/1e877baf65cc490c802c266c164c527f.jpg" width="650" height="352" style="border:1px solid black;"></a></p>
<ol>
<li> <p>加载网页内容</p>
<ul>
<li> <p>判断是否为网络资源,是就利用网络模块从网页中加载代码</p> </li>
<li> <p>如果是本地的资源,就直接从本地加载网页文件</p> </li>
</ul></li>
<li> <p>经过HTML解释器,对代码进行解析</p>
<ul>
<li> <p>浏览器从代码的第一行进行解析,把不同类型的代码会交给对应的解释器进行解析</p>
<ul>
<li> <p>css代码——css解释器</p> </li>
<li> <p>html代码——html解释器</p> </li>
<li> <p>js代码——JavaScript引擎</p> </li>
</ul></li>
</ul></li>
<li> <p>将各个解释器的结果进行综合梳理(内部表示)</p>
<ul>
<li> <p>会把标签和对应的css样式结合起来,每个标签都有自己的渲染结果</p> </li>
</ul></li>
<li> <p>布局和绘图</p>
<ul>
<li> <p>会把每个标签的样式、位置等绘制在页面上,如果有图片或视频音频,再利用对应的模块进行处理,处理完成之后直接显示在页面上。</p> </li>
</ul></li>
</ol>
<h3>兼容性的处理方案</h3>
<h4>hack代码</h4>
<p>专门针对特点的浏览器设置的css代码</p>
<p>css hack:针对不同的浏览器或浏览器不同的版本写不同的css代码,书写css代码的这个过程就是css hack。</p>
<p>主要学习IE hack代码。</p>
<h4>css hack分类</h4>
<p>属性前缀法</p>
<ul>
<li> <p>针对不同的浏览器,在css属性的前面添加一些特点的浏览器的版本才能识别的前缀代码</p> </li>
<li> <p>多个属性需要设置时,每个属性前面都添加前缀</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/fd648cbcd4c04202922de62bd2c33865.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第14张图片" src="http://img.e-com-net.com/image/info8/fd648cbcd4c04202922de62bd2c33865.jpg" width="650" height="545" style="border:1px solid black;"></a></p> <p>选择器前缀法</p> </li>
<li> <p>在选择器前面添加一些特定浏览器才能识别的代码</p> </li>
</ul>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/9ef9e4455a3844e5a5fe93ac20ea12a4.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第15张图片" src="http://img.e-com-net.com/image/info8/9ef9e4455a3844e5a5fe93ac20ea12a4.jpg" width="650" height="319" style="border:1px solid black;"></a></p>
<p>条件注释法</p>
<ul>
<li> <p>在引入css文件时规定作业的浏览器版本或类型</p> <p>gte 大于等于 gt 大于 lte小于等于 lt小于 ! 不是</p> </li>
</ul>
<pre>只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
</pre>
<h3>兼容性自查网址</h3>
<p>Can I use... Support tables for HTML5, CSS3, etc</p>
<h3>css兼容指导思想</h3>
<h4>渐进增强</h4>
<ul>
<li> <p>先考虑大多数浏览器能够正常显示网页,针对高版本的浏览器单独设置样式,添加页面效果,浏览器的版本越高,页面效果越好</p> </li>
</ul>
<h4>优雅降级(推荐)</h4>
<ul>
<li> <p>先不管兼容问题,直接以目前主流的浏览器为基础,实现最佳效果,然后再考虑低版本的浏览书写css hack代码来保证低版本的浏览器能够正常显示</p> </li>
</ul>
<h2>圆角原理</h2>
<h3>圆角</h3>
<ul>
<li> <p>css3提出的,盒子默认四个角都是直角,通过border-radius设置圆角的效果</p> </li>
<li> <p>语法:</p> <pre>分别设置四个角的元素:
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
复合属性:
border-radius
一个值:左上右上右下左下
两个值:左上右下 右上左下
三个值:左上 右上左下 右下
四个值:左上 右上 右下 左下
标准写法:八个值 /前面代表每个角的水平半径,/后面代表每个角的垂直半径
border-radius: 30px 30px 30px 30px / 60px 60px 60px 60px;
</pre> </li>
<li> <p>圆角的形成:一个椭圆是由水平半径和垂直半径构成,正圆是特殊的椭圆,圆角是一个椭圆或正圆的一段圆弧构成。</p> <p></p> </li>
<li> <p>如果水平半径和垂直半径相等时,圆角取得是正圆的圆弧,如果不相等,取得是椭圆的圆弧</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/a15411f53e854712a25c0a1a2f6fb917.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第16张图片" src="http://img.e-com-net.com/image/info8/a15411f53e854712a25c0a1a2f6fb917.jpg" width="471" height="141" style="border:1px solid black;"></a></p> </li>
</ul>
<h3>内半径和外半径</h3>
<ul>
<li> <p>当边框足够宽时,设置border-radius小于边框的宽度时,边框内边缘没有圆角,是直角,外边缘是圆角</p> </li>
<li> <p>当边框足够宽时,设置border-radius大于边框的宽度时,边框外边缘的圆角的半径就是外半径,边框内边缘的圆角的半径就是内半径</p> </li>
<li> <p>内半径=外半径-边框的宽度</p>
<ul>
<li> <p>外半径就是设置border-radius的值</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>当border-radius小于或等于边框的宽度时,内半径=外半径-边框,内半径为负或0,直接为0,显示为直角</p> </li>
<li> <p>当border-radius大于边框的宽度,内半径=外半径-边框,内半径为正,边框内边缘就是圆角</p> </li>
</ul></li>
</ul>
<h2>弹性布局 (弹性盒模型)</h2>
<p></p>
<h3>传统的布局</h3>
<ul>
<li> <p>基于盒模型,依赖display+float+position进行页面布局</p> </li>
<li> <p>这种方式兼容性比较好,但是布局比较繁琐</p> </li>
<li> <p>各种不便:</p>
<ul>
<li> <p>各种盒子居中问题</p> </li>
<li> <p>盒子之间的间距margin调整</p> </li>
<li> <p>块级元素同行显示设置浮动——清除浮动</p> </li>
</ul></li>
</ul>
<p>针对这些不便,css3提出一种自适应的布局方式——弹性布局,它用来替代或辅助传统布局</p>
<h3>弹性盒模型</h3>
<ul>
<li> <p>概念:是一种当页面需要适应不同的屏幕大小时,确保元素拥有恰当行为的布局方式。</p> </li>
<li> <p>目的:提供了一种布局方式,这种布局方式可以进行元素排列、空白空间分配等等</p> </li>
</ul>
<h4>弹性盒模型结构</h4>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/0420291777bf40818ababc8239e623a7.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第17张图片" src="http://img.e-com-net.com/image/info8/0420291777bf40818ababc8239e623a7.jpg" width="554" height="328" style="border:1px solid black;"></a></p>
<p>弹性盒子是由弹性容器和弹性项目构成。</p>
<ul>
<li> <p>弹性容器:包含弹性项目的父元素。</p> </li>
<li> <p>弹性项目:弹性容器里面每个子元素都是弹性项目。</p> </li>
<li> <p>主轴:弹性项目一行显示的方向就是主轴的方向</p> </li>
<li> <p>侧轴:与主轴垂直的方向就是侧轴的方向</p> </li>
</ul>
<h3>给父元素(弹性容器)设置的属性</h3>
<h4>display:flex | inline-flex</h4>
<ul>
<li> <p>设置盒子为弹性容器,里面子元素就是弹性项目</p> </li>
<li> <p><code>display:flex;</code>:设置块级弹性容器,对其他的兄弟元素来说,它就是一个普通的块级元素,对其子元素来说,它就是一个弹性容器,子元素按照弹性项目的方式进行显示</p> </li>
<li> <p><code>display:inline-flex;</code>:设置行级弹性容器,对其他的兄弟元素来说,它就是一个普通的行级元素,对其子元素来说,它就是一个弹性容器,子元素按照弹性项目的方式进行显示</p> </li>
</ul>
<p>弹性盒子特点</p>
<ul>
<li> <p>弹性容器里面的弹性项目可以同行显示,显示不下时按比例压缩显示</p> </li>
<li> <p>弹性容器没有设置高度时,高度可以自适应</p> </li>
<li> <p>弹性容器对兄弟元素没有影响</p> </li>
<li> <p>弹性容器对直接子元素有影响</p> </li>
</ul>
<h4>flex-wrap</h4>
<ul>
<li> <p>设置弹性项目是否可以换行</p> </li>
<li> <p>语法:</p> <pre> flex-wrap: nowrap | wrap;
</pre>
<ul>
<li> <p><code>nowrap</code>:默认值,不换行</p> </li>
<li> <p><code>wrap</code>:换行</p> </li>
</ul></li>
</ul>
<h4>flex-direction</h4>
<ul>
<li> <p>设置弹性容器中主轴的方向和弹性项目的排列方式</p> </li>
<li> <p>主轴:弹性项目同行显示的方向 侧轴:与主轴垂直的方向就是侧轴的方向</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p><code>row</code>:默认值,设置水平方向为主轴,弹性项目从左到右依次排列</p> </li>
<li> <p><code>row-reverse</code>:设置水平方向为主轴,弹性项目从右到左依次排列</p> </li>
<li> <p><code>column</code>:设置垂直方向为主轴,弹性项目从上到下依次排列</p> </li>
<li> <p><code>column-reverse</code>:设置垂直方向为主轴,弹性项目从下到上依次排列、</p> </li>
</ul></li>
</ul>
<h3>富裕空间</h3>
<h3>给父元素(弹性容器)设置的属性</h3>
<h4>justify-content</h4>
<ul>
<li> <p>处理主轴上的富裕空间的分配</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p><code>flex-start</code>:默认值,将主轴上的富裕空间放在弹性项目之后</p> </li>
<li> <p><code>flex-end</code>:将主轴上的富裕空间放在弹性项目之前</p> </li>
<li> <p><code>center</code>:将弹性项目在主轴上居中</p> </li>
<li> <p><code>space-between</code>:首尾弹性项目紧靠弹性容器,中间均分</p> </li>
<li> <p><code>space-around</code>:将主轴上的富裕空间均分到每个弹性项目两边</p> </li>
<li> <p><code>space-evenly</code>: 每个弹性项目之间的间距均分,包括首尾和弹性容器的间距</p> </li>
</ul></li>
</ul>
<h4>align-items</h4>
<ul>
<li> <p>处理侧轴上的富裕空间的分配</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p><code>flex-start</code>:默认值,当弹性项目设置了高度时,将侧轴上的富裕空间均分到每行弹性项目之后</p> </li>
<li> <p><code>flex-end</code>:将侧轴上的富裕空间均分到每行弹性项目之前</p> </li>
<li> <p><code>center</code>:每行弹性项目上下均分富裕空间,在每行弹性项目居中</p> </li>
<li> <p><code>stretch</code>:默认值,当弹性项目没有设置高度时,默认将弹性项目拉伸撑满弹性容器</p> </li>
</ul></li>
</ul>
<h3>给子元素(弹性项目)设置的属性</h3>
<h4>align-self</h4>
<ul>
<li> <p>设置当前的弹性项目在侧轴上的富裕空间分配</p> </li>
<li> <p>取值:</p>
<ul>
<li> <p><code>flex-start</code>:默认值,当弹性项目设置了高度时,将侧轴上的富裕空间均分到每行弹性项目之后</p> </li>
<li> <p><code>flex-end</code>:将侧轴上的富裕空间均分到每行弹性项目之前</p> </li>
<li> <p><code>center</code>:每行弹性项目上下均分富裕空间,在每行弹性项目居中</p> </li>
<li> <p><code>stretch</code>:默认值,当弹性项目没有设置高度时,默认将弹性项目拉伸撑满弹性容器</p> </li>
</ul></li>
</ul>
<h3>富裕空间</h3>
<ul>
<li> <p>概念:在弹性容器中除弹性项目之外的剩余空间,就称为富裕空间。主要分为主轴上的富裕空间和侧轴上的富裕空间</p> </li>
<li> <p>分配:</p>
<ul>
<li> <p>主轴上的富裕空间分配:justify-content</p> </li>
<li> <p>侧轴上的富裕空间分配:align-items 和 align-self</p> </li>
</ul></li>
</ul>
<h3>弹性空间</h3>
<h3>给子元素(弹性项目)设置的属性</h3>
<h4>flex-shrink</h4>
<ul>
<li> <p>设置弹性项目的压缩因子,压缩比例</p> </li>
<li> <p>原理:当弹性容器宽度不够时并且弹性项目在一行显示不换行,为了保证不换行,通过<code>flex-shrink</code>属性将弹性项目进行按比例压缩显示,以达到不换行的目的。</p> </li>
<li> <p>语法:</p> <pre> flex-shrink: 数字;
</pre>
<ul>
<li> <p>默认值为1,数字越大,压缩比例越大,盒子的大小越小</p> </li>
</ul></li>
<li> <p>计算公式:</p> <pre>总压缩空间=弹性项目总宽度 - 弹性容器的宽度
每个弹性项目的压缩空间= 总压缩空间 / 压缩因子总数 * 弹性项目的压缩因子
盒子的大小= 盒子原来的宽度 - 压缩空间宽度
</pre> </li>
</ul>
<h4>flex-grow</h4>
<ul>
<li> <p>设置弹性项目的弹性因子</p> </li>
<li> <p>语法:</p> <pre> flex-grow:数字;
</pre>
<ul>
<li> <p>默认值为0;数字越大,弹性空间越大,盒子的大小越大</p> </li>
</ul></li>
<li> <p>计算公式</p> <pre> 富裕空间= 弹性容器的宽度 - 弹性项目的总宽度
每个弹性项目的弹性空间= 富裕空间 / 弹性因子总数 * 弹性项目的弹性因子
盒子的大小 = 盒子原来的宽度 + 弹性项目的弹性空间
</pre> </li>
</ul>
<h3>弹性空间</h3>
<ul>
<li> <p>概念:弹性项目消化掉的富裕空间,</p> </li>
<li> <p>目的:设置弹性因子,弹性项目可以撑满弹性容器,消化掉主轴上的富裕空间,通过flex-grow属性可以设置每个弹性项目消化空间的比例</p> </li>
</ul>
<h2>弹性扩展属性</h2>
<h3>给子元素(弹性项目)设置的属性</h3>
<h4>order</h4>
<ul>
<li> <p>能够更改某个弹性项目的显示的位置</p> </li>
<li> <p>语法:</p> <pre> oreder: 数字;
</pre>
<ul>
<li> <p>默认值为0,可以设置负值,数字越大,元素显示位置越靠后,数字相同时,按照代码顺序依次显示</p> </li>
</ul></li>
<li> <p>应用场景:</p>
<ul>
<li> <p>js控制拖拽或点击让元素排列到最后</p> </li>
</ul></li>
</ul>
<h4>flex-basis</h4>
<ul>
<li> <p>设置弹性项目的默认的宽度</p> </li>
<li> <p>语法:</p> <pre> flex-basis: 300px;
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>优先级:flex-basis > width >由内容撑开的</p> </li>
</ul></li>
</ul>
<h4>flex</h4>
<ul>
<li> <p>复合属性,是flex-grow、flex-shrink、flex-basis的复合属性</p> </li>
<li> <p>语法:</p> <pre> flex: flex-grow flex-shrink flex-basis;
</pre>
<ul>
<li> <p>默认值:0 1 auto</p> </li>
</ul></li>
</ul>
<h2>线性渐变 (CSS3基础)</h2>
<h3>渐变背景</h3>
<p>像比较规则的渐变背景,使用1px的渐变背景的平铺,像不规则的渐变背景,则直接使用整张图片作为背景,图片开发维护性比较低,影响网页加载速率。</p>
<p>css3提出了渐变背景:线性渐变和径向渐变</p>
<p>渐变背景可以看作一张“图像”,使用css属性中的<code>background-image</code></p>
<h4>线性渐变</h4>
<ul>
<li> <p>概念:线性渐变可以看作沿着一条直线进行颜色渐变。</p> </li>
<li> <p>注意:渐变背景至少设置2种颜色</p> </li>
<li> <p>语法:</p> <pre> baclground-image: linear-gradient( 渐变方向 ,颜色1 位置1,颜色2 位置2,颜色2 位置2)
</pre> </li>
</ul>
<p>色标</p>
<ul>
<li> <p>是由一个颜色和一个位置构成的。控制渐变的范围</p> </li>
<li> <p>颜色:单词,#十六进制,rgb(),rgba(0-255,0-255,0-255,0.5)</p> </li>
<li> <p>位置:像素,百分比</p>
<ul>
<li> <p>至设置颜色时,渐变默认为均匀渐变</p> </li>
<li> <p>如果首尾色标的颜色不在0%或100%时,是以纯色进行填充</p> <pre> 0%~20%是红色,20%~60%是红色到绿色的渐变,60%~80%是绿色到黄色的渐变,80%~100%是黄色
background-image:linear-gradient(red 20%,green 60%, yellow 80%);
</pre> </li>
<li> <p>如果首尾色标的位置不设置时,默认0%或100%</p> </li>
<li> <p>如果两个色标的位置相同时,中间的渐变的范围为0,会出现断层的效果。</p> </li>
</ul></li>
</ul>
<p>渐变线</p>
<ul>
<li> <p>可以用来控制渐变方向</p> </li>
<li> <p>to 结束方向</p>
<ul>
<li> <p>to bottom ——默认值,180deg或者-180deg</p> </li>
<li> <p>to top——0deg</p> </li>
<li> <p>to left—— 270deg 或-90deg</p> </li>
<li> <p>to right——90deg 或-270deg</p> </li>
<li> <p>to top left —— 315deg 或-45deg</p> </li>
<li> <p>to top right——45deg或-315deg</p> </li>
<li> <p>to bottom left——225deg或-135deg</p> </li>
<li> <p>to bottom right—— 135deg 或 -225deg</p> </li>
</ul></li>
<li> <p>角度:必须带deg的单位,0deg的方向是垂直向上,顺时针是正方向,逆时针是负方向</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/08850dc104e544f383ea5a34257dac55.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第18张图片" src="http://img.e-com-net.com/image/info8/08850dc104e544f383ea5a34257dac55.jpg" width="421" height="300" style="border:1px solid black;"></a></p> </li>
</ul>
<h4>重复线性渐变</h4>
<ul>
<li> <p>将线性渐变进行重复铺设,使用<code>repeating-linear-gradient</code></p> </li>
<li> <p>注意:只有首尾不在0%或100%时,重复线性渐变才有效</p> </li>
<li> <p>语法:</p> <pre>background-image: repeating-linear-gradient(pink 0px,pink 20px,yellow 20px, yellow 40px);
</pre> <h2>径向渐变</h2> </li>
</ul>
<h4>径向渐变</h4>
<ul>
<li> <p>概念:径向渐变指的就是椭圆渐变,渐变效果就是沿着椭圆的半径方向进行渐变,正圆就是一种特殊的椭圆。</p> </li>
<li> <p>分为两部分:</p>
<ul>
<li> <p>色标:是由一个颜色和一个位置构成,用来控制渐变过渡的颜色变化范围(参考线性渐变的用法)</p> </li>
<li> <p>椭圆:用来控制径向渐变位置、大小、形状。</p> </li>
</ul></li>
<li> <p>语法:</p> <pre> background-image: radial-gradient(大小 形状 at x轴 y轴, 颜色1 位置1,颜色2 位置2,颜色3 位置3);
</pre> </li>
<li> <p>大小:</p>
<ul>
<li> <p><code>farthest-corner</code>:默认值,半径从圆心到最远的角</p> </li>
<li> <p><code>closest-corner</code>: 半径从圆心到最近的角</p> </li>
<li> <p><code>farthest-side</code>:半径从圆心到最远的边</p> </li>
<li> <p><code>closest-side</code>:半径从圆心到最近的边</p> </li>
</ul></li>
<li> <p>形状:</p>
<ul>
<li> <p><code>ellipse</code>:默认值,椭圆</p> </li>
<li> <p><code>circle</code>:正圆</p> </li>
</ul></li>
<li> <p>圆心: at x轴 y轴</p> <p>默认在盒子的中心点,相当于center center</p>
<ul>
<li> <p>单词: top bottom left right center 两两搭配使用</p> </li>
<li> <p>像素:0px 0px相当于盒子的左上角</p> </li>
<li> <p>百分比:参考盒子的宽度和高度,50% 50%相当于center center</p> </li>
</ul></li>
</ul>
<p>重复径向渐变</p>
<ul>
<li> <p>将径向渐变进行重复铺设</p> </li>
<li> <p>注意:渐变首尾不在0% 或100%时,重复径向渐变才有效</p> </li>
</ul>
<h3>盒子阴影</h3>
<h3>盒子阴影</h3>
<ul>
<li> <p>给盒子设置阴影,通过box-shadow设置盒子阴影</p> </li>
<li> <p>语法:</p> <pre> box-shadow: x轴偏移量 y轴偏移量 模糊程度 阴影大小 颜色;
inset将外阴影设置为内阴影
box-shadow: x轴偏移量 y轴偏移量 模糊程度 阴影大小 颜色 inset;
可以设置多层阴影,中间使用逗号隔开
box-shadow: x轴偏移量 y轴偏移量 模糊程度 阴影大小 颜色 , x轴偏移量 y轴偏移量 模糊程度 阴影大小 颜色 , x轴偏移量 y轴偏移量 模糊程度 阴影大小 颜色;
</pre> </li>
<li> <p>注意:模糊程度和阴影大小可以不写</p> </li>
</ul>
<h3>文字阴影</h3>
<ul>
<li> <p>给文本设置阴影,通过text-shadow设置阴影</p> </li>
<li> <p>语法:</p> <pre>text-shadow: x轴偏移量 y轴偏移量 模糊程度 颜色;
</pre> </li>
</ul>
<h3>结构选择器</h3>
<h3>结构选择器</h3>
<ul>
<li> <p>根据HTMl代码结构找到满足条件的标签,也是一种伪类选择器</p> </li>
</ul>
<h4>:first-child</h4>
<ul>
<li> <p>找到满足条件的标签,并且这个标签是某个标签的第一个子标签</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签里面所有的后代span标签,并且这个span标签是某个标签的第一个子标签
.box span:first-child{
}
</pre> </li>
</ul>
<h4>:last-child</h4>
<ul>
<li> <p>找到满足条件的标签,并且这个标签是某个标签的倒数第一个子标签(最后一个子标签)</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签里面所有的后代span标签,并且这个span标签是某个标签的倒数第一个子标签
.box span:last-child{
}
</pre> </li>
</ul>
<h4>:nth-child(n)</h4>
<ul>
<li> <p>找到满足条件的标签,并且这个标签是某个标签的第n个子标签</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签里面所有的后代span标签,并且这个span标签是某个标签的第n个子标签
.box span:nth-child(n){
}
</pre>
<ul>
<li> <p>n代表数字</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p><code>:nth-child(2n-1)</code>或<code>:nth-child(2n+1)</code>:找到奇数的子标签</p> </li>
<li> <p><code>:ntb-child(2n)</code>:找到偶数的子标签</p> </li>
</ul></li>
</ul>
<h4>:nth-last-child(n)</h4>
<ul>
<li> <p>找到满足条件的标签,并且这个标签是某个标签的倒数第n个子标签</p> </li>
<li> <p>语法:</p> <pre> 找到class名为box的标签里面所有的后代span标签,并且这个span标签是某个标签的倒数第n个子标签
.box span:nth-last-child(n){
}
</pre>
<ul>
<li> <p>n代表数字</p> </li>
</ul></li>
</ul>
<h4>:nth-of-type(n)</h4>
<ul>
<li> <p>将满足条件的同类型的标签,将其筛选出来,重新排序,找到其中的第n个标签</p> </li>
<li> <p>语法</p> <pre> 找到class名为box的标签里面所有的后代span标签,将span标签筛选出来,重新排序,找到其中的第n个标签
.box span:nth-of-type(n){
}
</pre> </li>
</ul>
<h4>:nth-last-of-type(n)</h4>
<ul>
<li> <p>将满足条件的同类型的标签,将其筛选出来,重新排序,找到其中的倒数第n个标签</p> </li>
<li> <p>语法</p> <pre> 找到class名为box的标签里面所有的后代span标签,将span标签筛选出来,重新排序,找到其中的倒数第n个标签
.box span:nth-last-of-type(n){
}
</pre> </li>
</ul>
<h2>SASS基础</h2>
<h3>原生css的不便</h3>
<ul>
<li> <p>书写重复的选择器</p> </li>
<li> <p>修改属性,每次都需要修改,不能一处改处处改</p> </li>
<li> <p>css代码重复编写</p> </li>
</ul>
<h3>SASS</h3>
<ul>
<li> <p>概念:less和sass都是一个css预处理器,可以为网站启用可定义、可管理和可重用的样式表,就是动态的样式表语言。</p>
<ul>
<li> <p>css预处理器其实就是一种脚本语言,可以扩展css语法并将其编译常规的css代码,方便的浏览器正常渲染。</p> </li>
<li> <p>sass就是css的扩展,通过提供嵌套、变量、混合等操作,通过编译都可以变成常规的css代码</p> </li>
</ul></li>
<li> <p>作用:极大的提供开发者开发的效率</p> </li>
<li> <p>官网:Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网</p> </li>
</ul>
<h3>SASS基本使用</h3>
<h4>使用vs code的easy sass插件来完成sass文件的编写</h4>
<ul>
<li> <p>按照<code>easy sass</code>插件</p> </li>
<li> <p>新建以<code>.sass</code>或<code>.scss</code>为后缀的文件,在里面书写css代码</p>
<ul>
<li> <p><code>.sass</code>:是老版本的sass文件</p> </li>
<li> <p><code>.scss</code>是新版本的sass文件(推荐)</p> </li>
</ul></li>
<li> <p><code>easy sass</code>插件可以将sass文件编译为css文件,在页面中引入css文件即可。</p> </li>
</ul>
<h4>手动更改编译后的css文件存储路径</h4>
<ul>
<li> <p>找到设置,搜索<code>easy sass</code></p> </li>
<li> <p>注意:存储路径是从工作区出发,工作区必须有名字</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/0886f14f2bb64380b19b12da0cc3dae9.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第19张图片" src="http://img.e-com-net.com/image/info8/0886f14f2bb64380b19b12da0cc3dae9.jpg" width="650" height="386" style="border:1px solid black;"></a></p> </li>
</ul>
<h3>嵌套</h3>
<h3>嵌套</h3>
<ul>
<li> <p>概念:SASS支持选择器里面嵌套子选择器</p> </li>
<li> <p>作用:让sass代码对应css代码层级结构清晰明了,不会出现父子标签之间权重</p> </li>
<li> <p>语法:</p> <pre> 父选择器{
父选择器的css代码;
css属性:css属性值;
子选择器{
子选择器的css代码
子选择器{
子选择器的css代码
}
}
}
示例:
.header{
width: 100%;
height: 70px;
background-color: pink;
.container{
width: 1200px;
height: 70px;
border: 1px solid red;
margin: 0 auto;
.logo{
width: 200px;
height: 70px;
background-color: tomato;
}
.nav{
width: 400px;
height: 70px;
background-color: yellowgreen;
>ul{
list-style: none;
li{
background-color: red;
// &代表父选择器
&:hover{
background-color: blue;
}
&::before{
content: "";
}
&::after{
content: "after";
}
}
}
+.box{
border: 1px solid red;
}
~div{
width: 300px;
height: 200px;
}
}
}
}
</pre> </li>
</ul>
<h3>变量</h3>
<h3>变量</h3>
<ul>
<li> <p>概念:变量可以看作一个保存数据的容器,可以在代码中重复使用</p> </li>
<li> <p>作用:可以实现一处改处处改</p> </li>
<li> <p>语法:</p> <pre> 定义变量:
$变量名:数据;
使用变量:
.box{
color: $变量名;
}
</pre>
<ul>
<li> <p>数据可以是任意的属性值,比如:100px,red,也可以复合属性的属性值,比如:1px solid red</p> </li>
<li> <p>变量名规范:</p>
<ul>
<li> <p>是以数字、字母、_和-构成</p> </li>
<li> <p>不能以数字开头,不能包含特殊的符号</p> </li>
<li> <p>多个单词之间尽量使用-分开</p> </li>
</ul></li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>变量需要先在文件的开头定义变量,再使用变量</p> </li>
<li> <p>sass语法中提供数学运算,符号前后加空格</p> </li>
</ul></li>
</ul>
<p></p>
<h2>CSS过渡</h2>
<h3>基本概念</h3>
<ul>
<li> <p><code>transition</code>提供了一种在更改css属性时控制动画执行的速率或者时间,可以在指定的时间内执行动画效果,而不是立即执行。</p> </li>
</ul>
<h3>属性</h3>
<h4>transition-property</h4>
<ul>
<li> <p>设置过渡的css属性名</p> </li>
<li> <p>语法:</p> <pre> transition-property: css属性名;
</pre>
<ul>
<li> <p>默认值为all,代表所有的css属性</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>仅仅设置过渡的属性名没有效果,需要配合过渡的执行时长一起使用</p> </li>
<li> <p>多个属性同时设置过渡时,中间使用逗号隔开,时间和属性名一一对应</p> </li>
</ul></li>
</ul>
<h4>transition-duration</h4>
<ul>
<li> <p>设置过渡的执行时长,控制整个过渡的动画在多长时间内执行完成</p> </li>
<li> <p>语法:</p> <pre> transition-duration: 时间;
</pre>
<ul>
<li> <p>默认为0s, s代表秒,ms代码毫秒,1s=1000ms</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>如果过渡的属性名的个数多于执行时长的个数,时间一一对应,时间重复一遍</p> </li>
</ul></li>
</ul>
<h4>transition-timing-function</h4>
<ul>
<li> <p>设置过渡的执行的速率</p> </li>
<li> <p>属性值:</p>
<ul>
<li> <p><code>ease</code>:默认值,以低速开始,然后变快,在结束前变慢</p> </li>
<li> <p><code>linear</code>:匀速</p> </li>
<li> <p><code>ease-in</code>:是以低速开始</p> </li>
<li> <p><code>ease-out</code>:以低速结束</p> </li>
<li> <p><code>ease-in-out</code>:以低速开始和结束</p> </li>
<li> <p><code>cubic-bezier(x1,y1,x2,y2)</code>:贝塞尔曲线</p> </li>
</ul></li>
</ul>
<p>贝塞尔曲线</p>
<ul>
<li> <p>概念:是一种构建二维图形的速度曲线,本质上是一个数学曲线</p> </li>
<li> <p>作用:在css中,可以用来控制动画的执行速率</p> </li>
<li> <p>语法:</p> <pre>cubic-bezier(x1,y1,x2,y2)
</pre>
<ul>
<li> <p>这两个坐标决定了曲线形状,不同的形状对应的速率不一样,可以为负</p> </li>
</ul></li>
<li> <p>构建贝塞尔曲线的网址:cubic-bezier.com</p> </li>
</ul>
<h4>transition-delay</h4>
<ul>
<li> <p>设置过渡的延迟时长,就是过渡的效果从何时开始执行</p> </li>
<li> <p>语法:</p> <pre> transition-delay: 时间;
</pre>
<ul>
<li> <p>默认值为0s,</p> </li>
</ul></li>
</ul>
<h4>transition</h4>
<ul>
<li> <p>复合属性</p> </li>
<li> <p>语法:</p> <pre> transition: 过渡属性名 执行时长 延迟时长 执行速率;
多个属性同时过渡时,中间使用逗号隔开
transition: 过渡属性名1 执行时长 延迟时长 执行速率 , 过渡属性名2 执行时长 延迟时长 执行速率 , 过渡属性名3 执行时长 延迟时长 执行速率;
</pre> </li>
<li> <p>注意:并不是所有的css属性都可以设置过渡,比如display</p> </li>
</ul>
<h2>2D转换</h2>
<h3>基本概念</h3>
<ul>
<li> <p>CSS3 提出了一个<code>transform</code>属性来处理盒子(html标签)的变化或转换,包含移动、旋转、缩放和倾斜。</p> </li>
<li> <p>2D转换一般配合过渡的一起使用</p> </li>
<li> <p>注意:2D转换不会影响其他盒子的排列</p> </li>
</ul>
<h3>位移 translate</h3>
<ul>
<li> <p>让盒子进行移动</p> </li>
<li> <p>语法:</p> <pre> transform: translate(x轴移动量 ,y轴移动量);
transform: translate(x轴移动量);
沿着x轴进行移动
transform: translateX(x轴移动量);
沿着y轴进行移动
transform: translateY(y轴移动量);
</pre>
<ul>
<li> <p>盒子是以原来的位置为起点进行移动</p> </li>
</ul></li>
</ul>
<h3>旋转 rotate</h3>
<ul>
<li> <p>可以让盒子进行旋转</p> </li>
<li> <p>语法:</p> <pre> 围绕着盒子的中心点进行旋转
transform: rotate(角度);
围绕着x轴进行旋转
transform: rotateX(角度);
围绕着y轴进行旋转
transform: rotateY(角度);
</pre>
<ul>
<li> <p><code>rotate(角度)</code>:围绕着盒子的中心点进行旋转,设置正值,顺时针旋转,设置负值,逆时针旋转</p> </li>
</ul></li>
</ul>
<h3>缩放 scale</h3>
<ul>
<li> <p>设置盒子进行放大或缩小</p> </li>
<li> <p>语法:</p> <pre> transform: scale(宽度的倍数,高度的倍数);
等比例缩放
transform: scale(倍数);
</pre>
<ul>
<li> <p>0: 标签会缩放为原来的0倍,标签会从页面上消失不见</p> </li>
<li> <p>0~1:盒子缩小</p> </li>
<li> <p>1:盒子原来的大小</p> </li>
<li> <p>1以上:盒子放大</p> </li>
</ul></li>
<li> <p>注意:默认缩放会参考盒子的中心点进行缩放</p> </li>
</ul>
<h3>倾斜 skew</h3>
<ul>
<li> <p>让盒子沿着x轴或y轴进行倾斜</p> </li>
<li> <p>语法:</p> <pre> 沿着x轴进行倾斜
transform: skew(角度);
transform: skewX(角度);
沿着y轴进行倾斜
transform: skewY(角度);
</pre>
<ul>
<li> <p><code>skewX(角度)</code>:沿着x轴进行倾斜,角度越大,越接近x轴,当角度为90deg时,会和x轴平行,消失不见</p> </li>
<li> <p><code>skewY(角度)</code>:沿着Y轴进行倾斜,角度越大,越接近y轴,当角度为90deg时,会和y轴平行,消失不见</p> </li>
</ul></li>
</ul>
<h3>组合变换</h3>
<h3>组合变换</h3>
<ul>
<li> <p>多个2D转换组合在一起,作用在同一个标签上,中间使用空格隔开</p> </li>
<li> <p>语法:</p> <pre> transform: rotate(90deg) translateX(200px) scale(0.5);
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>旋转会改变坐标轴的方向</p> </li>
</ul></li>
</ul>
<h2>基点设置</h2>
<h3>转换基点</h3>
<ul>
<li> <p>基点:进行css的转换时的参考点</p> </li>
<li> <p>通过<code>transform-origin</code>属性可以设置转换基点的位置,盒子默认的转换基点是盒子的中心点,,默认值为center center</p> </li>
<li> <p>语法:</p> <pre> transform-origin: x y;
</pre>
<ul>
<li> <p>单词:top bottom left right center 两两搭配使用</p> </li>
<li> <p>像素:左上角相当于0px 0px</p> </li>
<li> <p>百分比:参考的是盒子的宽度和高度,50% 50% 相当于center center</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>对于旋转和缩放来说,因为其转换和盒子的中心点有关,改变了转换基点的位置,旋转和缩放会受影响</p> </li>
<li> <p>对于位移来说,因为位移参考的盒子原来的位置,改变了转换基点的位置,原来的位置不会发生改变,位移不会受到影响</p> </li>
<li> <p>如果盒子需要设置转换基点,需要<code>设置在盒子样式未被更改时的位置</code>,因为转换基点的默认值为盒子的中心点center center,如果在改变盒子样式时设置转换基点,转换基点相当于会从center center 改变为指定的位置,那么转换的效果容易错乱</p> </li>
</ul></li>
</ul>
<h2>3D空间介绍</h2>
<h3>3D转换</h3>
<p>3D转换是2D转换的一种补充,基于css样式来完成页面中3D效果</p>
<p>在2D平面上,新增了一条z轴,形成了三维坐标系</p>
<h3>三维坐标系</h3>
<ul>
<li> <p>概念:在x轴和y轴的基础上,新增了z轴,形成了三维坐标系</p> </li>
<li> <p>三维坐标系:x轴的正方向默认水平向右,y轴的正方向是垂直向下,z轴的正方向是垂直屏幕向外</p> </li>
<li> <p>左手系统:食指是水平向右是x轴的正方向,中指垂直向下是y轴的正方向,大拇指垂直屏幕向外是z轴的正方向</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/304956c439ae4f72b9077cd34ee859e0.jpg" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第20张图片" src="http://img.e-com-net.com/image/info8/304956c439ae4f72b9077cd34ee859e0.jpg" width="417" height="408" style="border:1px solid black;"></a></p> </li>
</ul>
<p>有了三维坐标系,我们可以用(x,y,z)就表示三维空间中任意一个点</p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/e48b9faa3d7f473197f086d8c106a5f5.png" target="_blank"><img alt="一站式Typora、PS、HTML、CSS基础知识汇总_第21张图片" src="http://img.e-com-net.com/image/info8/e48b9faa3d7f473197f086d8c106a5f5.png" width="438" height="439" style="border:1px solid black;"></a></p>
<h3>景深</h3>
<ul>
<li> <p>概念:在摄像中,景深是指相机对焦点的相对清晰的成像范围,即物体和镜头之间的距离。</p> <p>在开发中,我们将景深转化物体在z轴上的显示距离。</p> </li>
<li> <p>作用:css可以通过<code>perspective</code>属性来设置盒子和屏幕之间的距离,即景深,景深越大,物体距离屏幕越远,景深越小,物体距离屏幕越近(一旦设置景深,盒子会呈现近大远小的效果)</p> </li>
<li> <p>语法:</p> <pre> perspective: 距离;
</pre> </li>
<li> <p>注意:</p>
<ul>
<li> <p>景深是给父盒子设置景深,子元素会在3D空间呈现效果,实现近大远小的效果</p> </li>
<li> <p>景深越大,3D效果越小,景深越小,3D效果越明显</p> </li>
<li> <p>景深配合3D转换一起使用</p> </li>
</ul></li>
</ul>
<h2>3D基础属性</h2>
<h3>3D转换</h3>
<h4>位移</h4>
<ul>
<li> <p>让盒子进行移动</p> </li>
<li> <p>语法:</p> <pre> 沿着x轴进行移动
transform: translateX(x轴移动量);
沿着y轴进行移动
transform: translateX(y轴移动量);
沿着z轴进行移动
transform: translateX(z轴移动量);
同时设置三条轴进行移动
transform: translate3d(x轴移动量, y轴移动量 ,z轴移动量);
</pre>
<ul>
<li> <p>注意:沿着z轴进行移动,会呈现近大远小的效果</p> </li>
</ul></li>
</ul>
<h4>缩放</h4>
<ul>
<li> <p>让盒子进行放大和缩小</p> </li>
<li> <p>语法:</p> <pre> 沿着x轴进行缩放,宽度的缩放
transfrom: scaleX(倍数);
沿着y轴进行缩放,高度的缩放
transfrom: scaleY(倍数);
沿着z轴进行缩放,厚度的缩放,看不到效果
transfrom: scaleZ(倍数);
</pre>
<ul>
<li> <p>注意:沿着z轴进行缩放,缩放的是盒子的厚度,一般看不到效果,标签本身没有厚度</p> </li>
</ul></li>
</ul>
<h4>旋转</h4>
<ul>
<li> <p>让盒子进行旋转</p> </li>
<li> <p>先确定旋转轴的方向,再设置旋转角度</p> </li>
<li> <p>语法:</p> <pre>沿着x轴的方向进行旋转
transform: rotateX(角度);
沿着y轴的方向进行旋转
transform: rotateY(角度);
沿着z轴的方向进行旋转
transform: rotateZ(角度);
自定义旋转轴进行旋转
transform:rotate3d(x,y,z,角度);
</pre>
<ul>
<li> <p>x,y,z确定了三维坐标系中的一个点</p> </li>
<li> <p>旋转轴:是由坐标圆点(0,0,0)到指定的点的连线的方向就是旋转轴的方向</p> </li>
</ul></li>
<li> <p>注意:无论旋转轴在哪个方向,旋转轴都会过转换基点</p> </li>
</ul>
<h2>灭点</h2>
<h3>perspective-origin</h3>
<ul>
<li> <p>设置视线的灭点,设置3D盒子的观察的位置,默认舞台的中心点,默认正对着舞台</p> </li>
<li> <p>作用:以不同的角度观察盒子的变换</p> </li>
<li> <p>语法:</p> <pre>perspective-origin:x轴 y轴;xxxxxxxxxx perspective-origin:x轴 y轴; perspective-origin:x轴 y轴;css
</pre>
<ul>
<li> <p>默认值为center center,默认观察者正对着舞台的中心点观察盒子的变换</p> </li>
<li> <p>单词:top bottom left right center 两两搭配使用</p> </li>
<li> <p>像素:0px 0px相当于左上角</p> </li>
<li> <p>百分比:50% 50%相当于center center</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>这个属性是设置在设置景深的盒子上</p> </li>
<li> <p>如果视线灭点在舞台的中心点,并且盒子也在舞台的正中心,盒子显示的效果是对称的</p> </li>
<li> <p>一个舞台只有一个视线灭点</p> </li>
</ul></li>
</ul>
<h3>transform-style</h3>
<ul>
<li> <p>定义里面嵌套元素是如何在3D空间中显示的,设置子元素如何在父元素中显示</p> </li>
<li> <p>语法:</p> <pre> transform-style: flat | preserve-3d;
</pre>
<ul>
<li> <p><code>flat</code>:默认值,代表所有子元素在2D平面上显示</p> </li>
<li> <p><code>preserve-3d</code>:代表所有子元素在3D空间中显示</p> </li>
</ul></li>
<li> <p>注意:</p>
<ul>
<li> <p>需要结合景深的效果一起使用</p> </li>
</ul></li>
</ul>
<h2>Animation动画</h2>
<h3>完成自动播放的动画</h3>
<ul>
<li> <p>使用flash技术可以完成动画的设计</p> </li>
<li> <p>编写JavaScript的脚本完成动画</p> </li>
<li> <p>借助某些动画标签,比如marquee</p> </li>
<li> <p>h5提供了canvas技术(绘图技术),完成动画的设计</p> </li>
<li> <p>css3提供了Animation动画可以完成自动持续播放</p> </li>
</ul>
<h3>动画</h3>
<ul>
<li> <p>概念:快速切换连续图片而达到流畅的画面,即动画</p> </li>
<li> <p>帧数:每秒切换图片的数量,数量越多,画面越流畅,60hz即每秒60帧,</p> </li>
<li> <p>关键帧:就是指每个关键的动作</p> </li>
</ul>
<p class="img-center"></p>
<h3>关键帧</h3>
<ul>
<li> <p>概念:是指盒子状态要发生改变的帧,就是将需要播放的动画拆分为多个步骤,每个步骤就是一个关键帧,将多个步骤连接起来,形成完整的动画</p> </li>
<li> <p>例子:盒子右移500px 关键帧有2个,开始状态和结束状态</p> </li>
<li> <p>例子:盒子变圆后,右移500px, 关键帧有3个,开始状态——变圆——右移500px结束状态</p> </li>
<li> <p>css动画中,关键帧需要定义</p> </li>
</ul>
<h3>Animation动画基本使用</h3>
<ul>
<li> <p>通过Animation的相关属性调用关键帧,实现动画的自动播放</p> </li>
<li> <p>步骤:</p>
<ul>
<li> <p>利用<code>@keyframes</code>属性来定义动画的所有关键帧,给动画取名</p> </li>
<li> <p>给需要设置动画的盒子添加<code>animation</code>相关属性调用动画的关键帧</p> </li>
</ul></li>
</ul>
<h4>定义关键帧</h4>
<ul>
<li> <p>利用<code>@keyframes</code>属性来定义动画的所有的关键帧</p> </li>
<li> <p>注意:这个关键帧属于css的代码,不需要写在任何选择器中</p> </li>
<li> <p>语法:</p> <pre> 先定义关键帧
@keyframes 动画名称{
from{
开始状态
}
to{
结束 状态
}
}
还可以使用百分比来定义关键帧
@keyframes 动画名称{
0%{
}
10%{
}
20%{
}
100%{
}
}
再在选择器中调用的关键帧
div{
animation-name: 动画名称;
animation-duration: 动画的执行时长;
}
</pre>
<ul>
<li> <p>关键帧在定义过程中,from相当于0%,to相当于100%</p> </li>
<li> <p>使用百分比定义关键帧时,每一帧的执行时长和两帧之间的百分比有关系,跨度越大,分配的时间越多</p> </li>
<li> <p>公式: 分配时间 = 总时间 * 两帧之间的百分比之差</p> </li>
</ul></li>
</ul>
<h3>动画属性</h3>
<h3>动画属性</h3>
<ul>
<li> <p>css3提供了很多css属性来控制动画的播放速率、次数等等</p> </li>
<li> <p>属性:</p>
<ul>
<li> <p><code>animation-name</code>:设置动画的名称,需要配合动画的执行时长一起使用</p> </li>
<li> <p><code>animation-duration</code>:设置动画的执行时长,默认为0s</p> </li>
<li> <p><code>animation-delay</code>:设置动画的延迟时长,默认为0s</p> </li>
<li> <p><code>animation-timing-function</code>:设置动画的执行速率,原理是贝塞尔曲线</p>
<ul>
<li> <p><code>ease</code>:默认值,以低速开始,然后变快,在结束前变慢</p> </li>
<li> <p><code>linear</code>:匀速</p> </li>
<li> <p><code>ease-in</code>:是以低速开始</p> </li>
<li> <p><code>ease-out</code>:以低速结束</p> </li>
<li> <p><code>ease-in-out</code>:以低速开始和结束</p> </li>
<li> <p><code>cubic-bezier(x1,y1,x2,y2)</code>:贝塞尔曲线</p> </li>
</ul></li>
<li> <p><code>animation-iteration-count</code>:设置动画的播放次数</p>
<ul>
<li> <p><code>n</code>:代表数字,动画执行几次,就写几,默认是1</p> </li>
<li> <p><code>infinite</code>:无限次</p> </li>
</ul></li>
<li> <p><code>animation-direction</code>:设置动画的播放方向</p>
<ul>
<li> <p><code>normal</code>:默认值,正常播放,正向播放动画</p> </li>
<li> <p><code>reverse</code>:反向播放动画</p> </li>
<li> <p><code>alternate</code>:奇数次正向播放动画,偶数次方向播放动画</p> </li>
<li> <p><code>alternate-reverse</code>:奇数次反向播放动画,偶数次正向播放动画</p> </li>
</ul></li>
<li> <p><code>animation-fill-mode</code>:将第一帧或者最后一帧作用在元素上,</p>
<ul>
<li> <p><code>backwards</code>:将第一帧作用在元素上,保持开始状态</p> </li>
<li> <p><code>forwards</code>:将最后一帧作用在元素上,保持结束状态</p> </li>
<li> <p><code>both</code>:同时将第一帧和最后一帧作用在元素上,保持开始和结束状态</p> </li>
</ul></li>
<li> <p><code>animation-play-state</code>:设置动画的播放状态</p>
<ul>
<li> <p><code>running</code>:默认值,播放</p> </li>
<li> <p><code>pause</code>:暂停</p> </li>
</ul></li>
<li> <p><code>animation</code>:复合属性</p> <pre> animation:动画名称 执行时长 执行速率 延迟时长 执行次数 执行方向 是否保持开始或者结束状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
</pre>
<ul>
<li> <p>至少设置动画的名称和执行时长,动画才能正常执行</p> </li>
</ul></li>
</ul></li>
</ul>
<h2>布局分类</h2>
<h3>常见的布局方式</h3>
<h4>固定布局</h4>
<ul>
<li> <p>原理:主要内容区域是采用固定的像素进行布局(固定尺寸比如960px~1200px等等),再水平居中</p> </li>
<li> <p>一般用于pc端,一般采用中间内容固定,两边自适应</p> </li>
<li> <p>好处:</p>
<ul>
<li> <p>布局简单:大盒子设置固定宽度,在设置<code>margin:0 auto;</code></p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>无适应性(对移动端不友好)</p> </li>
<li> <p>会产生滚动条</p> </li>
</ul></li>
</ul>
<h4>流式布局</h4>
<ul>
<li> <p>原理:为了适应不同的屏幕,主要内容区域采用百分比进行布局,采用百分比替代固定像素,不同的屏幕的有一定适应性,无论宽度如何改变,页面的布局不会发生改变</p> </li>
<li> <p>好处:</p>
<ul>
<li> <p>对不同的屏幕有一定的适应性</p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>当屏幕足够小时,导致内容无法查看</p> </li>
</ul></li>
</ul>
<h4>响应式布局</h4>
<ul>
<li> <p>原理:利用媒体查询技术,实现当使用不同的屏幕时采用不同的css代码,即一套HTML代码多套css样式代码,达到不同的屏幕有不同的用户体验</p> </li>
<li> <p>好处:</p>
<ul>
<li> <p>有很好用户体验(对移动端友好)</p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>大量的css代码,开发难道比较大,维护性下降n</p> </li>
</ul></li>
</ul>
<h4>移动端布局</h4>
<ul>
<li> <p>专门针对移动端单独开发一套HTML和css代码,移动端代码和pc端的代码完全独立开</p> </li>
<li> <p>好处:</p>
<ul>
<li> <p>移动端有极好的用户体验</p> </li>
</ul></li>
<li> <p>缺点:</p>
<ul>
<li> <p>pc端和移动端的代码是独立,代码量比较大</p> </li>
</ul></li>
</ul>
<h2>媒体查询</h2>
<h3>响应式布局</h3>
<ul>
<li> <p>概念:是指利用媒体查询技术,实现不同 的屏幕采用不同的css代码,实现不同的屏幕都有良好用户体验。核心在于媒体查询。</p> </li>
</ul>
<h4>媒体查询</h4>
<ul>
<li> <p>媒体:在网页中是指各种设备,比如:电脑、手机、电视等等</p> </li>
<li> <p>查询:检测当前的屏幕属于哪种设备,以及属于哪种类型,根据这些信息来使用对应的css代码,实现不同的屏幕有不同页面效果。</p> </li>
</ul>
<h4>基本使用</h4>
<ul>
<li> <p>在引入css样式文件时规定样式的作用的范围</p> <pre> only 代表仅仅 print代表打印机 screen代表彩色屏幕
<link rel="stylesheet" href="css文件文件路径" media="only print">
</pre> </li>
<li> <p>在css样式中规定样式的作用范围</p> <pre> @media 媒体类型{
选择器{
css代码
}
}
</pre> </li>
</ul>
<h4>媒体类型</h4>
<ul>
<li> <p>可以将不同的设备进行分类,通过针对不同的设备写不同的css代码</p> </li>
</ul>
<table>
<thead>
<tr>
<th>值</th>
<th>设备类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>All</td>
<td>所有设备</td>
</tr>
<tr>
<td>Print</td>
<td>打印设备</td>
</tr>
<tr>
<td>Screen</td>
<td>电脑显示器,彩色屏幕</td>
</tr>
<tr>
<td>Braille</td>
<td>盲人用点字法触觉回馈设备</td>
</tr>
<tr>
<td>Embossed</td>
<td>盲文打印机</td>
</tr>
<tr>
<td>Handhelp</td>
<td>便携设备</td>
</tr>
<tr>
<td>Projection</td>
<td>投影设备</td>
</tr>
<tr>
<td>Speech</td>
<td>语音或者音频合成器</td>
</tr>
<tr>
<td>Tv</td>
<td>电视类型设备</td>
</tr>
<tr>
<td>Try</td>
<td>电传打印机或者终端</td>
</tr>
</tbody>
</table>
<h4>媒体特性</h4>
<ul>
<li> <p>概念:媒体设备的特性,用来描述设备的特点,包含设备的宽度、高度、最大最小宽度、最大最小高度、或者横屏竖屏等</p> </li>
<li> <p>可以通过媒体的特性来区分pc端还是移动</p> </li>
</ul>
<table>
<thead>
<tr>
<th><strong>值</strong></th>
<th><strong>描述</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>网页显示区域完全等于设备的宽度</td>
<td></td>
</tr>
<tr>
<td>height</td>
<td>网页显示区域完全等于设备的高度</td>
<td></td>
</tr>
<tr>
<td>max-width</td>
<td>网页显示区域小于等于设备宽度</td>
<td></td>
</tr>
<tr>
<td>max-height</td>
<td>网页显示区域小于等于设备高度</td>
<td></td>
</tr>
<tr>
<td>min-width</td>
<td>网页显示区域大于等于设备的宽度</td>
<td></td>
</tr>
<tr>
<td>min-height</td>
<td>网页显示区域大于等于设备的高度</td>
<td></td>
</tr>
<tr>
<td>orientation</td>
<td>portrait (竖屏模式) \</td>
<td>landscape (横屏模式)</td>
</tr>
</tbody>
</table>
<h4>媒体查询关键字</h4>
<ul>
<li> <p>用于连接媒体特点的连接词,可以将多个媒体特性连接在一起</p> </li>
<li> <p>关键字:</p>
<ul>
<li> <p><code>and</code>:代表并且的意思,既要满足前面的条件,又有后面的条件,同时满足才能作用css的样式</p> <pre> /* 375px~750px */
@media screen and (min-width:375px) and (max-width:750px) {
.box{
background-color: pink;
}
}
</pre> </li>
<li> <p><code>,</code>:代表或者的意思,满足其中一个条件即可</p> <pre> /* 375以下或者750以上的屏幕 */
@media screen and (max-width:375px),screen and (min-width:750px){
.box{
background-color: tomato;
}
}
</pre>
<ul>
<li> <p>注意:逗号前后媒体类型是单独的</p> </li>
</ul></li>
<li> <p><code>not</code>:代表否定、不是、非的意思</p> <pre> /* 除了320px之外 */
@media not screen and (width: 320px) {
.box{
background-color: tomato;
}
}
</pre>
<ul>
<li> <p>注意:not否定的是媒体的特性</p> </li>
</ul></li>
<li> <p><code>only</code>:代表仅仅的意思,强调</p> <pre> @media only screen and (width: 320px) {}
</pre>
<ul>
<li> <p>代表唯一,目前新版本的浏览器没有区别,在老版本中,用来排除一些不兼容的版本。</p> </li>
</ul></li>
</ul></li>
</ul>
<p></p>
<h2>Bootstrap</h2>
<h3>基本概念</h3>
<ul>
<li> <p>Bootstrap就是可以快速构建响应式网站的一款前端框架</p> </li>
<li> <p>框架:指的是其他的开发人员或公司为了简化某一领域的开发流程,而设计出来的有序代码。简称第三方开发工具。</p> </li>
<li> <p>Bootstrap内置了很多组件,只需要添加class名就可以使用样式</p> </li>
<li> <p>Bootstrap内置很多js插件,比如轮播图</p> </li>
<li> <p>Bootstrap3和Bootstrap4的区别:</p> <p>| BootStrap 3 | BootStrap 4 | | ———————————— | ———————————————————————— | | less语言编写 | sass语言编写 | | 4种栅格类 | 5种栅格类 | | 使用px为单位 | 使用rem和em为单位(除部分margin和padding使用px) | | 使用push和pull向左右移动 | 偏移列通过offset-类设置 | | 使用float的布局方式 | 选择弹性盒模型(flexbox) |</p>
<ul>
<li> <p>Bootstrap3的4种栅格:</p>
<ol>
<li> <p>特小(col-xs-) 适配手机(<768px)</p> </li>
<li> <p>小(col-sm-) 适配平板(≥768px)</p> </li>
<li> <p>中(col-md-) 适配电脑(≥992px)</p> </li>
<li> <p>大(col-lg-) 适配宽屏电脑(≥1200px)</p> </li>
</ol></li>
<li> <p>Bootstrap4的5种栅格:</p>
<ol>
<li> <p>特小(col-)(<576px)</p> </li>
<li> <p>小(col-sm-)(≥576px)</p> </li>
<li> <p>中(col-md-)(≥768px)</p> </li>
<li> <p>大(col-lg-) (≥992px)</p> </li>
<li> <p>特大(col-xl-)(≥1200px)</p> </li>
</ol></li>
<li> <p>Bootstrap4特点</p>
<ol>
<li> <p>新增网格层适配了移动端;</p> </li>
<li> <p>全面引入ES6新特性(重写所有JavaScript插件);</p> </li>
<li> <p>css文件减少了至少40%;</p> </li>
<li> <p>所有文档都用Markdown编辑器重写;</p> </li>
<li> <p>放弃对IE8的支持</p> </li>
</ol></li>
</ul></li>
<li> <p>Bootstrap的官网:Bootstrap中文网</p> </li>
</ul>
<h3>基本使用</h3>
<ul>
<li> <p>步骤:</p>
<ul>
<li> <p>下载Bootstrap的生成文件夹</p> </li>
<li> <p>在页面中引入Bootstrap.css或者Bootstrap.min.css</p> </li>
<li> <p>先引入jQuery的js文件</p> </li>
<li> <p>再引入Bootstrap.bundle.js或者Bootstrap.bundle.min.js</p> </li>
</ul></li>
<li> <p>语法:</p> <pre> <!-- 使用本地的Bootstrap文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 先引入jQuery的js文件 -->
<script src="js/JQuery2.1.4.js"></script>
<!-- 引入Bootstrap的js文件 -->
<script src="js/bootstrap.bundle.min.js"></script>
</pre> </li>
<li> <p>注意:必须先引入jQuery的js文件,再引入Bootstrap的js文件</p> </li>
</ul>
<h2>js插件-拓展:hightchars图表</h2>
<h3>图表 框架</h3>
<h4>highcharts</h4>
<ul>
<li> <p>实例丰富</p> </li>
<li> <p>文档是英文</p> </li>
<li> <p>稳定性比Echarts好</p> </li>
<li> <p>Highcharts 演示 | Highcharts</p> </li>
</ul>
<h4>Echarts</h4>
<ul>
<li> <p>百度地图团队开发</p> </li>
<li> <p>能够结合百度地图一起使用</p> </li>
<li> <p>内部使用vue语法来写数据部分代码</p> </li>
</ul>
<h2>页面布局</h2>
<h3>HTML</h3>
<pre><body>
<!-- 头部 -->
<header>
<!-- 顶部登录注册按钮 -->
<div class="header-top">
<div class="center-container">
<a href="#">下载 APP</a>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="header-nav">
<div class="center-container">
<!-- logo -->
</div>
</div>
<!-- 轮播图 -->
<div class="header-banner">
<div class="center-container">
</div>
</div>
</header>
<!-- 主体内容 -->
<main>
<div class="center-container">
<!-- 下拉列表 -->
<div></div>
<!-- 电影相关信息 -->
<div>
<!-- 电影列表 -->
<div class="movies-list">
<!-- 正在热映 -->
<div>
<!-- 标题 -->
<div></div>
<!-- 正在热映的电影列表 -->
<div class="moviesList" id="hotMoviesList">
<!-- 每一个电影项 -->
<!-- <div class="movie-item">
<img src="./images/img-10.jpg" alt="">
<div class="movie-name">
<span>怒火重案</span>
<span>9.0</span>
</div>
</div> -->
</div>
</div>
<!-- 即将上映 -->
<div>
<div></div>
<div class="moviesList" id="comingMoviesList"></div>
</div>
</div>
<!-- 电影活动 -->
<div></div>
</div>
</div>
</main>
<!-- 底部 -->
<footer>
<div class="center-container">
1212124124124
</div>
</footer>
<script src="./utils/jquery-3.6.0.min.js"></script>
<script src="./utils/utils.js"></script>
<script src="./js/getData.js"></script>
<script src="./js/home.js"></script>
</body>
</pre>
<h3>CSS</h3>
<pre>* {
padding: 0;
margin: 0;
}
.header-top {
height: 40px;
background-color: #f0f0f0;
}
.center-container {
width: 1200px;
margin: 0 auto;
/* outline: 1px solid red; */
}
.header-top .center-container {
display: flex;
justify-content: space-between;
line-height: 40px;
/* align-items: center; */
}
.header-banner {
height: 360px;
background-image: url('../images/banner02.png');
background-position: center;
}
.movies-list {
width: 730px;
}
.moviesList {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.movie-item {
width: 160px;
border: 1px solid #ddd;
margin: 20px 0;
}
.movie-item > img {
width: 160px;
height: 220px;
}
.movie-item > .movie-name {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 10px;
}
footer {
height: 290px;
background-color: #262426;
}
</pre>
<p></p>
<p></p>
<p></p>
<h2>解决margin塌陷问题</h2>
<h3>一:什么是margin塌陷 ?</h3>
<p>在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin值,这就是margin的塌陷现象。</p>
<h3>二:margin塌陷分类 ?</h3>
<p>(1)兄弟盒子之间的塌陷问题。 (2)父子盒子之间的塌陷问题。</p>
<h3>解决方案:</h3>
<p>(1)给父元素father添加一个border边框,比如给box1添加样式:border:1px solid transparent这种方式造成贴合的样子;</p>
<p>(2)给父元素添加一个overflow: hidden; (3)给父元素添加一个position: fixed; (4)给父元素添加一个display: table; (5)将子元素都margin改为父元素的padding (6)给子元素son添加一个兄弟元素属性为content:“”;overflow: hidden;</p>
<p></p>
<h2>思考:边框上有文字的方法。</h2>
<p></p>
<pre> <fieldset>
<legend>账号</legend>
</fieldset>
</pre>
<p>调整legend的margin实现</p>
<h2>关联点击</h2>
<h3>描述:当点击.close时,相当于点击了.cancel</h3>
<p>案例代码如下:</p>
<pre><div class="close" οnclick="cancelBtn.click()">
<img src="./static/images/home/popclose.png" alt="">
</div>
<button class="cancel" id="cancelBtn">取消</button>
</pre>
<h2>单行、多行文本溢出显示省略号(…)</h2>
<h4>一、单行超出显示省略号</h4>
<p>描述:如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行; 详细步骤:</p>
<p>第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略) 第二步(溢出隐藏)overflow:hidden; 第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)</p>
<h4>二、多行超出显示省略号</h4>
<p>a.对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;</p>
<p>溢出隐藏:overflow: hidden; 省略号:text-overflow: ellipsis; display: -webkit-box; 弹性盒模型: 设置弹性盒子的子元素的排列方式 :-webkit-box-orient: vertical; 设置显示文本的行数:-webkit-line-clamp: 3; (最多显示3行)</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1741299961871482880"></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">
<!-- 文章页-右侧1 动态广告位 -->
<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>
<!-- 文章页-右侧2 动态广告位 -->
<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>
<!-- 文章页-右侧3 动态广告位 -->
<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">你可能感兴趣的:(photoshop,css,html)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1891609474108551168.htm"
title="JVM调优6大步骤" target="_blank">JVM调优6大步骤</a>
<span class="text-muted">炭烤肥杨</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
<div>对JVM内存的系统级的调优主要的目的是减少GC的频率和FullGC的次数。参考博客:https://www.cnblogs.com/Darrenblog/p/10712125.html1.FullGC会对整个堆进行整理,包括Young、Tenured和Perm。FullGC因为需要对整个堆进行回收,所以比较慢,因此应该尽可能减少FullGC的次数。2.导致FullGC的原因1)年老代(Tenure</div>
</li>
<li><a href="/article/1891570599508111360.htm"
title="爬虫实践——selenium、bs4" target="_blank">爬虫实践——selenium、bs4</a>
<span class="text-muted">lucky_chaichai</span>
<a class="tag" taget="_blank" href="/search/Python%E7%88%AC%E8%99%AB/1.htm">Python爬虫</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/requests/1.htm">requests</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>目录一、浏览器的一般设置二、打开网页并获取网页源码的方式1、基于requests库2、基于urlib库3、基于selenium三、HTML解析1、BeautifulSoup2、Selenium动态渲染爬虫:模拟动态操作网页,加载JS(webdriver)3、scrapy框架四、反爬虫操作五、一些常见的异常处理六、url接口调用问题——get、post操作1、get请求2、post请求fromsel</div>
</li>
<li><a href="/article/1891567819875741696.htm"
title="Java8适配的markdown转换html工具(FlexMark)" target="_blank">Java8适配的markdown转换html工具(FlexMark)</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/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>坐标地址:com.vladsch.flexmarkflexmark-all0.60.0工具类代码:importcom.vladsch.flexmark.ext.tables.TablesExtension;importcom.vladsch.flexmark.ext.toc.TocExtension;importcom.vladsch.flexmark.html.HtmlRenderer;impo</div>
</li>
<li><a href="/article/1891562771598864384.htm"
title="uni-app下表格纯CSS方案的固定首行首列,最简单的实现方式" target="_blank">uni-app下表格纯CSS方案的固定首行首列,最简单的实现方式</a>
<span class="text-muted">taihom</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>网上找了很多在uni-app下的表格组件,实现起来都太复杂了,我只是想要一个表格单纯的可以实现首行首列可以固定,没办法看了资料后,只能自己写。下面是一个最简单的实现方式。可以自己进行后续封装来使用,自己亲自编写实测没问题,纯CSS方案。时间AABBCCDDEE10:17:25{{index}}1020.5616.table-container{width:100%;height:100%;posi</div>
</li>
<li><a href="/article/1891559237344096256.htm"
title="leaflet手绘地图实现原理-可视化工具设计手绘地图" target="_blank">leaflet手绘地图实现原理-可视化工具设计手绘地图</a>
<span class="text-muted">diygwcom</span>
<a class="tag" taget="_blank" href="/search/leaflet/1.htm">leaflet</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E7%BB%98%E5%9C%B0%E5%9B%BE/1.htm">手绘地图</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9C%B0%E5%9B%BE%E7%93%A6%E7%89%87/1.htm">自定义地图瓦片</a>
<div>在Leaflet中实现手绘地图并添加自定义标注是一个有趣且实用的功能。Leaflet是一个开源的JavaScript库,用于在网页上创建交互式地图。下面是一个基本的实现步骤,包括如何加载手绘地图和添加自定义标注。步骤1:设置HTML页面首先,创建一个基本的HTML页面,并引入Leaflet库。Leaflet手绘地图与自定义标注#map{height:100vh;}//JavaScript代码将在这</div>
</li>
<li><a href="/article/1891558103619530752.htm"
title="表格首列,首行固定,并且能随意滚动" target="_blank">表格首列,首行固定,并且能随意滚动</a>
<span class="text-muted">一麻袋小猫</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>css3新增了粘性定位,利用粘性定位即可做到,但要注意的是:如果想要粘性定位相对于父元素定位,需要给其增加relative定位。逻辑是:滚动盒子滚动的是页面,滚动盒子内部放一个大盒子(1),此盒子宽度为内容的总宽度,在盒子内部给想要固定的盒子增加粘性定位,让其top值||left值为0,这里的0是相对于盒子1的。</div>
</li>
<li><a href="/article/1891553816529137664.htm"
title="使用v-html时 防止xss注入攻击" target="_blank">使用v-html时 防止xss注入攻击</a>
<span class="text-muted">i'm wxm</span>
<a class="tag" taget="_blank" href="/search/xss/1.htm">xss</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><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>方法一使用vue-dompurify-html插件安装npminstallvue-dompurify-html在mian.js中配置import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)//防止v-html进行xss注入importVueDOMPurifyHTMLfrom'vue-dompurify-htm</div>
</li>
<li><a href="/article/1891534121109352448.htm"
title="vba对应CAD版本下载网址" target="_blank">vba对应CAD版本下载网址</a>
<span class="text-muted">山水CAD筑梦人</span>
<a class="tag" taget="_blank" href="/search/CAD/1.htm">CAD</a><a class="tag" taget="_blank" href="/search/VBA/1.htm">VBA</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>下载对应vba版本网址如下:DownloadtheMicrosoftVBAModuleforAutoCADhttps://www.autodesk.com/support/technical/article/caas/tsarticles/ts/3kxk0RyvfWTfSfAIrcmsLQ.html以下是DwgVersion枚举值与AutoCAD版本的对应关系:枚举值数值对应的AutoCAD版本A</div>
</li>
<li><a href="/article/1891532098813095936.htm"
title="【html】简单网页模板源码" target="_blank">【html】简单网页模板源码</a>
<span class="text-muted">天若有情673</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E3%80%90html5%2Bcss%E3%80%91%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86/1.htm">【html5+css】前端知识</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用,大家也可以利用自己的想法去做空间的美化和完善。源码:html:DocumentXXX官网导航项导航项</div>
</li>
<li><a href="/article/1891527924696281088.htm"
title="html 输入框标签讲解,input标签详解" target="_blank">html 输入框标签讲解,input标签详解</a>
<span class="text-muted">金鉴LED实验室</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%BE%93%E5%85%A5%E6%A1%86%E6%A0%87%E7%AD%BE%E8%AE%B2%E8%A7%A3/1.htm">输入框标签讲解</a>
<div>一,标签定义及使用说明1.标签规定了用户可以在其中输入数据的输入字段。2.元素在元素中使用,用来声明允许用户输入数据的input控件。输入字段可通过多种方式改变,取决于type属性。二,HTML与XHTML的区别1.在HTML中,标签没有结束标签。2.在XHTML中,标签必须被正确地关闭。三,注示1.注意:元素是空的,它只包含标签属性。2.提示:你可以使用元素来定义元素的标注。四,属性1.type</div>
</li>
<li><a href="/article/1891525137598050304.htm"
title="h5 uniapp html2canvas生成海报,保存到本地功能实现;" target="_blank">h5 uniapp html2canvas生成海报,保存到本地功能实现;</a>
<span class="text-muted">js小白羊</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</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>html2canvas生成海报,保存到本地功能实现1.在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数2.组件的使用,伪代码不要直接复制uniapp语法3.h5保存生成后的图片到本地方法;1.在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数在组件中,通过prop接收ID的,ID的变化来触发render.js里面的函数。html2can</div>
</li>
<li><a href="/article/1891510884811993088.htm"
title="html+css网页设计,我的网站" target="_blank">html+css网页设计,我的网站</a>
<span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/html%2Fcss%E7%AC%94%E8%AE%B0/1.htm">html/css笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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>
<div>一、技术简介HTML:超文本标记语言(HyperTextMarkupLanguage),用于创建网页的基本结构和内容。CSS:层叠样式表(CascadingStyleSheets),用于设置网页的样式和布局,包括字体、颜色、边距、对齐方式等。JavaScript:一种用于创建动态和交互式网页的脚本语言。通过JavaScript,可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基</div>
</li>
<li><a href="/article/1891505208865910784.htm"
title="html 字体图标不显示不出来了,h5页面字体图标显示不正常" target="_blank">html 字体图标不显示不出来了,h5页面字体图标显示不正常</a>
<span class="text-muted">微基因WeGene</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E4%B8%8D%E6%98%BE%E7%A4%BA%E4%B8%8D%E5%87%BA%E6%9D%A5%E4%BA%86/1.htm">字体图标不显示不出来了</a>
<div>问题描述开发的是微信公众号的纯静态H5页面,测试发现在iOS上面首次打开会出现字体图标无法显示的问题,并且切换到其它页面,字体图标也是一样无法显示:只能使用微信的右上角内的刷新选项,所有页面的图标就可正常显示,浏览其它页也正常:P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示,在android也是正常显示。相关代码HTML:CSS:@charset"UTF-8";@fo</div>
</li>
<li><a href="/article/1891504956758880256.htm"
title="html页面跳转先显示底部,H5页面在IOS微信中跳转时,会出现底部工具栏,遮挡页面底部内容..." target="_blank">html页面跳转先显示底部,H5页面在IOS微信中跳转时,会出现底部工具栏,遮挡页面底部内容...</a>
<span class="text-muted">一一MIO一一</span>
<a class="tag" taget="_blank" href="/search/html%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E5%85%88%E6%98%BE%E7%A4%BA%E5%BA%95%E9%83%A8/1.htm">html页面跳转先显示底部</a>
<div>问题描述:在IOS微信中打开H5页面,当浏览器内出现跳转产生url历史记录时,页面底部会出现一个带有前进和后退按钮的工具栏,会遮挡页面底部的内容。css分析缘由:页面跳转时,微信浏览器经过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,形成页面底部内容遮挡。但刷新一下该页面,就不会遮挡了。底部的工具栏是在页面完成渲染以后才渲染的。html解决方案:i</div>
</li>
<li><a href="/article/1891501924495192064.htm"
title="PHP语法入门完全指南(2024新版)" target="_blank">PHP语法入门完全指南(2024新版)</a>
<span class="text-muted">生信天地</span>
<a class="tag" taget="_blank" href="/search/php/1.htm">php</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.1快速启动方案本地环境:安装XAMPP(含Apache+PHP+MySQL)在线沙盒:使用PHPSandboxDocker方案(推荐):dockerrun-it-p80:80-v$(pwd):/var/www/htmlphp:8.2-apache1.2第一个PHP程序▶️运行方式:浏览器访问http://localhost/01_hello.php二、基础语法核心2.1变量与常</div>
</li>
<li><a href="/article/1891501925036257280.htm"
title="HTML、Vue和PHP文件的区别与联系" target="_blank">HTML、Vue和PHP文件的区别与联系</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
<div>一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容,无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式,支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容,支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML,服务器执行PHP代码后输出纯H</div>
</li>
<li><a href="/article/1891500029219237888.htm"
title="怎么把pyqt界面做的像web一样漂亮" target="_blank">怎么把pyqt界面做的像web一样漂亮</a>
<span class="text-muted">mosquito_lover1</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pyqt/1.htm">pyqt</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>要将PyQt界面做得像网页一样漂亮,可以从以下几个方面入手:1.使用样式表(QSS)PyQt支持类似CSS的样式表(QSS),通过QSS可以自定义控件的外观。fromPyQt5.QtWidgetsimportQApplication,QPushButton,QWidget,QVBoxLayoutapp=QApplication([])window=QWidget()layout=QVBoxLayo</div>
</li>
<li><a href="/article/1891495363429330944.htm"
title="Ajax基础学习" target="_blank">Ajax基础学习</a>
<span class="text-muted">喜欢代码的新之助</span>
<a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a>
<div>AJAX浏览器本身就具备网络通信的能力,但在早期浏览器并没有把这个能力开放给JS最早是微软在IE浏览器中把这一能力向JS开放,让JS可以在代码中实现发送请求,这项技术在2005年被正式命名为AJAX(AsynchronousJavascriptAndXML)这套API主要依靠一个构造函数完成;该构造函数的名称为XMLHttpRequest,简称为XHR由于XHRAPI有着诸多缺陷,在HTML5和E</div>
</li>
<li><a href="/article/1891479579151888384.htm"
title="PyTorch中文/英文官方文档&教程资源" target="_blank">PyTorch中文/英文官方文档&教程资源</a>
<span class="text-muted">三千の世界</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/DataAnalysis/1.htm">DataAnalysis</a><a class="tag" taget="_blank" href="/search/Computer/1.htm">Computer</a><a class="tag" taget="_blank" href="/search/Science/1.htm">Science</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a>
<div>PyTorch中文文档https://pytorch-cn.readthedocs.io/zh/latest/PyTorch英文文档https://pytorch.org/docs/stable/index.htmlPyTorch官方教程-PyTorch教程1.1.0文档https://pytorch.org/tutorials/</div>
</li>
<li><a href="/article/1891477053845336064.htm"
title="CSS 调试工具详解" target="_blank">CSS 调试工具详解</a>
<span class="text-muted">人才程序员</span>
<a class="tag" taget="_blank" href="/search/%E6%9D%82%E8%B0%88/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><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/firefox/1.htm">firefox</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>文章目录CSS调试工具详解️1.浏览器开发者工具(DevTools)定义主要功能:示例:使用DevTools调试CSS亮点:2.使用CSSLint工具定义主要功能:使用方法:优点:3.PostCSS和CSS预处理器️定义主要功能:使用方法:优点:4.CSS预处理器调试工具定义4.1使用SASS的调试功能示例:4.2使用LESS的调试功能优点:5.使用CSSGrid和Flexbox的调试工具定义功能</div>
</li>
<li><a href="/article/1891475163682238464.htm"
title="Qt QGroupBox 组件总结" target="_blank">Qt QGroupBox 组件总结</a>
<span class="text-muted">enyp80</span>
<a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>QtQGroupBox组件总结1.概述作用:QGroupBox是一个容器部件,用于将界面中相关的控件分组,提供逻辑上的视觉分离,通常带有标题(title)和边框。继承关系:继承自QWidget,具备所有QWidget的功能,同时支持分组布局和可选的复选框功能。2.核心特性标题(Title):通过setTitle()设置分组框的标题,支持富文本(如HTML格式)。复选框(Checkable):可设置</div>
</li>
<li><a href="/article/1891469620464906240.htm"
title="【PYTORCH】官方的turoria实现中英文翻译" target="_blank">【PYTORCH】官方的turoria实现中英文翻译</a>
<span class="text-muted">liwulin0506</span>
<a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</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/python/1.htm">python</a>
<div>参考https://pytorch.org/tutorials/intermediate/seq2seq_translation_tutorial.html背景pytorch官方的是seq2seq是法语到英文,做了一个中文到英文的。数据集下载后解压,使用的data\testsets\devset\UNv1.0.devset.zh和UNv1.0.devset.en,因为电脑配置不行,所以只选取了10</div>
</li>
<li><a href="/article/1891466341374816256.htm"
title="什么是重绘?什么是回流?如何减少回流?" target="_blank">什么是重绘?什么是回流?如何减少回流?</a>
<span class="text-muted">Ashy-</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/1.htm">前端笔记</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>重绘是指当元素样式发生改变,但不影响其布局的情况下,浏览器重新绘制元素的过程。例如修改元素的背景色、字体颜色等回流是指元素布局属性发生改变,需要重新计算元素在页面中的布局位置时,浏览器重新进行布局的过程例如元素的宽度高度位置改变如何减少回流?适用css动画代替JavaScript动画css动画利用GPU加速,在性能方面通常比JavaScript动画更高效。使用css的transform和opaci</div>
</li>
<li><a href="/article/1891459941093404672.htm"
title="图片绘制到Canvas上并能缩放和平移" target="_blank">图片绘制到Canvas上并能缩放和平移</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/canvashtml/1.htm">canvashtml</a>
<div>有时候我们需要预览图片,对图片进行缩放平移等操作,这时候发现用img标签就不好用了。这时候就可以用我这个帖子的代码实现你要的效果。格式支持:只要能在canvas上渲染的图片都能做缩放平移。如果想缩放后还能把图片下载到本地,请自己调用canvas的api即可。特性:小于canvas大小,则默认不缩放。大于canvas则以最长边为单位来缩放。效果如下:将下方代码新建一个html,在浏览器打开就能看到效</div>
</li>
<li><a href="/article/1891455243334512640.htm"
title="七个合法学习黑客技术的平台,让你从萌新成为大佬" target="_blank">七个合法学习黑客技术的平台,让你从萌新成为大佬</a>
<span class="text-muted">黑客白帽子黑爷</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v</div>
</li>
<li><a href="/article/1891448934627340288.htm"
title="JavaScript 简介" target="_blank">JavaScript 简介</a>
<span class="text-muted">强强学习</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>JavaScript是互联网上最流行的脚本语言,这门语言可用于HTML和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是脚本语言JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由所有的现代浏览器执行。JavaScript很容易学习。</div>
</li>
<li><a href="/article/1891448808177463296.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是W3C与WHATWG合作的结果,WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表单和应用程序,而W3C专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。HTML5中的一些有趣的新特性:用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好</div>
</li>
<li><a href="/article/1891447924274032640.htm"
title="html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用" target="_blank">html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用</a>
<span class="text-muted">王大明白</span>
<a class="tag" taget="_blank" href="/search/html%E5%85%83%E7%B4%A0%E5%90%8E%E8%BF%BD%E5%8A%A0%E5%86%85%E5%AE%B9/1.htm">html元素后追加内容</a>
<div>一、在元素内部/外部追加元素append,prepend:添加到子元素before,after:作为兄弟元素添加html:在我的后面追加一条新闻Javascript:jQuery(function(){//在元素内部追加内容$("#content").append("姚明退役了...");})在#content里面添加元素,这是把姚明退役了...作为子元素添加到#content,如果想在元素外部追</div>
</li>
<li><a href="/article/1891447419208527872.htm"
title="html如何使多张图片滑动不卡顿,Web端大量图片同时加载卡顿问题的优化方案" target="_blank">html如何使多张图片滑动不卡顿,Web端大量图片同时加载卡顿问题的优化方案</a>
<span class="text-muted">kisserkook</span>
<div>案例由于业务的需要,需求方需要实现一个大量图片同时加载的需求。在实现这个需求的过程中,可能会遇到很多的坑,这里小编也总结了一些优化方案,我们可以一起来看看。具体场景在描述如何解决问题,我们现在先来申明,问题是什么?需求的主要内容是在某个页面显示1~1000张,200~500k大小的图。好消息是这些图片来源于本地硬盘而非网络。(否则这个问题就要变成优化网络....)踩坑历程由于不是纯前端的项目,笔者</div>
</li>
<li><a href="/article/1891447165713182720.htm"
title="canvas 添加html元素,给canvas添加内容" target="_blank">canvas 添加html元素,给canvas添加内容</a>
<span class="text-muted">云舞空城</span>
<a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a><a class="tag" taget="_blank" href="/search/%E6%B7%BB%E5%8A%A0html%E5%85%83%E7%B4%A0/1.htm">添加html元素</a>
<div>画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度:通过JavaScript来绘制canvas元素本身是没有canvas画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取上面的内容html5canvas清除</div>
</li>
<li><a href="/article/107.htm"
title="web报表工具FineReport常见的数据集报错错误代码和解释" target="_blank">web报表工具FineReport常见的数据集报错错误代码和解释</a>
<span class="text-muted">老A不折腾</span>
<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/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7/1.htm">可视化工具</a>
<div>在使用finereport制作报表,若预览发生错误,很多朋友便手忙脚乱不知所措了,其实没什么,只要看懂报错代码和含义,可以很快的排除错误,这里我就分享一下finereport的数据集报错错误代码和解释,如果有说的不准确的地方,也请各位小伙伴纠正一下。
NS-war-remote=错误代码\:1117 压缩部署不支持远程设计
NS_LayerReport_MultiDs=错误代码</div>
</li>
<li><a href="/article/234.htm"
title="Java的WeakReference与WeakHashMap" target="_blank">Java的WeakReference与WeakHashMap</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%B1%E5%BC%95%E7%94%A8/1.htm">弱引用</a>
<div>首先看看 WeakReference
wiki 上 Weak reference 的一个例子:
public class ReferenceTest {
public static void main(String[] args) throws InterruptedException {
WeakReference r = new Wea</div>
</li>
<li><a href="/article/361.htm"
title="Linux——(hostname)主机名与ip的映射" target="_blank">Linux——(hostname)主机名与ip的映射</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hostname/1.htm">hostname</a>
<div>一、 什么是主机名
无论在局域网还是INTERNET上,每台主机都有一个IP地址,是为了区分此台主机和彼台主机,也就是说IP地址就是主机的门牌号。但IP地址不方便记忆,所以又有了域名。域名只是在公网(INtERNET)中存在,每个域名都对应一个IP地址,但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的;
主机名是用于什么的呢?
答:在一个局域网中,每台机器都有一个主</div>
</li>
<li><a href="/article/488.htm"
title="oracle 常用技巧" target="_blank">oracle 常用技巧</a>
<span class="text-muted">18289753290</span>
<div>oracle常用技巧 ①复制表结构和数据 create table temp_clientloginUser as select distinct userid from tbusrtloginlog ②仅复制数据 如果表结构一样 insert into mytable select * &nb</div>
</li>
<li><a href="/article/615.htm"
title="使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException" target="_blank">使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException</a>
<span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a>
<div>有一个线上环境使用的是c3p0数据库,为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现
com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou</div>
</li>
<li><a href="/article/742.htm"
title="IT系统分析师如何学习大数据" target="_blank">IT系统分析师如何学习大数据</a>
<span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢?学习大数据的最佳方法就是先从了解信息系统是如何工作着手,尤其是数据库和基础设施。同样在开始前还需要了解大数据工具,如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系 统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能</div>
</li>
<li><a href="/article/869.htm"
title="spring学习——简介" target="_blank">spring学习——简介</a>
<span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div>Spring是一个开源框架,是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发,从简单性,可测试性和松耦合的角度而言,任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security
为了降低Java开发的复杂性,</div>
</li>
<li><a href="/article/996.htm"
title="自定义颜色的xml文件" target="_blank">自定义颜色的xml文件</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div><?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &</div>
</li>
<li><a href="/article/1123.htm"
title="运营到底是做什么的?" target="_blank">运营到底是做什么的?</a>
<span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E8%90%A5%E5%88%B0%E5%BA%95%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F/1.htm">运营到底是做什么的?</a>
<div>文章来源:夏叔叔(微信号:woshixiashushu),欢迎大家关注!很久没有动笔写点东西,近些日子,由于爱狗团产品上线,不断面试,经常会被问道一个问题。问:爱狗团的运营主要做什么?答:带着用户一起嗨。为什么是带着用户玩起来呢?究竟什么是运营?运营到底是做什么的?那么,我们先来回答一个更简单的问题——互联网公司对运营考核什么?以爱狗团为例,绝大部分的移动互联网公司,对运营部门的考核分为三块——用</div>
</li>
<li><a href="/article/1250.htm"
title="js面向对象类和对象" target="_blank">js面向对象类和对象</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1/1.htm">函数创建类和对象</a>
<div>接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言 但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下 ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似
下面介绍一些js的类和对象的创建的技术
一:类和对</div>
</li>
<li><a href="/article/1377.htm"
title="web.xml之资源管理对象配置 resource-env-ref" target="_blank">web.xml之资源管理对象配置 resource-env-ref</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>resource-env-ref元素来指定对管理对象的servlet引用的声明,该对象与servlet环境中的资源相关联
<resource-env-ref>
<resource-env-ref-name>资源名</resource-env-ref-name>
<resource-env-ref-type>查找资源时返回的资源类</div>
</li>
<li><a href="/article/1504.htm"
title="Create a composite component with a custom namespace" target="_blank">Create a composite component with a custom namespace</a>
<span class="text-muted">sunjing</span>
<div>https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace
When you developed a composite component the namespace you would be seeing would </div>
</li>
<li><a href="/article/1631.htm"
title="【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter" target="_blank">【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div> 一、复本集为什么要加入Arbiter这个角色 回答这个问题,要从复本集的存活条件和Aribter服务器的特性两方面来说。 什么是Artiber? An arbiter does
not have a copy of data set and
cannot become a primary. Replica sets may have arbiters to add a </div>
</li>
<li><a href="/article/1758.htm"
title="Javascript开发笔记" target="_blank">Javascript开发笔记</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>
获取iframe内的元素
通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素,这种写法在IE、safari、chrome下都是通过的,唯独在fireforx下不通过。其实jquery的contents方法提供了对if</div>
</li>
<li><a href="/article/1885.htm"
title="Web浏览器Chrome打开一段时间后,运行alert无效" target="_blank">Web浏览器Chrome打开一段时间后,运行alert无效</a>
<span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/chorme/1.htm">chorme</a><a class="tag" taget="_blank" href="/search/alert/1.htm">alert</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%95%88/1.htm">无效</a>
<div>今天在开发的时候,突然间发现alert在chrome浏览器就没法弹出了,很是怪异。
试了试其他浏览器,发现都是没有问题的。
开始想以为是chorme浏览器有啥机制导致的,就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。
这样开发的结果,如果客户在使用的时候没有提示,那会带来致命的体验。哎,没啥办法了 就关闭浏览器重启。
结果就好了,这也太怪异了。难道是cho</div>
</li>
<li><a href="/article/2012.htm"
title="编程之美-高效地安排会议 图着色问题 贪心算法" target="_blank">编程之美-高效地安排会议 图着色问题 贪心算法</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
<div>
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Random;
public class GraphColoringProblem {
/**编程之美 高效地安排会议 图着色问题 贪心算法
* 假设要用很多个教室对一组</div>
</li>
<li><a href="/article/2139.htm"
title="机器学习相关概念和开发工具" target="_blank">机器学习相关概念和开发工具</a>
<span class="text-muted">chenbowen00</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
<div>基本概念:
机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。
它是人工智能的核心,是使计算机具有智能的根本途径,其应用遍及人工智能的各个领域,它主要使用归纳、综合而不是演绎。
开发工具
M</div>
</li>
<li><a href="/article/2266.htm"
title="[宇宙经济学]关于在太空建立永久定居点的可能性" target="_blank">[宇宙经济学]关于在太空建立永久定居点的可能性</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a>
<div>
大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........
所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点</div>
</li>
<li><a href="/article/2393.htm"
title="oracle 11g database control 证书错误" target="_blank">oracle 11g database control 证书错误</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6%E9%94%99%E8%AF%AF/1.htm">证书错误</a><a class="tag" taget="_blank" href="/search/oracle+11G+%E5%AE%89%E8%A3%85/1.htm">oracle 11G 安装</a>
<div>oracle 11g database control 证书错误
win7 安装完oracle11后打开 Database control 后,会打开em管理页面,提示证书错误,点“继续浏览此网站”,还是会继续停留在证书错误页面
解决办法:
是 KB2661254 这个更新补丁引起的,它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告:</div>
</li>
<li><a href="/article/2520.htm"
title="Java I/O之用FilenameFilter实现根据文件扩展名删除文件" target="_blank">Java I/O之用FilenameFilter实现根据文件扩展名删除文件</a>
<span class="text-muted">游其是你</span>
<a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a>
<div>在Java中,你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。
在这个例子中,我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </div>
</li>
<li><a href="/article/2647.htm"
title="C语言数组的简单以及一维数组的简单排序算法示例,二维数组简单示例" target="_blank">C语言数组的简单以及一维数组的简单排序算法示例,二维数组简单示例</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a>
<div># include <stdio.h>
int main(void)
{
int a[5] = {1, 2, 3, 4, 5};
//a 是数组的名字 5是表示数组元素的个数,并且这五个元素分别用a[0], a[1]...a[4]
int i;
for (i=0; i<5; ++i)
printf("%d\n",</div>
</li>
<li><a href="/article/2774.htm"
title="PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引,普通的 UNIQUE 唯一索引" target="_blank">PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引,普通的 UNIQUE 唯一索引</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/primary/1.htm">primary</a>
<div>PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。 就是 唯一 且 不能为空。INDEX 索引,普通的UNIQUE 唯一索引。 不允许有重复。FULLTEXT 是全文索引,用于在一篇文章中,检索文本信息的。举个例子来说,比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段:会员编号 INT会员姓名 </div>
</li>
<li><a href="/article/2901.htm"
title="java集合辅助类 Collections、Arrays" target="_blank">java集合辅助类 Collections、Arrays</a>
<span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a><a class="tag" taget="_blank" href="/search/Arrays/1.htm">Arrays</a><a class="tag" taget="_blank" href="/search/HashCode/1.htm">HashCode</a>
<div>
Arrays、Collections
1 )数组集合之间转换
public static <T> List<T> asList(T... a) {
return new ArrayList<>(a);
}
a)Arrays.asL</div>
</li>
<li><a href="/article/3028.htm"
title="Spring Security(10)——退出登录logout" target="_blank">Spring Security(10)——退出登录logout</a>
<span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/logout/1.htm">logout</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95/1.htm">退出登录</a><a class="tag" taget="_blank" href="/search/logout-url/1.htm">logout-url</a><a class="tag" taget="_blank" href="/search/LogoutFilter/1.htm">LogoutFilter</a>
<div> 要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的,此时我们默认退出登录的URL为“/j_spring_secu</div>
</li>
<li><a href="/article/3155.htm"
title="透过源码学前端 之 Backbone 三 Model" target="_blank">透过源码学前端 之 Backbone 三 Model</a>
<span class="text-muted">逐行分析JS源代码</span>
<a class="tag" taget="_blank" href="/search/backbone/1.htm">backbone</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">源码分析</a><a class="tag" taget="_blank" href="/search/js%E5%AD%A6%E4%B9%A0/1.htm">js学习</a>
<div>Backbone 分析第三部分 Model
概述: Model 提供了数据存储,将数据以JSON的形式保存在 Model的 attributes里,
但重点功能在于其提供了一套功能强大,使用简单的存、取、删、改数据方法,并在不同的操作里加了相应的监听事件,
如每次修改添加里都会触发 change,这在据模型变动来修改视图时很常用,并且与collection建立了关联。 </div>
</li>
<li><a href="/article/3282.htm"
title="SpringMVC源码总结(七)mvc:annotation-driven中的HttpMessageConverter" target="_blank">SpringMVC源码总结(七)mvc:annotation-driven中的HttpMessageConverter</a>
<span class="text-muted">乒乓狂魔</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
<div>这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter,然后对一些HttpMessageConverter进行具体介绍。
HttpMessageConverter接口介绍:
public interface HttpMessageConverter<T> {
/**
* Indicate</div>
</li>
<li><a href="/article/3409.htm"
title="分布式基础知识和算法理论" target="_blank">分布式基础知识和算法理论</a>
<span class="text-muted">bluky999</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%87%B4%E6%80%A7%E5%93%88%E5%B8%8C/1.htm">一致性哈希</a><a class="tag" taget="_blank" href="/search/paxos/1.htm">paxos</a>
<div>
分布式基础知识和算法理论
BY NODEXY@2014.8.12
本文永久链接:http://nodex.iteye.com/blog/2103218
在大数据的背景下,不管是做存储,做搜索,做数据分析,或者做产品或服务本身,面向互联网和移动互联网用户,已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍,在完善自我知识体系的同</div>
</li>
<li><a href="/article/3536.htm"
title="Android Studio的.gitignore以及gitignore无效的解决" target="_blank">Android Studio的.gitignore以及gitignore无效的解决</a>
<span class="text-muted">bell0901</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/gitignore/1.htm">gitignore</a>
<div> github上.gitignore模板合集,里面有各种.gitignore : https://github.com/github/gitignore
自己用的Android Studio下项目的.gitignore文件,对github上的android.gitignore添加了
# OSX files //mac os下 .DS_Store </div>
</li>
<li><a href="/article/3663.htm"
title="成为高级程序员的10个步骤" target="_blank">成为高级程序员的10个步骤</a>
<span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
<div>What
软件工程师的职业生涯要历经以下几个阶段:初级、中级,最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。
Why
得到更多的报酬!因为你的薪水会随着你水平的提高而增加
提升你的职业生涯。成为了高级软件工程师之后,就可以朝着架构师、团队负责人、CTO 等职位前进
历经更大的挑战。随着你的成长,各种影响力也会提高。 </div>
</li>
<li><a href="/article/3790.htm"
title="mongdb在linux下的安装" target="_blank">mongdb在linux下的安装</a>
<span class="text-muted">xtuhcy</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>一、查询linux版本号:
lsb_release -a
LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa</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.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</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>