【江哥带你从“零”玩转Html5 + 跨平台开发】学习笔记

最近一段时间都没有写博客，一是因为有新的项目要做，而是最近在学习有关H5移动开发相关方面的内容，以下是看了“【江哥带你从“零”玩转Html5 + 跨平台开发】”总结的学习笔记，目前只是更新到了H5+CSS3，相关视频网站地址：http://bbs.520it.com/forum.php?mod=viewthread&tid=2418

HTML学习笔记

字符集：header标签中添加解决乱码，指定当前网页字符集。

注意：在html文件中指定的字符集和保存这个文件的字符集一直，否则还会楚翔乱码。

DTD文档声明。

每一个不同版本的规范都有不同的DTD文档声明。

注：DTD文档声明必须写在第一行。不区分大小写。不是一个标签。是一个指令。浏览器编译/解析/渲染网页时不会完全依赖DTD文档声明。

base标签：就是专门用来统一指定当前网页中的超链接需要如何打开。必须写在head标签。

列表：

无序列表

内容

是一个组合，一般整体出现，不会单独出现。

有序列表

内容

定义列表：1）网站尾部描述信息，例如京东尾部的购物指南，配送方式等。2）做图文混排

和

中添加其他标签。

webStorm快速编写

ul>li*3然后按tab键

ul>li*2>h2+ul>li*3

格式化：command+option+l

注释：command+/

表格标签：一个table标签就是一个表格

注：表格边框有边框属性，默认属性值为0的。

