html5+css3初级程序员

HTML5元素

html5的简介

2014 年 10 月 28 日，W3C 组织公开发布 HTML5 标准规范。
HTML5 针对大量不规范的 HTML 文档，做到了良好的兼容性。

HTML5 和 HTML4 的区别

DTD 的变化：因为HTML4.01基于SGML，HTML5不基于SGML
HTML5 的语法变化
某些元素可以省略结束标签
```
（    等） 
```
没有结束标签的元素
```
(
 等）
```
属性值可以不用引号括起来
标签不再区分大小写
某些标志性的属性可以省略属性值，通常为 boolean 类型

HTML5 的优势

解决跨浏览器，跨平台问题
增强了 web 的应用程序（比如以前用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页也能看视频）

HTML5废弃的标签

big center font frame frameset noframes

HTML5新增的元素

 用于定义文档或节的页眉
 用于定义文档或节的页脚
 用于定义文档内的文章
 用于定义文档中的一个区域（或节）
 用于定义与当前页面或当前文章的内容几乎无关的附属信息
 用于定义页面上的导航链接部分

 
用于定义一段独立的引用，经常与说明(caption)配合使用，通常用在主文中的图片，代码，表格等。
 用于表示是与其相关联的引用的说明/标题，用于描述其父节点
元素里的其他数据。
 用于对多个~
元素进行组合


效果
你好

你好

    ![](img/adv1.png)
    图片标题





    
    
    


效果：








    今天天气凉快吗？
    今天下雨了，天气很凉快


效果：

今天天气凉快吗？
今天下雨了，天气很凉快

### HTML5的表单控件
 
    0  100 

    50


### HTML5新增的type类型
color number email
time 生成一个时间选择器
datetime 生成一个 UTC 的日期时间选择器
datetimelocal  生成一个本地化的日期时间选择器
date  显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。谷歌识别

### HTML5新增的表单属性
placeholder 主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autofocus 当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
required 必需在提交之前填写输入字段
spellcheck 拼写检查，为、等元素新增属性
multiple 一次上传多个文件
maxlength <textarea>新增<br />maxlength：用于规定文本区域最大字符数。
wrap：是否包含换号符（soft/ hard） 
</code></pre> 
 <p>效果：</p> 
 <pre><code><form id="login" action="" method="get">
    用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
    年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
    邮箱：<input type="email" name="email"><br>
    生日：<input type="date" name="data"><br>  
    爱好：<select size="2" multiple  name="like">
        <option>篮球</option>
        <option>足球</option>
        <option>羽毛球球</option>
    </select>
    喜欢的颜色：<input type="color" name="color"><br>
    <button type="submit">提交</button>
</form>
</code></pre> 
 <p><form id="login" action="" method="get"></p> 
 <pre><code>用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
邮箱：<input type="email" name="email"><br>
生日：<input type="date" name="data"><br>  
爱好：<select size="2" multiple  name="like">
    <option>篮球</option>
    <option>足球</option>
    <option>羽毛球球</option>
</select>
喜欢的颜色：<input type="color" name="color"><br>
<button type="submit">提交</button></code></pre> 
 <p></form></p> 
 <h2>css3选择器</h2> 
 <h3>兄弟选择器</h3> 
 <pre><code>.box~p： 
.box所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻)
</code></pre> 
 <h3>属性选择器：</h3> 
 <pre><code>E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
E[attribute$=value] 用于选取属性值以指定值结尾的元素
E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词
</code></pre> 
 <h3>伪类选择器</h3> 
 <pre><code>:root 选择文档的根元素，HTML 里，永远是<html>元素
:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty 向没有子元素（包括文本内容）的元素添加样式
</code></pre> 
 <h3>伪元素选择器</h3> 
 <pre><code>:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式


</code></pre> 
 <h2>css3属性</h2> 
 <h3>background</h3> 
 <pre><code>background-clip 设置背景覆盖范围 border-box/padding-box/content-box 
background-origin 设置背景覆盖的起点 border-box/padding-box/content-box 
background-size 设置背景的大小 cover/contain/长度/百分比 
</code></pre> 
 <h3>文字</h3> 
 <pre><code>text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis 
word-break 只对英文起作用 以字母作为换行依据 normal/break-word 
word-wrap 只对英文起作用 以单词作为换行依据 normal/break-all/keep-all 
white-space:pre-wrap  只对中文起作用，强制换行
</code></pre> 
 <h3>盒子属性</h3> 
 <pre><code>border-radius
box-shadow
resize

</code></pre> 
 <h2>变形</h2> 
 <h3>translate(x,y)</h3> 
 <p>表示元素水平方向移动 x，垂直方向移动 y，其中 y 可以省略，表示垂直方向没有位移</p> 
 <pre><code>translateX(x)：表示元素水平方向移动 x。
translateY(y)：表示元素垂直方向移动y。
</code></pre> 
 <h3>rotate(angle)</h3> 
 <p>表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg</p> 
 <h3>scale(x,y)</h3> 
 <p>表示元素水平方向缩放比为 x，垂直方向上缩放比为y，其中y可以省略，表示y和 x相同，以保持缩放比。</p> 
 <pre><code>scaleX(x)：表示元素水平方向缩放比为 x。
