Python开发学习笔记（14）———— html和css
1.html基础
1)概述和基本结构
超文本标记语言。超文本指超链接，标记指的是标签。
基本结构：
文档声明
定义网页的语言 en为英文，zh-CN为中文
网页标题</tiltle>
</head>
<body>
你好！欢迎访问我的个人网页！
</body>
</html>
</code></pre>
<h4>2）html分类</h4>
<p>xhtml1.0文档类型<br> 文档声明、编码声明、网页语言声明长。<br> 区别：a。文档声明和编码声明 b。html5新增了标签元素以及元素属性</p>
<h4>3）注释</h4>
<pre><code><!--这是注释--> 两个横杆
</code></pre>
<h4>4）标题标签</h4>
<p><code><h1><h2><h3><h4><h5><h6></code><br> 可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。</p>
<h4>5）段落标签</h4>
<pre><code><p>文字</p>
</code></pre>
<p>段落标签中，开头处不识别空格，内容中只识别一个空格。<br> 识别符： ；为空格 <；为小于号< >；为大于号> <br> 换行</p>
<h4>6）块标签、含样式的标签</h4>
<h5>1>块标签</h5>
<p><code><div></code>标签 块元素，表示一块内容，没有具体的语义<br> <code><span></code>标签 行内元素，表示一行中的一小段内容，没有具体的语义<br> p段落标签有样式，行距等，div块标签没有样式。</p>
<h5>2>含样式和语义的标签</h5>
<p><code><em></code>标签，表示语气中的强调词，斜体<br> <code><i></code>标签，表示专业词汇，斜体<br> <code><b></code>标签，表示文档中的关键字或者产品名，加粗<br> <code><strong></code>标签，表示非常重要的内容，加粗</p>
<h5>3>语义化标签</h5>
<p>h1 标题；p 段落；ul、li 列表；a 链接；dl、dt、dd 定义列表</p>
<h4>7）图像标签、绝对路径和相对路径</h4>
<h5>1>图像标签</h5>
<pre><code><img src=”images/001.jpg” alt=”产品图片” />
</code></pre>
<p>src属性 定义图片的引用地址<br> alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。</p>
<h5>2>绝对路径和相对路径</h5>
<p>绝对路径：相对于磁盘的位置去定位 文件的位置<br> 相对路径：相对于当前文件的位置去定位文件的位置<br> ./ 表示当前目录，可以省略<br> …/ 表示上一层目录</p>
<h4>8)链接标签</h4>
<p><code><a></code> 定义一个链接地址<br> 常用属性<br> <code>href</code>属性 定义跳转的地址<br> <code>title</code>属性 定义鼠标悬停时弹出的提示文字框<br> <code>target</code>属性 定义链接窗口打开的位置<br> <code>target=”self”</code> 缺省值，新页面替换原来的页面，在原来的位置打开<br> <code>target=”_blank”</code>新页面会在新开的一个浏览器窗口打开<br> 跳转到页面顶部</p>
<h4>9）列表标签</h4>
<p>有序列表<br> 会自动给内容加序号<br> 可以使用<code><ol>, <li></code>配合使用来实现。</p>
<pre><code><ol>
<li>listcontent1</li>
<li>listcontent2</li>
<li>listcontent3</li>
</ol>
</code></pre>
<p>快捷键定义： <code>ol>li*3</code> 然后按tab键<br> 无序列表<br> 可以用来做新闻标题等<br> 可以使用<code><ul>, <li></code>配合使用来实现。<br> 在css中使用List-style:none 去掉列表前的点。</p>
<pre><code><ul>
<li><a href=”#”>news1</a></li>
<li><a href=”#”>news2</a></li>
<li><a href=”#”>news3</a></li>
</ul>
</code></pre>
<p>快捷键定义：<code>ul>(li>a{新闻标题})*3</code> 然后按tab键<br> 定义列表<br> <code><dl></code>标签表示列表的整体，<code><dt></code>标签定义术语的题目，<code><dd></code>标签是术语的解释。</p>
<h3>2.表格标签和传统布局</h3>
<h4>1）html表格</h4>
<p><code><table></code>声明一个表格<br> 属性：<br> <code>border</code> 定义表格的边框，设置值是数值<br> <code>cellpadding</code> 定义单元格内容与边框的距离，设置值是数值<br> <code>cellspacing</code> 定义单元格与单元格之间的距离，设置值是数值<br> <code>align</code> 设置整体表格相对于浏览器窗口的水平对齐方式，设置值有left|center|right<br> <code><tr></code> 定义表格的一行<br> <code><td></code> 定义一行中的一个单元格，td代表普通单元格，th表示表头单元格。<br> 属性：<br> <code>align</code> 设置单元格中内容的水平对齐方式，设置值有left|center|right<br> <code>valign</code> 设置单元格中内容的垂直对齐方式 top|middle|bottom<br> <code>colspan</code> 设置单元格水平合并，设置值是数值<br> <code>rowspan</code> 设置单元格垂直合并，设置值是数值<br> 快捷操作：<code>table>(tr>td*5)*6</code> 创建6行5列的表格</p>
<h4>2）页面布局</h4>
<p>一般分为两种：</p>
<h5>1>table布局</h5>
<p>即传统布局，将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。目前主要应用在EDM（广告邮件中的页面）中。<br> 布局复杂时，在table中嵌套表格</p>
<h5>2>html+css布局（DIV+CSS）</h5>
<p>通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，比传统布局更复杂，目前是主流。</p>
<h3>3.html表单</h3>
<p>表单用于搜集不同类型的用户输入，表单由不同类型的标签组成。</p>
<h5>1><code><form></code>标签</h5>
<p>定义整体的表单区域<br> action属性 定义表单数据提交地址<br> method属性 定义表单提交的方式，一般有“get”方式和“post”方式</p>
<h5>2> <code><label></code></h5>
<p>表单元素定义文字标注</p>
<h5>3> <code><input></code></h5>
<p>定义通用的表单元素<br> type属性：“text”定义单行文本输入框；“password”定义密码输入框；“radio”定义单选框；“checkbox“定义复选框；”file“定义上传文件；”submit“定义提交按钮；”reset“定义重置按钮；”image“定义图片作为提交按钮，用src属性定义图片地址；”hidden“定义一个隐藏的表单域，用来存储值，select属性定义复选框option定义选项。<br> value属性 定义表单元素的值<br> name属性 定义表单元素的名称，此名称是提交数据时的键名</p>
<h3>4.CSS基本语法</h3>
<p>层叠样式表，html只负责文档的结构和内容，表现形式完全交给CSS。<br> css的定义方法：<br> 选择器 {属性：值；属性：值 }</p>
<pre><code>div{
font-size:16px;
color:ed;
}
</code></pre>
<p>css页面引入方法：</p>
<h5>1>外联式</h5>
<p>在html文件的<code><head></code>中加入<br> <code><link rel=”stylesheet” type=”text/css” href=”./css/main.css”></code> href为css文件地址</p>
<h5>2>嵌入式</h5>
<p>通过style标签，在网页上创建嵌入的样式表</p>
<pre><code><style type=”text/css”>
div{ width:100px; height:100px; color:red }
</style>
</code></pre>
<h5>3>内联式</h5>
<p>通过标签的style属性，在标签上直接写样式</p>
<pre><code><div style=”width:100px; height:100px; color:red”>……</div>
</code></pre>
<h3>5.CSS常用文本样式</h3>
<p>字号 font-size；颜色 color；字体 font-family；斜体 font-style；加粗 font-weight；行高 line-height<br> 可以使用<code><span></code>标签，进行特定的样式设置</p>
<h3>6.CSS样式选择器</h3>
<p>css颜色值表示方法：<br> 1>颜色名表示，如 red gold<br> 2>rgb表示 如 rgb（255，0，0）红色<br> 3>16进制数值表示，#ff0000 表示红色，可以简写为#f00</p>
<h4>1)标签选择器</h4>
<p>尽量应用在层级选择器中。<br> <code>*</code> 所有标签</p>
<h4>2）id选择器</h4>
<p>通过id名来选择元素，元素的id名称不能重复。但id名一般给程序使用，所以不推荐使用id作为选择器。<br> 例如：<br> <code><div id=“div1”>第一个div</div></code> 设置id<br> 在<code><head></code>的<code><style></code>中设置样式<br> #div1{}中设置样式</p>
<h4>3）类选择器</h4>
<p>通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用最多的一种选择器。<br> 设置类选择器</p>
<pre><code>.green{color：green；}
<div class=“green”>`这是第一个div`</div>
</code></pre>
<h4>4）层级选择器</h4>
<p>主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。</p>
<h4>5）组选择器</h4>
<p>类选择器中相同的样式可以用组选择器共同定义，类名用逗号隔开</p>
<h4>6）伪类及伪元素选择器</h4>
<p>常用的伪类选择器由hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中插入内容。<br> 类名后加冒号定义<br> <code>.box: hover{color:red}</code> 鼠标悬停在元素上时，元素变为红色<br> <code>.box: before{content: “dd”}</code> 在标签元素前面增加文字 dd<br> after可以在元素后面增加文字</p>
<h3>7.盒子模型</h3>
<h4>1)模型理解</h4>
<p>元素在也页面中显示成一个方块，把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width）、盒子的高度（height）、盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子与盒子之间的间距（margin）。<br> 定义一个类选择器，在选择器中定义属性</p>
<h4>2）设置宽高</h4>
<p>width：200px<br> height：200px</p>
<h4>3）设置边框</h4>
<p>border-top：10px solid #000； 设置顶边框10px粗，实线，黑色<br> border-left：10px dashed #000； 虚线<br> border-right：10px dotted #000；点线<br> border-bottom 底部边框<br> border：10px solid #000； 同时设置四个边</p>
<h4>4）内容和边框间距</h4>
<p>padding-top、padding-left、padding-right、padding-bottom<br> 修改之后整体盒子变大，width和height设置的是内容的宽高。<br> 可以使用padding直接设置，顺时针设置。<br> padding：20px 80px 100px；这是设置上边、左右、下边的距离<br> padding：20px；这是同时设置四条边的距离</p>
<h4>5）设置外间距margin</h4>
<p>margin-top、margin-left 盒子与外界的距离</p>
<h4>6）盒子真实尺寸</h4>
<p>宽度 width+左右paddingwidth+左右borderwidth<br> 高度：height+上下paddingheight+上下borderheight<br> line-height text-indent 行高和首行缩进可以避免盒子尺寸发生变化。</p>
<h3>8.margin和overflow属性</h3>
<h4>1）margin使用技巧</h4>
<p>margin：50px auto 100px<br> 左右边框会随着总界面大小的变化而变化。<br> 1>margin：x auto 设置元素水平居中<br> 2>margin负值让元素位移及边框合并</p>
<h4>2）外边距合并</h4>
<p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法：<br> 1>使用这种特性<br> 2>设置一边的外边距，一般设置margin-top<br> 3>将元素浮动或者定位</p>
<h4>3）margin-top 塌陷</h4>
<p>在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法：<br> 1>外部盒子设置一个边框<br> 2>外部盒子设置overflow：hidden<br> 3>使用伪元素类</p>
<pre><code>.clearfix: before{
content:””;
display:table;
}
</code></pre>
<h4>4）css元素溢出</h4>
<p>当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。<br> overflow的设置项：<br> 1>visible默认值，内容不会被修剪，会呈现在元素框之外。<br> 2>hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。<br> 3>scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<br> 4>auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。<br> 5>inherit规定应该从父元素继承overflow属性的值</p>
<h3>9.display属性</h3>
<h4>1）块元素</h4>
<p>也称为行元素，常用标签如：div, p, ul, li, h1~h6, dl, dt, dd等都是块元素，它在布局中的行为：<br> a 支持全部的样式<br> b 如果没有设置宽度，默认的宽度为父级宽度100%<br> c 盒子占据一行，即使设置了宽度</p>
<h4>2）内联元素</h4>
<p>也称为行内元素，布局中常用的标签如：a, span, em, b, strong, i等都是内联元素，它们在布局中的行为：<br> a 支持部分样式（不支持宽、高、margin上下、padding上下）<br> b 宽高由内容决定<br> c 盒子并在一行<br> d 代码换行，盒子之间会产生间距<br> e 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式<br> 解决内联元素间隙的方法：<br> a 去掉内联元素之间的换行<br> b 将内联元素的父级设置font-size为0，内联元素自身再设置font-size</p>
<h4>3）内联块元素</h4>
<p>也称为行内块元素，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，在布局中的行为：<br> a 支持全部样式<br> b 如果没有设置宽高，宽高由内容决定<br> c 盒子并在一行<br> d 代码换行，盒子会产生间距<br> e 子元素是内联块元素，父元素可以通过text-align属性设置子元素水平对齐方式</p>
<h4>4）display属性</h4>
<p>none 元素隐藏且不占位置<br> block 元素以块元素显示<br> inline 元素以内联元素显示<br> inline-block 元素以内联块元素显示</p>
<h3>10.浮动</h3>
<p>父级盒子不给高度，子集盒子浮动，子集盒子“撑不开”父级盒子，父级盒子需要清除浮动<br> 特性<br> 1>浮动元素有左浮动（float:left）和右浮动（float:right）两种<br> 2>浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来<br> 3>相邻浮动的块元素可以并在一行，超出父级宽度就换行<br> 4>浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）<br> 5>浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果<br> 6>父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动<br> 7>浮动元素之间没有垂直margin的合并</p>
<h4>清除浮动：</h4>
<p>1>父级上增加属性overflow:hidden<br> 2>在最后一个子元素的后面加一个空的div，给它样式属性clear:both（不推荐）<br> 3>使用成熟的清浮动样式类，clearfix</p>
<pre><code>.clearfix:after{
content:””;
display:table;
clear:both;
}
</code></pre>
<p>将上面的类选择器加到父类class中。同时这个类可以与clearfix:before搭配使用，合成一个组选择器，解决margin-top塌陷的问题。</p>
<pre><code>.clearfix{ zoom:1 }
</code></pre>
<p>IE浏览器专用，兼容。</p>
<h3>11定位</h3>
<p>文档流：盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。</p>
<h4>1）关于定位</h4>
<p>使用css的position属性来设置元素的定位类型，position设置如下：<br> 1>relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位进行偏移<br> 2>absolute 生成绝对定位元素，不占据文档流位置，定位时，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。<br> 3>fixed生成固定定位元素，脱离文档流，相对于浏览器窗口定位<br> 4>static默认值，没有定位，出现在正常的文档流中<br> 5>inherit 从父元素继承position属性的值</p>
<h4>2）定位元素的偏移</h4>
<p>使用right、left、top、bottom来设置相对于参考元素的偏移值。</p>
<h3>12.background属性</h3>
<h4>1）设置项：</h4>
<p>background-color 设置背景颜色<br> background-image 设置背景图片地址<br> background-repeat 设置背景图片如何重复平铺<br> background-position 设置背景图片的位置，水平方向“left、center、right”，垂直方向“top、center、bottom”。<br> background-attachment 设置背景图片是固定还是随着页面滚动条滚动<br> position属性中，左右移动时，负值向左，正值向右。上下移动时，负值向上，正值向下。</p>
<h4>2）雪碧图</h4>
<p>ps制作雪碧图<br> 1.使用photoshop新建一张背景透明的图片<br> 2.将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小<br> 3.按照所有小图片的范围裁剪图片，存为透明背景的png图片<br> 13.前端页面开发流程<br> 1）创建页面项目目录<br> 2）使用photoshop对效果图切图，切出网页制作中需要的小图片<br> 3）将装饰类图像合并，制作成雪碧图<br> 4）结合photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面。</p>
<h3>14.html5与CSS3</h3>
<h4>1）css权重</h4>
<p>权重高的样式对元素起作用。<br> 权重等级：<br> 1> !important 加载样式属性值后，权重值为10000<br> 2>内联样式，如：style=“”，权重值为1000<br> 3>ID选择器，如：#content，权重值为100<br> 4>类、伪类和属性选择器，如：content、:hover权重值为10<br> 5>标签选择器和伪元素选择器，如：div、p、:before权重值为1<br> 6>通用选择器（<code>*</code>）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0</p>
<h4>2）css新增选择器</h4>
<h5>1>E:nth-child(n)</h5>
<p>匹配元素类型为E且是父元素的第n个子元素</p>
<h5>2>E:first-child</h5>
<p>匹配元素类型为E且是父元素的第一个子元素</p>
<h5>3>E:last-child</h5>
<p>匹配元素类型为E且是父元素的最后一个子元素</p>
<h5>4>E>F</h5>
<p>E元素下面第一层子元素</p>
<h5>5>E~F</h5>
<p>E元素后面的兄弟元素</p>
<h5>6>E+F</h5>
<p>紧挨着的后面的兄弟元素<br> 属性选择器：<br> 1>E[attr]含有attr属性的元素<br> 2>E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”<br> 3>E[attr^=‘ok’] 含有attr属性的元素且它的值开头含有“ok”<br> 4>E[attr$=‘ok’] 含有attr属性的元素且它的值结尾含有“ok”<br> 5>E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”</p>
<h4>3）css3 圆角、rgba</h4>
<h5>1>圆角</h5>
<p>设置某一个角的圆角，比如设置左上角的圆角：<br> border-top-left-radius:30px 60px;<br> 同时设置四个角：<br> border-radius:30px 60px 120px 150px;<br> 顺序为顺时针</p>
<h5>2>rgba</h5>
<p>a 盒子透明度表示法</p>
<pre><code>.box
{
opacity:0.1;
filter:alpha(opacity=10); 兼容IE
}
</code></pre>
<p>b rgba(0,0,0,0.1)前三个数值表示颜色，第四个数值表示颜色的透明度</p>
<h4>4）css3 transition动画</h4>
<p>1>transition-property设置过渡的属性，如，width height background-color<br> 2>transition-duration 设置过渡的时间，如：1s 500ms<br> 3>transition-timing-function 设置过渡的运动方式，常用linear匀速 ease缓冲<br> 4>transition-delay设置动画的延迟<br> 5>transition: property duration timing-function delay 同时设置四个属性</p>
<h4>5）css3 transform变换 翻面</h4>
<p>1>translate(x, y) 设置盒子位移<br> 2>scale(x, y) 设置盒子缩放<br> 3>rotate(deg) 设置盒子旋转<br> 4>skew(x-angle, y-angle) 设置盒子斜切<br> 5>perspective 设置透视距离<br> 6>transform-style flat|preserve-3d 设置盒子是否按3d空间显示<br> 7>translateX、translateY, translate 设置三维移动<br> 8>rotateX, rotateY, rotateZ 设置三维旋转<br> 9>scaleX, scaleY, scaleZ 设置三维缩放<br> 10>transform-origin 设置变形的中心点<br> 11>backface-visibility 设置盒子背面是否可见</p>
<h4>6）css3 animation动画</h4>
<p>1>@keyframes 定义关键帧动画<br> 2>animation-name 动画名称<br> 3>animation-duration 动画时间<br> 4>animation-timing-function 动画曲线 linear匀速，ease缓冲，steps步数<br> 5>animation-delay 动画延迟<br> 6>animation-iteration-count 动画播放次数 n|infinite<br> 7>animation-direction 动画结束后是否反向还原 normal|alternate<br> 8>animation-play-state 动画状态 paused（停止）|running（运动）<br> 9>animation-fill-mode 动画前后的状态 none|forwards（结束时停留在最后一帧）|backwards（开始时停留在定义的开始帧）|both（前后都应用）<br> 10>animation:name duration timing-function delay iteration-count direction; 同时设置多个属性。</p>
<h4>7）css3浏览器前缀</h4>
<h5>1>浏览器样式前缀</h5>
<p>为了让css3样式兼容，需要将某些样式加上浏览器前缀：<br> -ms- 兼容ie浏览器<br> -moz- 兼容firefox<br> -o- 兼容opera<br> -webkit- 兼容chrome和safari</p>
<h5>2>自动添加浏览器前缀</h5>
<p>交给插件，如，安装autoprefixer</p>
<h4>8）html5新增标签</h4>
<p>新增语义标签<br> <code><header></code> 页面头部、页眉<br> <code><nav></code> 页面导航<br> <code><article></code> 一篇文章<br> <code><section></code> 文章中的章节<br> <code><aside></code> 侧边栏<br> <code><footer></code> 页面底部，页脚<br> 音频视频</p>
<pre><code><audio>
<video>
</code></pre>
<h4>9）html5新增表单控件</h4>
<p>网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索</p>
<pre><code><label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
</code></pre>
<p>新增常用表单控件属性：<br> 1>placeholder 设置文本框默认提示文字<br> 2>autofocus 自动获得焦点<br> 3>autocomplete 联想关键词</p>
<h3>15.移动端页面开发</h3>
<h4>1）移动端与pc端页面布局区别</h4>
<h5>1>视口</h5>
<p>将pc端页面缩放到移动端窗口的大小。<br> 使用meta标签，name=”viewport”来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。<br> 快捷键：meta:vp+tab</p>
<h5>2>视网膜屏幕（retina屏幕）清晰度解决方案</h5>
<p>视网膜屏幕：屏幕的物理像素密度更高的屏幕。物理像素点比一般屏幕的多。<br> 图像在视网膜屏幕和一般屏幕上显示的一样大，但视网膜屏幕的物理像素点比一般屏幕的小，图像在上面好像是被放大了，图像会变得模糊。为了解决这一问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小。<br> background新属性<br> background-size:<br> length：用长度值指定背景图像大小。不允许负值。<br> percentage：用百分比指定背景图像大小。不允许负值。<br> auto：背景图像的真实大小。<br> cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。<br> contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。</p>
<h4>2）适配布局类型</h4>
<h5>1>pc及移动端页面适配方法</h5>
<p>a 全适配：响应式布局+流体布局<br> b 移动端适配：流体布局+少量响应式布局 / 基于rem的布局</p>
<h5>2>流体布局</h5>
<p>使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。</p>
<pre><code>calc()
</code></pre>
<p>通过计算的方式给元素加尺寸</p>
<pre><code>box-sizing
</code></pre>
<p>content-box 默认的盒子尺寸计算方式<br> border-box 设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内</p>
<h5>3>响应式布局</h5>
<p>使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。</p>
<h5>4>基于rem的布局</h5>
<p>em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html的大小，就会改变所有元素用rem设置的尺寸大小。<br> cssrm插件可以动态地将px尺寸换算成rem尺寸。</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1620518666162438144"></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">你可能感兴趣的:(python学习过程,前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1902397589597253632.htm"
title="Python 的 ORM（Object-Relational Mapping）工具浅讲" target="_blank">Python 的 ORM（Object-Relational Mapping）工具浅讲</a>
<span class="text-muted">Code_Geo</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>SQLAlchemy相关讲解1.SQLAlchemy是什么？定义：一个Python的ORM（Object-RelationalMapping）工具，允许开发者通过Python类与对象操作数据库，而非直接编写SQL。核心组件：Core：底层SQL表达式语言，提供数据库无关的SQL操作接口。ORM：基于Core的高层抽象，将数据库表映射为Python类（模型），记录映射为对象。适用场景：需要灵活操作数</div>
</li>
<li><a href="/article/1902395318473912320.htm"
title="#Python 项目：实现功能——使用钉钉“自定义”机器人在群中发送文字消息" target="_blank">#Python 项目：实现功能——使用钉钉“自定义”机器人在群中发送文字消息</a>
<span class="text-muted">Window Unlock</span>
<a class="tag" taget="_blank" href="/search/%E9%92%89%E9%92%89/1.htm">钉钉</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a>
<div>（目前还是新手，程序难免有废话代码，请大家耐心看__比心）第一步：创建群聊机器人，参考官方手册官方链接：自定义机器人的创建和安装-钉钉开放平台此步骤可以得到两个关键参数：Webhook（机器人的通信网址）：https://oapi.dingtalk.com/robot/send?############（如这样）secret（加签未解密密钥）：SECe2######################</div>
</li>
<li><a href="/article/1902393174144380928.htm"
title="Python-有效字母异位词" target="_blank">Python-有效字母异位词</a>
<span class="text-muted">m0_37763377</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>一、什么是字母异位词字母异位词是指由相同字母组成但排列顺序不同的单词。例如，"eat"、"tea"和"ate"都是字母异位词，因为它们由相同的字母组成，只是排列顺序不同。二、思路（一）暴力解法这里可以用两层循环来判断2个字符串的元素是否一样，显然时间复杂度为O(n²），在这里大家可以自己写一下，文章就不再提供演示。（二）哈希表解法1.什么是哈希表？哈希表（HashTable），也称为散列表，是</div>
</li>
<li><a href="/article/1902391283113062400.htm"
title="LeetCode56☞合并区间" target="_blank">LeetCode56☞合并区间</a>
<span class="text-muted">fantasy_4</span>
<a class="tag" taget="_blank" href="/search/LeetCode%E5%88%B7%E9%A2%98/1.htm">LeetCode刷题</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95/1.htm">贪心算法</a>
<div>关联LeetCode题号56本题特点贪心本题思路将二维数组排序按照左边界排序。排序后，右边界的大小成为找到局部最大值的关键。由题意合并区间可知，应该取数组的’并集‘，局部最优解推出全局最优解，每次找到局部最大的范围，整体就会合并成一个大区间Python写法defmerge(self,intervals):result=[]iflen(intervals)==0:returnresult#区间集合为</div>
</li>
<li><a href="/article/1902389644054556672.htm"
title="【python】图形用户界面和游戏开发" target="_blank">【python】图形用户界面和游戏开发</a>
<span class="text-muted">usp1994</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
<div>图形用户界面和游戏开发文章目录图形用户界面和游戏开发基于tkinter模块的GUI使用Pygame进行游戏开发制作游戏窗口在窗口中绘图加载图像实现动画效果碰撞检测事件处理基于tkinter模块的GUIGUI是图形用户界面的缩写，图形化的用户界面对使用过计算机的人来说应该都不陌生，在此也无需进行赘述。Python默认的GUI开发模块是tkinter（在Python3以前的版本中名为Tkinter），</div>
</li>
<li><a href="/article/1902388257430237184.htm"
title="Python 爬虫实战：如何爬取小红书数据并进行分析" target="_blank">Python 爬虫实战：如何爬取小红书数据并进行分析</a>
<span class="text-muted">Python爬虫项目</span>
<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><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a>
<div>一、引言随着社交电商的崛起，小红书（Xiaohongshu）作为一款结合了社交和电商的应用，吸引了大量年轻用户。用户在平台上分享购物心得、生活经验以及个性化的消费推荐内容，形成了庞大的用户数据与内容生态。因此，如何从小红书获取数据进行分析，成为了数据科学、市场营销和社交媒体研究中的一个重要课题。本文将介绍如何使用Python编写爬虫爬取小红书的数据，分析如何通过小红书的开放API获取用户信息、帖子</div>
</li>
<li><a href="/article/1902386240947286016.htm"
title="Python 常用内建模块-base64" target="_blank">Python 常用内建模块-base64</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/%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0/1.htm">系统学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>目录base64小结练习base64Base64是一种用64个字符来表示任意二进制数据的方法。用记事本打开exe、jpg、pdf这些文件时，我们都会看到一大堆乱码，因为二进制文件包含很多无法显示和打印的字符，所以，如果要让记事本这样的文本处理软件能处理二进制数据，就需要一个二进制到字符串的转换方法。Base64是一种最常见的二进制编码方法。Base64的原理很简单，首先，准备一个包含64个字符的数</div>
</li>
<li><a href="/article/1902383843894161408.htm"
title="基于python的ansys_基于python的感知机" target="_blank">基于python的ansys_基于python的感知机</a>
<span class="text-muted">weixin_39687990</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Epython%E7%9A%84ansys/1.htm">基于python的ansys</a>
<div>一、1、感知机可以描述为一个线性方程，用python的伪代码可表示为：sum(weight_i*x_i)+bias->activation#activation表示激活函数，x_i和weight_i是分别为与当前神经元连接的其它神经元的输入以及连接的权重。bias表示当前神经元的输出阀值(或称偏置)。箭头(->)左边的数据，就是激活函数的输入2、定义激活函数f:deffunc_activator(</div>
</li>
<li><a href="/article/1902383843256627200.htm"
title="python ansys workbench联动_【干货】如何在ANSYS WORKBENCH中关联几何模型和有限元模型..." target="_blank">python ansys workbench联动_【干货】如何在ANSYS WORKBENCH中关联几何模型和有限元模型...</a>
<span class="text-muted">weixin_39644377</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ansys/1.htm">ansys</a><a class="tag" taget="_blank" href="/search/workbench%E8%81%94%E5%8A%A8/1.htm">workbench联动</a>
<div>原标题：【干货】如何在ANSYSWORKBENCH中关联几何模型和有限元模型我们都知道，通过诸如HPERMESH这样的有限元网格划分软件得到的模型，在传入ANSYS以后，只包含节点和单元信息。但是当我们在WB中使用模型操作时，有时候需要选择几何特征，如在圆孔面上施加圆柱支撑，而此时对象只有单元节点信息，并无体面线的几何信息，该怎么办呢？显然，处理此问题的有效途径，在于把有限元模型与该有限元模型对应</div>
</li>
<li><a href="/article/1902383338488918016.htm"
title="python ansys workbench联动_如何在ANSYS WORKBENCH中关联几何模型和有限元模型" target="_blank">python ansys workbench联动_如何在ANSYS WORKBENCH中关联几何模型和有限元模型</a>
<span class="text-muted">YUNYA麻麻</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ansys/1.htm">ansys</a><a class="tag" taget="_blank" href="/search/workbench%E8%81%94%E5%8A%A8/1.htm">workbench联动</a>
<div>我们都知道，通过诸如HPERMESH这样的有限元网格划分软件得到的模型，在传入ANSYS以后，只包含节点和单元信息。但是当我们在WB中使用模型操作时，有时候需要选择几何特征，如在圆孔面上施加圆柱支撑，而此时对象只有单元节点信息，并无体面线的几何信息，该怎么办呢？显然，处理此问题的有效途径，在于把有限元模型与该有限元模型对应的几何模型进行关联，再一起导入到MECHANICAL中进行分析，则既能够既享</div>
</li>
<li><a href="/article/1902381565296570368.htm"
title="【前端】面试八股文——输入URL到页面展示的过程" target="_blank">【前端】面试八股文——输入URL到页面展示的过程</a>
<span class="text-muted">帅比九日</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E5%85%AB%E8%82%A1%E6%96%87/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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>【前端】面试八股文——输入URL到页面展示的过程1.DNS解析当用户在浏览器中输入URL并按下回车时，首先需要将域名转换为IP地址，这个过程称为DNS（域名系统）解析。具体步骤如下：浏览器缓存：浏览器首先检查自身缓存中是否有该域名的IP地址。操作系统缓存：如果浏览器缓存中没有找到，浏览器会向操作系统请求DNS信息。路由器缓存：如果操作系统缓存也没有找到，操作系统会向本地网络中的路由器请求DNS信息</div>
</li>
<li><a href="/article/1902381186840326144.htm"
title="vue3+springboot电影院售票选座管理系统" target="_blank">vue3+springboot电影院售票选座管理系统</a>
<span class="text-muted">qq_3166678367</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻</div>
</li>
<li><a href="/article/1902378665333813248.htm"
title="在 Ansys Mechanical 中创建等效应力结果并使用 Python 导出到文件" target="_blank">在 Ansys Mechanical 中创建等效应力结果并使用 Python 导出到文件</a>
<span class="text-muted">David WangYang</span>
<a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a>
<div>介绍在AnsysMechanical模型中，通常需要对许多实体/曲面体或它们组进行后处理等效应力或总变形等。使用分组在TreeGrouping文件夹中的NamedSelections，可以在Mechanical中编写Python脚本来自动生成结果对象。此外，once可以获取新创建的结果对象，并再次使用Mechanical中的Python脚本将所有结果集的结果导出到.csv文件。在本文中，我们将探讨</div>
</li>
<li><a href="/article/1902371107915231232.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/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a>
<div>好久不见，甚是想念本人深知这段时间鸽了一篇博（上一篇博），后续会补上的，今天想写一下关于使用python进行TI雷达接收回波数据处理的一些常见问题和解决方法。这也是前几天领导给我布置的任务，所以我将这段时间自己遇到的并且已经解决的问题进行了简单的汇总，也会推荐几本这几天阅读了python书籍。python书籍推荐：python学习手册MarkLutz著（对应python版本3.X，2.X都可）Py</div>
</li>
<li><a href="/article/1902367699816738816.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>welding_performance_data.xls数据文件。welding_strengthtoughness5001052012480855015490953013510115401447075601690018600121500139111578115importpandasaspdimportmatplotlib.pyplotaspltimporttkinterastkfrommatp</div>
</li>
<li><a href="/article/1902367700227780608.htm"
title="从零实现B站视频下载器：Python自动化实战教程" target="_blank">从零实现B站视频下载器：Python自动化实战教程</a>
<span class="text-muted">木觞清</span>
<a class="tag" taget="_blank" href="/search/%23/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/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>一、项目背景与实现原理1.1B站视频分发机制Bilibili的视频采用音视频分离技术，通过以下方式提升用户体验：动态码率适配（1080P/4K/HDR）分段加载技术（基于M4S格式）内容保护机制（防盗链/签名验证）1.2技术实现路线graphTDA[模拟浏览器请求]-->B[获取加密播放信息]B-->C[解析音视频地址]C-->D[多线程下载]D-->E[FFmpeg合并]二、代码逐层解析2.1请</div>
</li>
<li><a href="/article/1902364293693763584.htm"
title="chatgpt赋能python：Python处理雷达基数据：从入门到实践" target="_blank">chatgpt赋能python：Python处理雷达基数据：从入门到实践</a>
<span class="text-muted">lvsetongdao123</span>
<a class="tag" taget="_blank" href="/search/ChatGpt/1.htm">ChatGpt</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a>
<div>Python处理雷达基数据：从入门到实践随着气象技术的不断发展，雷达探测技术已成为当今天气预报和气象研究的主要手段之一。雷达基数据是气象雷达接收到的未经加工的原始数据，因其包含大量天气信息，不仅在天气预报、天气预警等方面得到了广泛应用，还被广泛地用于气象科研和大气环境研究。本文将介绍如何使用Python处理雷达基数据，解析其中的信息，获取有效的天气数据，以及分析和可视化这些数据。雷达基数据格式与处</div>
</li>
<li><a href="/article/1902361768223633408.htm"
title="PTA天梯赛PYthon7-10 树的遍历" target="_blank">PTA天梯赛PYthon7-10 树的遍历</a>
<span class="text-muted">胡同Alley</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>给定一棵二叉树的后序遍历和中序遍历，请你输出其层序遍历的序列。这里假设键值都是互不相等的正整数。输入格式：输入第一行给出一个正整数N（≤30），是二叉树中结点的个数。第二行给出其后序遍历序列。第三行给出其中序遍历序列。数字间以空格分隔。输出格式：在一行中输出该树的层序遍历的序列。数字间以1个空格分隔，行首尾不得有多余空格。输入样例：723157641234567输出样例：4163572代码长度限制</div>
</li>
<li><a href="/article/1902358996526886912.htm"
title="机器学习之KMeans算法" target="_blank">机器学习之KMeans算法</a>
<span class="text-muted">知舟不叙</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/kmeans/1.htm">kmeans</a>
<div>文章目录引言1.KMeans算法简介2.KMeans算法的数学原理3.KMeans算法的步骤3.1初始化簇中心3.2分配数据点3.3更新簇中心3.4停止条件4.KMeans算法的优缺点4.1优点4.2缺点5.KMeans算法的应用场景5.1图像分割5.2市场细分5.3文档聚类5.4异常检测6.Python实现KMeans算法7.总结引言KMeans算法是机器学习中最经典的无监督学习算法之一，广泛应</div>
</li>
<li><a href="/article/1902340117155082240.htm"
title="OpenTiny技术直播讲师招募：与开源同行，点亮技术影响力！" target="_blank">OpenTiny技术直播讲师招募：与开源同行，点亮技术影响力！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E5%8C%96%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E6%BA%90/1.htm">前端组件化低代码开源</a>
<div>OpenTiny企业级前端开发解决方案，正在寻找热爱分享的技术达人！加入我们的直播讲师团，与众多开发者一起分享你的经验，推动技术普惠，同时打造个人技术影响力！报名链接：https://www.wjx.cn/vm/tw7FOgC.aspx#</div>
</li>
<li><a href="/article/1902339840846917632.htm"
title="Python自动化运维开发系列—CICD项目" target="_blank">Python自动化运维开发系列—CICD项目</a>
<span class="text-muted">weixin_46240874</span>
<div>导语都忘记是什么时候知道python的了，我是搞linux运维的，早先只是知道搞运维必须会shell,要做一些运维自动化的工作，比如实现一些定时备份数据啊、批量执行某个操作啊、写写监控脚本什么的。后来发现工作量大的时候shell开始变慢，实现某个功能使用shell感觉力不从心，听人说python能实现shell能做的一切功能，而且开发效率高，速度快，慢慢的就认识了python,多多少少看点简单的东</div>
</li>
<li><a href="/article/1902339714057302016.htm"
title="前端架构 —— 脚手架的本地调试方法" target="_blank">前端架构 —— 脚手架的本地调试方法</a>
<span class="text-muted">mask-li</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>脚手架本地link标准流程链接本地脚手架：cdyour-cli-dirnpmlink在当前node全局依赖中创建一个脚手架并且指向文件目录，而且会创建一个可执行文件链接本地库文件：cdyour-lib-dirnpmlinkcdyour-cli-dirnpmlinkyour-lib取消链接本地库文件：cdyour-lib-dirnpmunlinkcdyour-cli-dirnpmunlinkyour</div>
</li>
<li><a href="/article/1902336815713546240.htm"
title="每日实战：python爬虫之网页跳转-以某博为例" target="_blank">每日实战：python爬虫之网页跳转-以某博为例</a>
<span class="text-muted">代码CC</span>
<a class="tag" taget="_blank" href="/search/python%E7%88%AC%E8%99%AB/1.htm">python爬虫</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/pandas/1.htm">pandas</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>一、项目背景与核心需求通过逆向分析微博热榜接口，实现实时热搜数据抓取，重点解决：话题跳转链接参数缺失问题页面数据清洗规范化处理多维度数据采集存储二、网页跳转爬虫实现原理2.1跳转链接生成逻辑原始热搜词→"雷军刚知道柯洁定了SU7Ultra"处理流程：1.添加话题标识→#雷军刚知道柯洁定了SU7Ultra#2.URL编码→%23雷军刚知道柯洁定了SU7Ultra%233.添加搜索参数→&t=31生成</div>
</li>
<li><a href="/article/1902336816468520960.htm"
title="数据库 + Spring Boot + Vue 全栈交互逻辑详解" target="_blank">数据库 + Spring Boot + Vue 全栈交互逻辑详解</a>
<span class="text-muted">代码CC</span>
<a class="tag" taget="_blank" href="/search/Java%E9%A1%B9%E7%9B%AE-%E5%BC%80%E5%8F%91/1.htm">Java项目-开发</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录整体架构概述技术栈说明数据库设计规范SpringBoot后端架构Vue前端架构完整交互流程关键技术实现细节安全与性能优化异常处理机制整体架构概述graphTDA[Vue前端]-->|HTTP请求|B(SpringBoot后端)B-->|JDBC/ORM|C[(数据库)]C-->|返回数据|BB-->|JSON响应|AA-->|状态管理|D[VuexStore]B-->|缓存|E[Redis]B</div>
</li>
<li><a href="/article/1902336059375677440.htm"
title="使用 Vue 2.x + Element UI 搭建后台管理系统详解" target="_blank">使用 Vue 2.x + Element UI 搭建后台管理系统详解</a>
<span class="text-muted">不知名靓仔</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V</div>
</li>
<li><a href="/article/1902335051476037632.htm"
title="Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友" target="_blank">Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友</a>
<span class="text-muted">南北极之间</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</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%95%8F%E6%84%9F%E8%AF%8D/1.htm">敏感词</a><a class="tag" taget="_blank" href="/search/%E5%85%B3%E9%94%AE%E8%AF%8D/1.htm">关键词</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%84%9F%E8%AF%8D%E8%BF%87%E6%BB%A4/1.htm">敏感词过滤</a>
<div>效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：2351598671@qq.com以下是基于Vue2和ElementUI的评论关键词过滤功能实现，使用CDN引入Vue和ElementUI，方便在浏览器中直接预览。在线预览：Vue2+ElementUI实现评论关键词过滤功能目录需求场景技术选型实现步骤引入Vue2和ElementUI创建评论界面实现关键</div>
</li>
<li><a href="/article/1902330384071323648.htm"
title="基于 Python 将 PDF 转 Markdown 并拆解为 JSON，支持自定义标题处理" target="_blank">基于 Python 将 PDF 转 Markdown 并拆解为 JSON，支持自定义标题处理</a>
<span class="text-muted">drebander</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>在日常工作中，我们经常需要将PDF文件转换为可编辑、可结构化的数据格式，比如Markdown和JSON。但实际操作中，自动化工具往往会出现标题识别不准确的问题，尤其是PDF转换过程中，缺乏明确的标题标识。这篇文章将教你如何使用Python将PDF转换为Markdown，并通过自定义规则精准识别标题，最终将内容按标题结构拆解为JSON，方便后续快速检索与使用。1.实现目标将PDF文件转换为Markd</div>
</li>
<li><a href="/article/1902330129288327168.htm"
title="Python 项目自动化与 CI/CD 实践：让部署和发布像开挂一样简单" target="_blank">Python 项目自动化与 CI/CD 实践：让部署和发布像开挂一样简单</a>
<span class="text-muted">全栈探索者chen</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E7%94%A8%E6%80%A7%E6%B5%8B%E8%AF%95/1.htm">可用性测试</a>
<div>Python项目自动化与CI/CD实践：让部署和发布像开挂一样简单在软件开发的世界里，自动化和持续集成/持续部署（CI/CD）是超级英雄，它们不仅让我们的工作更加高效，还能避免那些令人头疼的手动操作。它们就像开发者的最佳伙伴，随时准备打击bug，拯救开发进度。那么，今天我们就来聊聊怎么在Python项目中玩转自动化和CI/CD，让你从繁琐的手动部署中解脱出来，飞速交付高质量的代码。文章目录什么是C</div>
</li>
<li><a href="/article/1902326726910865408.htm"
title="deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师..." target="_blank">deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师...</a>
<span class="text-muted">CoderBin_</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%8Edeepseek%E7%9A%84%E5%AF%B9%E8%AF%9D/1.htm">与deepseek的对话</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）</div>
</li>
<li><a href="/article/1902322310598160384.htm"
title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用</a>
<span class="text-muted">金枝玉叶9</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%871/1.htm">程序员知识储备1</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%872/1.htm">程序员知识储备2</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%873/1.htm">程序员知识储备3</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可</div>
</li>
<li><a href="/article/80.htm"
title="java杨辉三角" target="_blank">java杨辉三角</a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a>
<div>
package com.algorithm;
/**
* @Description 杨辉三角
* @author FuJianyong
* 2015-1-22上午10:10:59
*/
public class YangHui {
public static void main(String[] args) {
//初始化二维数组长度
int[][] y</div>
</li>
<li><a href="/article/207.htm"
title="《大话重构》之大布局的辛酸历史" target="_blank">《大话重构》之大布局的辛酸历史</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a>
<div>《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。
背景
公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中</div>
</li>
<li><a href="/article/334.htm"
title="电驴链接在线视频播放源码" target="_blank">电驴链接在线视频播放源码</a>
<span class="text-muted">dubinwei</span>
<a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E9%A9%B4/1.htm">电驴</a><a class="tag" taget="_blank" href="/search/%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">播放器</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91/1.htm">视频</a><a class="tag" taget="_blank" href="/search/ed2k/1.htm">ed2k</a>
<div>本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网：
http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。
项目源码：
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。
项目源码依赖于两个库项目，库项目一链接：
http://git.oschina.</div>
</li>
<li><a href="/article/461.htm"
title="Javascript中函数的toString()方法" target="_blank">Javascript中函数的toString()方法</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/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/toString/1.htm">toString</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a><a class="tag" taget="_blank" href="/search/object/1.htm">object</a>
<div>简述
The toString() method returns a string representing the source code of the function.
简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。
句法
function.</div>
</li>
<li><a href="/article/588.htm"
title="struts处理自定义异常" target="_blank">struts处理自定义异常</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a>
<div>很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。
非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。
此处我们用的是非运行时异常，首先定义一个异常LoginException:
/**
* 类描述：登录相</div>
</li>
<li><a href="/article/715.htm"
title="Linux中find常见用法示例" target="_blank">Linux中find常见用法示例</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux中find常见用法示例
·find path -option [ -print ] [ -exec -ok command ] {} \;
find命令的参数；</div>
</li>
<li><a href="/article/842.htm"
title="SpringMVC的各种参数绑定方式" target="_blank">SpringMVC的各种参数绑定方式</a>
<span class="text-muted">Harry642</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a><a class="tag" taget="_blank" href="/search/%E7%BB%91%E5%AE%9A/1.htm">绑定</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95/1.htm">表单</a>
<div>1. 基本数据类型(以int为例，其他类似)：
Controller代码：
@RequestMapping("saysth.do")
public void test(int count) {
}
表单代码：
<form action="saysth.do" method="post&q</div>
</li>
<li><a href="/article/969.htm"
title="Java 获取Oracle ROWID" target="_blank">Java 获取Oracle ROWID</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row.
The oracle.sql.ROWID class i</div>
</li>
<li><a href="/article/1096.htm"
title="java获取方法的参数名" target="_blank">java获取方法的参数名</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/parameter/1.htm">parameter</a><a class="tag" taget="_blank" href="/search/method/1.htm">method</a><a class="tag" taget="_blank" href="/search/reflect/1.htm">reflect</a>
<div>reflect.ClassInformationUtil.java
package reflect;
import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt</div>
</li>
<li><a href="/article/1223.htm"
title="JAVA正则表达式匹配 查找 替换 提取操作" target="_blank">JAVA正则表达式匹配 查找 替换 提取操作</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a><a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8F%96/1.htm">提取</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE/1.htm">查找</a>
<div>正则表达式的查找;主要是用到String类中的split();
String str;
str.split();方法中传入按照什么规则截取,返回一个String数组
常见的截取规则:
str.split("\\.")按照.来截取
str.</div>
</li>
<li><a href="/article/1350.htm"
title="Java中equals()与hashCode()方法详解" target="_blank">Java中equals()与hashCode()方法详解</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/set/1.htm">set</a><a class="tag" taget="_blank" href="/search/equals%28%29/1.htm">equals()</a><a class="tag" taget="_blank" href="/search/hashCode%28%29/1.htm">hashCode()</a>
<div>一.equals()方法详解
equals()方法在object类中定义如下：
public boolean equals(Object obj) {
return (this == obj);
}
很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I</div>
</li>
<li><a href="/article/1477.htm"
title="精通Oracle10编程SQL(4)使用SQL语句" target="_blank">精通Oracle10编程SQL(4)使用SQL语句</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a>
<div>--工资级别表
create table SALGRADE
(
GRADE NUMBER(10),
LOSAL NUMBER(10,2),
HISAL NUMBER(10,2)
)
insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser</div>
</li>
<li><a href="/article/1604.htm"
title="【Nginx二】Nginx作为静态文件HTTP服务器" target="_blank">【Nginx二】Nginx作为静态文件HTTP服务器</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/HTTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">HTTP服务器</a>
<div> Nginx作为静态文件HTTP服务器
在本地系统中创建/data/www目录，存放html文件(包括index.html)
创建/data/images目录，存放imags图片
在主配置文件中添加http指令
http {
server {
listen 80;
server_name </div>
</li>
<li><a href="/article/1731.htm"
title="kafka获得最新partition offset" target="_blank">kafka获得最新partition offset</a>
<span class="text-muted">blackproof</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/partition/1.htm">partition</a><a class="tag" taget="_blank" href="/search/offset/1.htm">offset</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0/1.htm">最新</a>
<div>kafka获得partition下标，需要用到kafka的simpleconsumer
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.</div>
</li>
<li><a href="/article/1858.htm"
title="centos 7安装docker两种方式" target="_blank">centos 7安装docker两种方式</a>
<span class="text-muted">ronin47</span>
<div> 第一种是采用yum 方式
yum install -y docker
</div>
</li>
<li><a href="/article/1985.htm"
title="java-60-在O(1)时间删除链表结点" target="_blank">java-60-在O(1)时间删除链表结点</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class DeleteNode_O1_Time {
/**
* Q 60 在O(1)时间删除链表结点
* 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点
*
* Assume the list is:
* head->...->nodeToDelete->mNode->nNode->..</div>
</li>
<li><a href="/article/2112.htm"
title="nginx利用proxy_cache来缓存文件" target="_blank">nginx利用proxy_cache来缓存文件</a>
<span class="text-muted">cfyme</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
<div>user zhangy users;
worker_processes 10;
error_log /var/vlogs/nginx_error.log crit;
pid /var/vlogs/nginx.pid;
#Specifies the value for ma</div>
</li>
<li><a href="/article/2239.htm"
title="[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题" target="_blank">[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a>
<div>
假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：
string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"
定义一个0整数c,然后用这个整数c去</div>
</li>
<li><a href="/article/2366.htm"
title="如何集成支付宝官方文档" target="_blank">如何集成支付宝官方文档</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>官方文档下载地址
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash
集成的必要条件
1. 需要有自己的Server接收支付宝的消息
2. 需要先制作app，然后提交支付宝审核，通过后才能集成
调试的时候估计会真的扣款，请注意
</div>
</li>
<li><a href="/article/2493.htm"
title="应该在什么时候使用Hadoop" target="_blank">应该在什么时候使用Hadoop</a>
<span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
<div>原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html
存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。
--------------------------------------------万能的分割线--------------------------------
有人问我，“你在大数据和Hado</div>
</li>
<li><a href="/article/2620.htm"
title="在GridView中对于有外键的字段使用关联模型进行搜索和排序" target="_blank">在GridView中对于有外键的字段使用关联模型进行搜索和排序</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>在GridView中使用关联模型进行搜索和排序
首先我们有两个模型它们直接有关联:
class Author extends CActiveRecord {
...
}
class Post extends CActiveRecord {
...
function relations() {
return array(
'</div>
</li>
<li><a href="/article/2747.htm"
title="使用NSString 的格式化大全" target="_blank">使用NSString 的格式化大全</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
<div>格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c</div>
</li>
<li><a href="/article/2874.htm"
title="使用activeX插件对象object滚动有重影" target="_blank">使用activeX插件对象object滚动有重影</a>
<span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/activeX%E6%8F%92%E4%BB%B6/1.htm">activeX插件</a><a class="tag" taget="_blank" href="/search/%E6%BB%9A%E5%8A%A8%E6%9C%89%E9%87%8D%E5%BD%B1/1.htm">滚动有重影</a>
<div>
使用activeX插件对象object滚动有重影 <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#</div>
</li>
<li><a href="/article/3001.htm"
title="SpringMVC4零配置" target="_blank">SpringMVC4零配置</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a>
<div>基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。
项目说明如下：
1.db.sql是项目中用到的表，数据库使用的是oracle11g
2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动；
3.默认项目为零配置启动，如果需要更改启动方式，请</div>
</li>
<li><a href="/article/3128.htm"
title="《开源框架那点事儿16》：缓存相关代码的演变" target="_blank">《开源框架那点事儿16》：缓存相关代码的演变</a>
<span class="text-muted">j2eetop</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E6%A1%86%E6%9E%B6/1.htm">开源框架</a>
<div>问题引入
上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。
该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。
当然去看相关实现代代码的时候，大致是下面的样子。
[java]
view plain
copy
print
?
public vo</div>
</li>
<li><a href="/article/3255.htm"
title="AngularJS浅析" target="_blank">AngularJS浅析</a>
<span class="text-muted">kvhur</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>概念
AngularJS is a structural framework for dynamic web apps.
了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm
Directive
扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间</div>
</li>
<li><a href="/article/3382.htm"
title="架构师之jdk的bug排查(一)---------------split的点号陷阱" target="_blank">架构师之jdk的bug排查(一)---------------split的点号陷阱</a>
<span class="text-muted">nannan408</span>
<a class="tag" taget="_blank" href="/search/split/1.htm">split</a>
<div>1.前言.
jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug.
2.代码
String[] paths = "object.object2.prop11".split("'");
System.ou</div>
</li>
<li><a href="/article/3509.htm"
title="如何对10亿数据量级的mongoDB作高效的全表扫描" target="_blank">如何对10亿数据量级的mongoDB作高效的全表扫描</a>
<span class="text-muted">quentinXXZ</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div> 本文链接:
http://quentinXXZ.iteye.com/blog/2149440
一、正常情况下，不应该有这种需求
首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。
说一下，</div>
</li>
<li><a href="/article/3636.htm"
title="C语言算法之水仙花数" target="_blank">C语言算法之水仙花数</a>
<span class="text-muted">qiufeihu</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
int x,y,z;
for(x=1;x<=N;x++)
for(y=0;y<=N;y++)
for(z=0;z<=N;z++)
if(x*100+y*10+z == x*x*x</div>
</li>
<li><a href="/article/3763.htm"
title="JSP指令" target="_blank">JSP指令</a>
<span class="text-muted">wyzuomumu</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
<div>
jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %>
常用的三种指令： page,include,taglib
page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%>
include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include</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>