为表格的标题。写在

	标题单元格标签，文字默认加粗，居中。表格的存储数据：(完整结构) 1. 标题 caption 2. 表头 thead 3. 内容 tbody 4. 页尾 tfoot 注：如果指定了thead 和 tfoot，设置table高度不会受影响，有自身的默认高度。合并单元格：水平方向合并	把当前单元格当做两个单元格看待，需把多出的单元格删掉。只能向上或者向下合并。垂直方向合并：	，同理删除多余单元格。表单：收集用户信息格式： <表单元素> 常见表单元素：输入框，type属性（功能和外观），有很多类型。提交表单数据：添加action，提交的路径URL 提交内容添加name属性。隐藏域：配合提交按钮将一些数据偷偷的提交到服务器。（Ajax） datalist :输入框待选项，需要绑定输入框 select 标签，下拉列表。不能输入内容，直接选择。可以设置默认值。可以使用optgroup标签包裹进行分组。多行输入框：标签。</span></p> <p><span></span><br></p> <p><span></span><br></p> <p><span><strong><span style="font-size:18px;">css学习笔记</span></strong></span></p> <p>优点</p> <p><span>1.不用记忆哪些属性属于哪个标签。</span></p> <p><span>2.需求变更不需要修改大量的代码。</span></p> <p><span><br></span></p> <p><span></span></p> <div> <span>css，只能放在<style>标签中，<style>标签只能放在<head>标签中。</span> </div> <div> <span>type=“text/css”：代表文本的css样式。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>css：</span> </div> <div> <span>标签名称 {</span> </div> <div> <span><span></span>属性名称：属性值</span> </div> <div> <span>}</span> </div> <div> <span>选择器：标签名称</span> </div> <div> <span>属性</span> </div> <div> <span></span> <br> </div> <div> <span>设置字体：可以选择备选方案。中文字体能处理中文和英文，英文字体只能处理英文。</span> </div> <div> <span></span> <br> </div> <div> <span>font-family:”Times New Roman”,”微软雅黑”</span> </div> <div> <span>单独给英文设置字体，英文字体放在前面</span> </div> <div> <span></span> <br> </div> <div> <span>文字样式缩写：font：italic bold 10px “楷体”</span> </div> <div> <span>缩写格式中，style和weight不是必写项并可以交换位置。</span> </div> <div> <span>有的属性值必须写，并且必能随便乱放位置，size必写family前面，并且size和family必需协助最后。</span> </div> <div> <span></span> <br> </div> <div> <span>文本缩进的属性：text-indent:2em缩进2个文字。</span> </div> <div> <span></span> <br> </div> <div> <span>标签选择器：</span> </div> <div> <span>根据指定的标签名称，在当前页面找到所有标签并设置属性。 </span> </div> <div> <span></span> <br> </div> <div> <span>id选择器和类选择器，id名称唯一，不能重复。</span> </div> <div> <span>前面必写添加“#”。</span> </div> <div> <span>名称规范：数字，字母，下划线。不能以数字开头。</span> </div> <div> <span></span> <br> </div> <div> <span>类名选择器：可以重复，前面加“.”，给某个特定标签设置属性的。一个标签可以同时绑定多个类名（用空格分开）。</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器：找到指定标签的所有后代标签，设置属性。</span> </div> <div> <span></span> <br> </div> <div> <span>标签名称1 标签名称2 {</span> </div> <div> <span></span> <br> </div> <div> <span>}</span> </div> <div> <span>先找到标签1，然后查找标签1下的所有标签名称2。</span> </div> <div> <span>空格分开，后代既包含该标签中的所有标签2。</span> </div> <div> <span>可混合使用，可无限延伸，例如：</span> </div> <div> <span>#id .class {<span> </span></span> </div> <div> <span><span></span>属性值</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>子元素选择器：找到指定标签中所有特定的直接子元素，然后设置属性。</span> </div> <div> <span>先找到标签1，然后找标签1下所有直接子元素的标签2。</span> </div> <div> <span>格式：</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>标签1>标签2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>注意：只会查找儿子，不会查找其他嵌套的孙子，”>”相连接，同后代选择器一样，可以混合使用并无限延伸。</span> </div> <div> <span></span> <br> </div> <div> <span>找id标签下的类为class的标签下的div。</span> </div> <div> <span>#id>.class>div {</span> </div> <div> <span></span> <br> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器和子选择器的区别？</span> </div> <div> <span>1.一个是空格链接，一个是>号连接。</span> </div> <div> <span>2.后代：儿子/孙子… 子选择器：儿子</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器和子选择器的共同？</span> </div> <div> <span>1.混合使用</span> </div> <div> <span>2.通过连接符号一直无限下去。</span> </div> <div> <span></span> <br> </div> <div> <span>交集选择器：给所有选择器选择的标签中，相交的那部分标签设置属性。</span> </div> <div> <span></span> <br> </div> <div> <span>格式：</span> </div> <div> <span>选择器1选择器2{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>选择器之间没有连接符号。</span> </div> <div> <span>例如：</span> </div> <div> <span>p.paral {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>} </span> </div> <div> <span>#id.class{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>找到id是“id”的所有标签，类名是”class”的所有标签，这些标签相交的部分。</span> </div> <div> <span></span> <br> </div> <div> <span>并集选择器：给所有选择器选择的标签中，并集的那部分标签设置属性。</span> </div> <div> <span>格式：</span> </div> <div> <span>选择器1，选择器2{</span> </div> <div> <span>}</span> </div> <div> <span>使用“,”相连接，</span> </div> <div> <span>#id，.class{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>兄弟选择器：同级关系例如<head>和<body>标签。</span> </div> <div> <span>相邻兄弟选择器（CSS2）：给指定选择器后面紧跟的那个选择器选中的标签设置属性。</span> </div> <div> <span>格式：选择器1+选择器2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>h1+p{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>例如：给相邻<h1>标签的<p>标签设置属性（段落1和段落4）</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>注意：+号相连接，只能选中紧跟其后的那个标签。</span> </div> <div> <span>例如：段落1不会变成红色字体。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><a href=“#”>超链接</a></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>通用兄弟选择器(CSS3)：给指定的选择器后面的所有选择器选择的所有标签设置属性。</span> </div> <div> <span>格式：选择器1~选择器2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>h1~p{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span>注意：~连接，选中的是指定选择的后面的某个选择器选中的所有标签，无论有没有被其他标签分割。</span> </div> <div> <span>例如：给<h1>标签的后面的所有<p>标签设置属性。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>例如：段落1仍会变成红色字体，不受影响。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><a href=“#”>超链接</a></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>序选择器：（CSS3中新增的最具代表性的选择器）</span> </div> <div> <span>1.同级别的第几个</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>1）同级别中第一个：:first-child</span> </div> <div> <span>格式：p:first-child {</span> </div> <div> <span><span></span>color:red；</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>例如：段落1和段落3变红。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><p>段落4</p></span> </div> <div> <span><span></span><p>段落5</p></span> </div> <div> <span></div></span> </div> <div> <span>注意：不区分类型。同级别第一个是<h1>，所以段落1不会变红。</span> </div> <div> <span>例如：段落1不会变红，段落3变红。</span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><p>段落4</p></span> </div> <div> <span><span></span><p>段落5</p></span> </div> <div> <span></div></span> </div> <div> <span>以上这种情况可以使用:first-of-type，就可以使段落1和段落3变红</span> </div> <div> <span></span> <br> </div> <div> <span>2）同级别中最后一个：:last-child，不区分类型。</span> </div> <div> <span>3）同级别中第n个：:nth-child(n)，不区分类型。</span> </div> <div> <span>4）同级别中倒数第n个：:nth-last-child(n)，不区分类型。</span> </div> <div> <span>5) 选择标签中只有一个子元素的子元素标签:only-child</span> </div> <div> <span>例如：段落3变红，Q:为什么段落一没有变红？因为最外层有两个标签，<p>和<div>。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>2.同级别同类型的第几个</span> </div> <div> <span>1) 同级别同类型第一个:first-of-type，区分类型。</span> </div> <div> <span>2) 同级别同类型最后一个:last-of-type，区分类型。</span> </div> <div> <span>3) 同级别同类型第n个:nth-of-type(n)，区分类型。</span> </div> <div> <span>4) 同级别同类型倒数第n个:nth-last-of-type(n)，区分类型。</span> </div> <div> <span>5) 选择标签中同类型的标签只有一个子元素的子元素标签:only-of-type</span> </div> <div> <span>例如：段落1和段落3都变红变红，区分类型。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><h1>标题</h1></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>补充：</span> </div> <div> <span>同级别：</span> </div> <div> <span>1)基数都变成红色（段落1，3，5）：:nth-child(odd)</span> </div> <div> <span>2)偶数都变成红色（段落2，4，6）：:nth-child(even)</span> </div> <div> <span>3)符合表达式的标签变成红色：:nth-child(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增。p:nth-child(2n+0){ color:red }：（段落2，4，6变成红色）</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>同级别同类型：</span> </div> <div> <span>1)基数都变成红色（段落1，3，5）：p:nth-of-type(odd)</span> </div> <div> <span>2)偶数都变成红色（段落2，4）：:nth-of-type(even)</span> </div> <div> <span></span> <br> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><h1>标题3</h1></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>属性选择器</span> </div> <div> <span>1.根据指定的属性名称找到对应的标签，然后设置属性。</span> </div> <div> <span>格式：[attribute]</span> </div> <div> <span>例如：将有”id”属性的<p>标签设置为红色：</span> </div> <div> <span></span> <br> </div> <div> <span>p[id]{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span><p id=“id1”>段落1</p></span> </div> <div> <span><p id=“id2”>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span>2.找到指定属性名称，并且属性值等于value的标签，然后设置属性。</span> </div> <div> <span>格式：[attribute=value]</span> </div> <div> <span>最常见应用场景，设置<input>的标签。 </span> </div> <div> <span></span> <br> </div> <div> <span>其他属性选择器：</span> </div> <div> <span>1.属性取值以什么开头。</span> </div> <div> <span>[attribute\|=value] CSS2：只能找到以“abc”开头，并且“abc”与其他值以”-”分割。如下</span> </div> <div> <span><img src= “” alt=“abc-www”></span> </div> <div> <span></span> <br> </div> <div> <span>[attribute^=value] CSS3</span> </div> <div> <span>格式：<img>标签中alt属性以”abc”开头的标签。</span> </div> <div> <span>img[alt^=abc] {</span> </div> <div> <span><span></span>color = red;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>2.属性取值以什么结尾。</span> </div> <div> <span>[attribute$=value] CSS3</span> </div> <div> <span></span> <br> </div> <div> <span>3.属性取值是否包含某个特定值。</span> </div> <div> <span>[attribute~=value] CSS2：只能找到独立单词，也就是包含”abc”，并且被空格隔开。</span> </div> <div> <span>[attribute=value] CSS3：只要包含“abc”就能被找到。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>CSS三大特性：</span> </div> <div> <span>1.继承性：给父元素设置属性，子元素也可以使用。</span> </div> <div> <span>例如：给div设置颜色为红色，段落会变成红色字体。</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>注意：</span> </div> <div> <span>1.不是所有属性都能继承：color/font-/text-/line开头的属性才可以继承。</span> </div> <div> <span>2.不仅仅是儿子能继承，只要是后代都能继承。</span> </div> <div> <span>3.继承性的特殊性，只能单独设置其属性。 </span> </div> <div> <span>1）a标签的文字、颜色和下划线是不能继承的。</span> </div> <div> <span>2）h类标签的文字大小是不能继承的。</span> </div> <div> <span>应用场景：</span> </div> <div> <span>一般用于设置网页上的一些共性的信息，例如：网页文字颜色，字体等。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>2.层叠性：CSS处理冲突的一种特性。（按优先级显示属性）</span> </div> <div> <span></span> <br> </div> <div> <span>注意：只有在多个选这群选中同一个标签，又设置的相同的属性就会发生层叠性。</span> </div> <div> <span>CSS Cascading(层叠性) stylesheet</span> </div> <div> <span></span> <br> </div> <div> <span>3.优先级：多个选这群选中同一个标签，又设置的相同的属性，如何层由优先级决定。</span> </div> <div> <span>优先级判断的三种方式：</span> </div> <div> <span>1）是否是直接选中（间接选中就是继承）</span> </div> <div> <span>间接选中：谁离目标标签近就设置其属性</span> </div> <div> <span>2）是否是相同选择器</span> </div> <div> <span>相同选择器，谁写在后面就选择谁。（同是类选择器等）</span> </div> <div> <span>3）不同选择器</span> </div> <div> <span>如果都是直接选择，并且不是相同类型的选择器，就会按照选择器的优先级来层叠。</span> </div> <div> <span>id>类>标签>通配符>继承>浏览器默认</span> </div> <div> <span></span> <br> </div> <div> <span>优先级important</span> </div> <div> <span>作用：用于提升某个直接选中标签的选择器的某个属性的优先级，可以将被指定的属性优先级提升到最高。</span> </div> <div> <span>注意：</span> </div> <div> <span>1）只能用于直接选中，不能用于间接选中。</span> </div> <div> <span>2）通配符选择器选中的标签也是直接选中的，可以使用important。</span> </div> <div> <span>3）!important只能提升被指定的属性的优先级，其他属性的优先级不会被提升。</span> </div> <div> <span>4）!important写在分号前面。</span> </div> <div> <span></span> <br> </div> <div> <span>优先级的权重</span> </div> <div> <span>作用：当多个选择器混合在一起使用时，可以使用权重来判断谁的优先级高。</span> </div> <div> <span>计算规则：</span> </div> <div> <span>1）所限先计算选择器中有多少个id，id多的选择器优先级最高。</span> </div> <div> <span>2）如果id个数一样，再看类名个数，类名个数多的优先级最高。</span> </div> <div> <span>3）同理，类名个数一样看标签个数。</span> </div> <div> <span>4）如果id,类名，标签个数都一样，谁写在后面优先级最高。</span> </div> <div> <span></span> <br> </div> <div> <span>注意：只有选择器为直接选中的，权重才有用。</span> </div> <div> <span></span> <br> </div> <div> <span>div和span标签</span> </div> <div> <span>div:一般用于配合css完成网页的基本布局。</span> </div> <div> <span>span：一般用于配合css修改网页中的一些局部的信息。label绑定表单元素。</span> </div> <div> <span></span> <br> </div> <div> <span>区别：</span> </div> <div> <span>1）div:单独占领一行，span不会单独占一行。</span> </div> <div> <span>2）div:容器基本标签。span:文本标签、超链接、</span> </div> <div> <span>3）容器级标签可以嵌套所有标签。文本级可以嵌套文字/图片/超链接。</span> </div> <div> <span></span> <br> </div> <div> <span>CSS元素的显示模式</span> </div> <div> <span>分类：</span> </div> <div> <span>1.快级元素：独占一行。容器级标签+<p。如果没有设置宽度，默认和父元素一样宽</span> </div> <div> <span>2.行内元素：不会独占一行。文本级标签—<p>。不可以设置宽度和高度。</span> </div> <div> <span>3.行内块级元素：不占一行，又可以设置宽度和高度。img标签</span> </div> <div> <span></span> <br> </div> <div> <span>行内，块级，行内块级间相互转换:</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>display:inline/block/inline-block;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>设置背景图片：如果网页上出现了图片，那么浏览器会再次发送请求获取图片。</span> </div> <div> <span>设置背景图平铺方式：backgroud-repeat。</span> </div> <div> <span>控制背景图片位置：backgroud-position:left top</span> </div> <div> <span>取值：1）居停方位名词 2）具体像素(一定要写单位px)</span> </div> <div> <span></span> <br> </div> <div> <span>CSS精灵图：一种图像的合成技术。减少图片请求次数，降低服务器压力。</span> </div> <div> <span>通过定位找到我们想要的图片。</span> </div> <div> <span>推荐工具：fireworks</span> </div> <div> <span>注意：定位的时候移动的是负数的x和y值。</span> </div> <div> <span></span> <br> </div> <div> <span>边框框属性的格式：</span> </div> <div> <span>1）border:边框的宽度边框的样式边框的颜色。（连写格式）</span> </div> <div> <span>2）border-top，border-bottom，border-left，border-right（连写格式）</span> </div> <div> <span>3) 按照要素，颜色，样式，宽度（border-width、border-style、border-color）（连写格式）</span> </div> <div> <span>例如：(上右下左)</span> </div> <div> <span>border-width：1px 5px 2px 10px</span> </div> <div> <span>border-color: red green blue yellow</span> </div> <div> <span></span> <br> </div> <div> <span>注意：</span> </div> <div> <span>省略左边属性，左边就会和右边一样。</span> </div> <div> <span>同理省略下边，回和上边一样</span> </div> <div> <span>只写一个值，其他值和这个值得属性值一样。</span> </div> <div> <span></span> <br> </div> <div> <span>4）border-top-width等等样式（非连写格式）</span> </div> <div> <span></span> <br> </div> <div> <span>内边距属性：边框和内容之间的距离。</span> </div> <div> <span>设置内边距，标签的大小也会发生变化。</span> </div> <div> <span>1.非连写：padding-top等样式</span> </div> <div> <span>2.连写：padding：(上右下左)同border一样</span> </div> <div> <span>省略左边属性，左边就会和右边一样。</span> </div> <div> <span>同理省略下边，回和上边一样</span> </div> <div> <span>只写一个值，其他值和这个值得属性值一样。</span> </div> <div> <span></span> <br> </div> <div> <span>外边距属性：标签与标签之间的距离。</span> </div> <div> <span>1.非连写：margin-top等</span> </div> <div> <span>2.连写：margin(上右下左)</span> </div> <div> <span></span> <br> </div> <div> <span>注意：外边距没有背景颜色，内边距有背景色</span> </div> <div> <span></span> <br> </div> <div> <span>外边距合并现象：垂直方向外边距不会叠加，会出现合并现象，有多个margin，不会相加，取最大值。</span> </div> <div> <span>盒子模型：html中所有德尔标签都是盒子模型，能够设置宽高，边框，外边距，内边距。</span> </div> <div> <span></span> <br> </div> <div> <span>内容的宽高：width.height设置的属性</span> </div> <div> <span>元素的宽高：边框+内边距+内容的宽高。</span> </div> <div> <span>元素空间的宽高：外边距+边框+内边距+内容的宽高。</span> </div> <div> <span></span> <br> </div> <div> <span>保证增加border/padding元素的宽高不变（box-sizing，css3，内容的宽高减少）</span> </div> <div> <span>box-sizing:content-box 元素宽高=边框+内边距+内容的宽高。</span> </div> <div> <span>box-sizing:border-box 盒子元素宽高不变。元素宽高=内容的宽高</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>1.如果两个盒子是嵌套关系，设置了里面一个盒子的顶部外边距，外面盒子也会同时被顶下拉。</span> </div> <div> <span>2.如果外面盒子不想被顶下来，可以添加边框属性就可以。</span> </div> <div> <span>3.控制嵌套盒子距离，首先考虑 padding。设置父子关系标签属性。</span> </div> <div> <span>4.嵌套关系盒子中，使用margin: 0 auto;水平居中，只对水平方向有效。</span> </div> <div> <span></span> <br> </div> <div> <span>清空默认边距：</span> </div> <div> <span></span> <br> </div> <div> <span>{</span> </div> <div> <span><span></span>margin:0;</span> </div> <div> <span><span></span>padding:0;</span> </div> <div> <span>}</span> </div> <div> <span>通配符会遍历所有标签，性能不好。</span> </div> <div> <span></span> <br> </div> <div> <span>行高和字号：line-height</span> </div> <div> <span>1）文字在行高中默认为垂直居中。</span> </div> <div> <span>2）盒子高度和行高设置一样（一行文字）</span> </div> <div> <span>3）两行文字居中：padding设置。</span> </div> <div> <span></span> <br> </div> <div> <span>网页布局方式</span> </div> <div> <span>1.标准流排版方式（又叫文档流/普通流）浏览器默认排版方式，（垂直排版（块级），水平排版（行内，行内块级）)</span> </div> <div> <span>2.浮动流排版方式</span> </div> <div> <span>浮动流一种办脱离标准留的排版方式（水平排版，只能设置标签左对齐或者右对齐，没有居中</span> </div> <div> <span>浮动流不能使用margin: 0 auto</span> </div> <div> <span>浮动流不分行内，块级元素，都会显示在同一行，并且块级元素能设置宽高。</span> </div> <div> <span>浮动流中的原素和标准流中的行内块级元素很像。</span> </div> <div> <span></span> <br> </div> <div> <span>浮动元素脱标：</span> </div> <div> <span>脱标：脱离标准流</span> </div> <div> <span>当某一个元素浮动后，那么这个元素看上去就像标准流中删除一样。</span> </div> <div> <span></span> <br> </div> <div> <span>浮动元素高度问题</span> </div> <div> <span>1.标准流中，内容的高度可以撑起父元素的高度。</span> </div> <div> <span>2.在浮动流中，浮动的原始是不能撑起父元素的高度。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>清除浮动方式：</span> </div> <div> <span>1)给前面一个父元素设置高度（最好不要设置高度，用的比较少）</span> </div> <div> <span>2）给后面的盒子添加clear属性。（clear:left；）left/right/both/none</span> </div> <div> <span>注意：当给某个原始添加clear属性，那么这个元素的margin属性会失效。</span> </div> <div> <span> 3）隔墙法</span> </div> <div> <span><span></span>1.外墙法：两个盒子中间添加额外的块级元素（class = “wall”），并设置其clear：both;属性。</span> </div> <div> <span><span></span>注意：外墙法可以让第二个盒子使用margin-top属性，不能让第一个盒子使用margin-bottom<span> </span> <span> </span>属性。所有最好设置中间的块级元素的高度就可以设置两个box之间的间隙。</span> </div> <p></p> <p><span><span></span></span><br></p> <div> <span><span></span>2.内墙法:第一个盒子所有子元素最后添加格外的块级元素（class = “wall”），并设置其clear：both;属性。</span> </div> <div> <span><span></span>注意：外墙法可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom<span> </span> <span> </span>属性。同时也可以设置中间的块级元素的高度就可以设置两个box之间的间隙。</span> </div> <div> <span></span> <br> </div> <div> <span>外墙、内墙之间的区别？</span> </div> <div> <span>1.内墙法可以撑起第一个盒子的高度，外墙法不可以。</span> </div> <div> <span></span> <br> </div> <div> <span>注意：企业中一般不常用隔墙法清除浮动。（结构和样式分离，隔墙法需要添加空标签设置边距，所以不推荐）</span> </div> <div> <span></span> <br> </div> <div> <span>4）使用伪元素选择器添加块级元素，去浮动。（跟内墙法的原理一样，但是是利用css去添加块级元素）</span> </div> <div> <span>.box1::after{</span> </div> <div> <span><span></span>content:””;//子元素内容为空</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span><span></span>height:0px;//高度设置为0</span> </div> <div> <span><span></span>visibility:hidden;//设置子元素不可见</span> </div> <div> <span><span></span>clear:both;</span> </div> <div> <span>}</span> </div> <div> <span>兼容问题：伪元素选择器为css，浏览器版本低的需要在格外添加如下代码：</span> </div> <div> <span>.box1{</span> </div> <div> <span><span></span>zoom:1;//兼容IE6</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>伪元素选择器（CSS3）：给指定标签的内容前面/后面添加一个子元素。</span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>我是段落1</p></span> </div> <div> <span><span></span>我是文字</span> </div> <div> <span><span></span><p>我是段落2</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>伪元素选择器实现以上代码：</span> </div> <div> <span><div></span> </div> <div> <span><span></span>我是文字</span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>css样式代码：</span> </div> <div> <span>div::before{</span> </div> <div> <span><span></span>content:”我是段落1”；</span> </div> <div> <span><span></span>width:50px;</span> </div> <div> <span><span></span>height:50px;</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span>}</span> </div> <div> <span>伪元素选择器格式：</span> </div> <div> <span>标签名称::before{</span> </div> <div> <span><span></span>属性;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>不显示子元素：</span> </div> <div> <span>div::before{</span> </div> <div> <span><span></span>content:””；</span> </div> <div> <span><span></span>width:50px;</span> </div> <div> <span><span></span>height:0px;//高度设置为0</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span><span></span>visibility:hidden;//设置子元素不可见</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>5）使用orderflow属性清除浮动：将盒子1样式中添加orderflow就可以实现。</span> </div> <div> <span>orderflow属性作用：</span> </div> <div> <span>1.不想让内容超出标签范围：orderflow:hidden;属性</span> </div> <div> <span>2. 清除浮动</span> </div> <div> <span>3.两个盒子嵌套关系，里边盒子想要设置margion-top,外边盒子不会受影响一起顶下来，并且外边盒子不想设置边框，这时可以给外边的盒子设置orderflow:hidden;属性。</span> </div> <div> <span></span> <br> </div> <div> <span>致命注意点：兼容问题，IE6同样不识别。同伪元素选择其处理方法一样，添加如下代码：</span> </div> <div> <span>.box1{</span> </div> <div> <span><span></span>zoom:1;//兼容IE6</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>3.定位流排版方式</span> </div> <div> <span>1）相对定位：</span> </div> <div> <span>1.1 不脱离标准流，相对自己以前在标准流中的位置移动距离。</span> </div> <div> <span>position：relative，需要配合top:20px，right:20px，等属性一起使用。</span> </div> <div> <span>1.同一个方向上的定位属性只能使用一个。</span> </div> <div> <span>1.3 区分块级，行内，行内块级</span> </div> <div> <span>1.4 设置margin/padding等属性会影响标准流（会影响给定位之前的位置，而不是定位之后的位置）</span> </div> <div> <span>2）绝对定位（跟浮动流类似）：相对于body进行定位，左，上，右，下。</span> </div> <div> <span>2.1 脱离标准流</span> </div> <div> <span>2.2 不区分块级，行内，行内块级</span> </div> <div> <span></span> <br> </div> <div> <span>规律：</span> </div> <div> <span>无论有没有祖先元素，都会以body作为参考点。</span> </div> <div> <span> 如果一个绝对定位的元素有祖先元素，并且祖先元素（嵌套层级可以是多级）也是定位流（相对定位，绝对定位，固定定位），那么就以定位流的那个祖先元素作为参考点。注意静态定位不可以。</span> </div> <div> <span>多个祖先元素都为定位流，以离该元素最近的那个静态定位作为参考点。</span> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>绝对定位元素以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网易的宽度和高度作为参考点。</span> </div> <div> <span>绝对定位的元素会忽略祖先元素的padding属性。</span> </div> <div> <span></span> <br> </div> <div> <span>相对定位弊端：相对定位不会脱离标准流，会继续在标准流中占用一份空间，不利于布局。</span> </div> <div> <span>绝对定位弊端:<span> </span>默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化。</span> </div> <div> <span>子绝父相（使用绝对定位和相对定位混合使用）：子元素用绝对定位, 父元使用相对定位。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>让局对定位元素水平居中：</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>position:absolute;</span> </div> <div> <span><span></span>left:50%;</span> </div> <div> <span><span></span>margin-left：-150px;(该元素宽度一半 )</span> </div> <div> <span>}</span> </div> <div> <span>3）固定定位：位置固定，不随滚动条滚动。多用于设置背景图片。</span> </div> <div> <span>3.1 固定定位元素脱离标准流。</span> </div> <div> <span>3.2 不区分块级，行内，行内块级</span> </div> <div> <span></span> <br> </div> <div> <span>ie6不支持固定定位。</span> </div> <div> <span></span> <br> </div> <div> <span>4）静态定位：默认就是静态定位</span> </div> <div> <span></span> <br> </div> <div> <span>z-index属性：默认情况下所有的元素都有一个默认的z-index属性，取值为0.</span> </div> <div> <span>作用：专门用于控制定位流元素的覆盖关系的。</span> </div> <div> <span></span> <br> </div> <div> <span>默认情况下，定位流的元素会盖住标准留的元素。</span> </div> <div> <span>默认情况加定位流的元素后面变形的会盖住前面编写的元素。</span> </div> <div> <span>如果定位流的元素设置了z-index属性，谁的z-index属性比较大，谁就显示在上面。</span> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>1.从父现象</span> </div> <div> <span>1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。</span> </div> <div> <span>1.2 如果两个元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大，谁就显示在上面。</span> </div> <div> <span><br></span> </div> <div> <span>未完待续...</span> </div> <div> <span><br></span> </div> <br> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1306161306126028800"></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">你可能感兴趣的:(html5,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</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><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业\|游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作\|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> <span class="text-muted">周bro</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/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> <span class="text-muted">琪33</span> <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> <span class="text-muted">AnFany</span> <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> <span class="text-muted">Bearjumpingcandy</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> <span class="text-muted">Sardar_</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> <span class="text-muted">Kason晨</span> <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835221779212234752.htm" title="清除 Conda 缓存" target="_blank">清除 Conda 缓存</a> <span class="text-muted">Dmatteratall</span> <a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> <span class="text-muted">diygwcom</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835186351805394944.htm" title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个</div> </li> <li><a href="/article/1835151269904347136.htm" title="10/24 每周学习总结5" target="_blank">10/24 每周学习总结5</a> <span class="text-muted">木木ainiks</span> <a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return</div> </li> <li><a href="/article/1835123524155568128.htm" title="HTML5概述" target="_blank">HTML5概述</a> <span class="text-muted">WFIT~SKY</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/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>1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1</div> </li> <li><a href="/article/1835111175398977536.htm" title="HTML添加文字" target="_blank">HTML添加文字</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/html5/1.htm">html5</a> <div>一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长</div> </li> <li><a href="/article/1835109157406076928.htm" title="CSS中如何实现鼠标悬停效果？" target="_blank">CSS中如何实现鼠标悬停效果？</a> <span class="text-muted">神明木佑</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h</div> </li> <li><a href="/article/1835091010678517760.htm" title="js的书写位置和css的书写位置的区别？为什么要这样写？" target="_blank">js的书写位置和css的书写位置的区别？为什么要这样写？</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）</div> </li> <li><a href="/article/1835082840174325760.htm" title="【拖拽】自定义拖拽图标" target="_blank">【拖拽】自定义拖拽图标</a> <span class="text-muted">风露_</span> <div>一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed</div> </li> <li><a href="/article/1835048766864977920.htm" title="【H2O2\|全栈】关于CSS（3）CSS基础（三）" target="_blank">【H2O2\|全栈】关于CSS（3）CSS基础（三）</a> <span class="text-muted">过期的H2O2</span> <a class="tag" taget="_blank" href="/search/%E3%80%90H2O2%E3%80%91CSS%E5%85%A5%E9%97%A8/1.htm">【H2O2】CSS入门</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：</div> </li> <li><a href="/article/1835010195202338816.htm" title="css鼠标移上去向上移动,css3鼠标移动图片上移效果" target="_blank">css鼠标移上去向上移动,css3鼠标移动图片上移效果</a> <span class="text-muted">yo xiba</span> <a class="tag" taget="_blank" href="/search/css%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E5%8E%BB%E5%90%91%E4%B8%8A%E7%A7%BB%E5%8A%A8/1.htm">css鼠标移上去向上移动</a> <div>css3的功能真是很强大，学无止境，不多说，直接上代码css部分：{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:</div> </li> <li><a href="/article/1835002124283506688.htm" title="css3实现鼠标放到图标上自动切换图标" target="_blank">css3实现鼠标放到图标上自动切换图标</a> <span class="text-muted">黄丫丫07</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}</div> </li> <li><a href="/article/74.htm" title="sql统计相同项个数并按名次显示" target="_blank">sql统计相同项个数并按名次显示</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20</div> </li> <li><a href="/article/201.htm" title="Android+Jquery Mobile学习系列-目录" target="_blank">Android+Jquery Mobile学习系列-目录</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/JQuery+Mobile/1.htm">JQuery Mobile</a> <div>最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。从现在起，往后一段时间，我打算</div> </li> <li><a href="/article/328.htm" title="如何给线程池命名" target="_blank">如何给线程池命名</a> <span class="text-muted">daysinsun</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a> <div> 在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下： public class Named</div> </li> <li><a href="/article/455.htm" title="IE 中"HTML Parsing Error:Unable to modify the parent container element before the" target="_blank">IE 中"HTML Parsing Error:Unable to modify the parent container element before the</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/%E8%A7%A3%E6%9E%90/1.htm">解析</a><a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/readyState/1.htm">readyState</a> <div> 错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed" 现象：同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。</div> </li> <li><a href="/article/582.htm" title="java上传" target="_blank">java上传</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact</div> </li> <li><a href="/article/709.htm" title="SpringMVC配置学习" target="_blank">SpringMVC配置学习</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>spring MVC配置详解现在主流的Web MVC框架除了Struts这个主力外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi</div> </li> <li><a href="/article/836.htm" title="spring mvc-jfreeChart 柱图(1)" target="_blank">spring mvc-jfreeChart 柱图(1)</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/jfreechart/1.htm">jfreechart</a> <div>第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可；第二步：配置web.xml; web.xml代码如下 <servlet> <servlet-name>jfreechart</servlet-nam</div> </li> <li><a href="/article/963.htm" title="我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer" target="_blank">我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a> <div>PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P</div> </li> <li><a href="/article/1090.htm" title="java 线程池使用 Runnable&Callable&Future" target="_blank">java 线程池使用 Runnable&Callable&Future</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/callable/1.htm">callable</a><a class="tag" taget="_blank" href="/search/future/1.htm">future</a> <div>1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool(); 2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin</div> </li> <li><a href="/article/1217.htm" title="XML语法元素结构的总结" target="_blank">XML语法元素结构的总结</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E7%BB%93%E6%9E%84/1.htm">树结构</a> <div>1.XML介绍1969年 gml (主要目的是要在不同的机器进行通信的数据规范)1985年 sgml standard generralized markup language1993年 html(www网)1998年 xml extensible markup language</div> </li> <li><a href="/article/1344.htm" title="改变eclipse编码格式" target="_blank">改变eclipse编码格式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F/1.htm">编码格式</a> <div>1.改变整个工作空间的编码格式改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。 Eclipse->window->preferences->General->workspace-</div> </li> <li><a href="/article/1471.htm" title="javascript中return的设计缺陷" target="_blank">javascript中return的设计缺陷</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a> <div>代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l</div> </li> <li><a href="/article/1598.htm" title="【持久化框架MyBatis3八】Spring集成MyBatis3" target="_blank">【持久化框架MyBatis3八】Spring集成MyBatis3</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a> <div>pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> &</div> </li> <li><a href="/article/1725.htm" title="java web项目启动时自动加载自定义properties文件" target="_blank">java web项目启动时自动加载自定义properties文件</a> <span class="text-muted">bitray</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/1.htm">相对路径</a> <div>创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des</div> </li> <li><a href="/article/1852.htm" title="用nginx区分文件大小做出不同响应" target="_blank">用nginx区分文件大小做出不同响应</a> <span class="text-muted">ronin47</span> <div>昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布</div> </li> <li><a href="/article/1979.htm" title="java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大" target="_blank">java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /* * Q67 扑克牌的顺子从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1</div> </li> <li><a href="/article/2106.htm" title="翟鸿燊老师语录" target="_blank">翟鸿燊老师语录</a> <span class="text-muted">ccii</span> <a class="tag" taget="_blank" href="/search/%E7%BF%9F%E9%B8%BF%E7%87%8A/1.htm">翟鸿燊</a> <div>一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道</div> </li> <li><a href="/article/2233.htm" title="[光速与宇宙]进行光速飞行的一些问题" target="_blank">[光速与宇宙]进行光速飞行的一些问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div> 在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家仅仅是猜想。。。未经官方证实 1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？下面我来告诉</div> </li> <li><a href="/article/2360.htm" title="oracle undo解析" target="_blank">oracle undo解析</a> <span class="text-muted">cwqcwqmax9</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>oracle undo解析2012-09-24 09:02:01 我来说两句作者：虫师收藏我要投稿 Undo是干嘛用的？ &nb</div> </li> <li><a href="/article/2487.htm" title="java中各种集合的详细介绍" target="_blank">java中各种集合的详细介绍</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88/1.htm">集合</a> <div>一，java中各种集合的关系图 Collection 接口的接口对象的集合 ├ List 子接口 &n</div> </li> <li><a href="/article/2614.htm" title="卸载windows服务的方法" target="_blank">卸载windows服务的方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a> <div>卸载Windows服务的方法在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他</div> </li> <li><a href="/article/2741.htm" title="Warning: The Copy Bundle Resources build phase contains this target's Info.plist" target="_blank">Warning: The Copy Bundle Resources build phase contains this target's Info.plist</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a> <div> http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle </div> </li> <li><a href="/article/2868.htm" title="2014之C++学习笔记（一）" target="_blank">2014之C++学习笔记（一）</a> <span class="text-muted">Etwo</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Etwo/1.htm">Etwo</a><a class="tag" taget="_blank" href="/search/Etwo/1.htm">Etwo</a><a class="tag" taget="_blank" href="/search/iterator/1.htm">iterator</a><a class="tag" taget="_blank" href="/search/%E8%BF%AD%E4%BB%A3%E5%99%A8/1.htm">迭代器</a> <div> 已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型</div> </li> <li><a href="/article/2995.htm" title="js跨越获取数据问题记录" target="_blank">js跨越获取数据问题记录</a> <span class="text-muted">haifengwuch</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>js的跨越问题，普通的ajax无法获取服务器返回的值。第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca</div> </li> <li><a href="/article/3122.htm" title="蓝色jQuery导航条" target="_blank">蓝色jQuery导航条</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<</div> </li> <li><a href="/article/3249.htm" title="linux部署jdk,tomcat,mysql" target="_blank">linux部署jdk,tomcat,mysql</a> <span class="text-muted">kerryg</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1、安装java环境jdk: 一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。 1.1）、卸载：（rpm -qa :查询已经安装哪些软件包； rmp -q 软件包：查询指定包是否已</div> </li> <li><a href="/article/3376.htm" title="DOMContentLoaded VS onload VS onreadystatechange" target="_blank">DOMContentLoaded VS onload VS onreadystatechange</a> <span class="text-muted">mutongwu</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra</div> </li> <li><a href="/article/3503.htm" title="sql批量插入数据" target="_blank">sql批量插入数据</a> <span class="text-muted">qifeifei</span> <a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div>hi，自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。 WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a</div> </li> <li><a href="/article/3630.htm" title="log4j打印日志文件如何实现相对路径到项目工程下" target="_blank">log4j打印日志文件如何实现相对路径到项目工程下</a> <span class="text-muted">thinkfreer</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a> <div>最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下需求：用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名</div> </li> <li><a href="/article/3757.htm" title="linux下mysql-5.6.23.tar.gz安装与配置" target="_blank">linux下mysql-5.6.23.tar.gz安装与配置</a> <span class="text-muted">笑我痴狂</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>1.卸载系统默认的mysql [root@localhost ~]# rpm -qa \| grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1</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>

