CSS-Cascading Style Sheet 层叠样式表
引言
在上一篇中，说到了html的相关标签的使用，下面主要介绍css的相关知识点。
html：负责网页的结构
css： 负责网页的美观（样式）
css的使用方式
（1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
（2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
（3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
CSS语法
选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….
一、 选择器
标签选择器
作用： 选择同名的标签
注意：选择到所有同名的标签
类选择器
作用： 选择同类的标签
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
id选择器
作用： 选择一个标签
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)
3）id选择器的优先级最高！
并集选择器
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
交集选择器
作用： 选择某个选择器中的子标签。
通用选择器
作用； 选择所有的标签
伪类选择器
作用：控制标签在不同状态下的样式。
标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态
visited: 已经被访问过的状态（鼠标点下且松开）
相关的代码表示在下面显示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css语法及选择器title>
<style type="text/css">
/*1.标签选择器*/
div{
font-size:18px;
color:#0F0}
/*2.类选择器*/
.d1{
font-size:24px;
color:#00F}
/*3.id选择器
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签
*/
#d2{
font-size:14px;
color:#F0F}
/*4.并集选择器*/
.d1,.d3{
font-size:16px;
color:#090}
/*5.交集选择器*/
div span{
font-size:18px;
color:#3F9}
style>
head>
<body>
<div>div1div><br />
<div>div2div><br />
<div class="d1">div3div><br />
<div class="d1" id="d2">div4div><br />
<div class="d3">div5div><br />
<div><span>divv中的span标签span>div><br />
<span>独立的span标签span>
body>
html>
结果如下图所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器title>
<style type="text/css">
/*link:没有访问过的状态*/
a:link{
font-size:14px;
color:#F00
}
/*visited：已经访问过的状态*/
a:visited{
font-size:24px;
color:#F0F}
/*hover:鼠标划过的状态*/
a:hover{
font-size:18px;
color:#00F}
/*active:鼠标按下后没有松开的状态*/
a:active{
font-size:18px;
color:#FF0}
style>
head>
<body>
<a href="3_css语法及选择器.html">伪类选择器a>
body>
html>
结果如下图所示（下图展示的是鼠标滑过时的状态）
二、常用的CSS属性和值
CSS文本
CSS字体
CSS背景
CSS列表
CSS表格
CSS边框
相关标签的代码表示形式如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本属性和值title>
<style type="text/css">
div{
/*color：颜色*/
color:#F00;
/*字符间距*/
letter-spacing:10px;
/*对齐方式*/
text-align:center;
/*文本修饰 下划线-underline,中划线(line-through),上划线-overline,没:none*/
text-decoration:underline;
/*单词间距*/
word-spacing:10px
}
style>
head>
<body>
<div>薛之谦 的 愿望是 世界和平div>
body>
html>
结果如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字体title>
<style type="text/css">
div{
/*字体类型*/
/* font-family:宋体;*/
/*字体大小*/
/* font-size:36px;*/
/*字体样式*/
/* font-style:italic;*/
/*字体粗细*/
/* font-weight:bold;*/
/*简写：样式、粗细、大小、类型*/
font:italic bold 36px 宋体;
}
style>
head>
<body>
<div>薛之谦的心愿是世界和平div>
body>
html>
结果如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景title>
<style type="text/css">
body{
/*背景颜色*/
/* background-color:#966;*/
/*背景图片*/
/*background-image:url(../../../../../Pictures/Saved%20Pictures/21654167370059749.jpg);*/
/*设置背景图片是否重复，或如何重复
not-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
*/
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/* background-repeat:no-repeat;*/
/*background-repeat:repeat;*/
/*设置背景的起始位置
参数一：显示的图片需要从那个位置开始显示
参数二：你的图片显示的位置*/
/* background-position:top center;*/
/*简写属性:颜色 图片 重复 位置*/
background:#966 url(../../../../../Pictures/Saved%20Pictures/IMG_20161107_091700.jpg) no-repeat top center;
}
style>
head>
<body>
body>
html>
结果如下：
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=utf-8" />
css列表<<span class="hljs-regexp">/title>
<style type="text/css</span><span class="hljs-string">">
ul{
/<span class="hljs-variable">*列</span>表符号类型<span class="hljs-variable">*/</span>
/<span class="hljs-variable">*list</span>-style-type:circle;<span class="hljs-variable">*/</span>
/<span class="hljs-variable">*设</span>置列表符号的图片<span class="hljs-variable">*/</span>
/<span class="hljs-variable">*list</span>-style-image:url(../../java<span class="hljs-variable">%E4</span><span class="hljs-variable">%B8</span><span class="hljs-variable">%8A</span><span class="hljs-variable">%E8</span><span class="hljs-variable">%AF</span><span class="hljs-variable">%BE</span>/24<span class="hljs-variable">%E7</span><span class="hljs-variable">%AC</span><span class="hljs-variable">%AC</span><span class="hljs-variable">%E4</span><span class="hljs-variable">%BA</span><span class="hljs-variable">%8C</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%8D</span><span class="hljs-variable">%81</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%9B</span><span class="hljs-variable">%9B</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%A4</span><span class="hljs-variable">%A9</span>/css<span class="hljs-variable">%E8</span><span class="hljs-variable">%B5</span><span class="hljs-variable">%84</span><span class="hljs-variable">%E6</span><span class="hljs-variable">%96</span><span class="hljs-variable">%99</span>/05.<span class="hljs-variable">%E7</span><span class="hljs-variable">%B4</span><span class="hljs-variable">%A0</span><span class="hljs-variable">%E6</span><span class="hljs-variable">%9D</span><span class="hljs-variable">%90</span>/start.jpg);<span class="hljs-variable">*/</span>
/<span class="hljs-variable">*简</span>写:类型 图片<span class="hljs-variable">*/</span>
list-style:circle url(../../java<span class="hljs-variable">%E4</span><span class="hljs-variable">%B8</span><span class="hljs-variable">%8A</span><span class="hljs-variable">%E8</span><span class="hljs-variable">%AF</span><span class="hljs-variable">%BE</span>/24<span class="hljs-variable">%E7</span><span class="hljs-variable">%AC</span><span class="hljs-variable">%AC</span><span class="hljs-variable">%E4</span><span class="hljs-variable">%BA</span><span class="hljs-variable">%8C</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%8D</span><span class="hljs-variable">%81</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%9B</span><span class="hljs-variable">%9B</span><span class="hljs-variable">%E5</span><span class="hljs-variable">%A4</span><span class="hljs-variable">%A9</span>/css<span class="hljs-variable">%E8</span><span class="hljs-variable">%B5</span><span class="hljs-variable">%84</span><span class="hljs-variable">%E6</span><span class="hljs-variable">%96</span><span class="hljs-variable">%99</span>/05.<span class="hljs-variable">%E7</span><span class="hljs-variable">%B4</span><span class="hljs-variable">%A0</span><span class="hljs-variable">%E6</span><span class="hljs-variable">%9D</span><span class="hljs-variable">%90</span>/head.png);
}
</style>
</head>
<body>
<ul>
<li>薛之谦</li>
<li>黄晓明</li>
<li>方大同</li>
</ul>
</body>
</html>
</span></code></pre>
<p>如果如下： <br> <a href="http://img.e-com-net.com/image/info8/113f478709bc463685e12cc6efeb467c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/113f478709bc463685e12cc6efeb467c.jpg" alt="CSS-Cascading Style Sheet 层叠样式表_第5张图片" title="" width="650" height="239" style="border:1px solid black;"></a></p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>css表格<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<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">
<span class="hljs-tag">table</span><span class="hljs-rules">{
<span class="hljs-comment">/*合并表格的边框*/</span>
<span class="hljs-rule"><span class="hljs-attribute">border-collapse</span>:<span class="hljs-value">collapse</span></span></span>}
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"300"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"400"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>姓名<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>数学<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>张三<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>89<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>77<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>李四<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>89<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>99<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>王五<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>78<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>88<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-title">table</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre>
<p>结果如下： <br> <a href="http://img.e-com-net.com/image/info8/e675d008d22140f3ba9d31bad7550be7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e675d008d22140f3ba9d31bad7550be7.jpg" alt="CSS-Cascading Style Sheet 层叠样式表_第6张图片" title="" width="650" height="214" style="border:1px solid black;"></a></p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>css边框<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<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">
<span class="hljs-tag">div</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">300</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">300</span>px</span></span>;
<span class="hljs-comment">/*设置颜色*/</span>
<span class="hljs-comment">/*border-bottom-color:#F00;
border-top-color:#0F9;
border-left-color:#90C;
border-right-color:#FF6;*/</span>
<span class="hljs-comment">/*实线:solid*/</span>
<span class="hljs-comment">/* border-bottom-style:solid;*/</span>
<span class="hljs-comment">/*点划线:dotted*/</span>
<span class="hljs-comment">/* border-left-style:dotted;*/</span>
<span class="hljs-comment">/*双实线:double*/</span>
<span class="hljs-comment">/* border-right-style:double;*/</span>
<span class="hljs-comment">/*虚线:dashed*/</span>
<span class="hljs-comment">/* border-top-style:dashed;*/</span>
<span class="hljs-comment">/*简写属性*/</span>
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">3</span>px solid <span class="hljs-hexcolor">#F00</span></span></span>;<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>薛之谦<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre>
<p>结果如下： <br> <a href="http://img.e-com-net.com/image/info8/103e79b8923a4118922eb4785617019f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/103e79b8923a4118922eb4785617019f.jpg" alt="CSS-Cascading Style Sheet 层叠样式表_第7张图片" title="" width="650" height="418" style="border:1px solid black;"></a> <br> <strong>三、盒子模型</strong> <br> 定义：可以把html页面上每个标签看做是一个盒子。 <br> 盒子相关的属性： <br> 宽度和高度（width和height）： 决定这个盒子的容量 <br> 内边距（padding）： 盒子边框与内容的距离 <br> 边框（border）： 盒子的厚度 <br> 外边距（margin）： 盒子与盒子之间的距离</p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>盒子模型<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<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">
<span class="hljs-tag">div</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">200</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">200</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">6</span>px solid <span class="hljs-hexcolor">#F00</span></span></span></span>}
<span class="hljs-id">#d1</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">200</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">200</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"><span class="hljs-number">15</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"><span class="hljs-number">20</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"><span class="hljs-number">10</span>px</span></span>;
<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"d1"</span>></span>div1<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> ></span>div2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre>
<p>结果如下： <br> <a href="http://img.e-com-net.com/image/info8/98032f1f66794f8aac020a704eb35c86.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98032f1f66794f8aac020a704eb35c86.jpg" alt="CSS-Cascading Style Sheet 层叠样式表_第8张图片" title="" width="650" height="530" style="border:1px solid black;"></a> <br> <strong>四、 CSS定位</strong> <br> 相对定位：relative（相对自己之前的位置） <br> 绝对定位：abosolute（相对父标签的位置） <br> 固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)</p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>css定位<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<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">
<span class="hljs-tag">div</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">300</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">300</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">3</span>px solid <span class="hljs-hexcolor">#F00</span></span></span></span>}
<span class="hljs-id">#d1</span><span class="hljs-rules">{
<span class="hljs-comment">/*相对定位,相对于自己之前的位置*/</span>
<span class="hljs-comment">/*position:relative;
top:20px;
left:20px;*/</span>
<span class="hljs-comment">/*绝对定位:相对于自己的父标签而言*/</span>
<span class="hljs-comment">/*position:absolute;
top:10px;
left:10px;*/</span>
<span class="hljs-comment">/*固定定位:相对于浏览器而言*/</span>
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">fixed</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"><span class="hljs-number">100</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"><span class="hljs-number">500</span>px</span></span>;<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>div1<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"d1"</span>></span>div2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre>
<p>结果如下：（显示的是固定定位） <br> <a href="http://img.e-com-net.com/image/info8/1ba45039a0ce4c7dbe99e1d512a1a85f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ba45039a0ce4c7dbe99e1d512a1a85f.jpg" alt="CSS-Cascading Style Sheet 层叠样式表_第9张图片" title="" width="650" height="362" style="border:1px solid black;"></a></p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1292092792541093888"></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">你可能感兴趣的:(html)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1947845808606998528.htm"
title="mysql 清理磁盘空间" target="_blank">mysql 清理磁盘空间</a>
<span class="text-muted">汐猫</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>数据库相关学习资料：https://edu.51cto.com/video/655.htmlMySQL清理磁盘空间：代码示例与流程指南MySQL是一种广泛使用的开源关系数据库管理系统，它在处理大量数据时可能会占用大量的磁盘空间。随着时间的推移，数据库可能会积累许多不再需要的数据，导致磁盘空间不足。本文将介绍如何清理MySQL数据库中的磁盘空间，包括代码示例和流程图。清理磁盘空间的原因性能提升：清理</div>
</li>
<li><a href="/article/1947837622546132992.htm"
title="任涵去脂——秋雨寒了红叶" target="_blank">任涵去脂——秋雨寒了红叶</a>
<span class="text-muted">任涵去脂</span>
<div>粉蝶尖尖，蜓青风淡。笔锋里流出唐诗宋词，行间中藏匿了十里桃花。淡雅几笔，远寄一束听雨的轻盈。幽长月光下，肩落长影，飘逸着风幔罗幛的秋香。任涵去脂，原文地址http://www.rhqz8.cn/rhqz.html秋雨寒了红叶。捧起一缕秋风，听红叶细语。是秋的辉煌，是冬的序言。在秋色冬雪间连着相依相伴的岁月。秋是冬的情，冬是秋的梦。山岭红秀，细雨如绸。撑起一伞秋雨，流淌着海洋的斑驳。回眸中，一川朦胧</div>
</li>
<li><a href="/article/1947832820688809984.htm"
title="javascript基本内容和标签" target="_blank">javascript基本内容和标签</a>
<span class="text-muted">Sonnenblume_f</span>
<a class="tag" taget="_blank" href="/search/IT/1.htm">IT</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/IT/1.htm">IT</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a>
<div>js概念:javascript是互联网上最流行的，可以嵌套到html代码中的，一种基于对象和事件驱动的，并具有安全性能的脚本语言。具有1）向html页面中增加交互行为；2）脚本语言，语法和java类似；3）解释性语言，边执行边解释;4）跨平台，每个浏览器都具有js解释器;作用：增删HTML和css中的代码,能够动态校验数据组成：ECMAScript（核心）BOM浏览器对象模型DOM文档对象模型引入</div>
</li>
<li><a href="/article/1947823746253385728.htm"
title="PHP与Web页面交互：从基础表单到AJAX实战" target="_blank">PHP与Web页面交互：从基础表单到AJAX实战</a>
<span class="text-muted">独立开发者阿乐</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%BC%E5%90%88%E6%80%A7%E5%8E%9F%E5%88%9B/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/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/Web%E9%A1%B5%E9%9D%A2/1.htm">Web页面</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95%E5%A4%84%E7%90%86/1.htm">表单处理</a><a class="tag" taget="_blank" href="/search/AJAX%E6%8A%80%E6%9C%AF/1.htm">AJAX技术</a><a class="tag" taget="_blank" href="/search/AJAX/1.htm">AJAX</a>
<div>文章目录PHP与Web页面交互：从基础到高级实践1.引言2.基础表单处理2.1HTML表单与PHP交互基础2.2GET与POST方法比较3.高级交互技术3.1AJAX与PHP交互3.2使用FetchAPI进行现代AJAX交互4.文件上传处理5.安全性考量5.1常见安全威胁与防护5.2数据验证与过滤6.现代PHP与前端框架交互6.1构建RESTfulAPI6.2使用JWT进行认证7.性能优化7.1缓</div>
</li>
<li><a href="/article/1947797910787780608.htm"
title="网络爬虫进阶" target="_blank">网络爬虫进阶</a>
<span class="text-muted">rooney2024</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
<div>目录一、进阶爬虫的核心挑战二、关键技术与最佳实践三、实战案例：爬取动态电商价格（伪代码示例）四、持续学习路径结语一、进阶爬虫的核心挑战动态渲染页面(JavaScript/AJAX)问题：数据由JavaScript动态加载生成，初始HTML中不存在。解决方案：浏览器自动化工具：Selenium,Playwright,Puppeteer。模拟真实浏览器行为，等待JS执行并渲染出完整DOM后再解析。无头</div>
</li>
<li><a href="/article/1947782284526546944.htm"
title="Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析" target="_blank">Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析</a>
<span class="text-muted">慢行的骑兵</span>
<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/android/1.htm">android</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/webrtc/1.htm">webrtc</a>
<div>一.前言使用Webrtc实现1对1的音视频通话，先从Web端进行学习要比直接从Android端进行学习要轻松许多（若没有JS和Html以及Node基础，查找相关基础教程，能梳理代码的逻辑即可）。本文Android端接入Webrtc是通过引入官方的sdk来实现的。本文涉及到的Demo代码包含三部分，服务器端、Web端、Android端。服务器端使用的是Node，Web使用的是Html和JS，Andr</div>
</li>
<li><a href="/article/1947771950927507456.htm"
title="Python 服务器端与客户端的加密通信（SSL/TLS）解析" target="_blank">Python 服务器端与客户端的加密通信（SSL/TLS）解析</a>
<span class="text-muted">现实逃脱计划TA</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>```htmlPython服务器端与客户端的加密通信（SSL/TLS）解析在当今互联网时代，数据安全变得越来越重要。为了保护数据在传输过程中的安全，使用SSL/TLS协议进行加密通信成为了一种常见的做法。本文将详细介绍如何在Python中实现服务器端和客户端之间的SSL/TLS加密通信。什么是SSL/TLS？SSL（SecureSocketsLayer）和TLS（TransportLayerSec</div>
</li>
<li><a href="/article/1947763002170208256.htm"
title="vue中实现验证码输入" target="_blank">vue中实现验证码输入</a>
<span class="text-muted">结城</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E9%AA%8C%E8%AF%81%E7%A0%81/1.htm">验证码</a><a class="tag" taget="_blank" href="/search/vue%E8%BE%93%E5%85%A5%E6%A1%86/1.htm">vue输入框</a>
<div>vue验证码input输入解决焦点切换有点晚了就不吐槽了，咱还是把代码上了，赶紧洗澡，养好精神明天努力上班！！！想学node,想学react,想精进webpack,想vue学的更好一点，了解底层代码，学算法，学计算机原理，想写自己的博客网站…这是一条学无止境的路，没办法要恰饭效果html部分js部分exportdefault{props:{inputNums:{type:Number,defaul</div>
</li>
<li><a href="/article/1947762624158560256.htm"
title="聊聊 iframe：网页中的“窗口”是怎么回事？" target="_blank">聊聊 iframe：网页中的“窗口”是怎么回事？</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>在网页开发中，是一个挺常见但又有点“低调”的HTML标签。你可能在浏览网页时见过它，比如嵌入的YouTube视频、地图，或者一些外部的小工具。它就像网页里开了一扇小窗口，能把另一个网页的内容嵌进来。今天就来聊聊iframe的前世今生、怎么用、包括srcdoc的妙用，它在微前端、传统后端开发、打印场景、通信机制中的应用，以及如何防止别人用iframe内嵌你的网站，尽量说得自然又接地气。iframe是</div>
</li>
<li><a href="/article/1947762372076695552.htm"
title="微信小程序软键盘弹出的问题" target="_blank">微信小程序软键盘弹出的问题</a>
<span class="text-muted">结城</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
<div>微信小程序软键盘弹出的问题这里记录一个微信中开发的一个小问题，1.当我开发这个页面功能的时候在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框2.遮住状态这个时候我们还发现页面被顶了上去，头部的导航栏没有了3.解决问题html部分/防止页面被顶我们使用adjust-position属性js部分//并且加入失去焦点，得到焦点事件，通过bindfocus事件对象我</div>
</li>
<li><a href="/article/1947753920881291264.htm"
title="python启动其他程序或命令（pandoc）" target="_blank">python启动其他程序或命令（pandoc）</a>
<span class="text-muted">SUN_SU3</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>编写python脚本时，有些功能由其他程序执行，直接在python脚本中启动对应的程序或命令执行即可，现记录用过的几种方法：查看程序的安装目录：whichpandoc1）subprocess:importsubprocessa=subprocess.Popen(['/opt/***/pandoc','/home/***/test.docx','-o','/home/***/test.html'])</div>
</li>
<li><a href="/article/1947743208528211968.htm"
title="web第一次作业" target="_blank">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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>实现一个登录页面、实现一个注册页面；实现一个主页-登录页面：`login.html`-注册页面：`register.html`-主页：`index.html`要求如下：-主页中，可以点击**注册**或者**登录**能直接在新窗口跳转到对应的页面-登录页面中，输入账号、密码可以点击登录-自动跳转到主页-注册页面中，输入账号、密码、确认密码、昵称，点击注册，注册后自动跳转到登录页面login.html</div>
</li>
<li><a href="/article/1947732118515806208.htm"
title="docker部署dm数据库" target="_blank">docker部署dm数据库</a>
<span class="text-muted">yy1209357299</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/dm/1.htm">dm</a>
<div>官方文档参考官网地址：https://eco.dameng.com/document/dm/zh-cn/start/dm-install-docker.html下载镜像地址docker部署1、加载镜像dockerload-idm8_20240613_x86_rh6_64_rq_ent_8.1.3.140_pack5.tar使用dockerimages，查看镜像和镜像标签2、创建路径，挂载备用mkd</div>
</li>
<li><a href="/article/1947726823588687872.htm"
title="Linux指令大全网站" target="_blank">Linux指令大全网站</a>
<span class="text-muted"></span>
<div>Linux指令大全网站！Linux命令大全(手册)：超全！且提供指令查询网址：https://www.linuxcool.com/Linux指令(菜鸟教程)：超全！提供清晰的表格查找网址：https://www.runoob.com/linux/linux-command-manual.htmlLinux中文在线手册：这个网站可以检索Linux命令，提供了命令的例子和收藏命令的搜索平台网址：htt</div>
</li>
<li><a href="/article/1947725945293041664.htm"
title="盘点一个Python网络爬虫过程中中文乱码的问题" target="_blank">盘点一个Python网络爬虫过程中中文乱码的问题</a>
<span class="text-muted">皮皮_f075</span>
<div>大家好，我是皮皮。一、前言前几天在Python白银交流群【空翼】问了一个Python网络爬虫中文乱码的问题，提问截图如下：原始代码如下：importrequestsimportparselurl='https://news.p2peye.com/article-514723-1.html'headers={'Accept-Language':'zh-CN,zh;q=0.9','Accept':'a</div>
</li>
<li><a href="/article/1947679674897330176.htm"
title="Javaweb笔记" target="_blank">Javaweb笔记</a>
<span class="text-muted">笙鹿鸣</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>HTMLHTML网页常用基础知识网页结构JavaSEC/SClientserver客户端–服务器JavaWebB/SBroswerServer浏览器–服务器网页的组成部分：内容（结构）、表现、行为HTML:HyperTextMarkupLanguage(超文本标记语言)ALT+F2选择浏览器HTML书写规范：表示整个html页面的开始头信息标题标题body是页面的主体内容页面主体内容表示整个htm</div>
</li>
<li><a href="/article/1947671735390236672.htm"
title="python 抓取小红书" target="_blank">python 抓取小红书</a>
<span class="text-muted">小五咔咔咔</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>python相关学习资料：https://edu.51cto.com/video/3832.htmlhttps://edu.51cto.com/video/4102.htmlhttps://edu.51cto.com/video/1158.htmlPython抓取小红书数据的科普文章小红书是一个流行的社交电商平台，用户可以分享购物心得、生活点滴等。本文将介绍如何使用Python语言抓取小红书的数据</div>
</li>
<li><a href="/article/1947662029372321792.htm"
title="poi html转换成word文档,poi将html转换为word文档" target="_blank">poi html转换成word文档,poi将html转换为word文档</a>
<span class="text-muted">天猪飞翔</span>
<a class="tag" taget="_blank" href="/search/poi/1.htm">poi</a><a class="tag" taget="_blank" href="/search/html%E8%BD%AC%E6%8D%A2%E6%88%90word%E6%96%87%E6%A1%A3/1.htm">html转换成word文档</a>
<div>如何使用apachepoi将word转化为htmlJava可以使用这个开源框架，对word进行读取合并等操作，ApachePOI是一个开源的利用Java读写Excel、WORD等微软OLE2组件文档的项目。最新的3.5版本有很多改进，加入了对采用OOXML格式的Office2007支持，如xlsx、docx、pptx文档。示例如下：importorg.apache.poi.POITextExtra</div>
</li>
<li><a href="/article/1947620685761277952.htm"
title="No module named "Crypto"，如何安装Python三方模块Crypto" target="_blank">No module named "Crypto"，如何安装Python三方模块Crypto</a>
<span class="text-muted">weixin_30342827</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a>
<div>前两天公司公司老总让我研究怎么用企业微信第三方应用进行官网对接，完成URL回调验证问题。具体如何进行Python的Django网站与企业微信第三方应用进行回调验证的博客地址为：https://www.cnblogs.com/ws17345067708/p/10522472.html这里讲讲，如何在win10下，安装一个非常坑爹的加密算法库，名字叫"Crypto"看了好多博客，没有一个管用的，要么就</div>
</li>
<li><a href="/article/1947608582660878336.htm"
title="Three.js入门：创建第一个3D场景" target="_blank">Three.js入门：创建第一个3D场景</a>
<span class="text-muted">薯条说影</span>
<a class="tag" taget="_blank" href="/search/Three.js/1.htm">Three.js</a><a class="tag" taget="_blank" href="/search/3D%E5%9C%BA%E6%99%AF%E5%88%9B%E5%BB%BA/1.htm">3D场景创建</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E8%AE%BE%E7%BD%AE/1.htm">跨平台设置</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86/1.htm">安全异常处理</a><a class="tag" taget="_blank" href="/search/HTML%E9%AA%A8%E6%9E%B6%E6%90%AD%E5%BB%BA/1.htm">HTML骨架搭建</a>
<div>背景简介Three.js是一个轻量级的3D图形库，它让Web开发者能够在浏览器中创建和显示3D图形。本章介绍如何设置环境以开始使用Three.js，包括不同操作系统下的安装步骤、安全异常处理以及基本的HTML骨架创建。安装与设置操作系统兼容性：Three.js的使用不仅限于Windows系统。对于其他操作系统，如Linux和MacOS，需要将可执行文件复制到目标目录，并通过命令行启动。无论是哪种操</div>
</li>
<li><a href="/article/1947595985240780800.htm"
title="爬虫_加速乐秒杀" target="_blank">爬虫_加速乐秒杀</a>
<span class="text-muted">kisloy</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E9%80%86%E5%90%91/1.htm">逆向</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>加速乐补环境补环境window={navigator:{userAgent:"Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/104.0.0.0Safari/537.36"},outerWidth:1920,outerHeight:1050,};location={reload:functi</div>
</li>
<li><a href="/article/1947573543596257280.htm"
title="从零入门 HTML 开发：构建网页世界的基石指南" target="_blank">从零入门 HTML 开发：构建网页世界的基石指南</a>
<span class="text-muted">incidite</span>
<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开发：构建网页世界的基石指南在互联网蓬勃发展的今天，我们每天浏览的网页、使用的App界面，背后都离不开HTML这一基础技术的支撑。作为前端开发的入门语言，HTML（超文本标记语言）就像建筑中的砖石，是构建网页骨架的核心。无论你是想成为专业的前端工程师，还是单纯想了解网页背后的运作原理，掌握HTML基础都是迈出的第一步。认识HTML：网页的“骨架”语言HTML的全称为HyperTex</div>
</li>
<li><a href="/article/1947558922462228480.htm"
title="实现一个HTML页面，上传图片后可以测量两条辅助线之间的距离，支持点击添加、拖动和右键删除辅助线" target="_blank">实现一个HTML页面，上传图片后可以测量两条辅助线之间的距离，支持点击添加、拖动和右键删除辅助线</a>
<span class="text-muted"></span>
<div>一、项目背景偶尔需要测量图片上元素的宽度高度和间距。因此实现一个交互式、可视化的测距工具。开发一个简单易用的HTML页面，用户可以上传任意图片，在图片上通过点击添加辅助线，拖动调整辅助线位置，右键删除不需要的辅助线，同时自动计算并显示相邻辅助线间的距离，提升效率和准确度。二、核心功能图片上传用户可以上传本地图片作为测距背景，图片会按用户指定的宽高展示，支持任意尺寸，不做限制。辅助线添加用户点击图片</div>
</li>
<li><a href="/article/1947557935617994752.htm"
title="5. 移动端适配rem方案" target="_blank">5. 移动端适配rem方案</a>
<span class="text-muted">未路过</span>
<div>1.rem+动态html的font-sizerem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。比如如下案例：1.设置一个盒子的宽度是2rem；2.设置不同的屏幕上html的font-size不同；image.png这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的fo</div>
</li>
<li><a href="/article/1947555015702933504.htm"
title="centos7常用的国内yum源整理" target="_blank">centos7常用的国内yum源整理</a>
<span class="text-muted">inrgihc</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>清华大学yum源参考地址：https://mirrors.tuna.tsinghua.edu.cn/help/centos/网易yum源参考地址：http://mirrors.163.com/.help/centos.htmlyum-yinstallwgetrm-rf/etc/yum.repo.d/*wget-O/etc/yum.repos.d/CentOS-Base.repohttp://mir</div>
</li>
<li><a href="/article/1947521418820382720.htm"
title="标签的分类" target="_blank">标签的分类</a>
<span class="text-muted">健倾心语</span>
<div>双标签：成对的标签，有开始标签和结束标签html，title，body，等单标签：单个标签只有开始标签没有结束标签meta根据标签所处的位置，又可以分为平级关系和父子关系标签</div>
</li>
<li><a href="/article/1947503825724174336.htm"
title="Python 事件循环与 asyncio 的底层实现" target="_blank">Python 事件循环与 asyncio 的底层实现</a>
<span class="text-muted">代码界的灵魂舞者</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>```htmlPython事件循环与asyncio的底层实现Python事件循环与asyncio的底层实现在现代的异步编程中，事件循环扮演着至关重要的角色。Python的asyncio模块是其核心，它提供了一种优雅的方式来处理异步任务和并发操作。本文将深入探讨Python中事件循环的概念以及asyncio的底层实现。什么是事件循环？事件循环（EventLoop）是一种控制流机制，它负责管理任务队列</div>
</li>
<li><a href="/article/1947472676176064512.htm"
title="《Cocos2d-x实战 Lua卷》上线了" target="_blank">《Cocos2d-x实战 Lua卷》上线了</a>
<span class="text-muted"></span>
<div>感谢大家一直以来的支持！各大商店均开始销售：京东：http://item.jd.com/11659697.html当当：http://product.dangdang.com/23659810.html《Cocos2d-x实战Lua卷》源码及样章下载地址：源码下载地址：http://51work6.com/forum.php?mod=viewthread&tid=1198&extra=page%3</div>
</li>
<li><a href="/article/1947472423611854848.htm"
title="webkitSpeechRecognitionHTML5语音识别文字（直接运行）" target="_blank">webkitSpeechRecognitionHTML5语音识别文字（直接运行）</a>
<span class="text-muted">AIGC创想家</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB/1.htm">语音识别</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。下面是已经封装好的代码，复制之后可以在控制台只接运行。classSpeechRecognitionManager{??tempTranscript=''??isRecording=false;??timeoutid=0;??exitKeywors=['stop','exit','quit','退出','停止识别','说完了'</div>
</li>
<li><a href="/article/1947450475209093120.htm"
title="网络数据分层封装与解封过程的详细说明" target="_blank">网络数据分层封装与解封过程的详细说明</a>
<span class="text-muted">两圆相切</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E8%A7%84%E5%88%92%E8%AE%BE%E8%AE%A1%E5%B8%88/1.htm">网络规划设计师</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>网络数据分层封装全流程数据封装流程（发送端）-CSDN优化版OSI层次封装动作数据单元关键头部信息示例应用层添加应用层协议头部报文(Message)GET/index.htmlHTTP/1.1Host:www.example.com表示层数据加密/压缩PPDUTLSv1.3RecordLayerContentType:ApplicationData会话层添加会话控制标识SPDUSIPCall-ID</div>
</li>
<li><a href="/article/6.htm"
title="[黑洞与暗粒子]没有光的世界" target="_blank">[黑洞与暗粒子]没有光的世界</a>
<span class="text-muted">comsci</span>
<div> 无论是相对论还是其它现代物理学,都显然有个缺陷,那就是必须有光才能够计算
但是,我相信,在我们的世界和宇宙平面中,肯定存在没有光的世界....
那么,在没有光的世界,光子和其它粒子的规律无法被应用和考察,那么以光速为核心的
&nbs</div>
</li>
<li><a href="/article/133.htm"
title="jQuery Lazy Load 图片延迟加载" target="_blank">jQuery Lazy Load 图片延迟加载</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。
版本：
jQuery v1.4.4+
jQuery Lazy Load v1.7.2
注意事项：
需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src</div>
</li>
<li><a href="/article/260.htm"
title="使用Jodd的优点" target="_blank">使用Jodd的优点</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/jodd/1.htm">jodd</a>
<div>1. 简化和统一 controller ，抛弃 extends SimpleFormController ，统一使用 implements Controller 的方式。
2. 简化 JSP 页面的 bind, 不需要一个字段一个字段的绑定。
3. 对 bean 没有任何要求，可以使用任意的 bean 做为 formBean。
使用方法简介</div>
</li>
<li><a href="/article/387.htm"
title="jpa Query转hibernate Query" target="_blank">jpa Query转hibernate Query</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
<div>public List<Map> getMapList(String hql,
Map map) {
org.hibernate.Query jpaQuery = entityManager.createQuery(hql);
if (null != map) {
for (String parameter : map.keySet()) {
jp</div>
</li>
<li><a href="/article/514.htm"
title="Django_Python3添加MySQL/MariaDB支持" target="_blank">Django_Python3添加MySQL/MariaDB支持</a>
<span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="/search/mariaDB/1.htm">mariaDB</a>
<div>现状
首先，Django@Python2.x 中默认的引擎为 django.db.backends.mysql 。但是在Python3中如果这样写的话，会发现 django.db.backends.mysql 依赖 MySQLdb[5] ，而 MySQLdb 又不兼容 Python3 于是要找一种新的方式来继续使用MySQL。 MySQL官方的方案
首先据MySQL文档[3]说，自从MySQL</div>
</li>
<li><a href="/article/641.htm"
title="在SQLSERVER中查找消耗IO最多的SQL" target="_blank">在SQLSERVER中查找消耗IO最多的SQL</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
<div>返回做IO数目最多的50条语句以及它们的执行计划。
select top 50
(total_logical_reads/execution_count) as avg_logical_reads,
(total_logical_writes/execution_count) as avg_logical_writes,
(tot</div>
</li>
<li><a href="/article/768.htm"
title="spring UnChecked 异常 官方定义！" target="_blank">spring UnChecked 异常 官方定义！</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div> 如果你接触过spring的 事物管理！那么你必须明白 spring的 非捕获异常！ 即 unchecked 异常！ 因为 spring 默认这类异常事物自动回滚！！
public static boolean isCheckedException(Throwable ex)
{
return !(ex instanceof RuntimeExcep</div>
</li>
<li><a href="/article/895.htm"
title="mongoDB 入门指南、示例" target="_blank">mongoDB 入门指南、示例</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/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C/1.htm">操作</a>
<div>一、准备工作
1、 下载mongoDB
下载地址：http://www.mongodb.org/downloads
选择合适你的版本
相关文档：http://www.mongodb.org/display/DOCS/Tutorial
2、 安装mongoDB
A、 不解压模式：
将下载下来的mongoDB-xxx.zip打开，找到bin目录，运行mongod.exe就可以启动服务，默</div>
</li>
<li><a href="/article/1022.htm"
title="CUDA 5 Release Candidate Now Available" target="_blank">CUDA 5 Release Candidate Now Available</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/CUDA/1.htm">CUDA</a>
<div>The CUDA 5 Release Candidate is now available at http://developer.nvidia.com/<wbr></wbr>cuda/cuda-pre-production. Now applicable to a broader set of algorithms, CUDA 5 has advanced fe</div>
</li>
<li><a href="/article/1149.htm"
title="Essential Studio for WinRT网格控件测评" target="_blank">Essential Studio for WinRT网格控件测评</a>
<span class="text-muted">Axiba</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>
<div>Essential Studio for WinRT界面控件包含了商业平板应用程序开发中所需的所有控件，如市场上运行速度最快的grid 和chart、地图、RDL报表查看器、丰富的文本查看器及图表等等。同时，该控件还包含了一组独特的库，用于从WinRT应用程序中生成Excel、Word以及PDF格式的文件。此文将对其另外一个强大的控件——网格控件进行专门的测评详述。
网格控件功能
1、</div>
</li>
<li><a href="/article/1276.htm"
title="java 获取windows系统安装的证书或证书链" target="_blank">java 获取windows系统安装的证书或证书链</a>
<span class="text-muted">bewithme</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
<div>
有时需要获取windows系统安装的证书或证书链，比如说你要通过证书来创建java的密钥库 。
有关证书链的解释可以查看此处 。
public static void main(String[] args) {
SunMSCAPI providerMSCAPI = new SunMSCAPI();
S</div>
</li>
<li><a href="/article/1403.htm"
title="NoSQL数据库之Redis数据库管理(set类型和zset类型)" target="_blank">NoSQL数据库之Redis数据库管理(set类型和zset类型)</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>4.sets类型
Set是集合，它是string类型的无序集合。set是通过hash table实现的，添加、删除和查找的复杂度都是O(1)。对集合我们可以取并集、交集、差集。通过这些操作我们可以实现sns中的好友推荐和blog的tag功能。
sadd：向名称为key的set中添加元</div>
</li>
<li><a href="/article/1530.htm"
title="异常捕获何时用Exception，何时用Throwable" target="_blank">异常捕获何时用Exception，何时用Throwable</a>
<span class="text-muted">bingyingao</span>
<div>用Exception的情况
try {
//可能发生空指针、数组溢出等异常
} catch (Exception e) {
</div>
</li>
<li><a href="/article/1657.htm"
title="【Kafka四】Kakfa伪分布式安装" target="_blank">【Kafka四】Kakfa伪分布式安装</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
<div>在http://bit1129.iteye.com/blog/2174791一文中，实现了单Kafka服务器的安装，在Kafka中，每个Kafka服务器称为一个broker。本文简单介绍下，在单机环境下Kafka的伪分布式安装和测试验证 1. 安装步骤
Kafka伪分布式安装的思路跟Zookeeper的伪分布式安装思路完全一样，不过比Zookeeper稍微简单些(不</div>
</li>
<li><a href="/article/1784.htm"
title="Project Euler" target="_blank">Project Euler</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a>
<div>Project Euler是个数学问题求解网站，网站设计的很有意思，有很多problem，在未提交正确答案前不能查看problem的overview，也不能查看关于problem的discussion thread，只能看到现在problem已经被多少人解决了，人数越多往往代表问题越容易。
看看problem 1吧：
Add all the natural num</div>
</li>
<li><a href="/article/1911.htm"
title="Java-Collections Framework学习与总结-ArrayDeque" target="_blank">Java-Collections Framework学习与总结-ArrayDeque</a>
<span class="text-muted">BrokenDreams</span>
<a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a>
<div> 表、栈和队列是三种基本的数据结构，前面总结的ArrayList和LinkedList可以作为任意一种数据结构来使用，当然由于实现方式的不同，操作的效率也会不同。
这篇要看一下java.util.ArrayDeque。从命名上看</div>
</li>
<li><a href="/article/2038.htm"
title="读《研磨设计模式》-代码笔记-装饰模式-Decorator" target="_blank">读《研磨设计模式》-代码笔记-装饰模式-Decorator</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.io.BufferedOutputStream;
import java.io.DataOutputStream;
import java.io.FileOutputStream;
import java.io.Fi</div>
</li>
<li><a href="/article/2165.htm"
title="Maven学习(一)" target="_blank">Maven学习(一)</a>
<span class="text-muted">chenyu19891124</span>
<a class="tag" taget="_blank" href="/search/Maven%E7%A7%81%E6%9C%8D/1.htm">Maven私服</a>
<div> 学习一门技术和工具总得花费一段时间，5月底6月初自己学习了一些工具，maven+Hudson+nexus的搭建，对于maven以前只是听说，顺便再自己的电脑上搭建了一个maven环境，但是完全不了解maven这一强大的构建工具，还有ant也是一个构建工具，但ant就没有maven那么的简单方便，其实简单点说maven是一个运用命令行就能完成构建，测试，打包，发布一系列功</div>
</li>
<li><a href="/article/2292.htm"
title="[原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充" target="_blank">[原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/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/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a>
<div>本文主要介绍在JWFD工作流引擎设计中遇到的一个实际问题的解决方案，请参考我的博文"带条件选择的并行汇聚路由问题"中图例A2描述的情况(http://comsci.iteye.com/blog/339756),我现在把我对图例A2的一个解决方案公布出来，请大家多指点
节点匹配搜索算法(用于解决标准对称流程图条件汇聚点运行控制参数的算法)
需要解决的问题：已知分支</div>
</li>
<li><a href="/article/2419.htm"
title="Linux中用shell获取昨天、明天或多天前的日期" target="_blank">Linux中用shell获取昨天、明天或多天前的日期</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E5%87%A0%E5%B9%B4/1.htm">上几年</a><a class="tag" taget="_blank" href="/search/%E6%98%A8%E5%A4%A9/1.htm">昨天</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E4%B8%8A%E5%87%A0%E4%B8%AA%E6%9C%88/1.htm">获取上几个月</a>
<div>在Linux中可以通过date命令获取昨天、明天、上个月、下个月、上一年和下一年
# 获取昨天
date -d 'yesterday' # 或 date -d 'last day'
# 获取明天
date -d 'tomorrow' # 或 date -d 'next day'
# 获取上个月
date -d 'last month'
# </div>
</li>
<li><a href="/article/2546.htm"
title="我所理解的云计算" target="_blank">我所理解的云计算</a>
<span class="text-muted">dongwei_6688</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a>
<div> 在刚开始接触到一个概念时，人们往往都会去探寻这个概念的含义，以达到对其有一个感性的认知，在Wikipedia上关于“云计算”是这么定义的，它说：
Cloud computing is a phrase used to describe a variety of computing co</div>
</li>
<li><a href="/article/2673.htm"
title="YII CMenu配置" target="_blank">YII CMenu配置</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>Adding id and class names to CMenu
We use the id and htmlOptions to accomplish this. Watch.
//in your view
$this->widget('zii.widgets.CMenu', array(
'id'=>'myMenu',
'items'=>$this-&g</div>
</li>
<li><a href="/article/2800.htm"
title="设计模式之静态代理与动态代理" target="_blank">设计模式之静态代理与动态代理</a>
<span class="text-muted">come_for_dream</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>静态代理与动态代理
代理模式是java开发中用到的相对比较多的设计模式，其中的思想就是主业务和相关业务分离。所谓的代理设计就是指由一个代理主题来操作真实主题，真实主题执行具体的业务操作，而代理主题负责其他相关业务的处理。比如我们在进行删除操作的时候需要检验一下用户是否登陆，我们可以删除看成主业务，而把检验用户是否登陆看成其相关业务</div>
</li>
<li><a href="/article/2927.htm"
title="【转】理解Javascript 系列" target="_blank">【转】理解Javascript 系列</a>
<span class="text-muted">gcc2ge</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>理解Javascript_13_执行模型详解
摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个</div>
</li>
<li><a href="/article/3054.htm"
title="Subsets II" target="_blank">Subsets II</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/set/1.htm">set</a>
<div>Given a collection of integers that might contain duplicates, nums, return all possible subsets.
Note:
Elements in a subset must be in non-descending order.
The solution set must not conta</div>
</li>
<li><a href="/article/3181.htm"
title="Spring4.1新特性——Spring缓存框架增强" target="_blank">Spring4.1新特性——Spring缓存框架增强</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</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/3308.htm"
title="shell嵌套expect执行命令" target="_blank">shell嵌套expect执行命令</a>
<span class="text-muted">liyonghui160com</span>
<div>
一直都想把expect的操作写到bash脚本里,这样就不用我再写两个脚本来执行了,搞了一下午终于有点小成就,给大家看看吧.
系统:centos 5.x
1.先安装expect
yum -y install expect
2.脚本内容:
cat auto_svn.sh
#!/bin/bash
</div>
</li>
<li><a href="/article/3435.htm"
title="Linux实用命令整理" target="_blank">Linux实用命令整理</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>0. 基本命令 linux 基本命令整理
1. 压缩 解压 tar -zcvf a.tar.gz a #把a压缩成a.tar.gz tar -zxvf a.tar.gz #把a.tar.gz解压成a
2. vim小结 2.1 vim替换 :m,ns/word_1/word_2/gc </div>
</li>
<li><a href="/article/3562.htm"
title="独立开发人员通向成功的29个小贴士" target="_blank">独立开发人员通向成功的29个小贴士</a>
<span class="text-muted">shoothao</span>
<a class="tag" taget="_blank" href="/search/%E7%8B%AC%E7%AB%8B%E5%BC%80%E5%8F%91/1.htm">独立开发</a>
<div>
概述：本文收集了关于独立开发人员通向成功需要注意的一些东西,对于具体的每个贴士的注解有兴趣的朋友可以查看下面标注的原文地址。
明白你从事独立开发的原因和目的。
保持坚持制定计划的好习惯。
万事开头难，第一份订单是关键。
培养多元化业务技能。
提供卓越的服务和品质。
谨小慎微。
营销是必备技能。
学会组织，有条理的工作才是最有效率的。
“独立</div>
</li>
<li><a href="/article/3689.htm"
title="JAVA中堆栈和内存分配原理" target="_blank">JAVA中堆栈和内存分配原理</a>
<span class="text-muted">uule</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>1、栈、堆
1.寄存器：最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new 出来的对象）或者常量池中（字符串常量对象存放在常量池中。）3. 堆：存放所有new出来的对象。4. 静态域：存放静态成员（static定义的）5. 常量池：存放字符串常量和基本类型常量（public static f</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>