4 合并grid列_Grid布局会了吗?

Grid布局

Grid布局即网格布局,将网页分成一个个的网格,然后通过这些网格进行组合,做出各种各样的布局。首先看看兼容性:

4 合并grid列_Grid布局会了吗?_第1张图片

Grid布局    VS   Flex布局

Grid布局与flex布局只是看起来差不多,其实有着本质的区别。Grid是二维布局,而flex是一维布局。flex布局一次只能处理一个维度上的元素布局,一行或者一列。Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。

但是Grid有个很大的问题就是兼容性不太好,不兼容ie。

DEMO:




    
    
    Grid布局title><br>    <style>.container { display: grid;/* fr 占满剩余的部分 */grid-template-columns: repeat(3, 1fr);/* 行间距和列间距都为20px */grid-gap: 20px;/* grid-auto-rows属性为网格容器中的行设置大小 *//* 表示不小于100px,最大值为自适应 */grid-auto-rows: minmax(100px, auto);<br>        }.one { grid-column: 1 / 2;grid-row: 1;background: #19CAAD;<br>        }.two { grid-column: 2 / 4;grid-row: 1 / 3;background: #8CC7B5;<br>        }.three { grid-row: 2 / 5;grid-column: 1;background: #D1BA74;<br>        }.four { grid-column: 3;grid-row: 3;background: #BEE7E9;<br>        }.five { grid-column: 2;grid-row: 3/5;background: #E6CEAC;<br>        }.six { grid-column: 3;grid-row: 4;background: #ECAD9E;<br>        }.item { text-align: center;font-size: 200%;color: #fff;<br>        }.seven { background: #DD98B2;<br>        }.eight { background: #ABE3B7;<br>        }.nine { background: #BFB540;<br>        }style><br>head><br><br><body><br>    <div class="container"><br>        <div class="one item">Onediv><br>        <div class="two item">Twodiv><br>        <div class="three item">Threediv><br>        <div class="four item">Fourdiv><br>        <div class="five item">Fivediv><br>        <div class="six item">Sixdiv><br>        <div class="seven item">Sevendiv><br>        <div class="eight item">Eightdiv><br>        <div class="nine item">Ninediv><br>    div><br>body><br><script><br><br>script><br><br>html><br></code></code></pre> <p>效果图:</p> <p><a href="http://img.e-com-net.com/image/info8/b2135fc5fb8049198a014482a615fb63.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b2135fc5fb8049198a014482a615fb63.jpg" alt="4 合并grid列_Grid布局会了吗?_第2张图片" width="650" height="260" style="border:1px solid black;"></a></p> <p><strong>容器和项目</strong>:我们通过在元素上声明 <code>display:grid(块级元素)</code> 或 <code>display:inline-grid(行内块元素)</code> 来创建一个网格容器。容器内的子元素就变成了一个个网格项目。</p> <p><strong>网络轨道</strong>:<code>grid-template-columns</code>和<code>grid-template-row</code>属性来定义网格中的行和列。</p> <p><strong>网格单元</strong>:容器内的子元素都是一个个网格单元。</p> <p><strong>repeat() 函数</strong>:可以简化重复的值。该函数接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。</p> <p><strong>fr 关键字</strong>:为了方便表示比例关系,网格布局提供了<code>fr</code>关键字。如果两列的宽度分别为<code>1fr</code>和<code>2fr</code>,就表示后者是前者的两倍。fr 是一个自适应单位,被用于在一系列长度值中分配剩余空间,剩下的空间根据各自的数字按比例分配。</p> <p><strong>auto-fill 关键字</strong>:表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格。<code>grid-template-columns: repeat(auto-fill, 200px)</code> 表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。所以当浏览器宽度变化时,网格项目的位置也</p> <pre><code><code>.container { <br>  display: grid;<br>  grid-template-columns: repeat(auto-fill, 200px);<br>  grid-gap: 5px;<br>  grid-auto-rows: 50px;<br>}<br><br></code></code></pre> <p><code>minmax()</code>函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。</p> <pre><code><code>/* 表示列宽不小于100px,不大于1fr */<br>grid-template-columns: 1fr 1fr minmax(100px, 1fr);<br></code></code></pre> <p><strong>auto 关键字</strong></p> <p><code>auto</code>关键字表示由浏览器自己决定长度。</p> <pre><code><code>/* 第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度 */<br>grid-template-columns: 100px auto 100px;<br></code></code></pre> <p><strong>网格线的名称</strong></p> <p><code>grid-template-columns</code>属性和<code>grid-template-rows</code>属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。</p> <pre><code><code>.container { <br>  display: grid;<br>  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];<br>  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];<br>}<br></code></code></pre> <p>网格布局允许同一根线有多个名字,比如<code>[six r6]</code>。</p> <h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"></span><span style="font-weight:bold;">容器属性(可理解为父元素属性)</span><span style="font-weight:bold;"></span></h3> <p><strong>grid-row-gap , grid-column-gap , grid-gap</strong></p> <p><code>grid-row-gap</code>属性设置行与行的间隔(行间距),<code>grid-column-gap</code>属性设置列与列的间隔(列间距)</p> <p><code>grid-gap</code>属性是<code>grid-column-gap</code>和<code>grid-row-gap</code>的合并简写形式</p> <pre><code><code> .wrapper { <br>            margin: 60px;<br>            /* 声明一个容器 */<br>            display: grid;<br>            /*  声明列的宽度 以及有几列 */<br>            grid-template-columns: repeat(3, 200px);<br>            /*  声明行间距和列间距  */<br>            grid-gap: 20px;<br>            /*  声明行的高度  */<br>            grid-template-rows: repeat(3,200px);<br>            line-height: 200px;<br>        }<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/a5713940557149f18f2987eef0e4ccb5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a5713940557149f18f2987eef0e4ccb5.jpg" alt="4 合并grid列_Grid布局会了吗?_第3张图片" width="650" height="572" style="border:1px solid black;"></a></p> <p><strong>grid-template-areas 属性</strong></p> <p>网格布局允许指定区域,一个区域由单个或者多个单元格组成。</p> <pre><code><code>.container{ <br>    display:gird;<br>    /*三行三列的网格布局,行高和列宽都是100px*/<br>    grid-template-columns:100px 100px 100px;<br>    grid-template-columns:100px 100px 100px;<br>    /*a-i九个区域,分别对应九个单元格*/<br>    grid-template-areas:'a b c'<br>            'd e f'<br>            'g h i'<br>}<br></code></code></pre> <p>还可以将多个单元格合并为一个区域</p> <pre><code><code>grid-template-areas:' one one one '<br>                    ' two two two '<br>                    ' three three three '<br><br>/*实例*/<br> grid-template-areas: 'one one one'<br>                'four four six'<br>                'nine nine nine';<br>/*对应的单元格中配置*/<br>.one{ <br>    grid-area:one  /*相当于区域的命名*/<br>}<br>...<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/16620f9acf12419eaddac65c364ff98c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16620f9acf12419eaddac65c364ff98c.jpg" alt="4 合并grid列_Grid布局会了吗?_第4张图片" width="650" height="637" style="border:1px solid black;"></a></p> <p>如果有些区域不需要使用,可以用“点”表示</p> <pre><code><code>/*中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域*/<br> grid-template-areas: 'one . three'<br>                      'four five .'<br>                      'seven . nine';<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/200b83245dc64593860edcc86ff0253c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/200b83245dc64593860edcc86ff0253c.jpg" alt="4 合并grid列_Grid布局会了吗?_第5张图片" width="650" height="580" style="border:1px solid black;"></a></p> <p><strong>grid-auto-flow属性</strong></p> <p>划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。</p> <p>默认是先行后列,即横着填满第一行,再填第二行。</p> <p>将grid-auto-flow设置为columns,就会变成先列后行。</p> <p><code>grid-auto-flow</code>属性除了设置成<code>row</code>和<code>column</code>,还可以设成<code>row dense</code>和<code>column dense</code>。这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。</p> <p><a href="http://img.e-com-net.com/image/info8/cd41f2ceaa5949f2aae85822188da6ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cd41f2ceaa5949f2aae85822188da6ea.jpg" alt="4 合并grid列_Grid布局会了吗?_第6张图片" width="458" height="542" style="border:1px solid black;"></a></p> <p>如图,右上角空了一格,设置row dense自动填充</p> <pre><code><code>grid-auto-flow: row dense;<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/9359869712c74d5d95dc01c0ef032c24.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9359869712c74d5d95dc01c0ef032c24.jpg" alt="4 合并grid列_Grid布局会了吗?_第7张图片" width="442" height="509" style="border:1px solid black;"></a></p> <pre><code><code>grid-auto-flow: columns dense;<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/2a3a895b77494aa4b53a997cc2a1cff8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2a3a895b77494aa4b53a997cc2a1cff8.jpg" alt="4 合并grid列_Grid布局会了吗?_第8张图片" width="573" height="427" style="border:1px solid black;"></a></p> <p><strong>justify-items 属性, align-items 属性, place-items 属性</strong></p> <p><code>justify-items</code>属性设置单元格内容的水平位置(左中右),<code>align-items</code>属性设置单元格内容的垂直位置(上中下)。这里的属性就和flex很相似了。</p> <ul> <li>start:对齐单元格的起始边缘。</li> <li>end:对齐单元格的结束边缘。</li> <li>center:单元格内部居中。</li> <li>stretch:拉伸,占满单元格的整个宽度(默认值)。</li> </ul> <pre><code><code>.container{ <br>    align-items:start<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/ba5a60ac60414106af88845c447ddd83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba5a60ac60414106af88845c447ddd83.jpg" alt="4 合并grid列_Grid布局会了吗?_第9张图片" width="518" height="450" style="border:1px solid black;"></a></p> <p><code>place-items</code>属性是<code>align-items</code>属性和<code>justify-items</code>属性的合并简写形式。</p> <pre><code><code>.container{ <br>    place-items:center;<br>    /* 也可以不相同*/<br>    /* place-items: ; */<br>    /* place-items:start,cneter; */<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/a08485a7d253493cabe10d5cb9deef57.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a08485a7d253493cabe10d5cb9deef57.jpg" alt="4 合并grid列_Grid布局会了吗?_第10张图片" width="494" height="427" style="border:1px solid black;"></a></p> <p><strong>justify-content 属性, align-content 属性, place-content 属性</strong></p> <p><code>justify-content</code>属性是整个内容区域在容器里面的水平位置(左中右),<code>align-content</code>属性是整个内容区域的垂直位置(上中下)。</p> <p>这些属性与flex布局的justify-content属性、align-content属性基本相同</p> <p>可设置的值有:</p> <ul> <li>start - 对齐容器的起始边框。</li> <li>end - 对齐容器的结束边框。</li> <li>center - 容器内部居中。</li> <li>stretch - 项目大小没有指定时,拉伸占据整个网格容器。</li> <li>space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。</li> <li>space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。</li> <li>space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。</li> </ul> <p>同上,place-content也是前两者的合并简写形式</p> <pre><code><code>.container{ <br> justify-content:center;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/fe631d280d6f4f8486e2df54b1973adf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe631d280d6f4f8486e2df54b1973adf.jpg" alt="4 合并grid列_Grid布局会了吗?_第11张图片" width="650" height="181" style="border:1px solid black;"></a></p> <pre><code><code>.container{ <br> justify-content:space-around;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/fd789c19811c4cca888355f9f2783801.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd789c19811c4cca888355f9f2783801.jpg" alt="4 合并grid列_Grid布局会了吗?_第12张图片" width="650" height="181" style="border:1px solid black;"></a></p> <pre><code><code>.container{ <br> place-content: space-evenly;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/3419b9a9b8d74dfb93d4e198518d1abf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3419b9a9b8d74dfb93d4e198518d1abf.jpg" alt="4 合并grid列_Grid布局会了吗?_第13张图片" width="650" height="297" style="border:1px solid black;"></a></p> <p><strong>grid-auto-columns 属性, grid-auto-rows 属性</strong></p> <p>有的时候元素会跑到指定的网格之外,这时候浏览器会默认创建网格来放置它。</p> <p>比如我生成的网格是三行三列,而我指定了一个元素放在五行五列。</p> <p><code>grid-auto-columns</code>属性和<code>grid-auto-rows</code>属性用来设置,浏览器自动创建的多余网格的列宽和行高。</p> <p>设置了之后行高和列宽会根据设置的来进行展示,如果不设置默认是根据网格里的内容大小来展示。</p> <pre><code><code>.container{ <br>    grid-auto-rows: 50px;<br>}<br>.eight { <br>    background: #ABE3B7;<br>    grid-row-start: 4;<br>    grid-column-start: 2;<br>}<br><br>.nine { <br>    background: #BFB540;<br>    grid-row-start: 5;<br>    grid-column-start: 3;<br>}<br><br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/a8af3311a11647cfadfe159b310cb1da.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a8af3311a11647cfadfe159b310cb1da.png" alt="4 合并grid列_Grid布局会了吗?_第14张图片" width="401" height="530" style="border:1px solid black;"></a></p> <p><strong>grid-template 属性, grid 属性</strong></p> <p>这两个属性就是上面属性的合并写法。</p> <p><code>grid-template</code>:<code>grid-template-columns</code>、<code>grid-template-rows</code>和<code>grid-template-areas</code></p> <p><code>grid</code>:<code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、 <code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code></p> <h3><span style="font-weight:bold;"></span><span style="font-weight:bold;"></span><span style="font-weight:bold;">网格项目属性(可理解为子元素属性)</span><span style="font-weight:bold;"></span></h3> <p><strong>grid-column-start 属性, grid-column-end 属性, grid-row-start 属性, grid-row-end 属性</strong></p> <p>项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。</p> <ul> <li><code>grid-column-start</code>属性:左边框所在的垂直网格线</li> <li><code>grid-column-end</code>属性:右边框所在的垂直网格线</li> <li><code>grid-row-start</code>属性:上边框所在的水平网格线</li> <li><code>grid-row-end</code>属性:下边框所在的水平网格线</li> </ul> <pre><code><code>/*one项目的位置在第2根行线和第4根行线之间*/<br>/* 没有指定左右边框所以默认还是在第1根到第2根之间*/<br>.one{ <br>  grid-row-start: 2;<br>  grid-row-end: 4;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/9b9b4c4ea62845c898c67d1260276a2f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b9b4c4ea62845c898c67d1260276a2f.jpg" alt="4 合并grid列_Grid布局会了吗?_第15张图片" width="449" height="461" style="border:1px solid black;"></a></p> <pre><code><code>/* 设置了四个边框 */<br>/* 先列后行*/<br>.container{ <br>    grid-auto-flow:column;<br>}</code><code>.one{ <br>  grid-column-start: 1;<br>  grid-column-end: 3;<br>  grid-row-start: 2;<br>  grid-row-end: 4;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/80661838f1ac43419af60f3ee4d87b11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80661838f1ac43419af60f3ee4d87b11.jpg" alt="4 合并grid列_Grid布局会了吗?_第16张图片" width="650" height="190" style="border:1px solid black;"></a></p> <p>这四个属性的值还可以使用<code>span</code>关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。</p> <pre><code><code>grid-column-start: span 3;<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/0c5beb62ef7546bd9460a0c7f6b1b107.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c5beb62ef7546bd9460a0c7f6b1b107.jpg" alt="4 合并grid列_Grid布局会了吗?_第17张图片" width="473" height="504" style="border:1px solid black;"></a></p> <p>看到这里有一个问题,我当前的网格是3*3,我如果跨越4个网格会怎样呢?</p> <p><a href="http://img.e-com-net.com/image/info8/80891c8ca7444ea9bc19fc41c5510fb5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80891c8ca7444ea9bc19fc41c5510fb5.jpg" alt="4 合并grid列_Grid布局会了吗?_第18张图片" width="650" height="185" style="border:1px solid black;"></a></p> <p>结果显示会超出当前网格,因为超出了一个网格,所有剩下的部分将作为一个网格。所有会直接沾满。</p> <p>如果span 5 ,则超出两个网格,剩余部分会平分成两个网格。</p> <p><strong>grid-column 属性, grid-row 属性</strong></p> <p><code>grid-column</code>属性是<code>grid-column-start</code>和<code>grid-column-end</code>的合并简写形式,<code>grid-row</code>属性是<code>grid-row-start</code>属性和<code>grid-row-end</code>的合并简写形式。中间会加上<code>/</code>来区分。</p> <pre><code><code>.one { <br>  grid-column: 1 / 3;<br>  grid-row: 1 / 2;<br>}<br>/* 等同于 */<br>.one{ <br>  grid-column-start: 1;<br>  grid-column-end: 3;<br>  grid-row-start: 1;<br>  grid-row-end: 2;<br>}<br></code></code></pre> <p>其中也可以使用<code>span</code>关键字</p> <pre><code><code>.one { <br>    background: #19CAAD;<br>    grid-column: 1 / span 2;<br>    grid-row: 1 / span 2;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/34095da351424947a2bfb1c07c3d8c83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/34095da351424947a2bfb1c07c3d8c83.jpg" alt="4 合并grid列_Grid布局会了吗?_第19张图片" width="422" height="487" style="border:1px solid black;"></a></p> <p><strong>grid-area 属性</strong></p> <p><code>grid-area</code>属性指定项目放在哪一个区域</p> <pre><code><code>.container { <br>  grid-template-areas: 'one . three'<br>                       'four five .'<br>                       'seven . nine';<br>}<br>/* 只对one项目(元素)使用了grid-area属性*/<br>.one { <br>    background: #19CAAD;<br>    grid-area:five;<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/953d2bfbafe64976bb7786bdb25cb5fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/953d2bfbafe64976bb7786bdb25cb5fa.jpg" alt="4 合并grid列_Grid布局会了吗?_第20张图片" width="492" height="417" style="border:1px solid black;"></a></p> <p><strong>justify-self 属性, align-self 属性, place-self 属性</strong></p> <p>同样与flex类似。</p> <p>可取的值:</p> <ul> <li>start:对齐单元格的起始边缘。</li> <li>end:对齐单元格的结束边缘。</li> <li>center:单元格内部居中。</li> <li>stretch:拉伸,占满单元格的整个宽度(默认值)。</li> </ul> <pre><code><code>.one { <br>    background: #19CAAD;<br>    grid-area:five;<br>    justify-self: center;<br>    align-self: center;<br>    /* place-self:center */<br>}<br></code></code></pre> <p><a href="http://img.e-com-net.com/image/info8/8373505bb7ed4c959dc34bc9d5d2c86b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8373505bb7ed4c959dc34bc9d5d2c86b.jpg" alt="4 合并grid列_Grid布局会了吗?_第21张图片" width="424" height="406" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/3040bf7be5cd44569da23df541545430.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3040bf7be5cd44569da23df541545430.jpg" alt="4 合并grid列_Grid布局会了吗?_第22张图片" width="632" height="632" style="border:1px solid black;"></a></p>  相关推荐 <p>菜单权限处理 [项目实战]</p> <p>Node 到底是用来干嘛的呢?</p> <p>如何提高github下载速度到2MB/s</p> <p>手写webpack核心原理,再也不怕面试官问我webpack原理</p> <p>14条 Scss 缩减50%样式代码的实战经验总结</p> <p>又一个布局利器, CSS 伪类 :placeholder-shown</p> <p>封装一个vue视频播放器组件</p> <p>对于组件的可重用性,大佬给出来6个建议</p> <p>学习 TS 不要错过的八个工具</p> <p>Node 中的全链路式日志标记及处理</p> <p>使用 Node 开发服务器项目时如何高效地打日志?</p> <p>用TypeScript学设计模式(享元模式)</p> <p>用TypeScript学设计模式(模板方法模式)</p> <p>TypeScript 设计模式之适配器模式</p> <p>用TypeScript学设计模式(观察者模式)</p> <p>用TypeScript学设计模式(单例模式)</p> <p><a href="http://img.e-com-net.com/image/info8/5b6de01508b341f1acaae06199744d43.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b6de01508b341f1acaae06199744d43.jpg" alt="4 合并grid列_Grid布局会了吗?_第23张图片" width="650" height="286" style="border:1px solid black;"></a></p> <img src="http://img.e-com-net.com/image/info8/aeba8077bfb94a2ba9caf30fc835165b.jpg" alt="44885e57e9cadc5a69c21ae3c4da3d1c.png" width="27" height="28">点在看的人特别帅/美 <a href="http://img.e-com-net.com/image/info8/700fbfd6ef694b6bbb9d43b06dbd1ef2.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/700fbfd6ef694b6bbb9d43b06dbd1ef2.gif" alt="b46e3f8ad2431e7ba89fbc484b48d7ea.gif" width="100" height="100"></a> </div> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1383716673885917184"></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">你可能感兴趣的:(4,合并grid列)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943992018111885312.htm" title="发票合并工具" target="_blank">发票合并工具</a> <span class="text-muted">小朋的软件园</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>"发票合并工具"是一款专为高效整理票据设计的实用工具,支持将来自不同渠道的发票文件(如PDF文档、各类图片格式)快速整合为排版规范的PDF文件,尤其适用于财务报销场景下的批量票据处理需求。核心功能亮点多格式兼容:无缝导入PDF文件及常见图片格式(.png/.jpg/.jpeg/.bmp),适配多来源发票整合需求。智能布局配置:提供灵活的页面布局选项(每页2/3/4张发票),其中"2合1"模式针对报</div> </li> <li><a href="/article/1943990630690648064.htm" title="【LeetCode 热题 100】24. 两两交换链表中的节点——(解法一)迭代+哨兵" target="_blank">【LeetCode 热题 100】24. 两两交换链表中的节点——(解法一)迭代+哨兵</a> <span class="text-muted">xumistore</span> <a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/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/java/1.htm">java</a> <div>Problem:24.两两交换链表中的节点题目:给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。文章目录整体思路完整代码时空复杂度时间复杂度:O(N)空间复杂度:O(1)整体思路这段代码旨在解决一个经典的链表操作问题:两两交换链表中的节点(SwapNodesinPairs)。问题要求将链表中每两个相邻的节点进行交换</div> </li> <li><a href="/article/1943988865945628672.htm" title="Leetcode 148. 排序链表" target="_blank">Leetcode 148. 排序链表</a> <span class="text-muted"></span> <div>文章目录前引题目代码(首刷看题解)代码(8.9二刷部分看解析)代码(9.15三刷部分看解析)前引综合性比较强的一道题,要求时间复杂度必须O(logn)才能通过,最适合链表的排序算法就是归并。这里采用自顶向下的方法步骤:找到链表中点(双指针)对两个子链表排序(递归,直到只有一个结点,记得将子链表最后指向nullptr)归并(引入dummy结点)题目Leetcode148.排序链表代码(首刷看题解)c</div> </li> <li><a href="/article/1943988486843461632.htm" title="LeetCode 148. 排序链表:归并排序的细节解析" target="_blank">LeetCode 148. 排序链表:归并排序的细节解析</a> <span class="text-muted">进击的小白菜</span> <a class="tag" taget="_blank" href="/search/2025/1.htm">2025</a><a class="tag" taget="_blank" href="/search/Top100/1.htm">Top100</a><a class="tag" taget="_blank" href="/search/%E8%AF%A6%E8%A7%A3/1.htm">详解</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>文章目录题目描述一、方法思路:归并排序的核心步骤二、关键实现细节:快慢指针分割链表1.快慢指针的初始化问题2.为什么选择`fast=head.next`?示例1:链表长度为偶数(`1->2->3->4`)三、完整代码实现四、复杂度分析五、总结题目描述LeetCode148题要求对链表进行排序,时间复杂度需为O(nlogn),且空间复杂度为O(logn)。由于链表的特殊结构(无法随机访问),归并排序</div> </li> <li><a href="/article/1943986471220342784.htm" title="嵌入式系统LCD显示模块编程实践" target="_blank">嵌入式系统LCD显示模块编程实践</a> <span class="text-muted"></span> <div>本文还有配套的精品资源,点击获取简介:本文档提供了一个具有800x480分辨率的3.5英寸液晶显示模块LW350AC9001的驱动程序代码,以及嵌入式系统中使用C/C++语言进行硬件编程的实践指南。该模块的2mm厚度使其适用于空间受限的便携式设备。内容包括驱动程序源代码、硬件控制接口使用方法,以及如何在嵌入式系统中进行图形处理、电源管理与性能优化。1.嵌入式系统原理1.1嵌入式系统概念嵌入式系统是</div> </li> <li><a href="/article/1943986344934043648.htm" title="深入剖析OpenJDK 18 GA源码:Java平台最新发展" target="_blank">深入剖析OpenJDK 18 GA源码:Java平台最新发展</a> <span class="text-muted">想法臃肿</span> <div>本文还有配套的精品资源,点击获取简介:OpenJDK18GA作为Java开发的关键里程碑,提供了诸多新特性和改进。本文章深入探讨了OpenJDK18GA源码,揭示其内部机制,帮助开发者更好地理解和利用这个版本。文章还涵盖了PatternMatching、SealedClasses、Records、JEP395、JEP406和JEP407等特性,以及HotSpot虚拟机、编译器、垃圾收集器、内存模型</div> </li> <li><a href="/article/1943985208218939392.htm" title="Python爱心光波" target="_blank">Python爱心光波</a> <span class="text-muted"></span> <div>系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Python爱心光波②7Python满天繁星8Python五彩气球9Python白色飘雪10Pyt</div> </li> <li><a href="/article/1943985208697090048.htm" title="Python流星雨" target="_blank">Python流星雨</a> <span class="text-muted">Want595</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>文章目录系列文章写在前面技术需求完整代码代码分析1.模块导入2.画布设置3.画笔设置4.颜色列表5.流星类(Star)6.流星对象创建7.主循环8.流星运动逻辑9.视觉效果10.总结写在后面系列文章序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python</div> </li> <li><a href="/article/1943983064304644096.htm" title="算法学习笔记:17.蒙特卡洛算法 ——从原理到实战,涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记:17.蒙特卡洛算法 ——从原理到实战,涵盖 LeetCode 与考研 408 例题</a> <span class="text-muted"></span> <div>在计算机科学和数学领域,蒙特卡洛算法(MonteCarloAlgorithm)以其独特的随机抽样思想,成为解决复杂问题的有力工具。从圆周率的计算到金融风险评估,从物理模拟到人工智能,蒙特卡洛算法都发挥着不可替代的作用。本文将深入剖析蒙特卡洛算法的思想、解题思路,结合实际应用场景与Java代码实现,并融入考研408的相关考点,穿插图片辅助理解,帮助你全面掌握这一重要算法。蒙特卡洛算法的基本概念蒙特卡</div> </li> <li><a href="/article/1943983064719880192.htm" title="分布式学习笔记_04_复制模型" target="_blank">分布式学习笔记_04_复制模型</a> <span class="text-muted">NzuCRAS</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>常见复制模型使用复制的目的在分布式系统中,数据通常需要被分布在多台机器上,主要为了达到:拓展性:数据量因读写负载巨大,一台机器无法承载,数据分散在多台机器上仍然可以有效地进行负载均衡,达到灵活的横向拓展高容错&高可用:在分布式系统中单机故障是常态,在单机故障的情况下希望整体系统仍然能够正常工作,这时候就需要数据在多台机器上做冗余,在遇到单机故障时能够让其他机器接管统一的用户体验:如果系统客户端分布</div> </li> <li><a href="/article/1943983063352537088.htm" title="算法学习笔记:15.二分查找 ——从原理到实战,涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记:15.二分查找 ——从原理到实战,涵盖 LeetCode 与考研 408 例题</a> <span class="text-muted">呆呆企鹅仔</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a> <div>在计算机科学的查找算法中,二分查找以其高效性占据着重要地位。它利用数据的有序性,通过不断缩小查找范围,将原本需要线性时间的查找过程优化为对数时间,成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找(BinarySearch),又称折半查找,是一种在有序数据集合中查找特定元素的高效算法。其核心原理是:通过不断将查找范围减半,快速定位目标元素。与线性查找逐个遍历元素不同,二分查找依赖</div> </li> <li><a href="/article/1943982937041072128.htm" title="2025代码块种类以及作用" target="_blank">2025代码块种类以及作用</a> <span class="text-muted">2501_92758067</span> <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/phpstorm/1.htm">phpstorm</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a> <div>https://www.bilibili.com/opus/1088624478422827030https://www.bilibili.com/opus/1088624529930977287https://t.bilibili.com/1088633635294150662https://www.bilibili.com/opus/1088633635294150662https://t.b</div> </li> <li><a href="/article/1943982558555467776.htm" title="(Python基础篇)循环结构" target="_blank">(Python基础篇)循环结构</a> <span class="text-muted">EternityArt</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AF%87/1.htm">基础篇</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、什么是Python循环结构?循环结构是编程中重复执行代码块的机制。在Python中,循环允许你:1.迭代处理数据:遍历列表、字典、文件内容等。2.自动化重复任务:如批量处理数据、生成序列等。3.控制执行流程:根据条件决定是否继续或终止循环。二、为什么需要循环结构?假设你需要打印1到100的所有偶数:没有循环:需手动编写100行print()语句。print(0)print(2)print(4)</div> </li> <li><a href="/article/1943982306029006848.htm" title="LeetCode算法题:电话号码的字母组合" target="_blank">LeetCode算法题:电话号码的字母组合</a> <span class="text-muted">吱屋猪_</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>题目描述:给定一个仅包含数字2-9的字符串,返回所有它能表示的字母组合。答案可以按任意顺序返回。给出数字到字母的映射如下(与电话按键相同)。注意1不对应任何字母。2->"abc"3->"def"4->"ghi"5->"jkl"6->"mno"7->"pqrs"8->"tuv"9->"wxyz"例如,给定digits="23",返回["ad","ae","af","bd","be","bf","cd</div> </li> <li><a href="/article/1943981927514042368.htm" title="Python七彩花朵" target="_blank">Python七彩花朵</a> <span class="text-muted">Want595</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>系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Python爱心光波②7Python满天繁星8Python五彩气球9Python白色飘雪10Pyt</div> </li> <li><a href="/article/1943981801294852096.htm" title="深入解析 TCP 连接状态与进程挂起、恢复与关闭" target="_blank">深入解析 TCP 连接状态与进程挂起、恢复与关闭</a> <span class="text-muted">誰能久伴不乏</span> <a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>文章目录深入解析TCP连接状态与进程挂起、恢复与关闭一、TCP连接的各种状态1.**`LISTEN`**(监听)2.**`SYN_SENT`**(SYN已发送)3.**`SYN_RECEIVED`**(SYN已接收)4.**`ESTABLISHED`**(已建立)5.**`FIN_WAIT_1`**(关闭等待1)6.**`FIN_WAIT_2`**(关闭等待2)7.**`CLOSE_WAIT`**</div> </li> <li><a href="/article/1943981548541898752.htm" title="Leetcode 3604. Minimum Time to Reach Destination in Directed Graph" target="_blank">Leetcode 3604. Minimum Time to Reach Destination in Directed Graph</a> <span class="text-muted">Espresso Macchiato</span> <a class="tag" taget="_blank" href="/search/leetcode%E7%AC%94%E8%AE%B0/1.htm">leetcode笔记</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/3604/1.htm">3604</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/medium/1.htm">medium</a><a class="tag" taget="_blank" href="/search/leetcode%E5%8F%8C%E5%91%A8%E8%B5%9B160/1.htm">leetcode双周赛160</a><a class="tag" taget="_blank" href="/search/BFS/1.htm">BFS</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E5%BA%A6%E4%BC%98%E5%85%88%E9%81%8D%E5%8E%86/1.htm">广度优先遍历</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E4%BC%98%E8%B7%AF%E5%BE%84/1.htm">最优路径</a> <div>Leetcode3604.MinimumTimetoReachDestinationinDirectedGraph1.解题思路2.代码实现题目链接:3604.MinimumTimetoReachDestinationinDirectedGraph1.解题思路这一题思路上就是一个广度优先遍历,我们不断考察当前时间点以及位置的情况下,下一个点可行的位置,然后考察最近的时间点能够到达的位置,遍历全部可能</div> </li> <li><a href="/article/1943980541002969088.htm" title="洛谷 P11120 [ROIR 2024 Day 1] 登机 题解" target="_blank">洛谷 P11120 [ROIR 2024 Day 1] 登机 题解</a> <span class="text-muted">殇之夜</span> <a class="tag" taget="_blank" href="/search/%E6%B4%9B%E8%B0%B7/1.htm">洛谷</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>Part0前言这种题一看就是签到题,也是特水,建议评红或橙。Part1思路就是先将已有位置先填对称,然后将剩余还未添加的乘客以对称方式填入。首先可以特判掉需要的位置大于空位的情况,直接输出Impossible。然后用数组记录.和X的位置,先遍历所有X的位置,然后看他的对称位置是否为空,若为空,则填入X,然后m--。最后若musingnamespacestd;chara[1010][10];stru</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <span class="text-muted"></span> <div>在jQuery中合并多个数组并去重,推荐使用原生JavaScript的Set对象(高效简单)或$.unique()(仅适用于DOM元素,不适用于普通数组)。以下是完整解决方案:方法1:使用ES6Set(推荐)//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943975627472302080.htm" title="用OpenCV标定相机内参应用示例(C++和Python)" target="_blank">用OpenCV标定相机内参应用示例(C++和Python)</a> <span class="text-muted"></span> <div>下面是一个完整的使用OpenCV进行相机内参标定(CameraCalibration)的示例,包括C++和Python两个版本,基于棋盘格图案标定。一、目标:相机标定通过拍摄多张带有棋盘格图案的图像,估计相机的内参:相机矩阵(内参)K畸变系数distCoeffs可选外参(R,T)标定精度指标(如重投影误差)二、棋盘格参数设置(根据自己的棋盘格设置):棋盘格角点数:9x6(内角点,9列×6行);每个</div> </li> <li><a href="/article/1943975626671190016.htm" title="centos7安装 mysql5.7(安装包)" target="_blank">centos7安装 mysql5.7(安装包)</a> <span class="text-muted">heiPony</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mariadb/1.htm">mariadb</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一.卸载centos7自带数据库查看系统自带的Mariadbrpm-qa|grepmariadbmariadb-libs-5.5.44-2.el7.centos.x86_64卸载rpm-e--nodepsmariadb-libs-5.5.44-2.el7.centos.x86_64删除etc目录下的my.cnfrm/etc/my.cnf二.检查mysql是否存在(有就卸载,删除相关文件)rpm-q</div> </li> <li><a href="/article/1943975122729758720.htm" title="EMQX 社区版单机和集群部署" target="_blank">EMQX 社区版单机和集群部署</a> <span class="text-muted">pcj_888</span> <a class="tag" taget="_blank" href="/search/MQTT/1.htm">MQTT</a><a class="tag" taget="_blank" href="/search/MQTT/1.htm">MQTT</a><a class="tag" taget="_blank" href="/search/EMQ/1.htm">EMQ</a> <div>EMQ支持Docker,宿主机,k8s部署;支持单机或集群部署。以下给出EMQX社区版单机和集群部署方法1.Docker单机部署官方推荐最小配置:2核4G下载容器镜像dockerpullemqx/emqx:5.3.2启动容器dockerrun-d--nameemqx\-p1883:1883\-p8083:8083\-p8883:8883\-p8084:8084\-p18083:18083\emqx</div> </li> <li><a href="/article/1943973484015185920.htm" title="npm proxy setting" target="_blank">npm proxy setting</a> <span class="text-muted">kjndppl</span> <a class="tag" taget="_blank" href="/search/%5BNode.js/1.htm">[Node.js</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a><a class="tag" taget="_blank" href="/search/password/1.htm">password</a> <div>清理npmconfigdeletehttp-proxynpmconfigdeletehttps-proxy具体设置步骤如下:1.执行npmconfig后,将看到下一行提示信息npmconfigls-ltoshowalldefaults.2.执行npmconfigls-l后,在一大长串的settign中找出userconfig项(大概位于倒数第4项)[b]userconfig[/b]="C:\\Us</div> </li> <li><a href="/article/1943972727534710784.htm" title="Linux/Centos7离线安装并配置MySQL 5.7" target="_blank">Linux/Centos7离线安装并配置MySQL 5.7</a> <span class="text-muted">有事开摆无事百杜同学</span> <a class="tag" taget="_blank" href="/search/LInux%2FCentOS7/1.htm">LInux/CentOS7</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Linux/Centos7离线安装并配置MySQL5.7超详细教程一、环境准备1.下载MySQL5.7离线包2.使用rpm工具卸载MariaDB(避免冲突)3.创建系统级别的MySQL专用用户二、安装与配置1.解压并重命名MySQL目录2.创建数据目录和配置文件3.设置目录权限4.初始化MySQL5.配置启动脚本6.配置环境变量三、启动与验证1.启动MySQL服务2.获取初始密码3.登录并修改密码</div> </li> <li><a href="/article/1943972599818153984.htm" title="本地包解决npm error code E404" target="_blank">本地包解决npm error code E404</a> <span class="text-muted">雅痞yuppie</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>这个错误提示表明npm找不到名为create-vue-admin-cli的包。这是因为你开发的CLI工具还没有发布到npm官方注册表。要解决这个问题,有两种方法:方法一:使用本地开发模式测试1.确保你的CLI已正确链接到全局在你的vue-admin-cli项目根目录下执行:npmlink这会在全局环境中创建一个符号链接,指向你本地的CLI项目。2.使用本地链接的CLI创建项目直接使用命令:vue-</div> </li> <li><a href="/article/1943971211692273664.htm" title="Linux操作系统磁盘管理" target="_blank">Linux操作系统磁盘管理</a> <span class="text-muted">CZZDg</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>目录一.硬盘介绍1.硬盘的物理结构2.CHS编号3.磁盘存储划分4.开机流程5.要点6.磁盘存储数据的形式二.Linux文件系统1.根文件系统2.虚拟文件系统3.真文件系统4.伪文件系统三.磁盘分区与挂载1.磁盘分区方式2.分区命令3.查看与识别命令4.格式化命令5.挂载命令四.LVM逻辑卷1.概述2.管理命令五.磁盘配额1.概述usrquota:支持对用户的磁盘配额grpquota:支持对组的磁</div> </li> <li><a href="/article/1943971212849901568.htm" title="计算机网络技术" target="_blank">计算机网络技术</a> <span class="text-muted">CZZDg</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a> <div>目录一.网络概述1.网络的概念2.网络发展是3.网络的四要素4.网络功能5.网络类型6.网络协议与标准7.网络中常见的概念8.网络拓补结构二.网络模型1.分层思想2.OSI七层模型3.TCP/IP五层模型4.数据的封装与解封装过程三.IP地址1.进制转换2.IP地址定义3.IP地址组成成分4.IP地址分类5.地址划分6、相关概念一.网络概述1.网络的概念两个主机通过传输介质和通信协议实现通信和资源</div> </li> <li><a href="/article/1943968187112550400.htm" title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a> <span class="text-muted">青苔猿猿</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a> <div>目录文件名:`constants.py`功能概述:主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div> </li> <li><a href="/article/1943968060264214528.htm" title="无线鼠标产品整体技术分析总结" target="_blank">无线鼠标产品整体技术分析总结</a> <span class="text-muted">悟空胆好小</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%A4%96%E8%AE%BE/1.htm">计算机外设</a> <div>无线鼠标产品对比分析,以小米为例文章目录无线鼠标产品对比分析,以小米为例一.小米无线鼠标产品对比1.1小米无线鼠标XMSMSB05YM2.4G单模款1.2小米无线鼠标XMSMSB01YM2.4G+BT双模款二.**单模鼠标与双模的区别****1.连接方式****2.通信性能与可靠性****3.功耗管理****4.适用场景****5.技术扩展性**6.**小结**三.无线鼠标产品技术重点分析3.1.</div> </li> <li><a href="/article/1943967933604622336.htm" title="微软 Bluetooth LE Explorer 实用工具的详细使用分析" target="_blank">微软 Bluetooth LE Explorer 实用工具的详细使用分析</a> <span class="text-muted">悟空胆好小</span> <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>微软BluetoothLEExplorer实用工具的详细使用分析文章目录微软**BluetoothLEExplorer**实用工具的详细使用分析1.**工具定位与核心功能**2.**关键特性与更新**3.**使用场景示例**4.**系统要求与依赖**5.**与专业工具对比**6.**局限性**7.**实践建议**结论以下是微软BluetoothLEExplorer实用工具的详细使用分析:1.工具定</div> </li> <li><a href="/article/113.htm" title="windows下源码安装golang" target="_blank">windows下源码安装golang</a> <span class="text-muted">616050468</span> <a class="tag" taget="_blank" href="/search/golang%E5%AE%89%E8%A3%85/1.htm">golang安装</a><a class="tag" taget="_blank" href="/search/golang%E7%8E%AF%E5%A2%83/1.htm">golang环境</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>         系统: 64位win7, 开发环境:sublime text 2,  go版本: 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系</div> </li> <li><a href="/article/240.htm" title="redis批量删除带空格的key" target="_blank">redis批量删除带空格的key</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>redis批量删除的通常做法: redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的,但有空格就不行了: $redis-cli keys "blacklist*" 1) "blacklist:12: 361942420@qq.com</div> </li> <li><a href="/article/367.htm" title="oracle正则表达式的用法" target="_blank">oracle正则表达式的用法</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>  方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct:]] 标点符号字符 [[:space:]]</div> </li> <li><a href="/article/494.htm" title="2048源码(核心算法有,缺少几个anctionbar,以后补上)" target="_blank">2048源码(核心算法有,缺少几个anctionbar,以后补上)</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/2048/1.htm">2048</a> <div>2048游戏基本上有四部分组成, 1:主activity,包含游戏块的16个方格,上面统计分数的模块 2:底下的gridview,监听上下左右的滑动,进行事件处理, 3:每一个卡片,里面的内容很简单,只有一个text,记录显示的数字 4:Actionbar,是游戏用重新开始,设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1:设计游戏的布局,基本是两块,上面是分</div> </li> <li><a href="/article/621.htm" title="jquery内部链式调用机理" target="_blank">jquery内部链式调用机理</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/jquery/1.htm">jquery</a> <div>只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象(通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this(结合下面的setStyles)指向这个对象) function create(type){ var element=document.createElement(type); //this=element; </div> </li> <li><a href="/article/748.htm" title="你订酒店时的每一次点击 背后都是NoSQL和云计算" target="_blank">你订酒店时的每一次点击 背后都是NoSQL和云计算</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>全球最大的在线旅游公司Expedia旗下的酒店预订公司,它运营着89个网站,跨越68个国家,三年前开始实验公有云,以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的,如搜索框的自动推荐功能,还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou</div> </li> <li><a href="/article/875.htm" title="java笔记1" target="_blank">java笔记1</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1,面向对象程序设计(Object-oriented Propramming,OOP):java就是一种面向对象程序设计。 2,对象:我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说,对象是某个类型的实例。比如狗是一个类型,哈士奇可以是狗的一个实例,也就是对象。 3,面向对象程序设计方式的特性:     3.1 万物皆为对象。    </div> </li> <li><a href="/article/1002.htm" title="C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点(一)" target="_blank">C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点(一)</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E6%B1%82%E8%81%8C%E9%9D%A2%E8%AF%95%E5%BF%85%E5%A4%87%E8%80%83%E7%82%B9/1.htm">C/C++求职面试必备考点</a> <div>        找工作在即,以后决定每天至少写一个知识点,主要是记录,逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益,后学幸运之至也。如有错误,还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的,咱人笨,以前学的也半吊子。很多时候只能靠运行出来的结果再反过来</div> </li> <li><a href="/article/1129.htm" title="程序员写代码时就不要管需求了吗?" target="_blank">程序员写代码时就不要管需求了吗?</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E4%B8%8D%E8%83%BD%E4%B8%80%E5%91%B3%E8%B7%9F%E9%9C%80%E6%B1%82%E8%B5%B0/1.htm">程序员不能一味跟需求走</a> <div>      编程也有2年了,刚开始不懂的什么都跟需求走,需求是怎样就用代码实现就行,也不管这个需求是否合理,是否为较好的用户体验。当然刚开始编程都会这样,但是如果有了2年以上的工作经验的程序员只知道一味写代码,而不在写的过程中思考一下这个需求是否合理,那么,我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好,但是就不代</div> </li> <li><a href="/article/1256.htm" title="Activity的四种启动模式" target="_blank">Activity的四种启动模式</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈模式启动</a><a class="tag" taget="_blank" href="/search/Activity%E7%9A%84%E6%A0%87%E5%87%86%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">Activity的标准模式启动</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E9%A1%B6%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈顶模式启动</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">单例模式启动</a> <div>android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo</div> </li> <li><a href="/article/1383.htm" title="Spring中@Autowired标签与@Resource标签的区别" target="_blank">Spring中@Autowired标签与@Resource标签的区别</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%40Resource/1.htm">@Resource</a><a class="tag" taget="_blank" href="/search/%40Autowired/1.htm">@Autowired</a><a class="tag" taget="_blank" href="/search/%40Qualifier/1.htm">@Qualifier</a> <div>Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的,需导入    Package:org.springframewo</div> </li> <li><a href="/article/1510.htm" title="Changes Between SOAP 1.1 and SOAP 1.2" target="_blank">Changes Between SOAP 1.1 and SOAP 1.2</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/Changes/1.htm">Changes</a><a class="tag" taget="_blank" href="/search/Enable/1.htm">Enable</a><a class="tag" taget="_blank" href="/search/SOAP+1.1/1.htm">SOAP 1.1</a><a class="tag" taget="_blank" href="/search/SOAP+1.2/1.htm">SOAP 1.2</a> <div>JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL</div> </li> <li><a href="/article/1637.htm" title="【Hadoop二】Hadoop常用命令" target="_blank">【Hadoop二】Hadoop常用命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>以Hadoop运行Hadoop自带的wordcount为例,   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop,需要说明的是,这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级</div> </li> <li><a href="/article/1764.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/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>从学习到现在从事java开发一年多了,个人觉得对java只了解皮毛,很多东西都是用到再去慢慢学习,编程真的是一项艺术,要完成一段好的代码,需要懂得很多。 最近项目经理让我负责一个组件开发,框架都由自己搭建,最让我头疼的是异常处理,我看了一些网上的源码,发现他们对异常的处理不是很重视,研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码,通过他们对异常处理的解决方案,我终</div> </li> <li><a href="/article/1891.htm" title="记录整理-工作问题" target="_blank">记录整理-工作问题</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>1)那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2)今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题,以后要是写更大的文件还是得改内存。想问题要长远啊</div> </li> <li><a href="/article/2018.htm" title="org.apache.tools.zip实现文件的压缩和解压,支持中文" target="_blank">org.apache.tools.zip实现文件的压缩和解压,支持中文</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>刚开始用java.util.Zip,发现不支持中文(网上有修改的方法,但比较麻烦) 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求,实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit</div> </li> <li><a href="/article/2145.htm" title="读书笔记-4" target="_blank">读书笔记-4</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个, 学习资料:http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类: (1)表达式控制标签:out</div> </li> <li><a href="/article/2272.htm" title="[物理与电子]半导体教材的一个小问题" target="_blank">[物理与电子]半导体教材的一个小问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div>       各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个</div> </li> <li><a href="/article/2399.htm" title="Flashback Database --闪回数据库" target="_blank">Flashback Database --闪回数据库</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E9%97%AA%E5%9B%9E%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">闪回数据库</a> <div>Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数。要使用flashback 的特性,必须启用自动撤销管理表空间。 在Oracle 10g中, Flash back家族分为以下成员: Flashback Database, Flashback Drop,Flashback Query(分Flashback Query,Flashbac</div> </li> <li><a href="/article/2526.htm" title="简单排序:插入排序" target="_blank">简单排序:插入排序</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F/1.htm">插入排序</a> <div> public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)</div> </li> <li><a href="/article/2653.htm" title="C语言学习六指针小示例、一维数组名含义,定义一个函数输出数组的内容" target="_blank">C语言学习六指针小示例、一维数组名含义,定义一个函数输出数组的内容</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; // </div> </li> <li><a href="/article/2780.htm" title="centos下php redis扩展的安装配置3种方法" target="_blank">centos下php redis扩展的安装配置3种方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包,cd /扩展包 (进入扩展包然后 运行phpize 一下是我环境中phpize的目录,/usr/local/php/bin/phpize (一定要</div> </li> <li><a href="/article/2907.htm" title="线程池(Executors)" target="_blank">线程池(Executors)</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a> <div>在java类库中,任务执行的主要抽象不是Thread,而是Executor,将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub</div> </li> <li><a href="/article/3034.htm" title="openstack 快速安装笔记" target="_blank">openstack 快速安装笔记</a> <span class="text-muted">haoningabc</span> <a class="tag" taget="_blank" href="/search/openstack/1.htm">openstack</a> <div>前提是要配置好yum源 版本icehouse,操作系统redhat6.5 最简化安装,不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =</div> </li> <li><a href="/article/3161.htm" title="从c面向对象的实现理解c++的对象(二)" target="_blank">从c面向对象的实现理解c++的对象(二)</a> <span class="text-muted">jimmee</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E5%87%BD%E6%95%B0/1.htm">虚函数</a> <div>1. 类就可以看作一个struct,类的方法,可以理解为通过函数指针的方式实现的,类对象分配内存时,只分配成员变量的,函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数,就是进行内存分配(malloc),调用构造函数 3. c++中类的析构函数,就时回收内存(free) 4. c++是基于栈和全局数据分配内存的,如果是一个方法内创建的对象,就直接在栈上分配内存了。 专门在</div> </li> <li><a href="/article/3288.htm" title="如何让那个一个div可以拖动" target="_blank">如何让那个一个div可以拖动</a> <span class="text-muted">lingfeng520240</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml</div> </li> <li><a href="/article/3415.htm" title="第10章 高级事件(中)" target="_blank">第10章 高级事件(中)</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3542.htm" title="计算两个经纬度之间的距离" target="_blank">计算两个经纬度之间的距离</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a><a class="tag" taget="_blank" href="/search/%E7%BA%AC%E5%BA%A6/1.htm">纬度</a><a class="tag" taget="_blank" href="/search/LBS/1.htm">LBS</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E5%BA%A6/1.htm">经度</a><a class="tag" taget="_blank" href="/search/%E8%B7%9D%E7%A6%BB/1.htm">距离</a> <div>要解决这个问题的时候,到网上查了很多方案,最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB * </div> </li> <li><a href="/article/3669.htm" title="最具争议的10个Java话题" target="_blank">最具争议的10个Java话题</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1、Java8已经到来。什么!? Java8 支持lambda。哇哦,RIP Scala!   随着Java8 的发布,出现很多关于新发布的Java8是否有潜力干掉Scala的争论,最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围,但Java并非是函数式编程王位的真正觊觎者。    2、Java 9 即将到来    Oracle早在8月份就发布</div> </li> <li><a href="/article/3796.htm" title="zoj 3826 Hierarchical Notation(模拟)" target="_blank">zoj 3826 Hierarchical Notation(模拟)</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/rar/1.htm">rar</a> <div> 题目链接:zoj 3826 Hierarchical Notation 题目大意:给定一些结构体,结构体有value值和key值,Q次询问,输出每个key值对应的value值。 解题思路:思路很简单,写个类词法的递归函数,每次将key值映射成一个hash值,用map映射每个key的value起始终止位置,预处理完了查询就很简单了。 这题是最后10分钟出的,因为没有考虑value为{}的情</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>