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>

结果如下图所示:
CSS-Cascading Style Sheet 层叠样式表_第1张图片


<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-Cascading Style Sheet 层叠样式表_第2张图片
二、常用的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>

结果如下:
CSS-Cascading Style Sheet 层叠样式表_第3张图片


<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>

结果如下:
CSS-Cascading Style Sheet 层叠样式表_第4张图片


<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/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架(Java + Python)" target="_blank">00. 这里整理了最全的爬虫框架(Java + Python)</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解:如何设计出健壮的秒杀系统?" target="_blank">详解:如何设计出健壮的秒杀系统?</a>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型:结构体、枚举、联合" target="_blank">【C语言】- 自定义类型:结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】:操作符(https://mp.csdn.net/editor/html/115218055)数据类型(https://mp.csdn.net/editor/html/115219664)自定义类型:结构体、枚举、联合(https://mp.csdn.net/editor/html/115373785)变量、常量(https://mp.csdn.net/editor/html/11523</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击</div>
                    </li>
                    <li><a href="/article/1835379153730367488.htm"
                           title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a>
                        <span class="text-muted">zoyation</span>
<a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                        <div>通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div>
                    </li>
                    <li><a href="/article/1835377684025274368.htm"
                           title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a>
                        <span class="text-muted">Derek重名了</span>

                        <div>最快方法,当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来,非常快非常容易参考:https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div>
                    </li>
                    <li><a href="/article/1835376759739084800.htm"
                           title="处理标签包裹的字符串,并取出前250字符" target="_blank">处理标签包裹的字符串,并取出前250字符</a>
                        <span class="text-muted">周bro</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落,包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div>
                    </li>
                    <li><a href="/article/1835372727582683136.htm"
                           title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
                        <span class="text-muted">红匣子实力推荐</span>

                        <div>随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景:构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景:构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin</div>
                    </li>
                    <li><a href="/article/1835354447627251712.htm"
                           title="前端知识点" target="_blank">前端知识点</a>
                        <span class="text-muted">ZhangTao_zata</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div>
                    </li>
                    <li><a href="/article/1835349024102772736.htm"
                           title="非关系型数据库" target="_blank">非关系型数据库</a>
                        <span class="text-muted">天秤-white</span>
<a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a>
                        <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大,单个数据库完全足够。那时候更多使用的静态网页html,服务器根本没有太大压力。这时候网站的瓶颈是什么?-数据量如果太大,一个机器放不下。-数据量太大需要建立数据的索引(B+Tree),一个服务器内存放不下。-访问量读写混合,一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分(读写分离)。网站80%</div>
                    </li>
                    <li><a href="/article/1835342718067372032.htm"
                           title="Python精选200Tips:121-125" target="_blank">Python精选200Tips:121-125</a>
                        <span class="text-muted">AnFany</span>
<a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div>
                    </li>
                    <li><a href="/article/1835333268375957504.htm"
                           title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a>
                        <span class="text-muted">Bearjumpingcandy</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>爬虫技术是一种自动化获取网站数据的技术,它可以模拟人类浏览器的行为,访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤:发起HTTP请求:爬虫首先会发送HTTP请求到目标网站,获取网页的内容。解析HTML:获取到网页内容后,爬虫会使用HTML解析器解析HTML代码,提取出需要的数据。数据提取:通过使用XPath、CSS选择器或正则表达式等工具,爬虫可以从HTML中提取出所需的数据,如文</div>
                    </li>
                    <li><a href="/article/1835316434805288960.htm"
                           title="七.正则化" target="_blank">七.正则化</a>
                        <span class="text-muted">愿风去了</span>

                        <div>吴恩达机器学习之正则化(Regularization)http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活,但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上,模</div>
                    </li>
                    <li><a href="/article/1835296397365178368.htm"
                           title="创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几</a>
                        <span class="text-muted">uthRaman</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>前端(HTML/CSS/JavaScript)grsyzp.cnHTML页面结构(index.html)html购物商城欢迎来到购物商城JavaScript(Ajax请求商品数据,app.js)javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div>
                    </li>
                    <li><a href="/article/1835285939723792384.htm"
                           title="利用frp实现内网穿透(需要云主机)" target="_blank">利用frp实现内网穿透(需要云主机)</a>
                        <span class="text-muted">heiyumiao</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7/1.htm">网络工具</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                        <div>详细实现教程:https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址:https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多,其中Frp(FastReverseProxy)是比较</div>
                    </li>
                    <li><a href="/article/1835270061674295296.htm"
                           title="word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf" target="_blank">word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf</a>
                        <span class="text-muted">想吃草莓干</span>
<a class="tag" taget="_blank" href="/search/word%E8%BD%AChtml%E5%88%B6%E4%BD%9C%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C/1.htm">word转html制作操作手册</a>
                        <div>Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名,最好将其改为英文文件名。例:现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档,首先将此文档复制到hhwork目录下并将</div>
                    </li>
                    <li><a href="/article/1835262372638453760.htm"
                           title="WORD批量转换器MultiDoc Converter" target="_blank">WORD批量转换器MultiDoc Converter</a>
                        <span class="text-muted">uolian</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
                        <div>WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址:https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址(未作成单文件,不确定是否可以直接使用):h</div>
                    </li>
                    <li><a href="/article/1835258583235784704.htm"
                           title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a>
                        <span class="text-muted">Sardar_</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>bgcolor只是标签属性,而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性,只能用style标签添加CSS样式。作为table的属性而言:HelloWorld!和HelloWorld!效果完全相同。作为body属性而言:效果完全相同。不过个人推荐统一用CSS样式进行控制,把style统一放到.css文件中。backgrou</div>
                    </li>
                    <li><a href="/article/1835257575277424640.htm"
                           title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a>
                        <span class="text-muted">PokiFighting</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/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>词条内容我这里随便选取了一个链接,用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div>
                    </li>
                    <li><a href="/article/1835249513875468288.htm"
                           title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a>
                        <span class="text-muted">deniro</span>

                        <div>1用法假设父组件的模板包含子组件,我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组,也可以是对象。html:js:Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果:"嫦娥四号"成功</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>