CSS基础知识

一、使用心得

ul>li

1. 使用li时，用list-style：none去掉左边的无序小圆点
2. 在设置li同一行显示时，转换为行内块inline-block会有显示问题（未找到原因），使用浮动会正确显示。

textarea

textarea文本输入框在写入时，若开始标签和结束标签不在同一行，则文本框输入的起使位置会有一小段距离，推荐写在同一行

行内元素

常见行内元素只有 , ,, , ,</code></p> <h2>二、定位</h2> <p>定义</p> <p><mark>定位</mark>：将盒子定在某一个位置，其实质也是在摆放盒子，按照定位的方式移动盒子</p> <p>定位 = 定位模式 + 边偏移</p> <ol> <li> <p>定位模式： 决定元素的定位方式，通过CSS的<code>position</code>属性来设置其值可以分为四个：</p> <table> <thead> <tr> <th>值</th> <th>语义</th> </tr> </thead> <tbody> <tr> <td>static</td> <td>静态定位</td> </tr> <tr> <td>relative</td> <td>相对定位</td> </tr> <tr> <td>absolute</td> <td>绝对定位</td> </tr> <tr> <td>fixed</td> <td>固定定位</td> </tr> </tbody> </table></li> <li> <p>边偏移：决定盒子最终移动到的位置，有top，bottom，left和right四个属性。</p> <table> <thead> <tr> <th>边偏移属性</th> <th>示例</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>top</td> <td>top：80px</td> <td><mark>顶</mark>端偏移量，定义元素相对于其父元素<mark>上</mark>边线的距离</td> </tr> <tr> <td>bottom</td> <td>bottom：80px</td> <td><mark>底</mark>部偏移量，定义元素相对于其父元素<mark>下</mark>边线的距离</td> </tr> <tr> <td>left</td> <td>left：80px</td> <td><mark>左</mark>侧偏移量，定义元素相对于其父元素<mark>左</mark>边线的距离</td> </tr> <tr> <td>right</td> <td>right：80px</td> <td><mark>右</mark>侧偏移量，定义元素相对于其父元素<mark>右</mark>边线的距离</td> </tr> </tbody> </table></li> </ol> <p><mark>静态定位：</mark></p> <p>静态定位是元素的默认定位方式，无定位的意思，基本不使用</p> <p>语法：</p> <p><code>选择器{ position： static}</code></p> <ul> <li>静态定位按照标准流特性拜访位置，没有边偏移</li> </ul> <h3>相对定位：</h3> <p>相对定位时元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）</p> <p>语法：</p> <p><code>选择器{ position： relative}</code></p> <ul> <li>他是相对于自身原来的位置来移动的</li> <li>原来在标准流的位置继续占有，后面的盒子不会跑上来（不脱标，保留原来位置)</li> <li>典型应用是来给绝对应用当爹的</li> </ul> <h3>绝对定位：</h3> <p>绝对定位是元素在移动的时候，是相对与他的祖先元素来说的（拼爹型）</p> <p>语法：</p> <p><code>选择器{ position： absolute}</code></p> <ul> <li> <p>如果没有祖先元素或者祖先元素没有定位，则以浏览器为定位标准（Document文档）</p> </li> <li> <p>如果祖先元素有定位（相对，绝对，固定），则以最近一级的祖先元素为定位标准。</p> </li> <li> <p>绝对定位不再占有原先的位置。（脱标）</p> </li> </ul> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 子 绝 父 相 \textcolor{red}{子绝父相} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">子</span><span class="mord cjk_fallback" style="color: red;">绝</span><span class="mord cjk_fallback" style="color: red;">父</span><span class="mord cjk_fallback" style="color: red;">相</span></span></span></span></span>：子级使用绝对定位，父级使用相对定位。</p> <ol> <li>子级盒子绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子</li> <li>父盒子需要加定位限制子盒子</li> <li>父盒子布局时，需要占有位置，因此父盒子只能是相对定位。</li> <li>如果一个盒子既有left属性，又有right属性，会默认执行left（同理执行top属性）。</li> </ol> <h3>固定定位:</h3> <p>固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不变。</p> <p>语法：</p> <p><code>选择器 { position: fixed}</code></p> <ul> <li> <p>以浏览器的可视窗口为参照点移动元素位置。</p> </li> <li> <p>跟父元素没有任何关系</p> </li> <li> <p>不随滚动条滚动</p> </li> <li> <p>固定定位不占有原先的位置（脱标），其实固定定位也可以看作是特殊的绝对定位。</p> </li> </ul> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 固 定 定 位 小 技 巧 ： 固 定 在 版 心 右 侧 位 置 ： \textcolor{red}{固定定位小技巧：固定在版心右侧位置：} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">固</span><span class="mord cjk_fallback" style="color: red;">定</span><span class="mord cjk_fallback" style="color: red;">定</span><span class="mord cjk_fallback" style="color: red;">位</span><span class="mord cjk_fallback" style="color: red;">小</span><span class="mord cjk_fallback" style="color: red;">技</span><span class="mord cjk_fallback" style="color: red;">巧</span><span class="mord cjk_fallback" style="color: red;">：</span><span class="mord cjk_fallback" style="color: red;">固</span><span class="mord cjk_fallback" style="color: red;">定</span><span class="mord cjk_fallback" style="color: red;">在</span><span class="mord cjk_fallback" style="color: red;">版</span><span class="mord cjk_fallback" style="color: red;">心</span><span class="mord cjk_fallback" style="color: red;">右</span><span class="mord cjk_fallback" style="color: red;">侧</span><span class="mord cjk_fallback" style="color: red;">位</span><span class="mord cjk_fallback" style="color: red;">置</span><span class="mord cjk_fallback" style="color: red;">：</span></span></span></span></span></p> <p>小算法：</p> <ol> <li> <p>让固定定位的盒子left：50%，走到可视区域（也是版心区域）的一半位置。</p> </li> <li> <p>让固定定位的盒子margin-left：版心宽度的一半距离，走到版心的右侧。</p> </li> </ol> <h3>粘性定位（了解）</h3> <p>粘性定位可以被认为时相对定位和固定定位的呼玛河，</p> <p>语法：</p> <p><code>选择器 { position： sticky; top:10px}</code></p> <p>粘性定位的特点：</p> <ol> <li>以浏览器的可视窗口为参照点移动元素（固定定位特点）</li> <li>粘性定位占有原先的位置（相对定位特点）</li> <li><mark>必须添加top，left，bottom，right中的一个才有效</mark></li> <li>通常跟页面滚动搭配使用，兼容性较差，IE不支持</li> </ol> <h3>总结：</h3> <table> <thead> <tr> <th>定位模式</th> <th>是否脱标</th> <th>移动位置</th> <th>是否常用</th> </tr> </thead> <tbody> <tr> <td>static</td> <td>否</td> <td>不能使用边偏移</td> <td>很少</td> </tr> <tr> <td>relative</td> <td>否（占有位置）</td> <td>相对于自身原先位置移动</td> <td>常用</td> </tr> <tr> <td>absolute</td> <td>是（脱标）</td> <td>相对于带有定位的祖先盒子</td> <td>常用</td> </tr> <tr> <td>fixed</td> <td>是（脱标）</td> <td>相对于浏览器可视区</td> <td>常用</td> </tr> <tr> <td>sticky</td> <td>否（占有位置）</td> <td>相对于浏览器可视区</td> <td>当前阶段少（兼容差）</td> </tr> </tbody> </table> <p>定位叠放次序 z-index:</p> <p>使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的次序（z是z轴）</p> <p>语法：</p> <p><code>选择器 { z-index： 1}</code></p> <ul> <li>数值可以是正整数，负数或0，数值越大，盒子越靠上；</li> <li>默认auto，如果数值相同，按照书写顺序排序；</li> <li>数值不能加单位，只有定位的盒子才有z-index属性；</li> </ul> <h3>拓展</h3> <ol> <li>绝对定位的盒子居中：</li> </ol> <p>加了绝对定位的盒子不能通过<code>margin：0 auto</code>水平居中，但是可以通过以下计算方式实现水平和垂直居中。</p> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 小 算 法 ： \textcolor{red}{小算法：} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">小</span><span class="mord cjk_fallback" style="color: red;">算</span><span class="mord cjk_fallback" style="color: red;">法</span><span class="mord cjk_fallback" style="color: red;">：</span></span></span></span></span></p> <p>left：50%走父容器的百分之五十，</p> <p>margin-left：自身宽度的一半的<span class="katex--inline"><span class="katex"><span class="katex-mathml"> 负 值 \textcolor{red}{负值} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">负</span><span class="mord cjk_fallback" style="color: red;">值</span></span></span></span></span>，向左移动自身宽度的一半。</p> <p>垂直居中同理</p> <ol start="2"> <li>定位特殊性：</li> </ol> <p>1.行内元素加绝对或固定定位，可以直接设置高度和宽度（加浮动和转换块元素也可以）</p> <p>2.块级元素添加绝对或固定定位，如果不给宽度和高度，默认大小是内容大小；</p> <p>3.脱标的盒子不会触发外边距塌陷：浮动元素，绝对、固定定位元素的都不会触发外边距合并的问题。</p> <ol start="3"> <li> <p>绝对定位（固定定位）会完全压住下面的盒子</p> <p>浮动的元素只会压住下面标准流的盒子，但不会压住盒子里的文字图片等，</p> <p>但是绝对定位（固定定位）会压住下面标准流的所有内容</p> <p>（浮动最初产生的目的是让文字环绕图片）</p> </li> </ol> <h2>三、元素的显示与隐藏</h2> <p>类似网站广告，点击关闭后不见了，刷新后又重新出现，或者导航栏，鼠标覆盖上时出现，移开后隐藏；</p> <p><mark>本质</mark>：让一个元素在页面中隐藏或者显示出来</p> <ol> <li>display 显示隐藏</li> <li>visibility 显示隐藏</li> <li>overflow 溢出显示隐藏</li> </ol> <h3>display属性</h3> <p>display属性用于设置一个元素如何显示：</p> <ul> <li>display：none； 隐藏对象（只是隐藏，不会删除，但不再占有位置）</li> <li>display：block； 除了转换块级元素之外，还有显示元素的意思</li> </ul> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> d i s p l a y 隐 藏 元 素 后 ， 其 位 置 不 再 保 留 ， 后 面 的 盒 子 会 上 升 \textcolor{red}{display隐藏元素后，其位置不再保留，后面的盒子会上升} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord mathdefault" style="color: red;">d</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">s</span><span class="mord mathdefault" style="color: red;">p</span><span class="mord mathdefault" style="margin-right: 0.01968em; color: red;">l</span><span class="mord mathdefault" style="color: red;">a</span><span class="mord mathdefault" style="margin-right: 0.03588em; color: red;">y</span><span class="mord cjk_fallback" style="color: red;">隐</span><span class="mord cjk_fallback" style="color: red;">藏</span><span class="mord cjk_fallback" style="color: red;">元</span><span class="mord cjk_fallback" style="color: red;">素</span><span class="mord cjk_fallback" style="color: red;">后</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">其</span><span class="mord cjk_fallback" style="color: red;">位</span><span class="mord cjk_fallback" style="color: red;">置</span><span class="mord cjk_fallback" style="color: red;">不</span><span class="mord cjk_fallback" style="color: red;">再</span><span class="mord cjk_fallback" style="color: red;">保</span><span class="mord cjk_fallback" style="color: red;">留</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">后</span><span class="mord cjk_fallback" style="color: red;">面</span><span class="mord cjk_fallback" style="color: red;">的</span><span class="mord cjk_fallback" style="color: red;">盒</span><span class="mord cjk_fallback" style="color: red;">子</span><span class="mord cjk_fallback" style="color: red;">会</span><span class="mord cjk_fallback" style="color: red;">上</span><span class="mord cjk_fallback" style="color: red;">升</span></span></span></span></span></p> <p>应用及其广泛，搭配<code>javascript</code>可以做出很多网页特效。</p> <h3>visibility属性</h3> <p>用于指定一个元素可见还是隐藏</p> <p>语法：</p> <p><code>选择器 { visibility： inherit / visible / hidden / collapse}</code></p> <p>inhert：继承上一个父对象的可见性；</p> <p>visible：可见</p> <p>hidden：隐藏</p> <p>collapse：主要用来隐藏表格的行或列，隐藏（不是删除）后的行或列也可以被其他内容使用，对于表格外的其 他对象，其作用等同于hidden。</p> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> v i s i b i l i t y 隐 藏 元 素 后 ， 继 续 占 有 原 来 的 位 置 \textcolor{red}{visibility隐藏元素后，继续占有原来的位置} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord mathdefault" style="margin-right: 0.03588em; color: red;">v</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">s</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">b</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="margin-right: 0.01968em; color: red;">l</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">t</span><span class="mord mathdefault" style="margin-right: 0.03588em; color: red;">y</span><span class="mord cjk_fallback" style="color: red;">隐</span><span class="mord cjk_fallback" style="color: red;">藏</span><span class="mord cjk_fallback" style="color: red;">元</span><span class="mord cjk_fallback" style="color: red;">素</span><span class="mord cjk_fallback" style="color: red;">后</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">继</span><span class="mord cjk_fallback" style="color: red;">续</span><span class="mord cjk_fallback" style="color: red;">占</span><span class="mord cjk_fallback" style="color: red;">有</span><span class="mord cjk_fallback" style="color: red;">原</span><span class="mord cjk_fallback" style="color: red;">来</span><span class="mord cjk_fallback" style="color: red;">的</span><span class="mord cjk_fallback" style="color: red;">位</span><span class="mord cjk_fallback" style="color: red;">置</span></span></span></span></span></p> <p>如果隐藏元素后想要原来的位置，使用visibility：hidden</p> <p>如果隐藏元素后不想要原来的位置了，使用display：none（用处更多）</p> <h3>overflow溢出</h3> <p>overflow属性指定了溢出的内容是否可见</p> <p>语法：</p> <p><code>选择器 { overflow： visible / hidden / auto / scroll}</code></p> <p>visible： 超出尺寸的部分仍然显示</p> <p>hidden： 超出尺寸的部分隐藏</p> <p>auto： 根据是否超出添加滚动条</p> <p>scroll： 给盒子添加横向和竖向两个滚动条（无论是否有超出部分）</p> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 如 果 有 定 位 的 盒 子 ， 慎 用 o v e r f l o w ： h i d d e n ， 因 为 他 会 隐 藏 多 余 的 部 分 \textcolor{hotpink}{如果有定位的盒子，慎用overflow：hidden，因为他会隐藏多余的部分} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord cjk_fallback" style="color: hotpink;">如</span><span class="mord cjk_fallback" style="color: hotpink;">果</span><span class="mord cjk_fallback" style="color: hotpink;">有</span><span class="mord cjk_fallback" style="color: hotpink;">定</span><span class="mord cjk_fallback" style="color: hotpink;">位</span><span class="mord cjk_fallback" style="color: hotpink;">的</span><span class="mord cjk_fallback" style="color: hotpink;">盒</span><span class="mord cjk_fallback" style="color: hotpink;">子</span><span class="mord cjk_fallback" style="color: hotpink;">，</span><span class="mord cjk_fallback" style="color: hotpink;">慎</span><span class="mord cjk_fallback" style="color: hotpink;">用</span><span class="mord mathdefault" style="color: hotpink;">o</span><span class="mord mathdefault" style="margin-right: 0.03588em; color: hotpink;">v</span><span class="mord mathdefault" style="color: hotpink;">e</span><span class="mord mathdefault" style="margin-right: 0.02778em; color: hotpink;">r</span><span class="mord mathdefault" style="margin-right: 0.10764em; color: hotpink;">f</span><span class="mord mathdefault" style="margin-right: 0.01968em; color: hotpink;">l</span><span class="mord mathdefault" style="color: hotpink;">o</span><span class="mord mathdefault" style="margin-right: 0.02691em; color: hotpink;">w</span><span class="mord cjk_fallback" style="color: hotpink;">：</span><span class="mord mathdefault" style="color: hotpink;">h</span><span class="mord mathdefault" style="color: hotpink;">i</span><span class="mord mathdefault" style="color: hotpink;">d</span><span class="mord mathdefault" style="color: hotpink;">d</span><span class="mord mathdefault" style="color: hotpink;">e</span><span class="mord mathdefault" style="color: hotpink;">n</span><span class="mord cjk_fallback" style="color: hotpink;">，</span><span class="mord cjk_fallback" style="color: hotpink;">因</span><span class="mord cjk_fallback" style="color: hotpink;">为</span><span class="mord cjk_fallback" style="color: hotpink;">他</span><span class="mord cjk_fallback" style="color: hotpink;">会</span><span class="mord cjk_fallback" style="color: hotpink;">隐</span><span class="mord cjk_fallback" style="color: hotpink;">藏</span><span class="mord cjk_fallback" style="color: hotpink;">多</span><span class="mord cjk_fallback" style="color: hotpink;">余</span><span class="mord cjk_fallback" style="color: hotpink;">的</span><span class="mord cjk_fallback" style="color: hotpink;">部</span><span class="mord cjk_fallback" style="color: hotpink;">分</span></span></span></span></span></p> <h2>四、精灵图</h2> <p>减少服务器频繁的接收与发送请求</p> <p>原理：用一张大的图片装很多小图片，通常装背景图</p> <p><mark>核心</mark>:</p> <ol> <li>主要针对背景图片使用，就是把多个小背景图整合到一张大图片当中</li> <li>移动背景图片位置，可以使用background-position；</li> <li>移动的距离就是这个目标图片的x和y坐标；</li> <li>一般情况下都是往上和往左移动，因此数值通常为负数；</li> <li>使用精灵图的时候需要精确测量，每个小背景图片的大小和位置</li> </ol> <h2>五、字体图标（iconfont）</h2> <p>主要用于显示网页中通用，常用的一些小图标，<mark>展示的是图标，本质是文字</mark></p> <ul> <li>遇到结构和样式比较简单的小图标，可以用字体图标来做</li> <li>如果遇到稍微复杂的背景图，选择精灵图</li> </ul> <p>使用方法：</p> <ol> <li>去icomoon下载需要的图标并解压</li> <li>将fonts文件复制到运行文件目录下</li> <li>CSS中导入icomoon字体样式（去style.css文件中复制）</li> <li>打开demo.html网页，复制小图标</li> <li>修改html中的文字样式（font-family：‘icomoon’）</li> </ol> <h2>六、CSS制作三角形</h2> <p>原理：</p> <p>对空盒子设置宽高都为0；边框设置为实心，四边均为三角形，设置另外三边边框为不可见（transparent）</p> <p><a href="http://img.e-com-net.com/image/info8/edf1aeb39513486bbb0e50a62c988113.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/edf1aeb39513486bbb0e50a62c988113.png" alt="CSS基础知识_第1张图片" width="195" height="167" style="border:1px solid black;"></a></p> <h2>七、CSS用户界面样式</h2> <h3>7.1鼠标样式cursor</h3> <p><code>li {cursor:pointer;}</code></p> <p>设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标样式；</p> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>default</td> <td>默认指针</td> </tr> <tr> <td>pointer</td> <td>小手指，通常适用链接</td> </tr> <tr> <td>move</td> <td>移动，十字形状</td> </tr> <tr> <td>text</td> <td>文本</td> </tr> <tr> <td>not-allowed</td> <td>禁止，红色禁止符号</td> </tr> </tbody> </table> <h3>7.2轮廓线 outline</h3> <p>给表单添加outline：0； 或者outline： none；样式之后，可以去掉默认的蓝色轮廓线。</p> <p><code>input {outline: 0;}</code>或者<code>input {outline: none;}</code></p> <h3>7.3防止拖拽文本域 resize</h3> <p>实际开发中，文本域右下角拖拽会影响其他盒子排布，因此要写死，防止拖拽。</p> <p><code>textarea {resize: none;}</code></p> <h3>7.4 vertical-align 属性应用</h3> <p>CSS的vertical-align属性使用场景: 经常用于设置==图片或者表单（行内块元素）==和文字垂直对齐。</p> <p>官方解释： 用于设置一个元素的<mark>垂直</mark>对齐方式，但是他只针对于行内元素或者行内块元素有效（块级元素无效）。</p> <p>语法：</p> <p><code>vertical-align: baseline|top|middle|bottom;</code><br> <a href="http://img.e-com-net.com/image/info8/f9a82ddb61ba4347be871701317f2f0e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f9a82ddb61ba4347be871701317f2f0e.jpg" alt="CSS基础知识_第2张图片" width="650" height="153" style="border:1px solid black;"></a></p> <p>图片，表单都属于行内块元素，默认的vertical-align是基线对齐（baseline）。</p> <p>解决图片底部默认空白缝隙问题：</p> <p>bug： 图片底测有空白缝隙，原因是行内块元素会和文字基线对齐</p> <p>主要解决方法有两种：</p> <ol> <li> <p>给图片添加vertical-align：middle|top|bottom等（<mark>推荐做法</mark>）</p> </li> <li> <p>把图片转换成块级元素display：block（块级元素无法应用vertical-align属性，因此基线对齐不起作用）</p> </li> </ol> <h3>7.5 溢出的文字省略号显示</h3> <p><mark>单行</mark>文本溢出显示省略号–必须满足三个条件：</p> <pre><code class="prism language-css"><span class="token comment">/*1. 先强制一行内显示文本 * / white-space： nowrap； （默认normal 自动换行） /*2. 超出的部分隐藏 */</span> overflow： hidden； <span class="token comment">/*3. 文字用省略号代替超出的部分 */</span> text-overflow： ellipsis； </code></pre> <p><mark>多行</mark>文本溢出显示省略号满足条件：</p> <p>多行文本溢出显示省略号有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）</p> <pre><code class="prism language-css"><span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token property">text-overflow</span><span class="token punctuation">:</span>ellipsis<span class="token punctuation">;</span> <span class="token comment">/* 弹性伸缩盒子模型显示 */</span> <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span> <span class="token comment">/* 限制在一个块元素显示的文本的行数 */</span> <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token comment">/* 设置或检索伸缩盒对象的子元素的排列方式 */</span> <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span>vertical<span class="token punctuation">;</span> </code></pre> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 推 荐 后 台 人 员 实 现 这 个 效 果 ， 可 以 控 制 字 数 ， 操 作 更 简 单 \textcolor{red}{推荐后台人员实现这个效果，可以控制字数，操作更简单} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">推</span><span class="mord cjk_fallback" style="color: red;">荐</span><span class="mord cjk_fallback" style="color: red;">后</span><span class="mord cjk_fallback" style="color: red;">台</span><span class="mord cjk_fallback" style="color: red;">人</span><span class="mord cjk_fallback" style="color: red;">员</span><span class="mord cjk_fallback" style="color: red;">实</span><span class="mord cjk_fallback" style="color: red;">现</span><span class="mord cjk_fallback" style="color: red;">这</span><span class="mord cjk_fallback" style="color: red;">个</span><span class="mord cjk_fallback" style="color: red;">效</span><span class="mord cjk_fallback" style="color: red;">果</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">可</span><span class="mord cjk_fallback" style="color: red;">以</span><span class="mord cjk_fallback" style="color: red;">控</span><span class="mord cjk_fallback" style="color: red;">制</span><span class="mord cjk_fallback" style="color: red;">字</span><span class="mord cjk_fallback" style="color: red;">数</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">操</span><span class="mord cjk_fallback" style="color: red;">作</span><span class="mord cjk_fallback" style="color: red;">更</span><span class="mord cjk_fallback" style="color: red;">简</span><span class="mord cjk_fallback" style="color: red;">单</span></span></span></span></span></p> <h3>7.6 常见布局技巧</h3> <ol> <li>margin负值的运用</li> <li>文字围绕浮动元素</li> <li>行内块的巧妙运用</li> <li>css三角强化</li> </ol> <p><strong>1.margin负值运用：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/a6336e63aaf54e2fb16b5d25f8a7ddb7.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6336e63aaf54e2fb16b5d25f8a7ddb7.png" alt="CSS基础知识_第3张图片" width="654" height="230" style="border:1px solid black;"></a></p> <ol> <li>给每个盒子设置margin-left：-1px ，浮动后的盒子会正好压住相邻盒子边框</li> <li>鼠标经过某个盒子的时候，给盒子加一个相对定位（如果没有定位的话），或者给盒子加z-index属性提高层级。</li> </ol> <p><strong>2.文字围绕浮动元素</strong></p> <p>在一个父盒子内，给一个盒子或图片设置浮动后，文字会避开浮动后的区域</p> <p><strong>3. 行内块的巧妙运用</strong></p> <p>如：页面跳转栏</p> <p><a href="http://img.e-com-net.com/image/info8/96208879ec0845cc87f86cc74714321a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96208879ec0845cc87f86cc74714321a.jpg" alt="CSS基础知识_第4张图片" width="650" height="106" style="border:1px solid black;"></a></p> <p>行内块自带很小外边距，又能在同一行显示，还能设置宽高等属性，十分适合制作栏目等要素；</p> <p>给父盒子设置text-align:center后，里面所有行内块都会居中显示，易于处理</p> <p><strong>4.三角强化</strong></p> <p>给宽高都为0的盒子设置边框后，形成四个三角形组成的正方形，给其中三个三角形设置transparent可以得到一个三角形，当我们需要形状不同的三角形时，可以给其中的一条边设置不同宽度（border-width）<br> <a href="http://img.e-com-net.com/image/info8/4c7d5e1557874fee928cf59220206617.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4c7d5e1557874fee928cf59220206617.jpg" alt="CSS基础知识_第5张图片" width="121" height="139" style="border:1px solid black;"></a></p> <p>语法：</p> <pre><code class="prism language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 100px 50px 0 0<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> transparent red transparent transparent<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 300px auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>结合定位，可以加在一个父盒子中，做成斜线效果：</p> <p><a href="http://img.e-com-net.com/image/info8/37d876957a344554a77c4a9c322be2fe.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/37d876957a344554a77c4a9c322be2fe.jpg" alt="在这里插入图片描述" width="245" height="41"></a></p> <p><strong>4. CSS初始化</strong></p> <p>不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化。（每个网页都必须首先进行CSS初始化）</p> <pre><code class="prism language-css"><span class="token comment">/* 清除网页里的内外边距*/</span> <span class="token selector">*</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* em和i里面的文字不倾斜*/</span> <span class="token selector">em, i</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 去掉li前面的小圆点*/</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token comment">/* border: 0; 照顾低版本浏览器，如果给图片添加了链接外面有边框的问题*/</span> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/* 取消图片底测有空白缝隙的问题*/</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">buttom</span> <span class="token punctuation">{</span> <span class="token comment">/* 当我们鼠标经过button 按钮的时候，鼠标变成小手样式*/</span> cursor：pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span>#666<span class="token punctuation">;</span> <span class="token comment">/* 取消链接的下划线*/</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:hover</span> <span class="token punctuation">{</span> <span class="token comment">/* 鼠标经过链接时，文字变为红色*/</span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 清除浮动*/</span> <span class="token selector">.clearfix</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"."</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">button, input</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span>Microsoft Yahei, Heiti SC, tahoma, arial, Hiragino Sans GB,<span class="token string">"\5B8B\4F53"</span>,sans-serif<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token comment">/* CSS3 抗锯齿形 让文字显示的更加清晰*/</span> <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span>antialiased<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token comment">/* 设置12px字体大小，1.5倍行距，宋体*/</span> <span class="token property">font</span><span class="token punctuation">:</span>12px/1.5 Mircosoft YaHei, Heiti SC,tahoma,arial, Hiragino Sans GB,<span class="token string">"\5B8B\4F53"</span>,sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#666<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h2>八、HTML5和CSS3新增特性</h2> <p>###8.1HTML5新增的语义化标签</p> <p><mark>在IE9中需要转换为块级元素，移动端更喜欢使用</mark></p> <ul> <li>header：头部标签</li> <li>nav： 导航标签</li> <li>artical： 内容标签</li> <li>section： 定义文档某个区域</li> <li>aside： 侧边栏标签</li> <li>footer： 尾部标签</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/0c2c3ef8b34b4a40ac0bd5c89b6913f5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c2c3ef8b34b4a40ac0bd5c89b6913f5.jpg" alt="CSS基础知识_第6张图片" width="650" height="408" style="border:1px solid black;"></a></p> <h3>8.2 HTML5新增的多媒体标签</h3> <ol> <li> <p>音频： < audio ></p> </li> <li> <p>视频：< video ></p> </li> </ol> <p>使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他插件</p> <h4>8.2.1. 视频< video ></h4> <p>当前< video >元素支持三种视频格式：MP4, WebM， Ogg（尽量使用MP4格式）</p> <p>语法：</p> <pre><code class="prism language-HTML"><video src='文件地址' controls='controls'></video> </code></pre> <p>兼容版本：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>controls<span class="token punctuation">'</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>300<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>move.ogg<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>video/ogg<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>move.mp4<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>video/mp4<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 若两种格式都不支持，则输出以下语句 --></span> 您的浏览器暂不支持<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span><span class="token punctuation">></span></span>标签播放视频 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> </code></pre> <p><mark>常见属性：</mark></p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>autoplay</td> <td>autoplay</td> <td>视频加载完毕后自动播放（chrome需要添加muted来解决自动播放问题）</td> </tr> <tr> <td>controls</td> <td>controls</td> <td>向用户显示播放控件</td> </tr> <tr> <td>width</td> <td>pixels（像素）</td> <td>设置播放器宽度</td> </tr> <tr> <td>height</td> <td>pixels（像素）</td> <td>设置播放器高度</td> </tr> <tr> <td>loop</td> <td>loop</td> <td>是否循环播放</td> </tr> <tr> <td>preload</td> <td>auto（预加载）none（不加载）</td> <td>规定视频是否启用预加载（如果有autoplay就忽略本属性）</td> </tr> <tr> <td>src</td> <td>url</td> <td>视频文件地址</td> </tr> <tr> <td>poster</td> <td>imgurl</td> <td>等待加载的画面图片</td> </tr> <tr> <td>muted</td> <td>muted</td> <td>静音播放</td> </tr> </tbody> </table> <h4>8.2.2. 音频< audio ></h4> <p>当前< audio >元素支持三种音频格式： MP3，Wav，Ogg（推荐使用mp3）</p> <p>语法：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>文件地址<span class="token punctuation">'</span></span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>controls<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <p>兼容性写法：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>controls<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>happy.mp3<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>audio/mpeg<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>happy.ogg<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>audio/ogg<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 若两种格式都不支持，则输出下面语句 --></span> 您的浏览器暂不支持<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span><span class="token punctuation">></span></span>标签 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <p><mark>常见属性：</mark></p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>autoplay</td> <td>autoplay</td> <td>加载完毕后自动播放</td> </tr> <tr> <td>controls</td> <td>controls</td> <td>是否显示控件</td> </tr> <tr> <td>loop</td> <td>loop</td> <td>是否循环播放</td> </tr> <tr> <td>src</td> <td>url</td> <td>音频文件路径</td> </tr> </tbody> </table> <ul> <li> <p>chrome把音频和视频自动播放都禁止了（视频标签可以通过添加muted属性来静音播放视频，音频只能通过JavaScript解决）；</p> </li> <li> <p>音频标签和视频标签使用方式基本一致（推荐使用mp3和mp4格式）；</p> </li> <li> <p>视频标签时重点，经常设置自动播放（loop），循环和设置大小属性，不使用controls控件；</p> </li> </ul> <h4>8.2.3.input类型</h4> <p><mark>新增表单：</mark></p> <table> <thead> <tr> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>type=‘email’</td> <td>限制用户输入必须为Email类型</td> </tr> <tr> <td>type=‘url’</td> <td>限制用户输入必须为URL（网址）类型</td> </tr> <tr> <td>type=‘date’</td> <td>限制用户输入必须为日期类型</td> </tr> <tr> <td>type=‘time’</td> <td>时间类型</td> </tr> <tr> <td>type=‘month’</td> <td>月份类型</td> </tr> <tr> <td>type=‘week’</td> <td>周类型</td> </tr> <tr> <td>type=‘number’</td> <td>数字类型</td> </tr> <tr> <td>type=‘tel’</td> <td>手机号码</td> </tr> <tr> <td>type=‘search’</td> <td>搜索框</td> </tr> <tr> <td>type=‘color’</td> <td>生成一个颜色选择表单</td> </tr> </tbody> </table> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 验 证 的 时 候 必 须 添 加 f o r m 表 单 域 \textcolor{red}{验证的时候必须添加form表单域} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord cjk_fallback" style="color: red;">验</span><span class="mord cjk_fallback" style="color: red;">证</span><span class="mord cjk_fallback" style="color: red;">的</span><span class="mord cjk_fallback" style="color: red;">时</span><span class="mord cjk_fallback" style="color: red;">候</span><span class="mord cjk_fallback" style="color: red;">必</span><span class="mord cjk_fallback" style="color: red;">须</span><span class="mord cjk_fallback" style="color: red;">添</span><span class="mord cjk_fallback" style="color: red;">加</span><span class="mord mathdefault" style="margin-right: 0.10764em; color: red;">f</span><span class="mord mathdefault" style="color: red;">o</span><span class="mord mathdefault" style="margin-right: 0.02778em; color: red;">r</span><span class="mord mathdefault" style="color: red;">m</span><span class="mord cjk_fallback" style="color: red;">表</span><span class="mord cjk_fallback" style="color: red;">单</span><span class="mord cjk_fallback" style="color: red;">域</span></span></span></span></span></p> <p>新增表单<mark>属性：</mark></p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>required</td> <td>required</td> <td>表单拥有该属性表示其内容不能为空</td> </tr> <tr> <td>placeholder</td> <td>提示文本</td> <td>表单色提示信息，输入任意字符后消失</td> </tr> <tr> <td>autofocus</td> <td>autofocus</td> <td>自动聚焦属性，页面加载后光标自动聚焦到该表单</td> </tr> <tr> <td>autocomplete</td> <td>off/on</td> <td>当用户在字段中开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项<br>默认已经打开，需要放在表单内，同时加上name属性才能生效，autocomplete=‘on’,关闭autocomplete=‘off’，同时成功提交<br>（是否记录已经提交过的内容）</td> </tr> <tr> <td>multiple</td> <td>multiple</td> <td>可以多选文件提交</td> </tr> </tbody> </table> <p>可以通过以下设置方式修改placeholder里面的字体样式：</p> <pre><code class="prism language-css"><span class="token selector">input::placeholder</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> <span class="token property">size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h3>8.3 CSS3的新特性</h3> <h4>CSS3 新增选择器</h4> <p>C3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素</p> <ol> <li>属性选择器</li> <li>结构伪类选择器</li> <li>伪元素选择器</li> </ol> <p><mark>属性选择器：</mark></p> <p>属性选择器可以根据元素特定的属性，来设置不同样式（不用借助类选择器或者id选择器）</p> <table> <thead> <tr> <th>选择符</th> <th>简介</th> </tr> </thead> <tbody> <tr> <td>E[att]</td> <td>选择具有att属性的E元素</td> </tr> <tr> <td>E[att=‘val’]</td> <td>选择具有att属性且属性值等于val的E元素</td> </tr> <tr> <td>E[att^=‘val’]</td> <td>选择具有att属性且值以val开头的E元素</td> </tr> <tr> <td>E[att$=‘val’]</td> <td>选择具有att属性且值以val结尾的E元素</td> </tr> <tr> <td>E[att*=‘val’]</td> <td>选择具有att属性且值含有val的E元素</td> </tr> </tbody> </table> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 类 选 择 器 、 属 性 选 择 器 、 伪 类 选 择 器 权 重 都 为 10 \textcolor{red}{类选择器、属性选择器、伪类选择器 权重都为10} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.64444em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">类</span><span class="mord cjk_fallback" style="color: red;">选</span><span class="mord cjk_fallback" style="color: red;">择</span><span class="mord cjk_fallback" style="color: red;">器</span><span class="mord cjk_fallback" style="color: red;">、</span><span class="mord cjk_fallback" style="color: red;">属</span><span class="mord cjk_fallback" style="color: red;">性</span><span class="mord cjk_fallback" style="color: red;">选</span><span class="mord cjk_fallback" style="color: red;">择</span><span class="mord cjk_fallback" style="color: red;">器</span><span class="mord cjk_fallback" style="color: red;">、</span><span class="mord cjk_fallback" style="color: red;">伪</span><span class="mord cjk_fallback" style="color: red;">类</span><span class="mord cjk_fallback" style="color: red;">选</span><span class="mord cjk_fallback" style="color: red;">择</span><span class="mord cjk_fallback" style="color: red;">器</span><span class="mord cjk_fallback" style="color: red;">权</span><span class="mord cjk_fallback" style="color: red;">重</span><span class="mord cjk_fallback" style="color: red;">都</span><span class="mord cjk_fallback" style="color: red;">为</span><span class="mord" style="color: red;">1</span><span class="mord" style="color: red;">0</span></span></span></span></span></p> <p>在使用时CSS样式表里值不加 ’ ’ ，注意权重叠加问题。如E[att=‘val’],其中E是标签选择器，att='val’是属性选择器,叠加后权重是11。</p> <p><mark>结构伪类选择器：</mark></p> <ul> <li> <p>E:first-child:选择父元素下的第一个子元素</p> </li> <li> <p>E:last-child:选择父元素下的最后一个子元素</p> </li> <li> <p><mark>E:nth-child（n）</mark>：里面可填数字，关键字，公式</p> </li> </ul> <ol> <li>如果是数字，就是选择第n个子元素，从1开始</li> <li>关键字： even偶数，odd奇数</li> <li>公式： 常见公式如n，2n，2n+1，5n，n+5，，-n+5等（必须是n，不能是其他字母，且计算时从0开始算）</li> </ol> <ul> <li>E:first-of-type:指定类型E的第一个</li> <li>E：last-of-type：指定类型E的最后一个</li> <li>E：nth-of-type（n）：指定类型的第n个</li> </ul> <p>区别：</p> <ol> <li>E：nth-child（n）在进行渲染时先对父元素里面的所有元素进行排序，然乎找到第n个，再去匹配前面的类型E是否相同，相同才执行后面的样式语句</li> <li>E：nth-of-type（n) 在进行渲染时 先找到父元素里的所有E类型子元素，然后对E类型的子元素进行排序，找到第n个E后执行后面的渲染语句。</li> <li><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 权 重 都 为 10 \textcolor{red}{权重都为10} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.64444em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">权</span><span class="mord cjk_fallback" style="color: red;">重</span><span class="mord cjk_fallback" style="color: red;">都</span><span class="mord cjk_fallback" style="color: red;">为</span><span class="mord" style="color: red;">1</span><span class="mord" style="color: red;">0</span></span></span></span></span></li> </ol> <p><mark>伪元素选择器：</mark></p> <p>使用CSS创建HTML标签元素（不需要在html里声明），简化HTML结构</p> <table> <thead> <tr> <th>选择符</th> <th>简介</th> </tr> </thead> <tbody> <tr> <td>::before</td> <td>在元素内部的前面插入内容</td> </tr> <tr> <td>::after</td> <td>在元素内部的后面插入内容</td> </tr> </tbody> </table> <ul> <li>before和after创建的元素属于行内元素</li> <li>这种方式创建的元素标签在文档树中找不到，因此称为为元素</li> <li>before和after必须有content属性</li> <li><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 权 重 为 1 \textcolor{red}{权重为1} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.64444em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">权</span><span class="mord cjk_fallback" style="color: red;">重</span><span class="mord cjk_fallback" style="color: red;">为</span><span class="mord" style="color: red;">1</span></span></span></span></span></li> </ul> <p>语法：</p> <pre><code class="prism language-css"><span class="token selector">element::before</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> </code></pre> <p>伪元素清除浮动：</p> <pre><code class="prism language-css"><span class="token selector">.clearfix:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">;</span> //伪元素必须写content，可以为空 display：block<span class="token punctuation">;</span> //插入的元素必须是块级 height：0<span class="token punctuation">;</span> //元素不可见 visibility：hidden<span class="token punctuation">;</span> //元素不可见 <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> //核心代码清除浮动 <span class="token punctuation">}</span> </code></pre> <p>升级版：</p> <pre><code class="prism language-css"><span class="token selector">.clearfix::before, .clearfix::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>table<span class="token punctuation">;</span> //转换为块级元素且在同一行显示 <span class="token punctuation">}</span> <span class="token selector">.clearfix::after</span> <span class="token punctuation">{</span> <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>CSS3盒子模型</h4> <p>CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box,border-box</p> <ol> <li> <p>box-sizing:content-box 盒子大小为width+border+padding（默认）</p> </li> <li> <p>box-sizing:border-box 盒子大小为width</p> </li> </ol> <p>设置box-sizing：border-box后，padding和border就不会撑大盒子（前提padding和border比width宽度小）</p> <p>可以在样式表开头写好通配符样式:</p> <pre><code>* { padding:0; margin:0; box-sizing:border-box; } </code></pre> <h4>CSS3其他特性</h4> <p><mark>滤镜filter：</mark></p> <p>filter属性将模糊或颜色偏移等图形效果应用于元素。</p> <p>filter：函数(); 例如： filter：blur（5px）； //blur模糊处理，数值越大越模糊</p> <p><mark>calc（）函数</mark></p> <p>calc（）可以在声明CSS属性时执行一些计算（+ - * /）,例如：</p> <pre><code class="prism language-css"><span class="token property">width</span><span class="token punctuation">:</span><span class="token function">calc</span><span class="token punctuation">(</span>100%-80px<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><mark>CSS3过度</mark></p> <p>语法：</p> <pre><code class="prism language-css"><span class="token property">transition</span><span class="token punctuation">:</span> 变化的属性 变化时间 变化曲线 开始时间<span class="token punctuation">;</span> <span class="token comment">/* 变化曲线和开始时间可以省略*/</span> <span class="token comment">/* 变化时间必须加单位*/</span> </code></pre> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 谁 做 过 度 给 谁 加 t r a n s i t i o n \textcolor{red}{ 谁做过度给谁加transition} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.65952em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">谁</span><span class="mord cjk_fallback" style="color: red;">做</span><span class="mord cjk_fallback" style="color: red;">过</span><span class="mord cjk_fallback" style="color: red;">度</span><span class="mord cjk_fallback" style="color: red;">给</span><span class="mord cjk_fallback" style="color: red;">谁</span><span class="mord cjk_fallback" style="color: red;">加</span><span class="mord mathdefault" style="color: red;">t</span><span class="mord mathdefault" style="margin-right: 0.02778em; color: red;">r</span><span class="mord mathdefault" style="color: red;">a</span><span class="mord mathdefault" style="color: red;">n</span><span class="mord mathdefault" style="color: red;">s</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">t</span><span class="mord mathdefault" style="color: red;">i</span><span class="mord mathdefault" style="color: red;">o</span><span class="mord mathdefault" style="color: red;">n</span></span></span></span></span></p> <p>eg：鼠标放上去时盒子宽高变大</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>hotpink<span class="token punctuation">;</span> <span class="token comment">/* 只设置宽度*/</span> <span class="token comment">/* transition:width 0.5s ease 0s; */</span> <span class="token comment">/* 同时设置宽高，用逗号进行分割*/</span> <span class="token comment">/* transition:width 0.5s,height 0.5s; */</span> <span class="token comment">/* 也可以使用all对全部属性进行变化 */</span> <span class="token property">transition</span><span class="token punctuation">:</span> all 0.5s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div:hover</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h2>九、网站TDK三大标签SEO优化</h2> <h3>1、 title网站标题</h3> <p>title具有不可替代性，是内页第一个重要标签，是搜索引擎了解网页入口和对网页主题归属的最佳判断点。</p> <p>建议：<span class="katex--inline"><span class="katex"><span class="katex-mathml"> 网 站 名 （ 产 品 名 ） − 网 站 的 介 绍 \textcolor{red}{网站名（产品名）-网站的介绍} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.66666em; vertical-align: -0.08333em;"></span><span class="mord cjk_fallback" style="color: red;">网</span><span class="mord cjk_fallback" style="color: red;">站</span><span class="mord cjk_fallback" style="color: red;">名</span><span class="mord cjk_fallback" style="color: red;">（</span><span class="mord cjk_fallback" style="color: red;">产</span><span class="mord cjk_fallback" style="color: red;">品</span><span class="mord cjk_fallback" style="color: red;">名</span><span class="mord cjk_fallback" style="color: red;">）</span><span class="mspace" style="margin-right: 0.222222em;"></span><span class="mbin" style="color: red;">−</span><span class="mspace" style="margin-right: 0.222222em;"></span></span><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">网</span><span class="mord cjk_fallback" style="color: red;">站</span><span class="mord cjk_fallback" style="color: red;">的</span><span class="mord cjk_fallback" style="color: red;">介</span><span class="mord cjk_fallback" style="color: red;">绍</span></span></span></span></span>（尽量不超过30个汉字）</p> <p>例如：</p> <ul> <li>京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</li> <li>小米商城-小米5s，红米Note4、小米MIX、小米笔记本官方网站</li> </ul> <h3>2、 description网站说明</h3> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> 简 要 说 明 我 们 网 站 是 做 什 么 的 \textcolor{red}{简要说明我们网站是做什么的} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback" style="color: red;">简</span><span class="mord cjk_fallback" style="color: red;">要</span><span class="mord cjk_fallback" style="color: red;">说</span><span class="mord cjk_fallback" style="color: red;">明</span><span class="mord cjk_fallback" style="color: red;">我</span><span class="mord cjk_fallback" style="color: red;">们</span><span class="mord cjk_fallback" style="color: red;">网</span><span class="mord cjk_fallback" style="color: red;">站</span><span class="mord cjk_fallback" style="color: red;">是</span><span class="mord cjk_fallback" style="color: red;">做</span><span class="mord cjk_fallback" style="color: red;">什</span><span class="mord cjk_fallback" style="color: red;">么</span><span class="mord cjk_fallback" style="color: red;">的</span></span></span></span></span></p> <p>语法：</p> <pre><code class="prism language-css"><meta name=<span class="token string">'description'</span> content=<span class="token string">'京东JD.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供预约的网上购物体验！'</span>/> </code></pre> <h3>3、 keywords关键字</h3> <p><span class="katex--inline"><span class="katex"><span class="katex-mathml"> k e y w o r d s 是 页 面 关 键 字 ， 是 搜 索 引 擎 关 注 点 之 一 \textcolor{red}{keywords是页面关键字，是搜索引擎关注点之一} </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord mathdefault" style="margin-right: 0.03148em; color: red;">k</span><span class="mord mathdefault" style="color: red;">e</span><span class="mord mathdefault" style="margin-right: 0.03588em; color: red;">y</span><span class="mord mathdefault" style="margin-right: 0.02691em; color: red;">w</span><span class="mord mathdefault" style="color: red;">o</span><span class="mord mathdefault" style="margin-right: 0.02778em; color: red;">r</span><span class="mord mathdefault" style="color: red;">d</span><span class="mord mathdefault" style="color: red;">s</span><span class="mord cjk_fallback" style="color: red;">是</span><span class="mord cjk_fallback" style="color: red;">页</span><span class="mord cjk_fallback" style="color: red;">面</span><span class="mord cjk_fallback" style="color: red;">关</span><span class="mord cjk_fallback" style="color: red;">键</span><span class="mord cjk_fallback" style="color: red;">字</span><span class="mord cjk_fallback" style="color: red;">，</span><span class="mord cjk_fallback" style="color: red;">是</span><span class="mord cjk_fallback" style="color: red;">搜</span><span class="mord cjk_fallback" style="color: red;">索</span><span class="mord cjk_fallback" style="color: red;">引</span><span class="mord cjk_fallback" style="color: red;">擎</span><span class="mord cjk_fallback" style="color: red;">关</span><span class="mord cjk_fallback" style="color: red;">注</span><span class="mord cjk_fallback" style="color: red;">点</span><span class="mord cjk_fallback" style="color: red;">之</span><span class="mord cjk_fallback" style="color: red;">一</span></span></span></span></span></p> <p>keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式</p> <p>例如：</p> <pre><code class="prism language-css"><meta name=<span class="token string">'keywods'</span> content=<span class="token string">'网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DC,相机,数码,配件,手表,存储卡,京东'</span>/> </code></pre> <h3>4、 LOGO SEO 优化</h3> <ol> <li>logo里面放一个h1，目的是提权，告诉搜索引擎这个地方很重要</li> <li>h1里面放一个链接，可以返回首页，把logo的背景图片给链接即可</li> <li>为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不显示出来 <ul> <li>方法1： text-indent（文字缩进）以到盒子外面（text-indent： -9999px;），然后overflow：hidden，淘宝的做法。</li> <li>方法2： 直接给font-size：0；就看不到文字了，京东的做法</li> </ul> </li> <li>最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字。</li> </ol> <h2>十、常用命名</h2> <table> <thead> <tr> <th>名称</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>快捷导航栏</td> <td>shortcut</td> </tr> <tr> <td>头部</td> <td>header</td> </tr> <tr> <td>标志</td> <td>logo</td> </tr> <tr> <td>购物车</td> <td>shopcar</td> </tr> <tr> <td>搜索</td> <td>search</td> </tr> <tr> <td>热点词</td> <td>hotwords</td> </tr> <tr> <td>导航</td> <td>nav</td> </tr> <tr> <td>导航左侧</td> <td>dropdown包含 .dd .dt</td> </tr> <tr> <td>导航右侧</td> <td>navitems</td> </tr> <tr> <td>页面底部</td> <td>footer</td> </tr> <tr> <td>页面底部服务模块</td> <td>mod_service</td> </tr> <tr> <td>页面底部帮助模块</td> <td>mod_help</td> </tr> <tr> <td>页面底部版权模块</td> <td>mod_copyright</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1643606002232254464"></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">你可能感兴趣的:(css,css3,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</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/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <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/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</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/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</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/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><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>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> <span class="text-muted">Derek重名了</span> <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</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/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> <span class="text-muted">天秤-white</span> <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</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/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> <span class="text-muted">愿风去了</span> <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</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/117.htm" title="Algorithm" target="_blank">Algorithm</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];</div> </li> <li><a href="/article/244.htm" title="mongoDB 复杂查询表达式" target="_blank">mongoDB 复杂查询表达式</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n</div> </li> <li><a href="/article/371.htm" title="Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space" target="_blank">Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------</div> </li> <li><a href="/article/498.htm" title="文件上传 下载 解析 相对路径" target="_blank">文件上传 下载 解析 相对路径</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a> <div>有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。 下面总结一下遇到的问题： 文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。 在上传图片，或者文件时，使用form表单来操作。 前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&</div> </li> <li><a href="/article/625.htm" title="怎么实现qq空间批量点赞" target="_blank">怎么实现qq空间批量点赞</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>纯粹为了好玩！！ 逻辑很简单 1 打开浏览器console；输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加</div> </li> <li><a href="/article/752.htm" title="判断是否为中文" target="_blank">判断是否为中文</a> <span class="text-muted">灵静志远</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87/1.htm">中文</a> <div>方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((</div> </li> <li><a href="/article/879.htm" title="一个电话面试后总结" target="_blank">一个电话面试后总结</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。 面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：   在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。   然后对list和map分别举几个类型：   list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了</div> </li> <li><a href="/article/1006.htm" title="MSSQL中Escape转义的使用" target="_blank">MSSQL中Escape转义的使用</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/MSSQL/1.htm">MSSQL</a> <div>IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL</div> </li> <li><a href="/article/1133.htm" title="一个简单的存储过程" target="_blank">一个简单的存储过程</a> <span class="text-muted">asialee</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E9%80%A0%E6%95%B0%E6%8D%AE/1.htm">构造数据</a><a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div>           今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此：            DELIMITER $$ DROP PROCEDURE IF EXISTS inse</div> </li> <li><a href="/article/1260.htm" title="annot convert from HomeFragment_1 to Fragment" target="_blank">annot convert from HomeFragment_1 to Fragment</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%8C%85%E9%94%99%E8%AF%AF/1.htm">导包错误</a> <div>创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap</div> </li> <li><a href="/article/1387.htm" title="Weblogic10两种修改端口的方法" target="_blank">Weblogic10两种修改端口的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8F%B7/1.htm">端口号</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/config.xml/1.htm">config.xml</a> <div>一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &</div> </li> <li><a href="/article/1514.htm" title="mysql 操作指令" target="_blank">mysql 操作指令</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连； 二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys</div> </li> <li><a href="/article/1641.htm" title="【Hive一】Hive入门" target="_blank">【Hive一】Hive入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive，在系统变</div> </li> <li><a href="/article/1768.htm" title="ajax 三种提交请求的方法" target="_blank">ajax 三种提交请求的方法</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jqery/1.htm">jqery</a> <div>1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v</div> </li> <li><a href="/article/1895.htm" title="mongodb开发环境下的搭建入门" target="_blank">mongodb开发环境下的搭建入门</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>  linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-</div> </li> <li><a href="/article/2022.htm" title="编程之美-最短摘要的生成" target="_blank">编程之美-最短摘要的生成</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran</div> </li> <li><a href="/article/2149.htm" title="json数据解析及typeof" target="_blank">json数据解析及typeof</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/typeof/1.htm">typeof</a><a class="tag" taget="_blank" href="/search/json%E8%A7%A3%E6%9E%90/1.htm">json解析</a> <div> // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&</div> </li> <li><a href="/article/2276.htm" title="流程系统设计的层次和目标" target="_blank">流程系统设计的层次和目标</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>                               流程系统设计的层次和目标  </div> </li> <li><a href="/article/2403.htm" title="RMAN List和report 命令" target="_blank">RMAN List和report 命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/report/1.htm">report</a><a class="tag" taget="_blank" href="/search/rman/1.htm">rman</a> <div>LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可</div> </li> <li><a href="/article/2530.htm" title="二叉树:红黑树" target="_blank">二叉树:红黑树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div>    红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &</div> </li> <li><a href="/article/2657.htm" title="C语言homework3，7个小题目的代码" target="_blank">C语言homework3，7个小题目的代码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数，</div> </li> <li><a href="/article/2784.htm" title="自定义按钮, 图片在上, 文字在下, 居中显示" target="_blank">自定义按钮, 图片在上, 文字在下, 居中显示</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>#import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa</div> </li> <li><a href="/article/2911.htm" title="MySQL查询语句练习题，测试足够用了" target="_blank">MySQL查询语句练习题，测试足够用了</a> <span class="text-muted">flyvszhb</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR</div> </li> <li><a href="/article/3038.htm" title="转：MyBatis Generator 详解" target="_blank">转：MyBatis Generator 详解</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>  MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.</div> </li> <li><a href="/article/3165.htm" title="让程序员少走弯路的14个忠告" target="_blank">让程序员少走弯路的14个忠告</a> <span class="text-muted">jingjing0907</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>  无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放</div> </li> <li><a href="/article/3292.htm" title="nginx和NetScaler区别" target="_blank">nginx和NetScaler区别</a> <span class="text-muted">流浪鱼</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方</div> </li> <li><a href="/article/3419.htm" title="第11章 动画效果（下）" target="_blank">第11章 动画效果（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3546.htm" title="FAQ - SAP BW BO roadmap" target="_blank">FAQ - SAP BW BO roadmap</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/BW/1.htm">BW</a> <div>http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i</div> </li> <li><a href="/article/3673.htm" title="关于java堆内存溢出的几种情况" target="_blank">关于java堆内存溢出的几种情况</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div>【情况一】： 　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环； 　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决： 　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx</div> </li> <li><a href="/article/3800.htm" title="Manifest.permission_group权限组" target="_blank">Manifest.permission_group权限组</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/Permission/1.htm">Permission</a> <div>结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D</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>