标题单元格标签，文字默认加粗，居中。

表格的存储数据：(完整结构)

1. 标题 caption

2. 表头 thead

3. 内容 tbody

4. 页尾 tfoot

注：如果指定了thead 和 tfoot，设置table高度不会受影响，有自身的默认高度。

合并单元格：

水平方向合并

把当前单元格当做两个单元格看待，需把多出的单元格删掉。

只能向上或者向下合并。

垂直方向合并：

，同理删除多余单元格。

表单：收集用户信息

格式：

常见表单元素：

输入框，type属性（功能和外观），有很多类型。

提交表单数据：

添加action，提交的路径URL

提交内容添加name属性。

隐藏域：配合提交按钮将一些数据偷偷的提交到服务器。（Ajax）

datalist :输入框待选项，需要绑定输入框

select 标签，下拉列表。不能输入内容，直接选择。可以设置默认值。

可以使用optgroup标签包裹进行分组。

多行输入框：标签。</span></p> <p><span></span><br></p> <p><span></span><br></p> <p><span><strong><span style="font-size:18px;">css学习笔记</span></strong></span></p> <p>优点</p> <p><span>1.不用记忆哪些属性属于哪个标签。</span></p> <p><span>2.需求变更不需要修改大量的代码。</span></p> <p><span><br></span></p> <p><span></span></p> <div> <span>css，只能放在<style>标签中，<style>标签只能放在<head>标签中。</span> </div> <div> <span>type=“text/css”：代表文本的css样式。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>css：</span> </div> <div> <span>标签名称 {</span> </div> <div> <span><span></span>属性名称：属性值</span> </div> <div> <span>}</span> </div> <div> <span>选择器：标签名称</span> </div> <div> <span>属性</span> </div> <div> <span></span> <br> </div> <div> <span>设置字体：可以选择备选方案。中文字体能处理中文和英文，英文字体只能处理英文。</span> </div> <div> <span></span> <br> </div> <div> <span>font-family:”Times New Roman”,”微软雅黑”</span> </div> <div> <span>单独给英文设置字体，英文字体放在前面</span> </div> <div> <span></span> <br> </div> <div> <span>文字样式缩写：font：italic bold 10px “楷体”</span> </div> <div> <span>缩写格式中，style和weight不是必写项并可以交换位置。</span> </div> <div> <span>有的属性值必须写，并且必能随便乱放位置，size必写family前面，并且size和family必需协助最后。</span> </div> <div> <span></span> <br> </div> <div> <span>文本缩进的属性：text-indent:2em缩进2个文字。</span> </div> <div> <span></span> <br> </div> <div> <span>标签选择器：</span> </div> <div> <span>根据指定的标签名称，在当前页面找到所有标签并设置属性。 </span> </div> <div> <span></span> <br> </div> <div> <span>id选择器和类选择器，id名称唯一，不能重复。</span> </div> <div> <span>前面必写添加“#”。</span> </div> <div> <span>名称规范：数字，字母，下划线。不能以数字开头。</span> </div> <div> <span></span> <br> </div> <div> <span>类名选择器：可以重复，前面加“.”，给某个特定标签设置属性的。一个标签可以同时绑定多个类名（用空格分开）。</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器：找到指定标签的所有后代标签，设置属性。</span> </div> <div> <span></span> <br> </div> <div> <span>标签名称1 标签名称2 {</span> </div> <div> <span></span> <br> </div> <div> <span>}</span> </div> <div> <span>先找到标签1，然后查找标签1下的所有标签名称2。</span> </div> <div> <span>空格分开，后代既包含该标签中的所有标签2。</span> </div> <div> <span>可混合使用，可无限延伸，例如：</span> </div> <div> <span>#id .class {<span> </span></span> </div> <div> <span><span></span>属性值</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>子元素选择器：找到指定标签中所有特定的直接子元素，然后设置属性。</span> </div> <div> <span>先找到标签1，然后找标签1下所有直接子元素的标签2。</span> </div> <div> <span>格式：</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>标签1>标签2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>注意：只会查找儿子，不会查找其他嵌套的孙子，”>”相连接，同后代选择器一样，可以混合使用并无限延伸。</span> </div> <div> <span></span> <br> </div> <div> <span>找id标签下的类为class的标签下的div。</span> </div> <div> <span>#id>.class>div {</span> </div> <div> <span></span> <br> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器和子选择器的区别？</span> </div> <div> <span>1.一个是空格链接，一个是>号连接。</span> </div> <div> <span>2.后代：儿子/孙子… 子选择器：儿子</span> </div> <div> <span></span> <br> </div> <div> <span>后代选择器和子选择器的共同？</span> </div> <div> <span>1.混合使用</span> </div> <div> <span>2.通过连接符号一直无限下去。</span> </div> <div> <span></span> <br> </div> <div> <span>交集选择器：给所有选择器选择的标签中，相交的那部分标签设置属性。</span> </div> <div> <span></span> <br> </div> <div> <span>格式：</span> </div> <div> <span>选择器1选择器2{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>选择器之间没有连接符号。</span> </div> <div> <span>例如：</span> </div> <div> <span>p.paral {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>} </span> </div> <div> <span>#id.class{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>找到id是“id”的所有标签，类名是”class”的所有标签，这些标签相交的部分。</span> </div> <div> <span></span> <br> </div> <div> <span>并集选择器：给所有选择器选择的标签中，并集的那部分标签设置属性。</span> </div> <div> <span>格式：</span> </div> <div> <span>选择器1，选择器2{</span> </div> <div> <span>}</span> </div> <div> <span>使用“,”相连接，</span> </div> <div> <span>#id，.class{</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>兄弟选择器：同级关系例如<head>和<body>标签。</span> </div> <div> <span>相邻兄弟选择器（CSS2）：给指定选择器后面紧跟的那个选择器选中的标签设置属性。</span> </div> <div> <span>格式：选择器1+选择器2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>h1+p{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>例如：给相邻<h1>标签的<p>标签设置属性（段落1和段落4）</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>注意：+号相连接，只能选中紧跟其后的那个标签。</span> </div> <div> <span>例如：段落1不会变成红色字体。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><a href=“#”>超链接</a></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>通用兄弟选择器(CSS3)：给指定的选择器后面的所有选择器选择的所有标签设置属性。</span> </div> <div> <span>格式：选择器1~选择器2 {</span> </div> <div> <span><span></span>属性</span> </div> <div> <span>}</span> </div> <div> <span>h1~p{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span>注意：~连接，选中的是指定选择的后面的某个选择器选中的所有标签，无论有没有被其他标签分割。</span> </div> <div> <span>例如：给<h1>标签的后面的所有<p>标签设置属性。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>例如：段落1仍会变成红色字体，不受影响。</span> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><a href=“#”>超链接</a></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>序选择器：（CSS3中新增的最具代表性的选择器）</span> </div> <div> <span>1.同级别的第几个</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>1）同级别中第一个：:first-child</span> </div> <div> <span>格式：p:first-child {</span> </div> <div> <span><span></span>color:red；</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>例如：段落1和段落3变红。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><p>段落4</p></span> </div> <div> <span><span></span><p>段落5</p></span> </div> <div> <span></div></span> </div> <div> <span>注意：不区分类型。同级别第一个是<h1>，所以段落1不会变红。</span> </div> <div> <span>例如：段落1不会变红，段落3变红。</span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><p>段落4</p></span> </div> <div> <span><span></span><p>段落5</p></span> </div> <div> <span></div></span> </div> <div> <span>以上这种情况可以使用:first-of-type，就可以使段落1和段落3变红</span> </div> <div> <span></span> <br> </div> <div> <span>2）同级别中最后一个：:last-child，不区分类型。</span> </div> <div> <span>3）同级别中第n个：:nth-child(n)，不区分类型。</span> </div> <div> <span>4）同级别中倒数第n个：:nth-last-child(n)，不区分类型。</span> </div> <div> <span>5) 选择标签中只有一个子元素的子元素标签:only-child</span> </div> <div> <span>例如：段落3变红，Q:为什么段落一没有变红？因为最外层有两个标签，<p>和<div>。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>2.同级别同类型的第几个</span> </div> <div> <span>1) 同级别同类型第一个:first-of-type，区分类型。</span> </div> <div> <span>2) 同级别同类型最后一个:last-of-type，区分类型。</span> </div> <div> <span>3) 同级别同类型第n个:nth-of-type(n)，区分类型。</span> </div> <div> <span>4) 同级别同类型倒数第n个:nth-last-of-type(n)，区分类型。</span> </div> <div> <span>5) 选择标签中同类型的标签只有一个子元素的子元素标签:only-of-type</span> </div> <div> <span>例如：段落1和段落3都变红变红，区分类型。</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落3</p></span> </div> <div> <span><span></span><h1>标题</h1></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>补充：</span> </div> <div> <span>同级别：</span> </div> <div> <span>1)基数都变成红色（段落1，3，5）：:nth-child(odd)</span> </div> <div> <span>2)偶数都变成红色（段落2，4，6）：:nth-child(even)</span> </div> <div> <span>3)符合表达式的标签变成红色：:nth-child(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增。p:nth-child(2n+0){ color:red }：（段落2，4，6变成红色）</span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>同级别同类型：</span> </div> <div> <span>1)基数都变成红色（段落1，3，5）：p:nth-of-type(odd)</span> </div> <div> <span>2)偶数都变成红色（段落2，4）：:nth-of-type(even)</span> </div> <div> <span></span> <br> </div> <div> <span><h1>标题1</h1></span> </div> <div> <span><p>段落1</p></span> </div> <div> <span><p>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span><h1>标题2</h1></span> </div> <div> <span><p>段落4</p></span> </div> <div> <span><p>段落5</p></span> </div> <div> <span><h1>标题3</h1></span> </div> <div> <span><p>段落6</p></span> </div> <div> <span></span> <br> </div> <div> <span>属性选择器</span> </div> <div> <span>1.根据指定的属性名称找到对应的标签，然后设置属性。</span> </div> <div> <span>格式：[attribute]</span> </div> <div> <span>例如：将有”id”属性的<p>标签设置为红色：</span> </div> <div> <span></span> <br> </div> <div> <span>p[id]{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span><p id=“id1”>段落1</p></span> </div> <div> <span><p id=“id2”>段落2</p></span> </div> <div> <span><p>段落3</p></span> </div> <div> <span>2.找到指定属性名称，并且属性值等于value的标签，然后设置属性。</span> </div> <div> <span>格式：[attribute=value]</span> </div> <div> <span>最常见应用场景，设置<input>的标签。 </span> </div> <div> <span></span> <br> </div> <div> <span>其他属性选择器：</span> </div> <div> <span>1.属性取值以什么开头。</span> </div> <div> <span>[attribute|=value] CSS2：只能找到以“abc”开头，并且“abc”与其他值以”-”分割。如下</span> </div> <div> <span><img src= “” alt=“abc-www”></span> </div> <div> <span></span> <br> </div> <div> <span>[attribute^=value] CSS3</span> </div> <div> <span>格式：<img>标签中alt属性以”abc”开头的标签。</span> </div> <div> <span>img[alt^=abc] {</span> </div> <div> <span><span></span>color = red;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>2.属性取值以什么结尾。</span> </div> <div> <span>[attribute$=value] CSS3</span> </div> <div> <span></span> <br> </div> <div> <span>3.属性取值是否包含某个特定值。</span> </div> <div> <span>[attribute~=value] CSS2：只能找到独立单词，也就是包含”abc”，并且被空格隔开。</span> </div> <div> <span>[attribute*=value] CSS3：只要包含“abc”就能被找到。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>CSS三大特性：</span> </div> <div> <span>1.继承性：给父元素设置属性，子元素也可以使用。</span> </div> <div> <span>例如：给div设置颜色为红色，段落会变成红色字体。</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>color:red;</span> </div> <div> <span>}</span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>段落</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>注意：</span> </div> <div> <span>1.不是所有属性都能继承：color/font-/text-/line开头的属性才可以继承。</span> </div> <div> <span>2.不仅仅是儿子能继承，只要是后代都能继承。</span> </div> <div> <span>3.继承性的特殊性，只能单独设置其属性。 </span> </div> <div> <span>1）a标签的文字、颜色和下划线是不能继承的。</span> </div> <div> <span>2）h类标签的文字大小是不能继承的。</span> </div> <div> <span>应用场景：</span> </div> <div> <span>一般用于设置网页上的一些共性的信息，例如：网页文字颜色，字体等。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>2.层叠性：CSS处理冲突的一种特性。（按优先级显示属性）</span> </div> <div> <span></span> <br> </div> <div> <span>注意：只有在多个选这群选中同一个标签，又设置的相同的属性就会发生层叠性。</span> </div> <div> <span>CSS Cascading(层叠性) stylesheet</span> </div> <div> <span></span> <br> </div> <div> <span>3.优先级：多个选这群选中同一个标签，又设置的相同的属性，如何层由优先级决定。</span> </div> <div> <span>优先级判断的三种方式：</span> </div> <div> <span>1）是否是直接选中（间接选中就是继承）</span> </div> <div> <span>间接选中：谁离目标标签近就设置其属性</span> </div> <div> <span>2）是否是相同选择器</span> </div> <div> <span>相同选择器，谁写在后面就选择谁。（同是类选择器等）</span> </div> <div> <span>3）不同选择器</span> </div> <div> <span>如果都是直接选择，并且不是相同类型的选择器，就会按照选择器的优先级来层叠。</span> </div> <div> <span>id>类>标签>通配符>继承>浏览器默认</span> </div> <div> <span></span> <br> </div> <div> <span>优先级important</span> </div> <div> <span>作用：用于提升某个直接选中标签的选择器的某个属性的优先级，可以将被指定的属性优先级提升到最高。</span> </div> <div> <span>注意：</span> </div> <div> <span>1）只能用于直接选中，不能用于间接选中。</span> </div> <div> <span>2）通配符选择器选中的标签也是直接选中的，可以使用important。</span> </div> <div> <span>3）!important只能提升被指定的属性的优先级，其他属性的优先级不会被提升。</span> </div> <div> <span>4）!important写在分号前面。</span> </div> <div> <span></span> <br> </div> <div> <span>优先级的权重</span> </div> <div> <span>作用：当多个选择器混合在一起使用时，可以使用权重来判断谁的优先级高。</span> </div> <div> <span>计算规则：</span> </div> <div> <span>1）所限先计算选择器中有多少个id，id多的选择器优先级最高。</span> </div> <div> <span>2）如果id个数一样，再看类名个数，类名个数多的优先级最高。</span> </div> <div> <span>3）同理，类名个数一样看标签个数。</span> </div> <div> <span>4）如果id,类名，标签个数都一样，谁写在后面优先级最高。</span> </div> <div> <span></span> <br> </div> <div> <span>注意：只有选择器为直接选中的，权重才有用。</span> </div> <div> <span></span> <br> </div> <div> <span>div和span标签</span> </div> <div> <span>div:一般用于配合css完成网页的基本布局。</span> </div> <div> <span>span：一般用于配合css修改网页中的一些局部的信息。label绑定表单元素。</span> </div> <div> <span></span> <br> </div> <div> <span>区别：</span> </div> <div> <span>1）div:单独占领一行，span不会单独占一行。</span> </div> <div> <span>2）div:容器基本标签。span:文本标签、超链接、</span> </div> <div> <span>3）容器级标签可以嵌套所有标签。文本级可以嵌套文字/图片/超链接。</span> </div> <div> <span></span> <br> </div> <div> <span>CSS元素的显示模式</span> </div> <div> <span>分类：</span> </div> <div> <span>1.快级元素：独占一行。容器级标签+<p。如果没有设置宽度，默认和父元素一样宽</span> </div> <div> <span>2.行内元素：不会独占一行。文本级标签—<p>。不可以设置宽度和高度。</span> </div> <div> <span>3.行内块级元素：不占一行，又可以设置宽度和高度。img标签</span> </div> <div> <span></span> <br> </div> <div> <span>行内，块级，行内块级间相互转换:</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>display:inline/block/inline-block;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>设置背景图片：如果网页上出现了图片，那么浏览器会再次发送请求获取图片。</span> </div> <div> <span>设置背景图平铺方式：backgroud-repeat。</span> </div> <div> <span>控制背景图片位置：backgroud-position:left top</span> </div> <div> <span>取值：1）居停方位名词 2）具体像素(一定要写单位px)</span> </div> <div> <span></span> <br> </div> <div> <span>CSS精灵图：一种图像的合成技术。减少图片请求次数，降低服务器压力。</span> </div> <div> <span>通过定位找到我们想要的图片。</span> </div> <div> <span>推荐工具：fireworks</span> </div> <div> <span>注意：定位的时候移动的是负数的x和y值。</span> </div> <div> <span></span> <br> </div> <div> <span>边框框属性的格式：</span> </div> <div> <span>1）border:边框的宽度边框的样式边框的颜色。（连写格式）</span> </div> <div> <span>2）border-top，border-bottom，border-left，border-right（连写格式）</span> </div> <div> <span>3) 按照要素，颜色，样式，宽度（border-width、border-style、border-color）（连写格式）</span> </div> <div> <span>例如：(上右下左)</span> </div> <div> <span>border-width：1px 5px 2px 10px</span> </div> <div> <span>border-color: red green blue yellow</span> </div> <div> <span></span> <br> </div> <div> <span>注意：</span> </div> <div> <span>省略左边属性，左边就会和右边一样。</span> </div> <div> <span>同理省略下边，回和上边一样</span> </div> <div> <span>只写一个值，其他值和这个值得属性值一样。</span> </div> <div> <span></span> <br> </div> <div> <span>4）border-top-width等等样式（非连写格式）</span> </div> <div> <span></span> <br> </div> <div> <span>内边距属性：边框和内容之间的距离。</span> </div> <div> <span>设置内边距，标签的大小也会发生变化。</span> </div> <div> <span>1.非连写：padding-top等样式</span> </div> <div> <span>2.连写：padding：(上右下左)同border一样</span> </div> <div> <span>省略左边属性，左边就会和右边一样。</span> </div> <div> <span>同理省略下边，回和上边一样</span> </div> <div> <span>只写一个值，其他值和这个值得属性值一样。</span> </div> <div> <span></span> <br> </div> <div> <span>外边距属性：标签与标签之间的距离。</span> </div> <div> <span>1.非连写：margin-top等</span> </div> <div> <span>2.连写：margin(上右下左)</span> </div> <div> <span></span> <br> </div> <div> <span>注意：外边距没有背景颜色，内边距有背景色</span> </div> <div> <span></span> <br> </div> <div> <span>外边距合并现象：垂直方向外边距不会叠加，会出现合并现象，有多个margin，不会相加，取最大值。</span> </div> <div> <span>盒子模型：html中所有德尔标签都是盒子模型，能够设置宽高，边框，外边距，内边距。</span> </div> <div> <span></span> <br> </div> <div> <span>内容的宽高：width.height设置的属性</span> </div> <div> <span>元素的宽高：边框+内边距+内容的宽高。</span> </div> <div> <span>元素空间的宽高：外边距+边框+内边距+内容的宽高。</span> </div> <div> <span></span> <br> </div> <div> <span>保证增加border/padding元素的宽高不变（box-sizing，css3，内容的宽高减少）</span> </div> <div> <span>box-sizing:content-box 元素宽高=边框+内边距+内容的宽高。</span> </div> <div> <span>box-sizing:border-box 盒子元素宽高不变。元素宽高=内容的宽高</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>1.如果两个盒子是嵌套关系，设置了里面一个盒子的顶部外边距，外面盒子也会同时被顶下拉。</span> </div> <div> <span>2.如果外面盒子不想被顶下来，可以添加边框属性就可以。</span> </div> <div> <span>3.控制嵌套盒子距离，首先考虑 padding。设置父子关系标签属性。</span> </div> <div> <span>4.嵌套关系盒子中，使用margin: 0 auto;水平居中，只对水平方向有效。</span> </div> <div> <span></span> <br> </div> <div> <span>清空默认边距：</span> </div> <div> <span></span> <br> </div> <div> <span>*{</span> </div> <div> <span><span></span>margin:0;</span> </div> <div> <span><span></span>padding:0;</span> </div> <div> <span>}</span> </div> <div> <span>通配符会遍历所有标签，性能不好。</span> </div> <div> <span></span> <br> </div> <div> <span>行高和字号：line-height</span> </div> <div> <span>1）文字在行高中默认为垂直居中。</span> </div> <div> <span>2）盒子高度和行高设置一样（一行文字）</span> </div> <div> <span>3）两行文字居中：padding设置。</span> </div> <div> <span></span> <br> </div> <div> <span>网页布局方式</span> </div> <div> <span>1.标准流排版方式（又叫文档流/普通流）浏览器默认排版方式，（垂直排版（块级），水平排版（行内，行内块级）)</span> </div> <div> <span>2.浮动流排版方式</span> </div> <div> <span>浮动流一种办脱离标准留的排版方式（水平排版，只能设置标签左对齐或者右对齐，没有居中</span> </div> <div> <span>浮动流不能使用margin: 0 auto</span> </div> <div> <span>浮动流不分行内，块级元素，都会显示在同一行，并且块级元素能设置宽高。</span> </div> <div> <span>浮动流中的原素和标准流中的行内块级元素很像。</span> </div> <div> <span></span> <br> </div> <div> <span>浮动元素脱标：</span> </div> <div> <span>脱标：脱离标准流</span> </div> <div> <span>当某一个元素浮动后，那么这个元素看上去就像标准流中删除一样。</span> </div> <div> <span></span> <br> </div> <div> <span>浮动元素高度问题</span> </div> <div> <span>1.标准流中，内容的高度可以撑起父元素的高度。</span> </div> <div> <span>2.在浮动流中，浮动的原始是不能撑起父元素的高度。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>清除浮动方式：</span> </div> <div> <span>1)给前面一个父元素设置高度（最好不要设置高度，用的比较少）</span> </div> <div> <span>2）给后面的盒子添加clear属性。（clear:left；）left/right/both/none</span> </div> <div> <span>注意：当给某个原始添加clear属性，那么这个元素的margin属性会失效。</span> </div> <div> <span> 3）隔墙法</span> </div> <div> <span><span></span>1.外墙法：两个盒子中间添加额外的块级元素（class = “wall”），并设置其clear：both;属性。</span> </div> <div> <span><span></span>注意：外墙法可以让第二个盒子使用margin-top属性，不能让第一个盒子使用margin-bottom<span> </span> <span> </span>属性。所有最好设置中间的块级元素的高度就可以设置两个box之间的间隙。</span> </div> <p></p> <p><span><span></span></span><br></p> <div> <span><span></span>2.内墙法:第一个盒子所有子元素最后添加格外的块级元素（class = “wall”），并设置其clear：both;属性。</span> </div> <div> <span><span></span>注意：外墙法可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom<span> </span> <span> </span>属性。同时也可以设置中间的块级元素的高度就可以设置两个box之间的间隙。</span> </div> <div> <span></span> <br> </div> <div> <span>外墙、内墙之间的区别？</span> </div> <div> <span>1.内墙法可以撑起第一个盒子的高度，外墙法不可以。</span> </div> <div> <span></span> <br> </div> <div> <span>注意：企业中一般不常用隔墙法清除浮动。（结构和样式分离，隔墙法需要添加空标签设置边距，所以不推荐）</span> </div> <div> <span></span> <br> </div> <div> <span>4）使用伪元素选择器添加块级元素，去浮动。（跟内墙法的原理一样，但是是利用css去添加块级元素）</span> </div> <div> <span>.box1::after{</span> </div> <div> <span><span></span>content:””;//子元素内容为空</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span><span></span>height:0px;//高度设置为0</span> </div> <div> <span><span></span>visibility:hidden;//设置子元素不可见</span> </div> <div> <span><span></span>clear:both;</span> </div> <div> <span>}</span> </div> <div> <span>兼容问题：伪元素选择器为css，浏览器版本低的需要在格外添加如下代码：</span> </div> <div> <span>.box1{</span> </div> <div> <span><span></span>*zoom:1;//兼容IE6</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>伪元素选择器（CSS3）：给指定标签的内容前面/后面添加一个子元素。</span> </div> <div> <span><div></span> </div> <div> <span><span></span><p>我是段落1</p></span> </div> <div> <span><span></span>我是文字</span> </div> <div> <span><span></span><p>我是段落2</p></span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>伪元素选择器实现以上代码：</span> </div> <div> <span><div></span> </div> <div> <span><span></span>我是文字</span> </div> <div> <span></div></span> </div> <div> <span></span> <br> </div> <div> <span>css样式代码：</span> </div> <div> <span>div::before{</span> </div> <div> <span><span></span>content:”我是段落1”；</span> </div> <div> <span><span></span>width:50px;</span> </div> <div> <span><span></span>height:50px;</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span>}</span> </div> <div> <span>伪元素选择器格式：</span> </div> <div> <span>标签名称::before{</span> </div> <div> <span><span></span>属性;</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>不显示子元素：</span> </div> <div> <span>div::before{</span> </div> <div> <span><span></span>content:””；</span> </div> <div> <span><span></span>width:50px;</span> </div> <div> <span><span></span>height:0px;//高度设置为0</span> </div> <div> <span><span></span>display:block;</span> </div> <div> <span><span></span>visibility:hidden;//设置子元素不可见</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>5）使用orderflow属性清除浮动：将盒子1样式中添加orderflow就可以实现。</span> </div> <div> <span>orderflow属性作用：</span> </div> <div> <span>1.不想让内容超出标签范围：orderflow:hidden;属性</span> </div> <div> <span>2. 清除浮动</span> </div> <div> <span>3.两个盒子嵌套关系，里边盒子想要设置margion-top,外边盒子不会受影响一起顶下来，并且外边盒子不想设置边框，这时可以给外边的盒子设置orderflow:hidden;属性。</span> </div> <div> <span></span> <br> </div> <div> <span>致命注意点：兼容问题，IE6同样不识别。同伪元素选择其处理方法一样，添加如下代码：</span> </div> <div> <span>.box1{</span> </div> <div> <span><span></span>*zoom:1;//兼容IE6</span> </div> <div> <span>}</span> </div> <div> <span></span> <br> </div> <div> <span>3.定位流排版方式</span> </div> <div> <span>1）相对定位：</span> </div> <div> <span>1.1 不脱离标准流，相对自己以前在标准流中的位置移动距离。</span> </div> <div> <span>position：relative，需要配合top:20px，right:20px，等属性一起使用。</span> </div> <div> <span>1.同一个方向上的定位属性只能使用一个。</span> </div> <div> <span>1.3 区分块级，行内，行内块级</span> </div> <div> <span>1.4 设置margin/padding等属性会影响标准流（会影响给定位之前的位置，而不是定位之后的位置）</span> </div> <div> <span>2）绝对定位（跟浮动流类似）：相对于body进行定位，左，上，右，下。</span> </div> <div> <span>2.1 脱离标准流</span> </div> <div> <span>2.2 不区分块级，行内，行内块级</span> </div> <div> <span></span> <br> </div> <div> <span>规律：</span> </div> <div> <span>无论有没有祖先元素，都会以body作为参考点。</span> </div> <div> <span> 如果一个绝对定位的元素有祖先元素，并且祖先元素（嵌套层级可以是多级）也是定位流（相对定位，绝对定位，固定定位），那么就以定位流的那个祖先元素作为参考点。注意静态定位不可以。</span> </div> <div> <span>多个祖先元素都为定位流，以离该元素最近的那个静态定位作为参考点。</span> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>绝对定位元素以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网易的宽度和高度作为参考点。</span> </div> <div> <span>绝对定位的元素会忽略祖先元素的padding属性。</span> </div> <div> <span></span> <br> </div> <div> <span>相对定位弊端：相对定位不会脱离标准流，会继续在标准流中占用一份空间，不利于布局。</span> </div> <div> <span>绝对定位弊端:<span> </span>默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化。</span> </div> <div> <span>子绝父相（使用绝对定位和相对定位混合使用）：子元素用绝对定位, 父元使用相对定位。</span> </div> <div> <span></span> <br> </div> <div> <span></span> <br> </div> <div> <span>让局对定位元素水平居中：</span> </div> <div> <span>div{</span> </div> <div> <span><span></span>position:absolute;</span> </div> <div> <span><span></span>left:50%;</span> </div> <div> <span><span></span>margin-left：-150px;(该元素宽度一半 )</span> </div> <div> <span>}</span> </div> <div> <span>3）固定定位：位置固定，不随滚动条滚动。多用于设置背景图片。</span> </div> <div> <span>3.1 固定定位元素脱离标准流。</span> </div> <div> <span>3.2 不区分块级，行内，行内块级</span> </div> <div> <span></span> <br> </div> <div> <span>ie6不支持固定定位。</span> </div> <div> <span></span> <br> </div> <div> <span>4）静态定位：默认就是静态定位</span> </div> <div> <span></span> <br> </div> <div> <span>z-index属性：默认情况下所有的元素都有一个默认的z-index属性，取值为0.</span> </div> <div> <span>作用：专门用于控制定位流元素的覆盖关系的。</span> </div> <div> <span></span> <br> </div> <div> <span>默认情况下，定位流的元素会盖住标准留的元素。</span> </div> <div> <span>默认情况加定位流的元素后面变形的会盖住前面编写的元素。</span> </div> <div> <span>如果定位流的元素设置了z-index属性，谁的z-index属性比较大，谁就显示在上面。</span> </div> <div> <span></span> <br> </div> <div> <span>注意点：</span> </div> <div> <span>1.从父现象</span> </div> <div> <span>1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。</span> </div> <div> <span>1.2 如果两个元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大，谁就显示在上面。</span> </div> <div> <span><br></span> </div> <div> <span>未完待续...</span> </div> <div> <span><br></span> </div> <br> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1306161306126028800"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html5,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</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><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> <span class="text-muted">周bro</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/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> <span class="text-muted">琪33</span> <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> <span class="text-muted">AnFany</span> <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> <span class="text-muted">Bearjumpingcandy</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> <span class="text-muted">Sardar_</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> <span class="text-muted">Kason晨</span> <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835221779212234752.htm" title="清除 Conda 缓存" target="_blank">清除 Conda 缓存</a> <span class="text-muted">Dmatteratall</span> <a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> <span class="text-muted">diygwcom</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835186351805394944.htm" title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个</div> </li> <li><a href="/article/1835151269904347136.htm" title="10/24 每周学习总结5" target="_blank">10/24 每周学习总结5</a> <span class="text-muted">木木ainiks</span> <a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return</div> </li> <li><a href="/article/1835123524155568128.htm" title="HTML5概述" target="_blank">HTML5概述</a> <span class="text-muted">WFIT~SKY</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/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>1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1</div> </li> <li><a href="/article/1835111175398977536.htm" title="HTML添加文字" target="_blank">HTML添加文字</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/html5/1.htm">html5</a> <div>一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长</div> </li> <li><a href="/article/1835109157406076928.htm" title="CSS中如何实现鼠标悬停效果？" target="_blank">CSS中如何实现鼠标悬停效果？</a> <span class="text-muted">神明木佑</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h</div> </li> <li><a href="/article/1835091010678517760.htm" title="js的书写位置和css的书写位置的区别？为什么要这样写？" target="_blank">js的书写位置和css的书写位置的区别？为什么要这样写？</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）</div> </li> <li><a href="/article/1835082840174325760.htm" title="【拖拽】自定义拖拽图标" target="_blank">【拖拽】自定义拖拽图标</a> <span class="text-muted">风露_</span> <div>一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed</div> </li> <li><a href="/article/1835048766864977920.htm" title="【H2O2|全栈】关于CSS（3）CSS基础（三）" target="_blank">【H2O2|全栈】关于CSS（3）CSS基础（三）</a> <span class="text-muted">过期的H2O2</span> <a class="tag" taget="_blank" href="/search/%E3%80%90H2O2%E3%80%91CSS%E5%85%A5%E9%97%A8/1.htm">【H2O2】CSS入门</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：</div> </li> <li><a href="/article/1835010195202338816.htm" title="css鼠标移上去向上移动,css3鼠标移动图片上移效果" target="_blank">css鼠标移上去向上移动,css3鼠标移动图片上移效果</a> <span class="text-muted">yo xiba</span> <a class="tag" taget="_blank" href="/search/css%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E5%8E%BB%E5%90%91%E4%B8%8A%E7%A7%BB%E5%8A%A8/1.htm">css鼠标移上去向上移动</a> <div>css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:</div> </li> <li><a href="/article/1835002124283506688.htm" title="css3实现鼠标放到图标上自动切换图标" target="_blank">css3实现鼠标放到图标上自动切换图标</a> <span class="text-muted">黄丫丫07</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}</div> </li> <li><a href="/article/74.htm" title="sql统计相同项个数并按名次显示" target="_blank">sql统计相同项个数并按名次显示</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20</div> </li> <li><a href="/article/201.htm" title="Android+Jquery Mobile学习系列-目录" target="_blank">Android+Jquery Mobile学习系列-目录</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/JQuery+Mobile/1.htm">JQuery Mobile</a> <div>最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。从现在起，往后一段时间，我打算</div> </li> <li><a href="/article/328.htm" title="如何给线程池命名" target="_blank">如何给线程池命名</a> <span class="text-muted">daysinsun</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a> <div> 在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下： public class Named</div> </li> <li><a href="/article/455.htm" title="IE 中"HTML Parsing Error:Unable to modify the parent container element before the" target="_blank">IE 中"HTML Parsing Error:Unable to modify the parent container element before the</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/%E8%A7%A3%E6%9E%90/1.htm">解析</a><a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/readyState/1.htm">readyState</a> <div> 错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed" 现象：同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。</div> </li> <li><a href="/article/582.htm" title="java上传" target="_blank">java上传</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact</div> </li> <li><a href="/article/709.htm" title="SpringMVC配置学习" target="_blank">SpringMVC配置学习</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>spring MVC配置详解现在主流的Web MVC框架除了Struts这个主力外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi</div> </li> <li><a href="/article/836.htm" title="spring mvc-jfreeChart 柱图(1)" target="_blank">spring mvc-jfreeChart 柱图(1)</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/jfreechart/1.htm">jfreechart</a> <div>第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可；第二步：配置web.xml; web.xml代码如下 <servlet> <servlet-name>jfreechart</servlet-nam</div> </li> <li><a href="/article/963.htm" title="我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer" target="_blank">我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a> <div>PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P</div> </li> <li><a href="/article/1090.htm" title="java 线程池使用 Runnable&Callable&Future" target="_blank">java 线程池使用 Runnable&Callable&Future</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/callable/1.htm">callable</a><a class="tag" taget="_blank" href="/search/future/1.htm">future</a> <div>1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool(); 2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin</div> </li> <li><a href="/article/1217.htm" title="XML语法元素结构的总结" target="_blank">XML语法元素结构的总结</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E7%BB%93%E6%9E%84/1.htm">树结构</a> <div>1.XML介绍1969年 gml (主要目的是要在不同的机器进行通信的数据规范)1985年 sgml standard generralized markup language1993年 html(www网)1998年 xml extensible markup language</div> </li> <li><a href="/article/1344.htm" title="改变eclipse编码格式" target="_blank">改变eclipse编码格式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F/1.htm">编码格式</a> <div>1.改变整个工作空间的编码格式改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。 Eclipse->window->preferences->General->workspace-</div> </li> <li><a href="/article/1471.htm" title="javascript中return的设计缺陷" target="_blank">javascript中return的设计缺陷</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a> <div>代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l</div> </li> <li><a href="/article/1598.htm" title="【持久化框架MyBatis3八】Spring集成MyBatis3" target="_blank">【持久化框架MyBatis3八】Spring集成MyBatis3</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a> <div>pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> &</div> </li> <li><a href="/article/1725.htm" title="java web项目启动时自动加载自定义properties文件" target="_blank">java web项目启动时自动加载自定义properties文件</a> <span class="text-muted">bitray</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/1.htm">相对路径</a> <div>创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des</div> </li> <li><a href="/article/1852.htm" title="用nginx区分文件大小做出不同响应" target="_blank">用nginx区分文件大小做出不同响应</a> <span class="text-muted">ronin47</span> <div>昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布</div> </li> <li><a href="/article/1979.htm" title="java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大" target="_blank">java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1</div> </li> <li><a href="/article/2106.htm" title="翟鸿燊老师语录" target="_blank">翟鸿燊老师语录</a> <span class="text-muted">ccii</span> <a class="tag" taget="_blank" href="/search/%E7%BF%9F%E9%B8%BF%E7%87%8A/1.htm">翟鸿燊</a> <div>一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道</div> </li> <li><a href="/article/2233.htm" title="[光速与宇宙]进行光速飞行的一些问题" target="_blank">[光速与宇宙]进行光速飞行的一些问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div> 在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家仅仅是猜想。。。未经官方证实 1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？下面我来告诉</div> </li> <li><a href="/article/2360.htm" title="oracle undo解析" target="_blank">oracle undo解析</a> <span class="text-muted">cwqcwqmax9</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>oracle undo解析2012-09-24 09:02:01 我来说两句作者：虫师收藏我要投稿 Undo是干嘛用的？ &nb</div> </li> <li><a href="/article/2487.htm" title="java中各种集合的详细介绍" target="_blank">java中各种集合的详细介绍</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88/1.htm">集合</a> <div>一，java中各种集合的关系图 Collection 接口的接口对象的集合 ├ List 子接口 &n</div> </li> <li><a href="/article/2614.htm" title="卸载windows服务的方法" target="_blank">卸载windows服务的方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a> <div>卸载Windows服务的方法在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他</div> </li> <li><a href="/article/2741.htm" title="Warning: The Copy Bundle Resources build phase contains this target's Info.plist" target="_blank">Warning: The Copy Bundle Resources build phase contains this target's Info.plist</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a> <div> http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle </div> </li> <li><a href="/article/2868.htm" title="2014之C++学习笔记（一）" target="_blank">2014之C++学习笔记（一）</a> <span class="text-muted">Etwo</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Etwo/1.htm">Etwo</a><a class="tag" taget="_blank" href="/search/Etwo/1.htm">Etwo</a><a class="tag" taget="_blank" href="/search/iterator/1.htm">iterator</a><a class="tag" taget="_blank" href="/search/%E8%BF%AD%E4%BB%A3%E5%99%A8/1.htm">迭代器</a> <div> 已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型</div> </li> <li><a href="/article/2995.htm" title="js跨越获取数据问题记录" target="_blank">js跨越获取数据问题记录</a> <span class="text-muted">haifengwuch</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>js的跨越问题，普通的ajax无法获取服务器返回的值。第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca</div> </li> <li><a href="/article/3122.htm" title="蓝色jQuery导航条" target="_blank">蓝色jQuery导航条</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<</div> </li> <li><a href="/article/3249.htm" title="linux部署jdk,tomcat,mysql" target="_blank">linux部署jdk,tomcat,mysql</a> <span class="text-muted">kerryg</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1、安装java环境jdk: 一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。 1.1）、卸载：（rpm -qa :查询已经安装哪些软件包； rmp -q 软件包：查询指定包是否已</div> </li> <li><a href="/article/3376.htm" title="DOMContentLoaded VS onload VS onreadystatechange" target="_blank">DOMContentLoaded VS onload VS onreadystatechange</a> <span class="text-muted">mutongwu</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra</div> </li> <li><a href="/article/3503.htm" title="sql批量插入数据" target="_blank">sql批量插入数据</a> <span class="text-muted">qifeifei</span> <a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div>hi，自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。 WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a</div> </li> <li><a href="/article/3630.htm" title="log4j打印日志文件如何实现相对路径到项目工程下" target="_blank">log4j打印日志文件如何实现相对路径到项目工程下</a> <span class="text-muted">thinkfreer</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a> <div>最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下需求：用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名</div> </li> <li><a href="/article/3757.htm" title="linux下mysql-5.6.23.tar.gz安装与配置" target="_blank">linux下mysql-5.6.23.tar.gz安装与配置</a> <span class="text-muted">笑我痴狂</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>