scaleY(y)：表示元素垂直方向上缩放比为 y。
</code></pre> 
 <h3>skew(angleX ,angleY)</h3> 
 <p>表示元素沿着 x 轴方向倾斜angleX角度，沿着y轴方向倾斜angleY角度，其中 angleY可以省略，表示 Y 轴方向不倾斜。</p> 
 <pre><code>skewX(angleX)：表示元素沿着 x 轴方向倾斜angleX 角度。
skewY(angleY)：表示元素沿着 y 轴方向倾斜 angleY 角度。
</code></pre> 
 <h3>transform-origin</h3> 
 <p>表示元素旋转的中心点</p> 
 <p>默认值为 50% 50%。</p> 
 <ul> 
  <li>第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；</li> 
  <li>第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。</li> 
 </ul> 
 <h3>CSS3 的 3D 变形属性</h3> 
 <p>transform 增加了三个变形函数：</p> 
 <pre><code>rotateX：表示元素沿着 x 轴旋转。
rotateY：表示元素沿着 y 轴旋转。
rotateZ：表示元素沿着 z 轴旋转。
</code></pre> 
 <h3>transform-style</h3> 
 <p>用来设置嵌套的子元素在 3D 空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。</p> 
 <h3>perspective</h3> 
 <p>设置成透视效果，透视效果为近大远小。该属性值用来设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p> 
 <h3>perspective-origin</h3> 
 <p>设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同transform-origin，默认值为 50% 50%。</p> 
 <p><style></p> 
 <pre><code>.box{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 500px;
}
.con{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -150px;
    animation: rotate 4s infinite;
}
.con .side{
    position: absolute;
    width: 300px;
    height: 300px;
    font-size: 44px;
    line-height: 300px;
    text-align: center;
}
.con .before{
    background-color: rgba(0,0,0,0.4);
}
.con .left{
    background-color: rgba(255,0,0,0.4);
    left: -300px;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin:right;
}
.con .right{
    background-color: rgba(255,255,0,0.4);
    left: 300px;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: left;
}
.con .top{
    background-color: rgba(0,255,0,0.4);
    left: 0;
    top: -300px;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.con .bottom{
    background-color: rgba(0,0,255,0.4);
    left: 0;
    top: 300px;
    transform: rotateX(-90deg);
    transform-origin: top;
}
.con .back{
    background-color: rgba(200,122,0,0.4);
    transform: translateZ(-300px);
}

@keyframes rotate{
    0%{
        transform:rotateX(0) rotateY(0);
    }
    50%{
        transform:rotateX(0) rotateY(360deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}</code></pre> 
 <p></style></p> 
 <p><div class="box"></p> 
 <pre><code><div class="con">
    <div class="side before">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
</div></code></pre> 
 <p></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>立方体</title>
    <style>
        
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            perspective: 500px;
        }
        .con{
            position:relative;
            width:300px;
            height:300px;
            transform-style:preserve-3d;
            transform-origin:50% 50% -150px;
            animation:rotate 4s infinite;
        }
        .con .side{
            position:absolute;
            width:300px;
            height:300px;
            font-size:44px;
            line-height: 300px;
            text-align: center;
        }
        .con .before{
            background-color: rgba(0,0,0,0.4);
        }
        .con .left{
            background-color: rgba(255,0,0,0.4);
            left:-300px;
            top:0;
            transform:rotateY(-90deg);
            transform-origin:right;
        }
        .con .right{
            background-color: rgba(255,255,0,0.4);
            left:300px;
            top:0;
            transform:rotateY(90deg);
            transform-origin:left;
        }
        .con .top{
            background-color: rgba(0,255,0,0.4);
            left:0;
            top:-300px;
            transform:rotateX(90deg);
            transform-origin:bottom;
        }
        .con .bottom{
            background-color: rgba(0,0,255,0.4);
            left:0;
            top:300px;
            transform:rotateX(-90deg);
            transform-origin:top;
        }
        .con .back{
            background-color: rgba(200,122,0,0.4);
            transform:translateZ(-300px);
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            50%{
                transform:rotateX(0) rotateY(360deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="con">
        <div class="side before">前</div>
        <div class="side back">后</div>
        <div class="side top">上</div>
        <div class="side bottom">下</div>
        <div class="side left">左</div>
        <div class="side right">右</div>
    </div>
</div>
</body>
</html>
</code></pre> 
 <h2>说明</h2> 
 <h3>CSS3 perspective 属性</h3> 
 <p>实例，设置元素被查看位置的视图：</p> 
 <pre><code>div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
</code></pre> 
 <p><style></p> 
 <h1>div1</h1> 
 <p>{<br>position: relative;<br>height: 150px;<br>width: 150px;<br>margin: 50px;<br>padding:10px;<br>border: 1px solid black;<br>perspective:150;<br>-webkit-perspective:150; /<em> Safari and Chrome </em>/<br>}</p> 
 <h1>div2</h1> 
 <p>{<br>padding:50px;<br>position: absolute;<br>border: 1px solid black;<br>background-color: yellow;<br>transform: rotateX(45deg);<br>-webkit-transform: rotateX(45deg); /<em> Safari and Chrome </em>/<br>}<br></style></p> 
 <p><div id="div1"><br> <div id="div2">HELLO</div><br></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
<div id="div2">HELLO</div>
</div>

</body>
</html>
</code></pre> 
 <h3>浏览器支持</h3> 
 <p>目前浏览器都不支持 perspective 属性。</p> 
 <p>Chrome 和 Safari 支持替代的 -webkit-perspective 属性。</p> 
 <h3>定义和用法</h3> 
 <p>perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。</p> 
 <p>当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p> 
 <p><strong>注释</strong>：perspective 属性只影响 3D 转换元素。</p> 
 <p><strong>提示</strong>：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。</p> 
 <h2>过渡动画</h2> 
 <pre><code>transition:property transition-duration transition-delay transition-timing-function     

transition-delay 设置过渡的延迟时间
transition-duration 设置过渡的过渡时间
transition-timing-function 设置过渡的时间曲线

linear/ease/ease-in/easeout/ease-in-out/

transition-property 设置哪条 CSS 使用过渡
none/all/CSS 属性名称列表

@keyframes name{

}

animation:name duration delay count state

animation-name  使用@keyframes 定义的动画
animation-delay 设置动画的延迟时间

animation-timing-function 设置动画的时间曲线
linear/ease/ease-in/easeout/ease-in-out

animation-iteration-count  设置动画播放次数数字 /infinite
animation-direction 设置动画反向播放 normal/alternate
animation-play-state 设置动画播放状态 paused/running
animation-fill-mode: forwards 动画保持最终状态
</code></pre> 
 <h2>动画</h2> 
 <p><style></p> 
 <pre><code>.box{
    position: relative;
    width: 600px;
    height: 400px;
    border:2px solid blue;
    overflow: hidden;
}
.box .main{
    width: 100px;
    height: 100px;
    background-color: red;
    animation:translate 2s 1s 1 linear forwards;
    
}
.box:hover .main{
    animation-play-state: paused;
}

@keyframes translate{
    0%{
        transform: translateX(0) translateY(0);
    }
    25%{
        transform: translateX(500px) translateY(0);
    }
    50%{
        transform: translateX(500px) translateY(300px);
    }
    75%{
        transform: translateX(0) translateY(300px);
    }
    100%{
        transform: translateX(0) translateY(300px);
    }
}</code></pre> 
 <p></style></p> 
 <p><div class="box"></p> 
 <pre><code><div class="main"></div></code></pre> 
 <p></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<meta charset="utf-8">
<style>
    .box{
        position: relative;
        width: 600px;
        height: 400px;
        border:2px solid blue;
        overflow: hidden;
    }
    .box .main{
        width: 100px;
        height: 100px;
        background-color: red;
        animation:translate 2s 1s 1 linear forwards;
        
    }
    .box:hover .main{
        animation-play-state: paused;
    }

    @keyframes translate{
        0%{
            transform: translateX(0) translateY(0);
        }
        25%{
            transform: translateX(500px) translateY(0);
        }
        50%{
            transform: translateX(500px) translateY(300px);
        }
        75%{
            transform: translateX(0) translateY(300px);
        }
        100%{
            transform: translateX(0) translateY(300px);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div class="main"></div>
</div>
</body>
</html>

</code></pre> 
 <h2>弹性盒子</h2> 
 <p>CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。</p> 
 <h3>弹性盒模型概念</h3> 
 <p>任何一个容器都可以指定弹性布局</p> 
 <p>设置 flex 布局以后，子元素的 float,clear,vertical-align 等样式全部失效</p> 
 <pre><code>display:flex;或 display:inline-flex;
</code></pre> 
 <h3>弹性父元素属性</h3> 
 <pre><code>display:flex;
flex-direction: row|row-reverse|column| column-reverse
指定了弹性子元素在父容器中的位置。

juestify-content: flex-start|flex-end|center|space-between| space-around 
水平对齐方式

align-items:flex-start | flex-end | center | baseline | stretch 
垂直对齐方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content:
当flex-wrap起作用发生换行时，该属性控制每行的对齐方式
</code></pre> 
 <h3>弹性子元素属性</h3> 
 <p>order:num 数值小的排在前面。可以为负值</p> 
 <p>flex 属性用于指定弹性子元素如何分配空间</p> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1357917668543324160"></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初级程序员)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1832626394996240384.htm"
                           title="用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码" target="_blank">用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码</a>
                        <span class="text-muted">天眼查</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8html%E5%86%99%E5%87%BA%E7%94%9F%E6%97%A5%E8%9B%8B%E7%B3%95/1.htm">用html写出生日蛋糕</a>
                        <div>.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px</div>
                    </li>
                    <li><a href="/article/1831551939771461632.htm"
                           title="linux的webkit桌面应用,使用node-webkit构建桌面应用程序" target="_blank">linux的webkit桌面应用,使用node-webkit构建桌面应用程序</a>
                        <span class="text-muted">萌萌爱恋</span>

                        <div>Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常</div>
                    </li>
                    <li><a href="/article/1828906454971674624.htm"
                           title="新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版" target="_blank">新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版</a>
                        <span class="text-muted">全栈开发圈</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                        <div>《HTML5+CSS3Web前端开发与实例教程：微课视频版》本书内容《HTML5+CSS3Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项</div>
                    </li>
                    <li><a href="/article/1826736948258107392.htm"
                           title="HTML5+CSS3小实例：抽屉式相册" target="_blank">HTML5+CSS3小实例：抽屉式相册</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>HTML5+CSS3小实例：抽屉式相册技术栈：HTML+CSS效果：源码：抽屉式相册*{/*初始化取消内外边距*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局水平垂直居中*/display:flex;justify-content:center;align-items:center;background-color:#000;}.</div>
                    </li>
                    <li><a href="/article/1768164627641860096.htm"
                           title="HTML5+CSS3小实例：3D分层图像悬停效果" target="_blank">HTML5+CSS3小实例：3D分层图像悬停效果</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：3D分层图像悬停效果技术栈：HTML+CSS效果：源码：【html】3D分层图像悬停效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局居中*/display:flex;justify-content:center;align-items:center;overflow:hidden;/*渐变背景*/</div>
                    </li>
                    <li><a href="/article/1759904069578747904.htm"
                           title="高级 Java 必须突破的 10 个知识点，你get到几个了？" target="_blank">高级 Java 必须突破的 10 个知识点，你get到几个了？</a>
                        <span class="text-muted">LiJiaSi</span>

                        <div>对于搞开发的我们其实也是一样，现在流行的框架越来越多，封装的也越来越完善，各种框架可以搞定一切，几乎不用关注底层的实现，初级程序员只要熟悉基本的使用方法，便可以快速的开发上线；但对于高级程序员来讲，内功的修炼却越发的重要，比如算法、设计模式、底层原理等，只有把这些基础熟练之后，才能在开发过程中知其然知其所以然，出现问题时能快速定位到问题的本质。1、Java基础技术体系、JVM内存分配、垃圾回收、类</div>
                    </li>
                    <li><a href="/article/1759900109346271232.htm"
                           title="HTML5+CSS3小实例：有点小酷的input输入框动画" target="_blank">HTML5+CSS3小实例：有点小酷的input输入框动画</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>HTML5+CSS3实现有点小酷的input输入框动画，带动画的输入框，总是让人忍不住去点它。先看效果：源代码：您的姓名*{margin:0;padding:0;outline:none;/*这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的*/box-sizing:border-box;}body{/*弹性布局水平垂直居中*/display:flex;align-items:cen</div>
                    </li>
                    <li><a href="/article/1759870046122897408.htm"
                           title="HTML5+CSS3小实例：广告灯牌效果的loading动画" target="_blank">HTML5+CSS3小实例：广告灯牌效果的loading动画</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：广告灯牌效果的loading动画技术栈：HTML+CSS效果：源码：【html】广告灯牌效果的loading动画拼命加载中...【css】*{/*初始化*/margin:0;padding:0;/*box-sizing:border-box;*/}body{/*100%窗口高度*/min-height:100vh;/*弹性布局水平+垂直居中*/display:flex;justify-con</div>
                    </li>
                    <li><a href="/article/1755940551531708416.htm"
                           title="自学大数据：大数据学习线路及各阶段学习书籍" target="_blank">自学大数据：大数据学习线路及各阶段学习书籍</a>
                        <span class="text-muted">yoku酱</span>

                        <div>大数据学习路线及各阶段学习书籍推荐！阶段一、大数据基础——java语言基础方面（1）Java语言基础Java开发介绍、熟悉Eclipse开发工具、Java语言基础、Java流程控制、Java字符串、Java数组与类和对象、数字处理类与核心技术、I/O与反射、多线程、Swing程序与集合类（2）HTML、CSS与JavaScriptPC端网站布局、HTML5+CSS3基础、WebApp页面布局、原生</div>
                    </li>
                    <li><a href="/article/1755937613862158336.htm"
                           title="HTML5+CSS3学习与实践" target="_blank">HTML5+CSS3学习与实践</a>
                        <span class="text-muted">技术人生-小草</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B8%8E%E5%AE%9E%E8%B7%B5/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>
                        <div>文章目录学习资料HTML4开发者文档HTML标准结构文档声明字符编码设置语言标签排版标签语义化标签块级元素与行内元素文本标签图片标签超链接常用属性跳转锚点唤起指定应用列表有序列表无序列表列表嵌套自定义列表表格基本结构常用属性跨行与跨列常用标签补充表单基本结构提交按钮重置按钮禁用表单控件label标签fieldset与legend的使用（了解即可）框架标签HTML全局属性meta元信息CSS3CSS</div>
                    </li>
                    <li><a href="/article/1755885590336782336.htm"
                           title="【web前端开发】HTML及CSS简单页面布局练习" target="_blank">【web前端开发】HTML及CSS简单页面布局练习</a>
                        <span class="text-muted">爱写代码的July</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">web前端开发</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>案例一网页课程案例一网页课程课程体系实战课程案例二商品详情页案例二商品详情商品详情产品参数：产品名称：HTML5+CSS3网页设计  ISBN编号：9787302480723  书名：HTML5+CSS3网页设计作者：刘玉红，蒲娟 出版时间：2017-09  定价：78.00元出版社名称：清华大学出版社  开</div>
                    </li>
                    <li><a href="/article/1755535538078629888.htm"
                           title="web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535410542428160.htm"
                           title="web期末作业设计网页：动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535411142213632.htm"
                           title="web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535411746193408.htm"
                           title="web期末作业设计网页：学校网站设计——Ditto(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——Ditto(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535283639566336.htm"
                           title="web期末作业设计网页：动漫网站设计——蜡笔小新(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——蜡笔小新(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535284180631552.htm"
                           title="web期末作业设计网页：动漫网站设计——千与千寻(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——千与千寻(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a><a class="tag" taget="_blank" href="/search/dw%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">dw静态网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web前端网页设计</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535282301583360.htm"
                           title="web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a><a class="tag" taget="_blank" href="/search/dw%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">dw静态网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web前端网页设计</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。作品</div>
                    </li>
                    <li><a href="/article/1755533999012331520.htm"
                           title="web期末作业设计网页：动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1754193720636358656.htm"
                           title="web前端开发需要掌握哪些技术就可以拿到高薪？" target="_blank">web前端开发需要掌握哪些技术就可以拿到高薪？</a>
                        <span class="text-muted">web前端学习指南</span>

                        <div>首先我们来看看web前端的基本工作职责首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动。我们都知道，所有呈现的内容都是基于HTML网页的。如果你的html、css（包括现在的HTML5+CSS3）基础不会，或者不够扎实，都很难在有大的进步，或者你的JS很好，但布局基础不行，还是不能算合格的web前端。其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核</div>
                    </li>
                    <li><a href="/article/1753680735337725952.htm"
                           title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a>
                        <span class="text-muted">简·AI</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div>
                    </li>
                    <li><a href="/article/1753477729853915136.htm"
                           title="【web前端实例代码】Html5+css3+JavaScript创建点击打开照片库网页图标效果~适合初学者练手~超简单 ~" target="_blank">【web前端实例代码】Html5+css3+JavaScript创建点击打开照片库网页图标效果~适合初学者练手~超简单 ~</a>
                        <span class="text-muted">南北极之间</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%89%B9%E6%95%88%E6%BA%90%E7%A0%81/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/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8%E4%BB%A3%E7%A0%81/1.htm">网页设计编程入门代码</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8/1.htm">编程入门</a>
                        <div>b站视频演示效果：效果图：完整代码：照片库【前端实例代码】Html5+css3创建点击打开照片库网页图标效果~适合初学者练手~超简单~body{</div>
                    </li>
                    <li><a href="/article/1752450996736376832.htm"
                           title="Notepad++设置与查看字符编码以及查看二进制" target="_blank">Notepad++设置与查看字符编码以及查看二进制</a>
                        <span class="text-muted">曹元_</span>

                        <div>Notepad++可以说是最常用的文本编辑器了，免费且小巧。Notepad++本身能够识别文本的编码，因此拿到一个文本文件时，直接使用Notepad++打开，一般不会出现乱码。作为一个初级程序员，经常想查看下java文件使用的字符编码，或者想研究下class文件。就需要对Notepad++里面的字符编码功能有所了解啦。字符编码相关的菜单Notepad++中字符编码相关的菜单是“编码(N)”。常用四</div>
                    </li>
                    <li><a href="/article/1752401276945055744.htm"
                           title="SpringSecurity前传--与springboot2.0初步集成" target="_blank">SpringSecurity前传--与springboot2.0初步集成</a>
                        <span class="text-muted">青衣敖王侯</span>

                        <div>  相信大家都知道登录功能，初级程序员的脑海里面就是账号，密码，登录按钮然后到后台数据库查询一下信息就OK了。但其实登录没有这么简单，因为：1.我们所面临的登录认证模式很复杂1.1短信的登录1.2微信的登录1.3QQ的登录2.我们要支持多种前端渠道2.1网页登录2.2APP登录3.支持集群环境，跨应用工作，Session控制，控制用户权限，说防护与身份认证相关的攻击  认证和授权如此复杂，因此也诞</div>
                    </li>
                    <li><a href="/article/1752210404836130816.htm"
                           title="Java程序员最常用的20％的技术" target="_blank">Java程序员最常用的20％的技术</a>
                        <span class="text-muted">青春埋在这</span>

                        <div>我听说编程语言，经常使用的是其中20％的技术。在Java这门语言中，这20％包括哪些内容？要想找到一份Java初级程序员的工作，有哪些是必须掌握的，有哪些是可以现学现卖的？一个完整的Javaweb项目，有哪些具体模块，每个模块用到的技术是哪些？常用api（String，StringBuffer/StringBuilder等）1.集合类，线程类。2.Servlet（很少用纯粹的servlet写，但你</div>
                    </li>
                    <li><a href="/article/1751736623076229120.htm"
                           title="跟着pink老师前端入门教程-day12" target="_blank">跟着pink老师前端入门教程-day12</a>
                        <span class="text-muted">axiu呀</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%AD%A6/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/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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>二十六、HTML5+CSS3的提高1、HTML5的新特性HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：1.新特性增加了很多，但是我们专注于开发常用的新特性。2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。1.1HTML5新增的</div>
                    </li>
                    <li><a href="/article/1751449030350618624.htm"
                           title="HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！" target="_blank">HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！</a>
                        <span class="text-muted">℡古壹</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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>代码1登录使用账号或者手机号密码登录其他方式登录代码2登录欢迎来到登录界面，您可以通过这个界面登录，也可以通过其他方式实现登录使用QQ登录登录还没有账号？注册代码3登录Login没有账号?注册代码4注 册注册登 录找回密码登录SignInSignUp需要代码的小伙伴可以在评论区拿哦！！！</div>
                    </li>
                    <li><a href="/article/1751081871548104704.htm"
                           title="基于SpringBoot实现策略模式提供系统接口扩展能力" target="_blank">基于SpringBoot实现策略模式提供系统接口扩展能力</a>
                        <span class="text-muted">人帝</span>
<a class="tag" taget="_blank" href="/search/%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F/1.htm">策略模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
                        <div>相信我们对策略模式都有耳闻，但是可能不知道它在项目中具体能有什么作用，我们需要在什么场景下才能去尽可能得去使用策略模式。这里我简单的列出一个我之前在公司做的一个需求：跟第三方oa系统对接接口，对方需要回调我们当前系统，但是是不同的业务接口回调，我们系统可以根据一个字段来区分需要走哪个业务分支，可能初级程序员刚接触这个需求的时候想法是，多个接口回调，那就写多个接口罢了，强调接口隔离；或者直接一个接口</div>
                    </li>
                    <li><a href="/article/1751044201241395200.htm"
                           title="HTML5+CSS3小实例：3D卡片hover翻转效果" target="_blank">HTML5+CSS3小实例：3D卡片hover翻转效果</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：3D卡片hover翻转效果技术栈：HTML+CSS效果：源码：【html】3D卡片hover翻转效果蒙奇·D·路飞蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。外号“草帽”路飞，是草帽一伙、草帽大船团的船长，极恶的世代之一。橡胶果实能力者，悬赏金15亿贝里。梦想是找到传说中的OnePiece，成为海贼王。罗罗诺亚·索隆罗罗诺亚・索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽</div>
                    </li>
                    <li><a href="/article/1750772385449000960.htm"
                           title="网站制作流程，favicon图标，SEO优化，首页制作，logo SEO优化" target="_blank">网站制作流程，favicon图标，SEO优化，首页制作，logo SEO优化</a>
                        <span class="text-muted">Everything_na</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>
                        <div>网站制作流程开发工具以及技术栈1.开发工具VScode，ps，主流浏览器2.技术栈利用HTML5+CSS3手动布局，可以大量使用H5新增标签和样式采用结构与样式相分离，模块化开发良好的代码规范ClassName命名命名应尽量精短，明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线连接。制作首页，列表页，注册页三个页面项目搭建工作1.需要创建如下文件夹：项目文件夹样式类图片文件夹：i</div>
                    </li>
                                <li><a href="/article/91.htm"
                                       title="java解析APK" target="_blank">java解析APK</a>
                                    <span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/apk/1.htm">apk</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E6%9E%90APK/1.htm">解析APK</a>
                                    <div>解析apk有两种方法 
1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 
2、利用相关jar包里的集成方法解析apk 
 
这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 
 
 

public class ApkUtil
{
	/**
	 * 日志对象
	 */
	private static Logger	 </div>
                                </li>
                                <li><a href="/article/218.htm"
                                       title="nginx自定义ip访问N种方法" target="_blank">nginx自定义ip访问N种方法</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E7%A6%81%E6%AD%A2ip%E8%AE%BF%E9%97%AE/1.htm">nginx 禁止ip访问</a>
                                    <div>　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。 
　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种： 
　　　一：把ip段放在redis里，写一段lua 
          二：利用geo传递变量，写一段</div>
                                </li>
                                <li><a href="/article/345.htm"
                                       title="mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性" target="_blank">mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下： 
  
1. 
  
CURRENT_TIMESTAMP  
  
当要向数据库执行insert操作时，如果有个timestamp字段属性设为 
  
CURRENT_TIMESTAMP，则无论这</div>
                                </li>
                                <li><a href="/article/472.htm"
                                       title="struts2+spring+hibernate分页显示" target="_blank">struts2+spring+hibernate分页显示</a>
                                    <span class="text-muted">171815164</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。 
 
　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： 
 
 
 
 
 
public in</div>
                                </li>
                                <li><a href="/article/599.htm"
                                       title="构建自己的Wrapper应用" target="_blank">构建自己的Wrapper应用</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/rap/1.htm">rap</a>
                                    <div>        我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。 
  
        首先，创建项目应用 
  
&nb</div>
                                </li>
                                <li><a href="/article/726.htm"
                                       title="[简单]工作记录_多线程相关" target="_blank">[简单]工作记录_多线程相关</a>
                                    <span class="text-muted">53873039oycg</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a>
                                    <div>     最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接</div>
                                </li>
                                <li><a href="/article/853.htm"
                                       title="调试jdk中的源码，查看jdk局部变量" target="_blank">调试jdk中的源码，查看jdk局部变量</a>
                                    <span class="text-muted">程序员是怎么炼成的</span>
<a class="tag" taget="_blank" href="/search/jdk+%E6%BA%90%E7%A0%81/1.htm">jdk 源码</a>
                                    <div>转自：http://www.douban.com/note/211369821/ 
  
 学习jdk源码时使用-- 
    学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 
 
可惜的是sun提供的jdk并不能查看运行中的局部变量</div>
                                </li>
                                <li><a href="/article/980.htm"
                                       title="Oracle RAC Failover 详解" target="_blank">Oracle RAC Failover 详解</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言， 是感觉不到这种切换。 
 
 Oracle 10g RAC 的Failover 可以分为3种： 
 1. Client-Si</div>
                                </li>
                                <li><a href="/article/1107.htm"
                                       title="form表单提交数据编码方式及tomcat的接受编码方式" target="_blank">form表单提交数据编码方式及tomcat的接受编码方式</a>
                                    <span class="text-muted">antonyup_2006</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
                                    <div>原帖地址：http://www.iteye.com/topic/266705 
 
form有2中方法把数据提交给服务器，get和post,分别说下吧。 
（一）get提交 
1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。 
   
对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:</div>
                                </li>
                                <li><a href="/article/1234.htm"
                                       title="JS初学者必知的基础" target="_blank">JS初学者必知的基础</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js%E5%87%BD%E6%95%B0/1.htm">js函数</a><a class="tag" taget="_blank" href="/search/js%E5%85%A5%E9%97%A8%E5%9F%BA%E7%A1%80/1.htm">js入门基础</a>
                                    <div>JavaScript是网页的交互语言,实现网页的各种效果, 
JavaScript 是世界上最流行的脚本语言。

JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript 被设计为向 HTML 页面增加交互性。

许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 </div>
                                </li>
                                <li><a href="/article/1361.htm"
                                       title="iBatis的分页分析与详解" target="_blank">iBatis的分页分析与详解</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a>
                                    <div>        分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最</div>
                                </li>
                                <li><a href="/article/1488.htm"
                                       title="精通Oracle10编程SQL(15)使用对象类型" target="_blank">精通Oracle10编程SQL(15)使用对象类型</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</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/plsql/1.htm">plsql</a>
                                    <div>/*
 *使用对象类型
 */
--建立和使用简单对象类型
--对象类型包括对象类型规范和对象类型体两部分。
--建立和使用不包含任何方法的对象类型
CREATE OR REPLACE TYPE person_typ1 as OBJECT(
  name varchar2(10),gender varchar2(4),birthdate date
);

drop type p</div>
                                </li>
                                <li><a href="/article/1615.htm"
                                       title="【Linux命令二】文本处理命令awk" target="_blank">【Linux命令二】文本处理命令awk</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a>
                                    <div>awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。 
  awk命令用来做什么？ 
1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 
2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 
3.awk实际工</div>
                                </li>
                                <li><a href="/article/1742.htm"
                                       title="JAVA(ssh2框架)+Flex实现权限控制方案分析" target="_blank">JAVA(ssh2框架)+Flex实现权限控制方案分析</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>  
目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。 
【SSH2权限系统的实现机制】 
权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使</div>
                                </li>
                                <li><a href="/article/1869.htm"
                                       title="angular.forEach" target="_blank">angular.forEach</a>
                                    <span class="text-muted">boyitech</span>
<a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.forEach/1.htm">angular.forEach</a>
                                    <div>angular.forEach   描述:   循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)   </div>
                                </li>
                                <li><a href="/article/1996.htm"
                                       title="java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树" target="_blank">java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%8E%92%E5%BA%8F%E6%A0%91/1.htm">二叉排序树</a>
                                    <div>
import java.util.LinkedList;

public class CreateBSTfromSortedArray {

	/**
	 * 题目:给定一个排序数组，如何构造一个二叉排序树
	 * 递归
	 */

	public static void main(String[] args) {
		int[] data = { 1, 2, 3, 4, </div>
                                </li>
                                <li><a href="/article/2123.htm"
                                       title="action执行2次" target="_blank">action执行2次</a>
                                    <span class="text-muted">Chen.H</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/XHTML/1.htm">XHTML</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Webwork/1.htm">Webwork</a>
                                    <div>xwork 写道   <action name="userTypeAction" 
class="com.ekangcount.website.system.view.action.UserTypeAction"> 
<result name="ssss" type="dispatcher"> </div>
                                </li>
                                <li><a href="/article/2250.htm"
                                       title="[时空与能量]逆转时空需要消耗大量能源" target="_blank">[时空与能量]逆转时空需要消耗大量能源</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a>
                                    <div> 
 
        无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越..... 
 
        在进行时空穿梭的实验中,消耗超大规模的能源是必然</div>
                                </li>
                                <li><a href="/article/2377.htm"
                                       title="oracle的正则表达式(regular expression)详细介绍" target="_blank">oracle的正则表达式(regular expression)详细介绍</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/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                                    <div>    正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 
正则表达式中常用到的元数据(metacharacter)如下： 
^ 匹配字符串的开头位置。 
$ 匹配支付传的结尾位置。 
* </div>
                                </li>
                                <li><a href="/article/2504.htm"
                                       title="报表工具与报表性能的关系" target="_blank">报表工具与报表性能的关系</a>
                                    <span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a><a class="tag" taget="_blank" href="/search/birt/1.htm">birt</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E6%80%A7%E8%83%BD/1.htm">报表性能</a><a class="tag" taget="_blank" href="/search/%E6%B6%A6%E4%B9%BE%E6%8A%A5%E8%A1%A8/1.htm">润乾报表</a>
                                    <div>在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？ 
要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。 
  
一、报表处理的一般过程分析 
1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。 
  
2、</div>
                                </li>
                                <li><a href="/article/2631.htm"
                                       title="初一上学期难记忆单词背诵第一课" target="_blank">初一上学期难记忆单词背诵第一课</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/english/1.htm">english</a>
                                    <div>what 什么  
your 你 
name 名字 
my 我的 
am 是 
one 一 
two 二 
three 三 
four 四 
five 五 
class 班级，课 
  
six 六 
seven 七 
eight 八 
nince 九 
ten 十 
zero 零 
how 怎样 
old 老的 
eleven 十一 
twelve 十二 
thirteen </div>
                                </li>
                                <li><a href="/article/2758.htm"
                                       title="我学过和准备学的各种技术" target="_blank">我学过和准备学的各种技术</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a>
                                    <div>语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html </div>
                                </li>
                                <li><a href="/article/2885.htm"
                                       title="struts2中token防止重复提交表单" target="_blank">struts2中token防止重复提交表单</a>
                                    <span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%A4%8D%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95/1.htm">重复提交表单</a><a class="tag" taget="_blank" href="/search/struts2%E4%B8%ADtoken/1.htm">struts2中token</a>
                                    <div>struts2中token防止重复提交表单 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 2015年7月12日 11:52:32 星期日 
ht</div>
                                </li>
                                <li><a href="/article/3012.htm"
                                       title="线性查找二维数组" target="_blank">线性查找二维数组</a>
                                    <span class="text-muted">hao3100590</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a>
                                    <div>1.算法描述 
  
有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n) 
  
2.使用到的相关知识： 
结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816） 
  
3.使用数组名传递 
这个的不便之处很明显，一旦确定就是不能设置列值 
  
//使</div>
                                </li>
                                <li><a href="/article/3139.htm"
                                       title="spring security 3中推荐使用BCrypt算法加密密码" target="_blank">spring security 3中推荐使用BCrypt算法加密密码</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a>
                                    <div>spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， 
Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt 
Bcrpt中的salt可以是随机的，比如： 
 
 
 

int i = 0;
	while (i < 10) {
		String password = "1234</div>
                                </li>
                                <li><a href="/article/3266.htm"
                                       title="学习编程并不难,做到以下几点即可!" target="_blank">学习编程并不难,做到以下几点即可!</a>
                                    <span class="text-muted">lampcy</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a>
                                    <div>不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 
1、确定目标 
学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到</div>
                                </li>
                                <li><a href="/article/3393.htm"
                                       title="架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in)" target="_blank">架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in)</a>
                                    <span class="text-muted">nannan408</span>
<a class="tag" taget="_blank" href="/search/right+join/1.htm">right join</a>
                                    <div>1.前言。 
  如题。 
2.代码 
(1)单表查重复数据,根据a分组 
  


SELECT m.a,m.b, INNER   JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A   GROUP BY a HAVING rank>1 )k ON m.a=k.a



 
（2）多表查询 ， 
 使用改为le</div>
                                </li>
                                <li><a href="/article/3520.htm"
                                       title="jQuery选择器小结 VS 节点查找（附css的一些东西）" target="_blank">jQuery选择器小结 VS 节点查找（附css的一些东西）</a>
                                    <span class="text-muted">Everyday都不同</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/name%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">name选择器</a><a class="tag" taget="_blank" href="/search/%E8%BF%BD%E5%8A%A0%E5%85%83%E7%B4%A0/1.htm">追加元素</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE%E8%8A%82%E7%82%B9/1.htm">查找节点</a>
                                    <div>最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下： 
  
测试页面： 
<html>
	<head>
		<script src="jquery-1.7.2.min.js"></script>
		<script>
		/*$(function() {
			$(documen</div>
                                </li>
                                <li><a href="/article/3647.htm"
                                       title="关于EXT" target="_blank">关于EXT</a>
                                    <span class="text-muted">tntxia</span>
<a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a>
                                    <div>  
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 
  
  
  
ExtJs最开始基于YUI技术，由开发人员Jack </div>
                                </li>
                                <li><a href="/article/3774.htm"
                                       title="一个MIT计算机博士对数学的思考" target="_blank">一个MIT计算机博士对数学的思考</a>
                                    <span class="text-muted">xjnine</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a>
                                    <div> 在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe</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>