CSS基础入门 第2天课堂笔记（本课程共6天）
目录
一、晨早测验题目讲解
二、css基础选择器
2.1 标签选择器
2.2 id选择器
2.3 类选择器
三、css高级选择器
3.1 后代选择器
3.2 交集选择器
3.3 并集选择器（分组选择器）
3.4 通配符*
四、一些CSS3选择器
4.1 兼容问题介绍
4.2 儿子选择器>
4.3 序选择器
4.4 下一个兄弟选择器
五、CSS的继承性和层叠性
5.1 继承性
5.2 层叠性
一、晨早测验题目讲解
第1题 考察title标签
</code>出现在<code><head></code>里面，表示页面的标题。直观上，我们可以在浏览器的标题栏（标签栏）中看见。 <br> <a href="http://img.e-com-net.com/image/info8/99940b2543f04c93b78ffb3adca0eff0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/99940b2543f04c93b78ffb3adca0eff0.jpg" alt="CSS基础入门 第2天课堂笔记_第2张图片" title="" width="332" height="168" style="border:1px solid black;"></a> <br> B正确。</p>
<p>第2题 考察的就是HTML的本质 <br> <a href="http://img.e-com-net.com/image/info8/b873a5242f5a4b6cad6d9050991a6a1d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b873a5242f5a4b6cad6d9050991a6a1d.jpg" alt="CSS基础入门 第2天课堂笔记_第3张图片" title="" width="650" height="231" style="border:1px solid black;"></a> <br> HTML只依靠标签对儿表达语义，和是否缩进、换行没有任何关系！只要是标签有正确的嵌套关系，正确的父子关系，那么就是一个合法的HTML结构，不一定要缩进。百度的首页，为了减小文件体积，所以都是没有缩进的。提到HTML的作用，只能从语义方面从想，绝对不能想样式。所以C错误的。D正确。 <br> 第3题 考察常用属性 <br> <a href="http://img.e-com-net.com/image/info8/b2940fbad2264499ab7bf6c2cda63369.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b2940fbad2264499ab7bf6c2cda63369.jpg" alt="CSS基础入门 第2天课堂笔记_第4张图片" title="" width="650" height="196" style="border:1px solid black;"></a></p>
<pre class="prettyprint"><code class=" hljs xml">1<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"1.jpg"</span> /></span>
2
3<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"1.html"</span>></span>点击我<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre>
<p>img是image“图像”； <br> src是source“资源”； <br> a是anchor“锚”； <br> href是hypertext reference“超文本地址（引用）”</p>
<p>第4题 考察HTTP的原理 <br> <a href="http://img.e-com-net.com/image/info8/2eb6f365e6ee4f3982f5e90cd280a2bc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2eb6f365e6ee4f3982f5e90cd280a2bc.png" alt="CSS基础入门 第2天课堂笔记_第5张图片" title="" width="892" height="291" style="border:1px solid black;"></a> <br> 服务器上有一些文件，html、图片、css、js文件，通过HTTP请求传输到了用户的电脑里面。所以，第二次访问的时候，这些图片就不用传输了（Ajax课上，你将知道这是HTTP 304状态），所以页面变得快。 <br> A，错误，没有所谓的vip通路。 <br> B，正确 <br> C，错误。因为HTTP不是一个持久连接的协议，传完就拉倒了，就关闭连接了，所以没有一个持续的通路。 <br> D，错误。每次访问，都是不同的寻址过程，不会“记路”。</p>
<p>第5题 纯文本 <br> <a href="http://img.e-com-net.com/image/info8/ea934e211fae44faba447126de65138c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea934e211fae44faba447126de65138c.jpg" alt="CSS基础入门 第2天课堂笔记_第6张图片" title="" width="650" height="431" style="border:1px solid black;"></a> <br> 用记事本打开，不是乱码，是可读的，那么一定是纯本文文件。只有文本，没有样式，没有语义。 <br> 所以，.java文件是纯文本的, .class文件不是纯文本的。 <br> 所有的纯文本文件都能用记事本、notepad++、editplus、sublime编辑。</p>
<p>第6题 考察XHTML <br> <a href="http://img.e-com-net.com/image/info8/27a18aab26ff4c2390de6d99d52b8b0d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/27a18aab26ff4c2390de6d99d52b8b0d.png" alt="CSS基础入门 第2天课堂笔记_第7张图片" title="" width="532" height="390" style="border:1px solid black;"></a> <br> 所有的标签名、属性都要小写，必须使用引号，必须封闭。答案是B</p>
<p>第7题 考察定义列表 <br> <a href="http://img.e-com-net.com/image/info8/9c81dd58b9c3406389d2bdf0c58c3fb9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9c81dd58b9c3406389d2bdf0c58c3fb9.png" alt="CSS基础入门 第2天课堂笔记_第8张图片" title="" width="492" height="538" style="border:1px solid black;"></a> <br> 一定要记住每个标签标示什么，就是英语原意是什么？比如 <br> dl 就是definition list， 定义列表； <br> dt 就是definition title，定义标题； <br> dd就是definition description，定义描述</p>
<p>第8题 考察相对路径 <br> <a href="http://img.e-com-net.com/image/info8/b8cac8bc11dd47fd87432983d7e160ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b8cac8bc11dd47fd87432983d7e160ea.jpg" alt="CSS基础入门 第2天课堂笔记_第9张图片" title="" width="650" height="254" style="border:1px solid black;"></a> <br> 1.html中，有一个能够点击的图片。所以骨架：</p>
<pre class="prettyprint"><code class=" hljs xml">1<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">""</span> /></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre>
<p>href里面是相对路径，要从1.html出发找到2.html； <br> src里面也是相对路径，要从1.html出发找到kaola.png。</p>
<p>标准答案：</p>
<pre class="prettyprint"><code class=" hljs xml">1<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"../myweb2/2.html"</span> <span class="hljs-attribute">target</span>=<span class="hljs-value">"_blank"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../../photo/kaola.png"</span> /></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre>
<p>我们一直在用的是相对路径，就是从自己出发找到别人。用相对路径的好处很明显，就是站点文件夹可以拷着走。 <br> 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 <br> 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。 <br> 比如，你现在想插入一个新浪网上的图片，那么就不能用相对路径。就要用绝对路径。 <br> 绝对路径非常简单，所有以http://开头的路径，就是绝对路径。</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">""</span> /></span>
2 <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://www.sohu.com"</span>></span>点击我跳转到搜狐<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre>
<p>老师，我的网页在C盘，图片却在D盘，能不能插入呢？ <br> 答案： 用相对路径不能，用绝对路径也不能。 <br> 注意，可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。</p>
<p>下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符，</p>
<pre class="prettyprint"><code class=" hljs tex">1<img src="file://C:<span class="hljs-command">\Users</span><span class="hljs-command">\Danny</span><span class="hljs-command">\Pictures</span><span class="hljs-command">\明</span>星\1.jpg" alt="" /></code></pre>
<p>总结一下： <br> 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。 <br> 相对路径，就是../ image/ 这种路径。从自己出发，找到别人； <br> 绝对路径，就是http://开头的路径。 <br> 绝对不允许使用file://开头的东西，这个是完全错误的！！</p>
<h2 id="二css基础选择器">二、css基础选择器</h2>
<p>html负责结构，css负责样式，js负责行为。 <br> css写在head标签里面，容器style标签。 <br> 先写选择器，然后写大括号，大括号里面是样式。</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
2 <span class="hljs-tag">body</span><span class="hljs-rules">{
<span class="hljs-rule">3 <span class="hljs-attribute">background-color</span>:<span class="hljs-value"> pink</span></span>;
<span class="hljs-rule">4 }</span></span>
5 </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code></pre>
<p>常见属性：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-tag">h1</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">blue</span></span>;
<span class="hljs-rule">3 <span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">60</span>px</span></span>;
<span class="hljs-rule">4 <span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> normal</span></span>;
<span class="hljs-rule">5 <span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> underline</span></span>;
<span class="hljs-rule">6 <span class="hljs-attribute">font-style</span>:<span class="hljs-value"> italic</span></span>;
<span class="hljs-rule">7 }</span></span></code></pre>
<p><strong>2.1 标签选择器</strong> <br> 就是用标签名来当做选择器。 <br> 1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 <br> 2） 不管这个标签藏的多深，都能够被选择上。 <br> 3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。</p>
<p>比如网易，希望页面上所有的超级链接都没有下划线：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-tag">a</span><span class="hljs-rules">{
<span class="hljs-rule">2 /*去掉下划线：*/
3 <span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule">4 }</span></span></code></pre>
<p><strong>2.2 id选择器</strong></p>
<pre class="prettyprint"><code class=" hljs vala"><span class="hljs-preprocessor">#表示选择id</span></code></pre>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-id">#lj1</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">60</span>px</span></span>;
<span class="hljs-rule">3 <span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;
<span class="hljs-rule">4 <span class="hljs-attribute">color</span>:<span class="hljs-value">black</span></span>;
<span class="hljs-rule">5 }</span></span></code></pre>
<p>1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说mm和MM是两个不同的id。 <br> 2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。 <br> 也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。</p>
<p><strong>2.3 类选择器</strong> <br> .就是类的符号。类的英语叫做class。 <br> 所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。 <br> class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个h3啊<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">h3</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"teshu"</span>></span>我是一个h3啊<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个h3啊<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
4 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落啊<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
5 <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"teshu"</span>></span>我是一个段落啊<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
6 <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"teshu"</span>></span>我是一个段落啊<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre>
<p>css里面用.来表示类：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-class">.teshu</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value"> red</span></span>;
<span class="hljs-rule">3 }</span></span></code></pre>
<p>同一个标签，可能同时属于多个类，用空格隔开：</p>
<pre class="prettyprint"><code class=" hljs xml">1<span class="hljs-tag"><<span class="hljs-title">h3</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"teshu zhongyao"</span>></span>我是一个h3啊<span class="hljs-tag"></<span class="hljs-title">h3</span>></span></code></pre>
<p>这样，这个h3就同时属于teshu类，也同时属于zhongyao类。</p>
<p>初学者常见的错误，就是写成了两个class：</p>
<pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-number">1</span><h3 <span class="hljs-keyword">class</span>=<span class="hljs-string">"teshu"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"zhongyao"</span>>我是一个h3啊<<span class="hljs-regexp">/h3></span></code></pre>
<p>所以要总结两条： <br> 1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类； <br> 2） 同一个标签可以同时携带多个类。</p>
<p>类的使用，能够决定一个人的css水平。 <br> 比如，我们现在要做一个页面：</p>
<p>段落1 <br> 段落2 <br> 段落3</p>
<p>正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
2 <span class="hljs-class">.lv</span><span class="hljs-rules">{
<span class="hljs-rule">3 <span class="hljs-attribute">color</span>:<span class="hljs-value">green</span></span>;
<span class="hljs-rule">4 }</span></span>
5 <span class="hljs-class">.da</span><span class="hljs-rules">{
<span class="hljs-rule">6 <span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">60</span>px</span></span>;
<span class="hljs-rule">7 }</span></span>
8 <span class="hljs-class">.xian</span><span class="hljs-rules">{
<span class="hljs-rule">9 <span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> underline</span></span>;
<span class="hljs-rule">10 }</span></span>
11 </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code></pre>
<p>每个标签，就去选取自己想要的类：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"lv da"</span>></span>段落1<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"lv xian"</span>></span>段落2<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"da xian"</span>></span>段落3<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre>
<p>也就是说： <br> 1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。 <br> 2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。</p>
<p>到底用id还是用class？ <br> 答案：尽可能的用class，除非极特殊的情况可以用id。 <br> 原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。 <br> <a href="http://img.e-com-net.com/image/info8/aa6798e0a2f8475d861d82d1333a2d09.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa6798e0a2f8475d861d82d1333a2d09.jpg" alt="CSS基础入门 第2天课堂笔记_第10张图片" title="" width="650" height="407" style="border:1px solid black;"></a> <br> 类 上样式(CSS)，id 上行为(JS) <br> 就是一个标签，可以同时被多种选择器选择，标签选择器、id选择器（#）、类选择器（.）。这些选择器都可以选择上同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。</p>
<h2 id="三css高级选择器">三、css高级选择器</h2>
<p><strong>3.1 后代选择器</strong></p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
2 <span class="hljs-class">.div1</span> <span class="hljs-tag">p</span><span class="hljs-rules">{
<span class="hljs-rule">3 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">4 }</span></span>
5 </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code></pre>
<p>空格就表示后代，.div1 p 就是.div1的后代所有的p。 <br> 强调一下，选择的是后代，不一定是儿子。</p>
<p>比如：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"div1"</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>
4 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
5 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
6 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
7 <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
8 <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
9 <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre>
<p>能够被下面的选择器选择上：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-class">.div1</span> <span class="hljs-tag">p</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3 }</span></span></code></pre>
<p>所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。</p>
<p>空格可以多次出现。</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-class">.div1</span> <span class="hljs-class">.li2</span> <span class="hljs-tag">p</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3 }</span></span></code></pre>
<p>就是.div1里面的后代.li2里面的p。</p>
<p>后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。</p>
<p>后代选择器，描述的是祖先结构。 <br> <a href="http://img.e-com-net.com/image/info8/2ef49fb9007e4e878e110e0fa263cb85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ef49fb9007e4e878e110e0fa263cb85.jpg" alt="CSS基础入门 第2天课堂笔记_第11张图片" title="" width="650" height="384" style="border:1px solid black;"></a></p>
<p><strong>3.2 交集选择器</strong> <br> <a href="http://img.e-com-net.com/image/info8/164212e1e8ab4892bd41cecf362e42bb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/164212e1e8ab4892bd41cecf362e42bb.png" alt="CSS基础入门 第2天课堂笔记_第12张图片" title="" width="437" height="274" style="border:1px solid black;"></a></p>
<pre class="prettyprint"><code class=" hljs css">1<span class="hljs-tag">h3</span><span class="hljs-class">.special</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3}</span></span></code></pre>
<p>选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。 <br> 交集选择器没有空格。 <br> 所以有没有空格</p>
<pre class="prettyprint"><code class=" hljs erlang"><span class="hljs-number">1</span><span class="hljs-keyword">div</span>.red
和
<span class="hljs-number">1</span><span class="hljs-keyword">div</span> .red</code></pre>
<p>不是一个意思。</p>
<p>交集选择器可以连续交（一般不要这么写）</p>
<pre class="prettyprint"><code class=" hljs css">1<span class="hljs-tag">h3</span><span class="hljs-class">.special</span><span class="hljs-class">.zhongyao</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3}</span></span></code></pre>
<p>交集选择器，我们一般都是以标签名开头，比如div. haha 比如p.special。</p>
<p><strong>3.3 并集选择器（分组选择器）</strong> <br> 使用逗号来表示：</p>
<pre class="prettyprint"><code class=" hljs css">1<span class="hljs-tag">h3</span>,<span class="hljs-tag">li</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3}</span></span></code></pre>
<p>用逗号就表示并集。</p>
<p><strong>3.4 通配符*</strong> <br> *就表示所有元素。</p>
<pre class="prettyprint"><code class=" hljs css">1*<span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3}</span></span></code></pre>
<p>效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。</p>
<h2 id="四一些css3选择器">四、一些CSS3选择器</h2>
<p><strong>4.1 兼容问题介绍</strong> <br> 我们现在给大家介绍一下浏览器： <br> IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。 <br> windows xp 操作系统安装的IE6 <br> windows vista 操作系统安装的IE7 <br> windows 7 操作系统安装的IE8 <br> windows 8 操作系统安装的IE9 <br> windows10 操作系统安装的edge <br> 浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。</p>
<pre class="prettyprint"><code class=" hljs avrasm"><span class="hljs-label">http:</span>//www1<span class="hljs-preprocessor">.pconline</span><span class="hljs-preprocessor">.com</span><span class="hljs-preprocessor">.cn</span>/pcedu/specialtopic/css3-doraemon/</code></pre>
<p>Chrome浏览器： <br> <a href="http://img.e-com-net.com/image/info8/fae5f0cca1004cf0b20456a6c18baa73.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fae5f0cca1004cf0b20456a6c18baa73.jpg" alt="CSS基础入门 第2天课堂笔记_第13张图片" title="" width="285" height="402" style="border:1px solid black;"></a> <br> Firefox浏览器： <br> <a href="http://img.e-com-net.com/image/info8/6ceab1e7a14b4c309b701642cbbcc6ca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ceab1e7a14b4c309b701642cbbcc6ca.jpg" alt="CSS基础入门 第2天课堂笔记_第14张图片" title="" width="284" height="378" style="border:1px solid black;"></a> <br> IE8： <br> <a href="http://img.e-com-net.com/image/info8/a6babd83affa452ebe70c2ca721c5345.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6babd83affa452ebe70c2ca721c5345.png" alt="CSS基础入门 第2天课堂笔记_第15张图片" title="" width="452" height="646" style="border:1px solid black;"></a> <br> IE6： <br> <a href="http://img.e-com-net.com/image/info8/2c8b77b0fcae44d180f1fa32c04456d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2c8b77b0fcae44d180f1fa32c04456d6.jpg" alt="CSS基础入门 第2天课堂笔记_第16张图片" title="" width="284" height="375" style="border:1px solid black;"></a> <br> 浏览器的市场占有率： http://tongji.baidu.com/data/ <br> 今天： <br> IE9 5.94% <br> IE8 21.19% <br> IE7 4.79% <br> IE6 4.11%</p>
<p>前端与移动学院开发学院对于低级浏览器的教学要求： <br> 学生要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8。老师不给你解决IE8以下的兼容问题。目的是，培养更高的兴趣和眼光，别天天的跟IE6较劲。</p>
<p>HTML5浏览器打分：</p>
<pre class="prettyprint"><code class=" hljs avrasm"><span class="hljs-label">http:</span>//html5test<span class="hljs-preprocessor">.com</span>/results/desktop<span class="hljs-preprocessor">.html</span></code></pre>
<p><a href="http://img.e-com-net.com/image/info8/464ce193ba044eedaa87677728de5dcb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/464ce193ba044eedaa87677728de5dcb.jpg" alt="CSS基础入门 第2天课堂笔记_第17张图片" title="" width="650" height="205" style="border:1px solid black;"></a></p>
<p><strong>4.2 儿子选择器 ></strong> <br> IE7开始兼容，IE6不兼容。</p>
<pre class="prettyprint"><code class=" hljs css">1<span class="hljs-tag">div</span>><span class="hljs-tag">p</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3}</span></span></code></pre>
<p>div的儿子p。和div的后代p的截然不同。 <br> 选择器能够选择：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是div的儿子<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
3 <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre>
<p>而不能选择：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>
4 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是div的重孙子<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
5 <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
6 <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
7 <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre>
<p><strong>4.3 序选择器</strong> <br> IE8开始兼容；IE6、7都不兼容</p>
<p>选择第1个li：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
2 <span class="hljs-tag">ul</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">:first-child</span><span class="hljs-rules">{
<span class="hljs-rule">3 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">4 }</span></span>
5 </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code></pre>
<p>选择最后一个1i：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-tag">ul</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">:last-child</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">blue</span></span>;
<span class="hljs-rule">3 }</span></span></code></pre>
<p>由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"first"</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
4 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
5 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
6 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
7 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
8 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
9 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
10 <span class="hljs-tag"><<span class="hljs-title">li</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
11 <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"last"</span>></span>项目<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
12 <span class="hljs-tag"></<span class="hljs-title">ul</span>></span></code></pre>
<p>用类选择器来选择第一个或者最后一个：</p>
<pre class="prettyprint"><code class=" hljs css">1 <span class="hljs-tag">ul</span> <span class="hljs-tag">li</span><span class="hljs-class">.first</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">3 }</span></span>
4
5 <span class="hljs-tag">ul</span> <span class="hljs-tag">li</span><span class="hljs-class">.last</span><span class="hljs-rules">{
<span class="hljs-rule">6 <span class="hljs-attribute">color</span>:<span class="hljs-value">blue</span></span>;
<span class="hljs-rule">7 }</span></span></code></pre>
<p><strong>4.4 下一个兄弟选择器</strong> <br> IE7开始兼容，IE6不兼容。 <br> +表示选择下一个兄弟</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
2 <span class="hljs-tag">h3</span>+<span class="hljs-tag">p</span><span class="hljs-rules">{
<span class="hljs-rule">3 <span class="hljs-attribute">color</span>:<span class="hljs-value">red</span></span>;
<span class="hljs-rule">4 }</span></span>
5 </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code></pre>
<p>选择上的是h3元素后面紧挨着的第一个兄弟。</p>
<pre class="prettyprint"><code class=" hljs xml">1 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个标题<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
2 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
3 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
4 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
5 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个标题<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
6 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
7 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
8 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
9 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个标题<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
10 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
11 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
12 <span class="hljs-tag"><<span class="hljs-title">p</span>></span>我是一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
13 <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>我是一个标题<span class="hljs-tag"></<span class="hljs-title">h3</span>></span></code></pre>
<p>所有的css3选择器，我们放在HTML5和CSS3课上介绍。</p>
<h2 id="五css的继承性和层叠性">五、CSS的继承性和层叠性</h2>
<p><strong>5.1 继承性</strong> <br> <a href="http://img.e-com-net.com/image/info8/8b78559968074745a38e97cdd5f5f7c5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b78559968074745a38e97cdd5f5f7c5.jpg" alt="CSS基础入门 第2天课堂笔记_第18张图片" title="" width="650" height="350" style="border:1px solid black;"></a></p>
<p>有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。 <br> 哪些属性能继承？ <br> color、 text-开头的、line-开头的、font-开头的。</p>
<p>这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。</p>
<p>所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：</p>
<pre class="prettyprint"><code class=" hljs css">1<span class="hljs-tag">body</span><span class="hljs-rules">{
<span class="hljs-rule">2 <span class="hljs-attribute">color</span>:<span class="hljs-value">gray</span></span>;
<span class="hljs-rule">3 <span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">14</span>px</span></span>;
<span class="hljs-rule">4}</span></span></code></pre>
<p>继承性是从自己开始，直到最小的元素。</p>
<p><strong>5.2 层叠性</strong> <br> 很多公司如果要笔试，那么一定会考层叠性。</p>
<p>层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！ <br> CSS像艺术家一样优雅，像工程师一样严谨。 <br> <a href="http://img.e-com-net.com/image/info8/a07581a186484a96a816ebc2d5bfa688.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a07581a186484a96a816ebc2d5bfa688.jpg" alt="CSS基础入门 第2天课堂笔记_第19张图片" title="" width="650" height="353" style="border:1px solid black;"></a></p>
<p>当选择器，选择上了某个元素的时候，那么要这么统计权重：（顺序不能错） <br> id的数量，类的数量，标签的数量 <br> <a href="http://img.e-com-net.com/image/info8/5f2a98d817c64f918cb0f035cc8045b8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5f2a98d817c64f918cb0f035cc8045b8.jpg" alt="CSS基础入门 第2天课堂笔记_第20张图片" title="" width="650" height="342" style="border:1px solid black;"></a></p>
<p>不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！ <br> <a href="http://img.e-com-net.com/image/info8/7de34227069f4664919cdb7e751326fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7de34227069f4664919cdb7e751326fa.jpg" alt="CSS基础入门 第2天课堂笔记_第21张图片" title="" width="650" height="211" style="border:1px solid black;"></a></p>
<p>如果权重一样，那么以最后出现的为准： <br> <a href="http://img.e-com-net.com/image/info8/ee468b23f5d745acbe6ac1b0e285f234.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ee468b23f5d745acbe6ac1b0e285f234.png" alt="CSS基础入门 第2天课堂笔记_第22张图片" title="" width="571" height="233" style="border:1px solid black;"></a> <br> 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。 <br> <a href="http://img.e-com-net.com/image/info8/58c073614a98488093c0b779d07e5344.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/58c073614a98488093c0b779d07e5344.jpg" alt="CSS基础入门 第2天课堂笔记_第23张图片" title="" width="650" height="468" style="border:1px solid black;"></a> <br> 如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。 <br> <a href="http://img.e-com-net.com/image/info8/a8b0ea2a06a240f4a264cbd32cd68330.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a8b0ea2a06a240f4a264cbd32cd68330.jpg" alt="CSS基础入门 第2天课堂笔记_第24张图片" title="" width="650" height="360" style="border:1px solid black;"></a> <br> 权重问题大总结： <br> 1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。 <br> 2） 如果没有选中，那么权重是0。如果大家都是0，不需要数标签的数量，采用就近原则即可。</p>
<p>题目演示： <br> 第1题： <br> <a href="http://img.e-com-net.com/image/info8/fb7337cff7534f45a792c23ca4288198.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb7337cff7534f45a792c23ca4288198.jpg" alt="CSS基础入门 第2天课堂笔记_第25张图片" title="" width="650" height="342" style="border:1px solid black;"></a> <br> 第2题： <br> <a href="http://img.e-com-net.com/image/info8/5120f409a187484c8fc4f5bf6926cd38.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5120f409a187484c8fc4f5bf6926cd38.jpg" alt="CSS基础入门 第2天课堂笔记_第26张图片" title="" width="650" height="404" style="border:1px solid black;"></a> <br> 第3题： <br> <a href="http://img.e-com-net.com/image/info8/32845237150f4b3c8985b0ba6375a86e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/32845237150f4b3c8985b0ba6375a86e.jpg" alt="CSS基础入门 第2天课堂笔记_第27张图片" title="" width="650" height="381" style="border:1px solid black;"></a> <br> 第4题： <br> <a href="http://img.e-com-net.com/image/info8/5986d650cb3f49dfb6418bd1d4bb24d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5986d650cb3f49dfb6418bd1d4bb24d3.jpg" alt="CSS基础入门 第2天课堂笔记_第28张图片" title="" width="650" height="373" style="border:1px solid black;"></a></p>
<p>css第3天：盒模型、浮动 <br> css第4天：定位 <br> css第5天：背景、表格 <br> css第6天：切图 <br> 复习一下： <br> 下列都是IE6兼容的选择器：</p>
<pre class="prettyprint"><code class=" hljs avrasm">p
<span class="hljs-preprocessor">#box</span>
<span class="hljs-preprocessor">.spec</span>
div<span class="hljs-preprocessor">.box</span>
div <span class="hljs-preprocessor">.box</span>
div , <span class="hljs-preprocessor">.box</span>
*</code></pre>
<p>下列都是IE7开始兼容：</p>
<pre class="prettyprint"><code class=" hljs erlang"><span class="hljs-keyword">div</span>>p
<span class="hljs-keyword">div</span>+p</code></pre>
<p>下列都是IE8开始兼容：</p>
<pre class="prettyprint"><code class=" hljs livecodeserver"><span class="hljs-operator">div</span> p:<span class="hljs-keyword">first</span>-child
<span class="hljs-operator">div</span> p:<span class="hljs-keyword">last</span>-child</code></pre>
<p>继承性：好的事儿。继承从上到下，哪些能？哪些不能？ <br> 层叠性：冲突，多个选择器描述了同一个属性，听谁的？</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1277233018309722112"></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+CSS3+JS)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1759474488807862272.htm"
title="HTML5+CSS3+JS小实例：黑客帝国“代码雨”特效" target="_blank">HTML5+CSS3+JS小实例：黑客帝国“代码雨”特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：黑客帝国“代码雨”特效技术栈：HTML+CSS+JS效果：源码：【HTML】黑客帝国“代码雨”特效【CSS】*{margin:0;padding:0;}body{overflow:hidden;}canvas{</div>
</li>
<li><a href="/article/1756621625018564608.htm"
title="前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS(51资源社)" target="_blank">前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS(51资源社)</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>前端必学40个精选案例实战一课吃透HTML5+CSS3+JS(51资源社)//xia仔k：百度网盘HTML5、CSS3和JavaScript是构建现代网页的三大核心技术。它们各自具有不同的功能和特点，通过协同工作，可以实现各种复杂和动态的网页效果。HTML5是超文本标记语言的最新版本，用于构建网页的结构和内容。它引入了许多新的元素和属性，使得网页更加语义化和可访问性。同时，HTML5还支持音频、视</div>
</li>
<li><a href="/article/1753412433575165952.htm"
title="HTML5+CSS3+JS小实例：黑色的简约下拉菜单" target="_blank">HTML5+CSS3+JS小实例：黑色的简约下拉菜单</a>
<span class="text-muted">艾恩小灰灰</span>
<div>实例：黑色的简约下拉菜单技术栈：HTML+CSS+JS效果：源码：【html】黑色的简约下拉菜单抖音【css】*{/*初始化*/margin:0;padding:0;box-sizing:border-box;}/*:root选择器匹配文档根元素*/:root{/*声明自定义属性*/--rotate-arrow:0;--dropdown-height:0;--list-opacity:0;--tr</div>
</li>
<li><a href="/article/1750093211897970688.htm"
title="HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果" target="_blank">HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果</a>
<span class="text-muted">耀南.</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A5%BD%E7%8E%A9%E7%82%AB%E9%85%B7%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E6%A1%88%E4%BE%8B/1.htm">前端好玩炫酷的动画小案例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>制作不易安利给大家前端实用的小实例cv可直接运行使用效果图：HTML：逼真的玻璃卡片悬停效果01CardOneRealisticglasscardhovereffect,realisticglasscardhovereffect,realisticglasscardhovereffect.ReadMore02CardTwoRealisticglasscardhovereffect,realisti</div>
</li>
<li><a href="/article/1750093212686499840.htm"
title="HTML5+CSS3+JS小实例：音频可视化" target="_blank">HTML5+CSS3+JS小实例：音频可视化</a>
<span class="text-muted">耀南.</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A5%BD%E7%8E%A9%E7%82%AB%E9%85%B7%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E6%A1%88%E4%BE%8B/1.htm">前端好玩炫酷的动画小案例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>制作不易安利给大家前端实用的小实例cv可直接运行使用效果图：HTML：音频可视化css：*{margin:0;padding:0;}body{min-height:100vh;display:flex;flex-direction:column;align-items:center;background-color:#000;}canvas{width:100%;height:100vh;}aud</div>
</li>
<li><a href="/article/1750093213537943552.htm"
title="HTML5+CSS3+JS小实例：自适应瀑布流布局" target="_blank">HTML5+CSS3+JS小实例：自适应瀑布流布局</a>
<span class="text-muted">耀南.</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A5%BD%E7%8E%A9%E7%82%AB%E9%85%B7%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E6%A1%88%E4%BE%8B/1.htm">前端好玩炫酷的动画小案例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>制作不易安利给大家前端实用的小实例cv可直接运行使用效果图：HTML：自适应瀑布流布局</div>
</li>
<li><a href="/article/1748104576365510656.htm"
title="制作一个简单海贼王HTML动漫主题网页（HTML+CSS+JS）" target="_blank">制作一个简单海贼王HTML动漫主题网页（HTML+CSS+JS）</a>
<span class="text-muted">html网页设计</span>
<div>二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面</div>
</li>
<li><a href="/article/1747631741704617984.htm"
title="web前端做汽车之家官网，HTML5+CSS3+JS" target="_blank">web前端做汽车之家官网，HTML5+CSS3+JS</a>
<span class="text-muted">做一道光</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">实战项目</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>大一写的代码，那时候没有接触到技术博客，没有及时记录下来，如今大三回顾前两年所学，发现好多知识已有所遗忘，现在重新复习web前端语言，当时写代码时所遇到的问题已经记不清楚了，但大体的解决办法还牢记于心，大家有哪里不会的可以直接私信我，我会专门写一个解决那个问题的博客提供给你。现把这个项目分享给大家，小白可以作为参考，代码较为简单，可以帮助大家更好的理解WEB前端。这个项目是写在一个html里面的汽</div>
</li>
<li><a href="/article/1746003552507019264.htm"
title="HTML5+CSS3+JS小实例：五彩纸屑礼花筒" target="_blank">HTML5+CSS3+JS小实例：五彩纸屑礼花筒</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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>实例：五彩纸屑礼花筒技术栈：HTML+CSS+JS效果：源码：【HTML】五彩纸屑礼花筒【CSS】</div>
</li>
<li><a href="/article/1746002143715803136.htm"
title="HTML5+CSS3+JS实现简单的音乐播放" target="_blank">HTML5+CSS3+JS实现简单的音乐播放</a>
<span class="text-muted">小激动. Caim</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>下面是一个简单的HTML5+CSS3+JS实现音乐播放器的示例代码：HTML部分：音乐播放器音乐播放器播放暂停CSS部分：.container{text-align:center;margin-top:10%;}h1{font-size:3em;margin-bottom:30px;}button{margin-top:20px;font-size:1.5em;}JS部分：varmyAudio=d</div>
</li>
<li><a href="/article/1746001631595479040.htm"
title="HTML5+CSS3+JS小实例：音频可视化" target="_blank">HTML5+CSS3+JS小实例：音频可视化</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>实例：音频可视化技术栈：HTML+CSS+JS效果：源码：【HTML】音频可视化【CSS】*{margin:</div>
</li>
<li><a href="/article/1742858338938404864.htm"
title="HTML5+CSS3+JS小实例：特殊验证码输入框" target="_blank">HTML5+CSS3+JS小实例：特殊验证码输入框</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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>实例：特殊验证码输入框技术栈：HTML+CSS+JS效果：源码：【HTML】特殊验证码输入框<pclas</div>
</li>
<li><a href="/article/1741228264174665728.htm"
title="HTML5+CSS3+JS小实例：网站实现一键切换暗色主题" target="_blank">HTML5+CSS3+JS小实例：网站实现一键切换暗色主题</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：网站实现一键切换暗色主题技术栈：HTML+CSS+JS效果：源码：【HTML】网站实现一键切换暗色主题</div>
</li>
<li><a href="/article/1741227366107070464.htm"
title="HTML5+CSS3+JS小实例：过年3D烟花秀" target="_blank">HTML5+CSS3+JS小实例：过年3D烟花秀</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</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>实例：过年3D烟花秀技术栈：HTML+CSS+JS效果：源码：【HTML】过年3D烟花秀，在此祝大家新年快乐，恭喜发财！【CSS】</div>
</li>
<li><a href="/article/1740465407707332608.htm"
title="网页设计与制作 HTML+CSS+JS 我的家乡青岛网站制作" target="_blank">网页设计与制作 HTML+CSS+JS 我的家乡青岛网站制作</a>
<span class="text-muted">html网页设计</span>
<div>二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面</div>
</li>
<li><a href="/article/1739828367231827968.htm"
title="大学生网页设计（期末大作业）静态HTML网页设计 商城类网页作业制作" target="_blank">大学生网页设计（期末大作业）静态HTML网页设计 商城类网页作业制作</a>
<span class="text-muted">-努力搬砖的小刘-</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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>一、网站介绍网页布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网页程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网页素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网页文件方面</div>
</li>
<li><a href="/article/1736838655189770240.htm"
title="HTML5+CSS3+JS小实例：过山车文字动画特效" target="_blank">HTML5+CSS3+JS小实例：过山车文字动画特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>实例：过山车文字动画特效技术栈：HTML+CSS+JS效果：源码：【HTML】【JS】过山车文字动画特效hellohelloworld!//使用插件Splitting({whitespace:true</div>
</li>
<li><a href="/article/1736838656188014592.htm"
title="HTML5+CSS3+JS小实例：自适应瀑布流布局" target="_blank">HTML5+CSS3+JS小实例：自适应瀑布流布局</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：自适应瀑布流布局技术栈：HTML+CSS+JS效果：源码：【HTML】自适应瀑布流布局【CSS】*{margin:0;padding:0;}.container{width:90%;m</div>
</li>
<li><a href="/article/1736838274044977152.htm"
title="HTML5+CSS3+JS小实例：可拖拽排序的人物列表" target="_blank">HTML5+CSS3+JS小实例：可拖拽排序的人物列表</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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>实例：可拖拽排序的人物列表技术栈：HTML+CSS+JS效果：源码：【HTML】可拖拽排序的人物列表路飞</sp</div>
</li>
<li><a href="/article/1736516550485139456.htm"
title="php项目打包成桌面应用程序,利用node-webkit如何把web打包成桌面应用" target="_blank">php项目打包成桌面应用程序,利用node-webkit如何把web打包成桌面应用</a>
<span class="text-muted">无无无所谓</span>
<a class="tag" taget="_blank" href="/search/php%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E6%88%90%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/1.htm">php项目打包成桌面应用程序</a>
<div>这篇文章主要介绍了windows环境下用node-webkit把web应用打包成桌面应用的教程,需要的朋友可以参考下node-webkit是一个Chromium和node.js上的结合体，通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用，而且还可以跨平台的哦。很显然比起传统的桌面应用，在某些特定领域用html5+css3+js开发的web应用更加简单和高效，而且</div>
</li>
<li><a href="/article/1736402900432773120.htm"
title="腾讯地图JS API GL 实现 “多边形区域判定点击事件位置”" target="_blank">腾讯地图JS API GL 实现 “多边形区域判定点击事件位置”</a>
<span class="text-muted">月上谷</span>
<a class="tag" taget="_blank" href="/search/%E8%85%BE%E8%AE%AF%E5%9C%B0%E5%9B%BE/1.htm">腾讯地图</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E8%85%BE%E8%AE%AF/1.htm">腾讯</a>
<div>利用腾讯地图JSAPIGL实现“多边形区域判定点击事件位置”技术点：HTML5+CSS3+js代码部分：html,body{height:100%;margin:0px;padding:0px;}#mapContainer{width:100%;height:100%;}functioninitMap(){varcenter=newTMap.LatLng(40.040452,116.273486)</div>
</li>
<li><a href="/article/1731460900776390656.htm"
title="HTML5+CSS3+JS小实例：数字滑动选择控件" target="_blank">HTML5+CSS3+JS小实例：数字滑动选择控件</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>实例：数字滑动选择控件技术栈：HTML+CSS+JS效果：源码：【HTML】数字滑动选择控件000102</div>
</li>
<li><a href="/article/1729340232714760192.htm"
title="HTML5+CSS3+JS课程设计3D旋转照片墙背景音乐" target="_blank">HTML5+CSS3+JS课程设计3D旋转照片墙背景音乐</a>
<span class="text-muted">扎心小指针0</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>完整代码：3D旋转照片墙/*去掉默认效果*/*{margin:0;padding:0;}body{background:#222;overflow:hidden;/*取消选中*/user-select:none;}@keyframesrotate{100%{transform:rotateY(360deg);}}.perspective{/*子元素透视场景深度*/perspective:600px</div>
</li>
<li><a href="/article/1729236524878344192.htm"
title="HTML5+CSS3+JS小实例：霁青+翠蓝的Tabbar动画特效" target="_blank">HTML5+CSS3+JS小实例：霁青+翠蓝的Tabbar动画特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：霁青+翠蓝的Tabbar动画特效技术栈：HTML+CSS+JS字体图标库：FontAwesome效果：源码：【HTML】霁青+翠蓝的Tabbar动画特效<u</div>
</li>
<li><a href="/article/1729236526111469568.htm"
title="HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效" target="_blank">HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：蜂巢里的小蜜蜂光标特效技术栈：HTML+CSS+JS效果：源码：【HTML】蜂巢里的小蜜蜂光标特效<</div>
</li>
<li><a href="/article/1729236394053808128.htm"
title="HTML5+CSS3+JS小实例：Canvas图片滑块拖动验证码" target="_blank">HTML5+CSS3+JS小实例：Canvas图片滑块拖动验证码</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>实例：Canvas图片滑块拖动验证码技术栈：HTML+CSS+JS效果：源码：【HTML】Canvas图片滑块拖动验证码<divclass="r</div>
</li>
<li><a href="/article/1729234083529175040.htm"
title="HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效" target="_blank">HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>实例：九宫格图片鼠标移入移出方向感知特效技术栈：HTML+CSS+JS效果：源码：【HTML】九宫格图片鼠标移入移出方向感知特效也许你永远都不会知道，你的一句话，我会记得很久；你的一个不以为然的承诺，我却苦苦守侯。</div>
</li>
<li><a href="/article/1726495908549439488.htm"
title="HTML5+CSS3+JS小实例：使用L2Dwidget实现二次元卡通看板娘" target="_blank">HTML5+CSS3+JS小实例：使用L2Dwidget实现二次元卡通看板娘</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：使用L2Dwidget实现二次元卡通看板娘技术栈：HTML+CSS+JS效果：源码：使用L2Dwidget实现二次元卡通看板娘body{background-image:linear-gradient(totop,#ff9a9e,#fecfef);}L2Dwidget.init({model:{//模型</div>
</li>
<li><a href="/article/1718658753433251840.htm"
title="HTML5+CSS3+JS小实例：带密码灯照射的登录界面" target="_blank">HTML5+CSS3+JS小实例：带密码灯照射的登录界面</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/html/1.htm">html</a>
<div>实例：带密码灯照射的登录界面技术栈：HTML+CSS+JS字体图标库：FontAwesome效果：源码：【HTML】带密码灯照射的登录界面登录<divclass</div>
</li>
<li><a href="/article/1718658752447590400.htm"
title="HTML5+CSS3+JS小实例：打散文字随机浮动特效" target="_blank">HTML5+CSS3+JS小实例：打散文字随机浮动特效</a>
<span class="text-muted">艾恩小灰灰</span>
<a class="tag" taget="_blank" href="/search/HTML%2BCSS%2BJS%E5%B0%8F%E5%AE%9E%E4%BE%8B/1.htm">HTML+CSS+JS小实例</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>实例：打散文字随机浮动特效技术栈：HTML+CSS+JS效果：源码：【HTML+JS】打散文字随机浮动特效你说帘外海棠，锦屏鸳鸯；后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量；后来茶烟尚绿，人影茫茫。你说可人如玉，与子偕臧；后来长亭远望，夜色微凉。你说霞染天光，陌上花开与谁享；后来烟笼柳暗，湖心水动影无双。你说彼岸灯火，心之所向ÿ</div>
</li>
<li><a href="/article/8.htm"
title="LeetCode[Math] - #66 Plus One" target="_blank">LeetCode[Math] - #66 Plus One</a>
<span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a>
<div>原题链接：#66 Plus One
要求：
给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。
注意：
1. 数字的较高位存在数组的头上，即num1表示数字1239
2. 每一位（数组中的每个元素）的取值范围为0~9
难度：简单
分析：
题目比较简单，只须从数组</div>
</li>
<li><a href="/article/135.htm"
title="JQuery中$.ajax()方法参数详解" target="_blank">JQuery中$.ajax()方法参数详解</a>
<span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局</div>
</li>
<li><a href="/article/262.htm"
title="JConsole & JVisualVM远程监视Webphere服务器JVM" target="_blank">JConsole & JVisualVM远程监视Webphere服务器JVM</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/JVisualVM/1.htm">JVisualVM</a><a class="tag" taget="_blank" href="/search/JConsole/1.htm">JConsole</a><a class="tag" taget="_blank" href="/search/Webphere/1.htm">Webphere</a>
<div> JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。
使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。
首先我们看WAS服务器端的配置.
1、登录was控制台https://10.4.119.18</div>
</li>
<li><a href="/article/389.htm"
title="自定义annotation" target="_blank">自定义annotation</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a>
<div>Java annotation 自定义注释@interface的用法 一、什么是注释
说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源</div>
</li>
<li><a href="/article/516.htm"
title="CentOS 5/6.X 使用 EPEL YUM源" target="_blank">CentOS 5/6.X 使用 EPEL YUM源</a>
<span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
<div>CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#</div>
</li>
<li><a href="/article/643.htm"
title="在SQLSERVER中查找缺失和无用的索引SQL" target="_blank">在SQLSERVER中查找缺失和无用的索引SQL</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
<div>--缺失的索引
SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,
last_user_seek ,
</div>
</li>
<li><a href="/article/770.htm"
title="Spring3 MVC 笔记（二） —json+rest优化" target="_blank">Spring3 MVC 笔记（二） —json+rest优化</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/Spring3+MVC/1.htm">Spring3 MVC</a>
<div>接上次的 spring mvc 注解的一些详细信息！
其实也是一些个人的学习笔记 呵呵！
</div>
</li>
<li><a href="/article/897.htm"
title="替换“\”的时候报错Unexpected internal error near index 1 \ ^" target="_blank">替换“\”的时候报错Unexpected internal error near index 1 \ ^</a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E2%80%9C%5C%E6%9B%BF%E6%8D%A2%E2%80%9D/1.htm">“\替换”</a>
<div>发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...
在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常
public class Main {
/*</div>
</li>
<li><a href="/article/1024.htm"
title="POJ 1035 Spell checker(哈希表)" target="_blank">POJ 1035 Spell checker(哈希表)</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%9A%B4%E5%8A%9B%E6%B1%82%E8%A7%A3--%E5%93%88%E5%B8%8C%E8%A1%A8/1.htm">暴力求解--哈希表</a>
<div>/*
题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词
要求按照输入时候的排名输出
题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重
*/
#include <iostream>
//#define
using namespace std;
const int HASH =</div>
</li>
<li><a href="/article/1151.htm"
title="通过原型实现javascript Array的去重、最大值和最小值" target="_blank">通过原型实现javascript Array的去重、最大值和最小值</a>
<span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a>
<div>用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。
实现代码如下：
<script type="text/javascript">
Array.prototype.unique = function() {
var a = {};
var le</div>
</li>
<li><a href="/article/1278.htm"
title="UIWebView实现https双向认证请求" target="_blank">UIWebView实现https双向认证请求</a>
<span class="text-muted">bewithme</span>
<a class="tag" taget="_blank" href="/search/UIWebView/1.htm">UIWebView</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
<div>
什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求
中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知</div>
</li>
<li><a href="/article/1405.htm"
title="NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)" target="_blank">NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a>
<div>3.事务处理
Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中</div>
</li>
<li><a href="/article/1532.htm"
title="各数据库分页sql备忘" target="_blank">各数据库分页sql备忘</a>
<span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a>
<div>ORACLE
下面这个效率很低
SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20;
下面这个效率很高
SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_</div>
</li>
<li><a href="/article/1659.htm"
title="【Scala七】Scala核心一：函数" target="_blank">【Scala七】Scala核心一：函数</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>1. 如果函数体只有一行代码，则可以不用写{},比如
def print(x: Int) = println(x)
一行上的多条语句用分号隔开，则只有第一句属于方法体，例如
def printWithValue(x: Int) : String= println(x); "ABC"
上面的代码报错，因为，printWithValue的方法</div>
</li>
<li><a href="/article/1786.htm"
title="了解GHC的factorial编译过程" target="_blank">了解GHC的factorial编译过程</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a>
<div>GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。
关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类</div>
</li>
<li><a href="/article/1913.htm"
title="Java-Collections Framework学习与总结-LinkedHashMap" target="_blank">Java-Collections Framework学习与总结-LinkedHashMap</a>
<span class="text-muted">BrokenDreams</span>
<a class="tag" taget="_blank" href="/search/LinkedHashMap/1.htm">LinkedHashMap</a>
<div> 前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。
</div>
</li>
<li><a href="/article/2040.htm"
title="读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory" target="_blank">读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/abstract/1.htm">abstract</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
package design.pattern;
/*
* Abstract Factory Pattern
* 抽象工厂模式的目的是：
* 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇”
* 这些接口是相关或者相依赖的</div>
</li>
<li><a href="/article/2167.htm"
title="压暗面部高光" target="_blank">压暗面部高光</a>
<span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/PS/1.htm">PS</a>
<div>方法一、压暗高光&重新着色
当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。
下面讲一下我今天处理高光区域的心得：
皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。
处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。
如果想简化步骤，可以只进行着色（参看下面的步骤1</div>
</li>
<li><a href="/article/2294.htm"
title="Java VisualVM监控远程JVM" target="_blank">Java VisualVM监控远程JVM</a>
<span class="text-muted">crabdave</span>
<a class="tag" taget="_blank" href="/search/visualvm/1.htm">visualvm</a>
<div>Java VisualVM监控远程JVM
JDK1.6开始自带的VisualVM就是不错的监控工具.
这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面
通过JMX连接远程机器, 需要经过下面的配置:
1. 修改远程机器JDK配置文件 (我这里远程机器是linux).
</div>
</li>
<li><a href="/article/2421.htm"
title="Saiku去掉登录模块" target="_blank">Saiku去掉登录模块</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/saiku/1.htm">saiku</a><a class="tag" taget="_blank" href="/search/%E7%99%BB%E5%BD%95/1.htm">登录</a><a class="tag" taget="_blank" href="/search/olap/1.htm">olap</a><a class="tag" taget="_blank" href="/search/BI/1.htm">BI</a>
<div>
1、修改applicationContext-saiku-webapp.xml
<security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />
<security:intercept-url pattern=&qu</div>
</li>
<li><a href="/article/2548.htm"
title="浅析 Flex中的Focus" target="_blank">浅析 Flex中的Focus</a>
<span class="text-muted">dsjt</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a><a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a>
<div>关键字：focus、 setFocus、 IFocusManager、KeyboardEvent
焦点、设置焦点、获得焦点、键盘事件
一、无焦点的困扰——组件监听不到键盘事件
原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸</div>
</li>
<li><a href="/article/2675.htm"
title="Yii全局函数使用" target="_blank">Yii全局函数使用</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址)
我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在</div>
</li>
<li><a href="/article/2802.htm"
title="设计模式之单例模式二（解决无序写入的问题）" target="_blank">设计模式之单例模式二（解决无序写入的问题）</a>
<span class="text-muted">come_for_dream</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a><a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E5%BA%8F%E6%89%A7%E8%A1%8C/1.htm">乱序执行</a><a class="tag" taget="_blank" href="/search/%E5%8F%8C%E9%87%8D%E6%A3%80%E9%AA%8C%E9%94%81/1.htm">双重检验锁</a>
<div> 在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该</div>
</li>
<li><a href="/article/2929.htm"
title="程序员从初级到高级的蜕变" target="_blank">程序员从初级到高级的蜕变</a>
<span class="text-muted">gcq511120594</span>
<a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。
我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。
现在我们把淫浸代码时间超过3年的开发人员称为</div>
</li>
<li><a href="/article/3056.htm"
title="Reverse Linked List" target="_blank">Reverse Linked List</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/list/1.htm">list</a>
<div>Reverse a singly linked list.
/**
* Definition for singly-linked list.
* public class ListNode {
* int val;
* ListNode next;
* ListNode(int x) { val = x; }
* }
*/
p</div>
</li>
<li><a href="/article/3183.htm"
title="Spring4.1新特性——数据库集成测试" target="_blank">Spring4.1新特性——数据库集成测试</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
<div>目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
</li>
<li><a href="/article/3310.htm"
title="C# Ajax上传图片同时生成微缩图(附Demo)" target="_blank">C# Ajax上传图片同时生成微缩图(附Demo)</a>
<span class="text-muted">liyonghui160com</span>
<div>
1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）
2.C#位图处理 System.Drawing。
3.最新demo支持IE7,IE8,Fir</div>
</li>
<li><a href="/article/3437.htm"
title="Java list三种遍历方法性能比较" target="_blank">Java list三种遍历方法性能比较</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下：
package com.hisense.tiger.list;
import java.util.ArrayList;
import java.util.Iterator;</div>
</li>
<li><a href="/article/3564.htm"
title="300个涵盖IT各方面的免费资源（上）——商业与市场篇" target="_blank">300个涵盖IT各方面的免费资源（上）——商业与市场篇</a>
<span class="text-muted">shoothao</span>
<a class="tag" taget="_blank" href="/search/seo/1.htm">seo</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E4%B8%9A%E4%B8%8E%E5%B8%82%E5%9C%BA/1.htm">商业与市场</a><a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E8%B5%84%E6%BA%90/1.htm">免费资源</a>
<div>
A.网站模板+logo+服务器主机+发票生成
HTML5 UP:响应式的HTML5和CSS3网站模板。
Bootswatch:免费的Bootstrap主题。
Templated:收集了845个免费的CSS和HTML5网站模板。
Wordpress.org|Wordpress.com:可免费创建你的新网站。
Strikingly:关注领域中免费无限的移动优</div>
</li>
<li><a href="/article/3691.htm"
title="localStorage、sessionStorage" target="_blank">localStorage、sessionStorage</a>
<span class="text-muted">uule</span>
<a class="tag" taget="_blank" href="/search/localStorage/1.htm">localStorage</a>
<div>W3School 例子
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不</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>
