css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)
点击上方“ 前端印象 ”，选择“ 设为星标 ” 第一时间关注技术干货！
效果
基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。
首先画一个转盘
html>
幸运大转盘title><br> <style>/* 重置默认样式 */<br> * {
margin: 0;padding: 0;border: none;outline: none;<br> }.wrapper {
position: relative;height: 200px;width: 200px;padding: 20px;margin: 20px;background-color: #c0381f;box-shadow: #000000 0px 0px 10px;border-radius: 50%;<br> }.panel {
position: relative;height: 200px;width: 200px;background-color: #b7b7b7;border-radius: 100px;<br> }.pointer {
position: absolute;left: 79px;top: 79px;z-index: 10;height: 30px;width: 30px;padding: 6px;color: #fff899;line-height: 15px;font-size: 12px;text-align: center;background-color: #dc5b5b;border-radius: 50%;border: 1px solid #c0381f;<br> }style><br>head><br><body><br> <div class="wrapper"><br> <div class="panel"><br> <div class="pointer">开始抽奖div><br> div><br> div><br>body><br>html><br></code></pre>
<p>效果如下，配色什么的不要在意，可能比较丑。。。</p>
<a href="http://img.e-com-net.com/image/info8/5ac6a12637a44cf08871b87f98982881.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ac6a12637a44cf08871b87f98982881.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第2张图片" width="268" height="268" style="border:1px solid black;"></a>
<p>然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。</p>
<a href="http://img.e-com-net.com/image/info8/f4924e5e107e464fb33b1b9f3eea09c5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f4924e5e107e464fb33b1b9f3eea09c5.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第3张图片" width="650" height="300" style="border:1px solid black;"></a>
<p>如图，矩形是由四个三角形边框组成的，只要设置其它边颜色为透明，就可以获得单独的三角形。</p>
<p>这里通过伪元素after实现三角形，并通过绝对定位将三角形定位到中间小圆的顶端。</p>
<pre class="has"><code>.pointer::after {
<br> content: '';<br> position: absolute;<br> left: 14px;<br> top: -24px;<br> border-width: 12px 6px;<br> border-style: solid;<br> border-color: transparent;<br> border-bottom-color: #c0381f;<br>}<br></code></pre>
<p>现在才像一个指针了。</p>
<a href="http://img.e-com-net.com/image/info8/253f8a99e6874b2996545d0eae7fa7e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/253f8a99e6874b2996545d0eae7fa7e6.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第4张图片" width="263" height="264" style="border:1px solid black;"></a>
<p>哦 接下来是实现转盘背景，不同的扇区对应不同的奖品，这样就有一个需求：实现任意角度扇形。</p>
<p>可能会想当然的认为和三角形一样，不过是加一个border-radius而已，高度是圆半径，宽度是tan(θ/2)，但是实现出来的效果和想象并不一样……(可能需要做一些其他操作以达到效果，但是我没想到。</p>
<p>最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了，qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =</p>
<p>ow to draw a circle sector in CSS?</p>
<p>Segments in a circle using CSS3</p>
<p>3种纯CSS实现中间镂空的12色彩虹渐变圆环方法</p>
<p>实现就是通过两个正方形取相交区域。</p>
<a href="http://img.e-com-net.com/image/info8/a0c2823c324444e6a13c1aa37720a017.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a0c2823c324444e6a13c1aa37720a017.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第5张图片" width="650" height="280" style="border:1px solid black;"></a>
<p>我觉图画的还是挺好的:D</p>
<p>没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =</p>
<pre class="has"><code>html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Documenttitle><br> <style>.sector {
position: absolute;width: 100px;height: 200px;margin: 100px;border-radius: 0px 100px 100px 0;overflow: hidden;transform: rotate(-18deg);<br> }.sector-inner {
text-align: center;display: block;width: 40px;padding: 5px 3px 0 57px;height: 195px;background: #ffeab1;transform: translateX(-100px) rotate(36deg);transform-origin: right center;border-radius: 100px 0 0 100px;<br> }.sector-inner span {
display: block;transform-origin: center;transform: rotate(-19deg);color: #d46854;<br> }style><br>head><br><body><br> <div class="sector"><br> <div class="sector-inner"><br> <span>谢谢参与span><br> div><br> div><br>body><br>html><br></code></pre>
<p>效果如下，一个带有文字的小扇形~~</p>
<a href="http://img.e-com-net.com/image/info8/86d46300f58f490183518eac3719929f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/86d46300f58f490183518eac3719929f.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第6张图片" width="164" height="250" style="border:1px solid black;"></a>
<p>OK，现在写一堆扇形放到一开始的转盘上。</p>
<p>现在的代码是酱紫滴~~太长了折起来。</p>
<a href="http://img.e-com-net.com/image/info8/494731986af8492bb812f6bd124e4c9b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/494731986af8492bb812f6bd124e4c9b.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第7张图片" width="540" height="546" style="border:1px solid black;"></a>
<p>嘻嘻，现在是抽奖转盘的样子了吧~~~</p>
<p>最后再加点浮夸的灯。</p>
<a href="http://img.e-com-net.com/image/info8/84e6b0309435426aaee639cd751954de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/84e6b0309435426aaee639cd751954de.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第8张图片" width="544" height="548" style="border:1px solid black;"></a>
<p>现在转盘CSS部分基本完成。简单写一下JS部分。点击中间的指针时，指针会转，可以拉一条贝塞尔曲线，控制动画的速度。</p>
<p>贝塞尔曲线可以简单的看作是时间-距离曲线，斜率就是速度。因为转盘的速度肯定是先快后慢，随便拉一条。</p>
<a href="http://img.e-com-net.com/image/info8/b9519cda80604a0e953855e95efaa80a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9519cda80604a0e953855e95efaa80a.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第9张图片" width="650" height="648" style="border:1px solid black;"></a>
<p>CSS中添加属性</p>
<pre class="has"><code>.pointer {
<br> // ...<br> transition: transform 3s cubic-bezier(.2,.93,.43,1);<br>}<br></code></pre>
<p>点击开始抽奖的时候，为中间的指针加一个旋转的角度。这里有一个问题就是不同的扇区抽到的概率是相同的，改成不同应该…也蛮简单的，不过主要是想练下CSS，JS就随便写了。</p>
<p>JS部分代码。。</p>
<pre class="has"><code>let getEle = document.getElementsByClassName.bind(document);<br>let pointer = getEle('pointer')[0];<br>let result = getEle('result')[0];<br><br>let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了<br>let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分', <br>'谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];<br><br>// 根据随机角度获取奖励<br>let getReward = (function() {
<br> currentDeg = 0;<br> return function() {
<br> // 转三圈到四圈<br> let rotateDeg = Math.random() * 360 + 1080;<br> currentDeg += rotateDeg;<br> let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]<br> return {
<br> deg: currentDeg,<br> text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText<br> }<br> }<br>})();<br><br>pointer.addEventListener('click', () => {
<br> if (onRotation) return;<br> console.log('开始抽奖');<br> onRotation = true;<br> let nextStatus = getReward();<br> console.log(nextStatus)<br> result.innerText = nextStatus.text;<br> result.style.display = 'none';<br> pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;<br>})<br>pointer.addEventListener('transitionend', () => {
<br> console.log('抽奖结束');<br> onRotation = false;<br> result.style.display = 'block';<br>})<br></code></pre>
<p>现在一个抽奖转盘基本完成了，最后一个需求，如果旁边的等能够亮起来就好了。</p>
<p>至于灯怎么亮，就需要用到CSS3的动画了，我还不太熟悉，先去学习一下>_<</p>
<p>我学完回来了，参考教程<code>http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html</code>，内容不是很多。</p>
<ul>
<li><p>animation-name 指定动画名称，</p></li>
<li><p>animation-duration 指定动画持续时间，</p></li>
</ul>
<p>-animation-timing-function 指定动画函数，和transition的函数是一样的，</p>
<ul>
<li><p>animation-delay 指定动画延迟多久后执行，</p></li>
<li><p>animation-iteration-count 指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。</p></li>
<li><p>animation-direction 指定动画多次播放时，一次结束，下一次怎么接上一次，如图。</p></li>
</ul>
<a href="http://img.e-com-net.com/image/info8/976e813d10124b7db9189238cb7eb7be.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/976e813d10124b7db9189238cb7eb7be.png" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第10张图片" width="700" height="194" style="border:1px solid black;"></a>
<p>animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。</p>
<p>animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。</p>
<p>使用关键字 keyframes 来定义一个动画。通过百分比指定其中任意几个状态。</p>
<p>尝试着写一下=。=</p>
<pre class="has"><code>html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Documenttitle><br> <style>div {
height: 30px;width: 30px;animation: 1s twinkling 3, 100ms 3s twinkling 3;<br> }@keyframes twinkling {
<br> 50% { background: red; }<br> }style><br>head><br><body><br> <div>div><br>body><br>html><br></code></pre>
<p>这是一个方块，先慢速闪三下，再快速闪三下，最后消失。</p>
<p>animation: 1s twinkling 3;</p>
<p>就相当于</p>
<pre class="has"><code>animation-name: twinkling;<br>animation-duration: 1s;<br>animation-timing-function: ease;<br>animation-delay: 0s;<br>animation-iteration-count: 3;<br>animation-direction: normal;<br>animation-fill-mode: none;<br>animation-play-state: running;<br></code></pre>
<p>最后把动画加到转盘的灯上。完成代码(好像颜色变了，咳，那是因为我animation学了太久都掉色了)：</p>
<pre class="has"><code>html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>幸运大转盘title><br> <style><br> * { /* 重置默认样式 */margin: 0;padding: 0;border: none;outline: none;user-select: none;<br> }.wrapper {
position: relative;height: 200px;width: 200px;padding: 20px;margin: 20px;background-color: #ff5555;box-shadow: #000000 0px 0px 10px;border-radius: 50%;<br> }.light {
position: absolute;height: 10px;width: 10px;border-radius: 50%;top: 5px;left: 115px;transform-origin: 5px 115px;<br> }.light-twinkling {
animation: 1s twinkling 3, 100ms 3s twinkling 3;<br> }.light:nth-child(2n) {
background-color: #fafce7;<br> }.light:nth-child(2n+1) {
background-color: #ffe58b;<br> }.light:nth-child(2) {
transform: rotate(36deg);<br> }.light:nth-child(3) {
transform: rotate(72deg);<br> }.light:nth-child(4) {
transform: rotate(108deg);<br> }.light:nth-child(5) {
transform: rotate(144deg);<br> }.light:nth-child(6) {
transform: rotate(180deg);<br> }.light:nth-child(7) {
transform: rotate(216deg);<br> }.light:nth-child(8) {
transform: rotate(252deg);<br> }.light:nth-child(9) {
transform: rotate(288deg);<br> }.light:nth-child(10) {
transform: rotate(324deg);<br> }.panel {
position: relative;height: 200px;width: 200px;background-color: #b7b7b7;border-radius: 100px;<br> }.sector {
position: absolute;left: 100px;top: 0px;width: 100px;height: 200px;font-size: 14px;border-radius: 0px 100px 100px 0;overflow: hidden;transform-origin: left center;<br> }.sector:nth-child(1) {
transform: rotate(-18deg);<br> }.sector:nth-child(2) {
transform: rotate(18deg);<br> }.sector:nth-child(3) {
transform: rotate(54deg);<br> }.sector:nth-child(4) {
transform: rotate(90deg);<br> }.sector:nth-child(5) {
transform: rotate(126deg);<br> }.sector:nth-child(6) {
transform: rotate(162deg);<br> }.sector:nth-child(7) {
transform: rotate(198deg);<br> }.sector:nth-child(8) {
transform: rotate(234deg);<br> }.sector:nth-child(9) {
transform: rotate(270deg);<br> }.sector:nth-child(10) {
transform: rotate(306deg);<br> }.sector:nth-child(2n+1) .sector-inner {
background: #fef6e0;<br> }.sector:nth-child(2n) .sector-inner {
background: #ffffff;<br> }.sector-inner {
text-align: center;display: block;width: 40px;padding: 5px 3px 0 57px;height: 195px;transform: translateX(-100px) rotate(36deg);transform-origin: right center;border-radius: 100px 0 0 100px;<br> }.sector-inner span {
display: block;transform-origin: center;transform: rotate(-19deg);color: #d46854;<br> }.pointer {
position: absolute;left: 79px;top: 79px;z-index: 10;height: 30px;width: 30px;padding: 6px;color: #fff899;line-height: 15px;font-size: 12px;text-align: center;background-color: #ff5350;border-radius: 50%;border: 1px solid #ff5350;transition: transform 3s cubic-bezier(.2,.93,.43,1);<br> }.pointer::after {
content: '';position: absolute;left: 14px;top: -24px;border-width: 12px 6px;border-style: solid;border-color: transparent;border-bottom-color: #ff5350;transform-origin: center;<br> }.result {
margin: 20px 60px;<br> }@keyframes twinkling {
<br> 50% { background: transparent; }<br> }style><br>head><br><body><br> <div class="wrapper"><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="light">div><br> <div class="panel"><br> <div class="sector"><br> <div class="sector-inner"><br> <span>谢谢参与span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span> 5 0 积分span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>谢谢参与span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>100元话费span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span> 5 0 积分span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>谢谢参与span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>100元话费span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>谢谢参与span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span> 5 0 积分span><br> div><br> div><br> <div class="sector"><br> <div class="sector-inner"><br> <span>10元话费span><br> div><br> div><br> <div class="pointer">开始抽奖div><br> div><br> div><br> <div class="result">div><br><br> <script>let getEle = document.getElementsByClassName.bind(document);let pointer = getEle('pointer')[0];let result = getEle('result')[0];let lights = Array.prototype.slice.call(getEle('light'));let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分', '谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];// 根据随机角度获取奖励let getReward = (function() {
<br> currentDeg = 0;return function() {
// 转三圈到四圈let rotateDeg = Math.random() * 360 + 1080;<br> currentDeg += rotateDeg;let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]return {
deg: currentDeg,text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText<br> }<br> }<br> })();<br> pointer.addEventListener('click', () => {
if (onRotation) return;console.log('开始抽奖');<br> onRotation = true;<br> lights.forEach(light => { light.className += ' light-twinkling'; });let nextStatus = getReward();console.log(nextStatus)<br> result.innerText = nextStatus.text;<br> result.style.display = 'none';<br> pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;<br> })<br> pointer.addEventListener('transitionend', () => {
console.log('抽奖结束');<br> setTimeout(() => { // 等闪烁三下结束<br> onRotation = false;<br> lights.forEach(light => { light.className = 'light'; });<br> result.style.display = 'block';<br> }, 300);<br> })script><br>body><br>html><br></code></pre>
<p>作者：学习前端ing的前端小白</p>
<p>原文地址：https://www.cnblogs.com/wenruo/p/9732704.html</p>
<img src="http://img.e-com-net.com/image/info8/46d84f037f7d49a8919a5e963b8daff0.png" alt="d0548179597a536fcbe8d4c321ff80d0.png" width="30" height="30">精彩推荐
<a href="http://img.e-com-net.com/image/info8/c45f22f20bf44ba88000d4aa42d4204b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c45f22f20bf44ba88000d4aa42d4204b.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第11张图片" width="540" height="230" style="border:1px solid black;"></a>
<p>快速使用Vue3最新的15个常用API</p>
<a href="http://img.e-com-net.com/image/info8/3f3ccf7b7d8747b09f0826a8c8cb7e6e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f3ccf7b7d8747b09f0826a8c8cb7e6e.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第12张图片" width="360" height="153" style="border:1px solid black;"></a>
<p>关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充</p>
<a href="http://img.e-com-net.com/image/info8/8fc668d3f2d54a6fbb304687b12e069f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8fc668d3f2d54a6fbb304687b12e069f.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第13张图片" width="650" height="278" style="border:1px solid black;"></a>
<p>自己设计的Vue3的实用项目(内含对项目亮点的实现思路与介绍)</p>
<a href="http://img.e-com-net.com/image/info8/fd249c21b27e4950afce5a00b5a45c05.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd249c21b27e4950afce5a00b5a45c05.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第14张图片" width="650" height="278" style="border:1px solid black;"></a>
<p>多图生动详解浏览器与Node环境下的Event Loop</p>
<a href="http://img.e-com-net.com/image/info8/3d0dd863361f47cc9d7a50a003716dfb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d0dd863361f47cc9d7a50a003716dfb.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第15张图片" width="650" height="278" style="border:1px solid black;"></a>
<p>学习过CSS，那你知道BFC是什么吗？</p>
<a href="http://img.e-com-net.com/image/info8/3e4e123b80364cda8c409a81b647252c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3e4e123b80364cda8c409a81b647252c.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第16张图片" width="104" height="126" style="border:1px solid black;"></a>
<p>END</p>
<h2><span style="font-weight:bold;">❤</span><span style="font-weight:bold;">支持三连</span></h2>
<p>1.看到这里了就点个在看支持下吧，你的<strong>「</strong>在看<strong>」</strong>是我创作的动力。</p>
<p>2.关注公众号<code>前端印象</code>，<strong>「一起交流进步」</strong>！</p>
<p>3.关注公众号回复【加群】，拉你进<strong>技术交流群</strong>一起玩转前端。</p>
<p><a href="http://img.e-com-net.com/image/info8/baae98b10e1342f78492aa266e6b74d1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/baae98b10e1342f78492aa266e6b74d1.jpg" alt="css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)_第17张图片" width="600" height="366" style="border:1px solid black;"></a></p>
<p>? <strong>「赞」</strong>、<strong>「在看」</strong>、<strong>「转发」</strong><strong>支持一下</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1359335063052902400"></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">你可能感兴趣的:(css画横线箭头)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1883122236152410112.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ddos/1.htm">ddos</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883111896261914624.htm"
title="vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放" target="_blank">vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放</a>
<span class="text-muted">warmbook</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>原理本组件基于CSS的transform实现。移动端监听touch事件（单指移动，双指移动+缩放），PC端监听mouse事件（移动）和滚动事件wheel（缩放），更新transform的translateX/translateY/scale值，从而实现缩放、移动。由于transform不会产生重排，因此不节流也可以有很好的性能，用户体验就像德芙，纵享丝滑！鼠标事件比较好理解，记录鼠标按下时的坐标，</div>
</li>
<li><a href="/article/1883085285055590400.htm"
title="基于 Node.js 的天气查询系统实现(附源码）" target="_blank">基于 Node.js 的天气查询系统实现(附源码）</a>
<span class="text-muted">Kasper0121</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1</div>
</li>
<li><a href="/article/1883067508987064320.htm"
title="关于CSS中毛玻璃和滤镜使用总结" target="_blank">关于CSS中毛玻璃和滤镜使用总结</a>
<span class="text-muted">计算机软件程序设计</span>
<a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E7%A7%91%E6%99%AE/1.htm">知识科普</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>【1】毛玻璃毛玻璃效果（也称为磨砂玻璃效果）可以通过CSS的backdrop-filter属性来实现。这个属性允许你在背景上应用各种滤镜效果，从而创建出类似磨砂玻璃的效果。这种效果通常用于创建半透明背景下的模糊效果，使得背景图像或颜色变得柔和，同时保持前景内容的清晰可见。示例代码HTML结构CSS毛玻璃效果毛玻璃效果这是一个使用CSS创建的毛玻璃效果。CSS样式body,html{height:1</div>
</li>
<li><a href="/article/1883050103674040320.htm"
title="HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？" target="_blank">HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？</a>
<span class="text-muted">前端Hardy</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07</div>
</li>
<li><a href="/article/1883040116977496064.htm"
title="React Native 0.77 发布：更强的样式支持与性能优化" target="_blank">React Native 0.77 发布：更强的样式支持与性能优化</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
<div>CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读ReactNative0.77正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。主要更新内容✨全新CSS特性支持：新增对display:contents、boxSizing、</div>
</li>
<li><a href="/article/1883039009773514752.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883039010843062272.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883038630428078080.htm"
title="适合画地图的js库对比整理，Leaflet，Google Maps，Mapbox GL JS，OpenLayers，Cesium，D3.js等对应官方网站、Github项目地址、特点、使用场景及应用" target="_blank">适合画地图的js库对比整理，Leaflet，Google Maps，Mapbox GL JS，OpenLayers，Cesium，D3.js等对应官方网站、Github项目地址、特点、使用场景及应用</a>
<span class="text-muted">飞火流星02027</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%8F%B0/1.htm">前台</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9B%BE/1.htm">地图</a><a class="tag" taget="_blank" href="/search/GIS/1.htm">GIS</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9B%BE%E5%BA%93/1.htm">地图库</a><a class="tag" taget="_blank" href="/search/Leaflet/1.htm">Leaflet</a><a class="tag" taget="_blank" href="/search/D3.js/1.htm">D3.js</a><a class="tag" taget="_blank" href="/search/Mapbox/1.htm">Mapbox</a><a class="tag" taget="_blank" href="/search/GL/1.htm">GL</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/Maps/1.htm">Maps</a><a class="tag" taget="_blank" href="/search/OpenLayers/1.htm">OpenLayers</a>
<div>摘要适合画地图的js库对比整理，Leaflet，GoogleMapsJavaScriptAPI，MapboxGLJS，OpenLayers，Cesium，D3.js及对应官方网站、Github项目地址、特点、使用场景地图库对比整理明细表说明维度库名Github项目特点使用场景LeafletLeaflet/Leaflet轻量级、易于使用、功能丰富。支持各种地图服务（如OpenStreetMap、Ma</div>
</li>
<li><a href="/article/1883031443190378496.htm"
title="vue项目运行报：SassError: expected selector..." target="_blank">vue项目运行报：SassError: expected selector...</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>SassError:expectedselector错误通常由于Sass或SCSS文件中存在语法错误或选择器缺失，导致Sass编译器无法解析。Sass语法语法中误用深度选择器语法导致以上问题。/deep/和::v-deep都是用于Vue单文件组件（.vue文件）中的样式穿透选择器;/deep/在Sass中并不被支持，如果是在Vue单文件组件中，并且需要穿透样式，可以使用::v-deep代替/dee</div>
</li>
<li><a href="/article/1882948859404021760.htm"
title="YOLO 安装 并且命令行指定配置文件" target="_blank">YOLO 安装 并且命令行指定配置文件</a>
<span class="text-muted">ELI_He999</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a>
<div>pipinstallultralyticssettings.yaml保存到当前目录，data参数yolo命令行指定配置文件{"settings_version":"0.0.6","datasets_dir":"xxxx\\datasets","weights_dir":"xxxx\\weights","runs_dir":"xxxx\\runs","uuid":"xxxx","sync":true</div>
</li>
<li><a href="/article/1882946210990452736.htm"
title="CSS 提示工具：优化网页设计，提升用户体验" target="_blank">CSS 提示工具：优化网页设计，提升用户体验</a>
<span class="text-muted">froginwe11</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>CSS提示工具：优化网页设计，提升用户体验在网页设计中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够赋予网页独特的视觉风格，还能够提升用户体验。为了帮助设计师和开发者更高效地使用CSS，各种提示工具应运而生。本文将为您详细介绍CSS提示工具的功能、特点以及如何选择合适的工具，以优化网页设计和提升用户体验。一、CSS提示工具概述CSS提示工具是一种辅助设计师和开发者编写和调试CSS的工具。这</div>
</li>
<li><a href="/article/1882931082119147520.htm"
title="南方cass简码识别大全_CASS分类简码" target="_blank">南方cass简码识别大全_CASS分类简码</a>
<span class="text-muted">Demeyi-邓子</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%97%E6%96%B9cass%E7%AE%80%E7%A0%81%E8%AF%86%E5%88%AB%E5%A4%A7%E5%85%A8/1.htm">南方cass简码识别大全</a>
<div>简码GTC码简码GTC码简码GTC码简码GTC码特殊码用法居民地类管线设施水系设施铁路设施W围墙厚度省略小数点及小数点前面的"0"：砼F141111高压杆A171101水涯线S181101一般铁路H1161101"W18"表示围墙厚度为0.18米；"W-2"为-0.2米厚；混F2141161通讯杆T172001单线沟I183101建筑中铁路H2161401"W"表示画厚度为0.15米的围墙。"w-</div>
</li>
<li><a href="/article/1882928808311451648.htm"
title="(旋转数组的)二分查找算法" target="_blank">(旋转数组的)二分查找算法</a>
<span class="text-muted">「已注销」</span>
<a class="tag" taget="_blank" href="/search/%E6%B6%A8%E7%9F%A5%E8%AF%86/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><a class="tag" taget="_blank" href="/search/%E6%97%8B%E8%BD%AC%E6%95%B0%E7%BB%84/1.htm">旋转数组</a>
<div>二分查找算法(BinarySearch)是一种高效的、应用广泛的查找算法。它是一种采用分治策略的算法。基本二分查找算法二分查找是针对顺序存储的有序序列的；二分查找的基本思想是：将目标元素与序列中位数比较，如果大于中位数则在右半段序列查找，反之在左半段查找。为了能够方便表示（以升序序列为例），设置两个索引值start,end表示查找范围即下图中的两个灰色箭头，设置一个标记mid表示当前范围的中间位置</div>
</li>
<li><a href="/article/1882928304432934912.htm"
title="基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署" target="_blank">基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署</a>
<span class="text-muted">小朱科技</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div>
</li>
<li><a href="/article/1882921874455851008.htm"
title="java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署</a>
<span class="text-muted">雪夜科技</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi</div>
</li>
<li><a href="/article/1882918975491338240.htm"
title="python详细安装教程3.9.0,python详细安装教程3.8.5" target="_blank">python详细安装教程3.9.0,python详细安装教程3.8.5</a>
<span class="text-muted">M3666789</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>本篇文章给大家谈谈python详细安装教程3.9.0，以及python详细安装教程3.8.5，希望对各位有所帮助，不要忘了收藏本站喔。有些Python软件包是系统自带的，如sys，这些包在安装Python时已自动安装。但有些包是需要自行下载安装的，如PIL用python画小猫简单。这些第三方的软件有的以源代码的形式提供，有的以安装包的形式提供。安装第三方Python包的方法有很多种。本节将介绍一些</div>
</li>
<li><a href="/article/1882910478645129216.htm"
title="vite webpack原理和区别" target="_blank">vite webpack原理和区别</a>
<span class="text-muted"></span>
<div>Vite和Webpack的工作原理有显著的不同，以下是对它们各自原理的简要说明：Vite原理原生ES模块：Vite利用浏览器对原生ES模块（ESM）的支持，实现按需加载和编译。开发服务器启动时，Vite只需解析入口文件，并将导入的模块路径记录下来。按需编译：当浏览器请求某个模块时，Vite会实时编译该模块及其依赖。使用esbuild或Vite自带的编译器快速处理JavaScript和CSS。热模块</div>
</li>
<li><a href="/article/1882836897324134400.htm"
title="web速览" target="_blank">web速览</a>
<span class="text-muted">qzhqbb</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的</div>
</li>
<li><a href="/article/1882834122422939648.htm"
title="HTML基本结构" target="_blank">HTML基本结构</a>
<span class="text-muted">千鸟影沫</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、网页三大组成部分结构：html，是超文本标记语言——用来搭建网页的结构样式：css——网页的样式行为：js，是一种语言，称为脚本语言——交互行为用户对网页的操作数据交互二、HTML语法规范1、语法（英文状态下输入）html标签：是由尖括号包围的关键词，例如2、以元素样子对标签进行分类①双标签：如：开始标签，结束标签②单标签：比较少，如，，，等。3、标签关系①嵌套（包含关系）：类似于父子关系如：</div>
</li>
<li><a href="/article/1882829830894972928.htm"
title="探秘Xss：原理、类型与防范全解析" target="_blank">探秘Xss：原理、类型与防范全解析</a>
<span class="text-muted">咕德猫宁丶</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>一、Xss究竟是什么？（一）Xss的定义简述Xss全称是跨站脚本攻击（CrossSiteScripting），为了不和层叠样式表（CascadingStyleSheets，CSS）的缩写混淆，故将其缩写为Xss。它是一种常见的网络安全漏洞，指的是攻击者利用网站对用户输入内容校验不严格等漏洞，将恶意脚本（通常是JavaScript，也可以是Java、VBScript、ActiveX、Flash等）注</div>
</li>
<li><a href="/article/1882777133370109952.htm"
title="用Python写前端" target="_blank">用Python写前端</a>
<span class="text-muted">eternity_ld</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟</div>
</li>
<li><a href="/article/1882772468708470784.htm"
title="【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法" target="_blank">【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
<div>【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/</div>
</li>
<li><a href="/article/1882731097855422464.htm"
title="【前端高频面试题--ES6篇】" target="_blank">【前端高频面试题--ES6篇】</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/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言前端高频面试题--ES6篇往期精彩内容ES6ES6概念let和constletConst解构赋值模板字符串对象简化箭头函数形参赋初始值Rest参数扩展运算符扩展运算符的应用Symbol的基本使用对象添加Symbol类型的属性Symbol内置值迭代器生成器PromiseSetMapclass类数值扩展对象扩展模块化往期精彩内容【</div>
</li>
<li><a href="/article/1882680780166066176.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1882639181784608768.htm"
title="打造高效React应用：CSS方案深度解析" target="_blank">打造高效React应用：CSS方案深度解析</a>
<span class="text-muted"></span>
<div>大家好，我是长林啊！一个爱好JavaScript、Go、Rust的全栈开发者；致力于终生学习和技术分享。在React以其声明式编程范式和组件化架构，成为了构建用户界面的首选技术之一。然而，随着项目规模的扩大和设计需求的多样化，如何高效地管理CSS样式成为了每个React开发者都需要面对的挑战。本文将从一下三个方面进行介绍，探讨如何在React中应用和管理样式，包括内联样式、CSS类、CSSModu</div>
</li>
<li><a href="/article/1882617864658153472.htm"
title="如何使用媒体查询实现响应式网页设计？" target="_blank">如何使用媒体查询实现响应式网页设计？</a>
<span class="text-muted">破碎的天堂鸟</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/1.htm">学习教程</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>使用媒体查询（MediaQueries）实现响应式网页设计是现代网页开发中的一项核心技术，它允许开发者根据设备的屏幕尺寸、分辨率、方向等特性动态调整网页布局和样式，从而提供更好的用户体验。以下是详细说明如何使用媒体查询实现响应式网页设计的方法：1.媒体查询的基本概念媒体查询是CSS3引入的一项功能，通过@media规则，开发者可以根据设备的特性（如宽度、高度、方向等）应用不同的样式规则。媒体查询可</div>
</li>
<li><a href="/article/1882617865429905408.htm"
title="如何通过减少HTTP请求来提升页面加载速度？" target="_blank">如何通过减少HTTP请求来提升页面加载速度？</a>
<span class="text-muted">破碎的天堂鸟</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/1.htm">学习教程</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>通过减少HTTP请求可以显著提升网页加载速度，这是因为HTTP请求的次数直接影响了页面加载时间。以下是一些具体的方法和策略：1.合并文件将多个CSS文件合并为一个CSS文件，将多个JavaScript文件合并为一个JavaScript文件。这可以减少浏览器发起的HTTP请求次数，从而加快页面加载速度。示例：将所有样式表和脚本文件打包成一个文件，以减少请求数量。2.使用CSSSprites（雪碧图）</div>
</li>
<li><a href="/article/1882616980394012672.htm"
title="【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js" target="_blank">【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js</a>
<span class="text-muted">RS迷途小书童</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8E%A2%E7%B4%A2%E4%B9%8B%E6%97%85/1.htm">前端开发探索之旅</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和</div>
</li>
<li><a href="/article/1882607395406934016.htm"
title="前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。" target="_blank">前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。</a>
<span class="text-muted">21级应用技术UI3班何珍锋</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>一、Web1.0时代1990年代末到2000年代初，Web1.0时代是Web发展的初期阶段，这个阶段的Web界面设计以简单的文本和图像为主，用户的互动性和用户体验都很低。在这个时代，浏览器的前端技术主要是基于HTML和CSS的，HTML指的是超文本标记语言，而CSS则指的是层叠样式表。由于这些技术的简单性，前端开发者往往需要手动编写HTML和CSS代码，并进行基本的样式设计。二、Web2.0时代随</div>
</li>
<li><a href="/article/20.htm"
title="矩阵求逆（JAVA）初等行变换" target="_blank">矩阵求逆（JAVA）初等行变换</a>
<span class="text-muted">qiuwanchi</span>
<a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5%E6%B1%82%E9%80%86%EF%BC%88JAVA%EF%BC%89/1.htm">矩阵求逆（JAVA）</a>
<div>package gaodai.matrix;
import gaodai.determinant.DeterminantCalculation;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
/**
* 矩阵求逆(初等行变换)
* @author 邱万迟
*</div>
</li>
<li><a href="/article/147.htm"
title="JDK timer" target="_blank">JDK timer</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/schedule/1.htm">schedule</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a>
<div>1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务
2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务
3.java.util.Timer.schedule(TimerTask task, long delay,longperiod</div>
</li>
<li><a href="/article/274.htm"
title="JVM调优总结 -Xms -Xmx -Xmn -Xss" target="_blank">JVM调优总结 -Xms -Xmx -Xmn -Xss</a>
<span class="text-muted">coder_xpf</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a>
<div>堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。
典型设置：
java -Xmx</div>
</li>
<li><a href="/article/401.htm"
title="JDBC连接数据库" target="_blank">JDBC连接数据库</a>
<span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
<div>package Util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class JDBCUtil {
//完</div>
</li>
<li><a href="/article/528.htm"
title="Unsupported major.minor version 51.0（jdk版本错误）" target="_blank">Unsupported major.minor version 51.0（jdk版本错误）</a>
<span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType)
at org.apache.catalina.loader.WebappClassL</div>
</li>
<li><a href="/article/655.htm"
title="用多个线程处理1个List集合" target="_blank">用多个线程处理1个List集合</a>
<span class="text-muted">362217990</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88/1.htm">集合</a>
<div> 昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CountDownLatch;
public c</div>
</li>
<li><a href="/article/782.htm"
title="JSP简单访问数据库" target="_blank">JSP简单访问数据库</a>
<span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
<div>学习使用javaBean，代码很烂，仅为留个脚印
public class DBHelper {
private String driverName;
private String url;
private String user;
private String password;
private Connection connection;
privat</div>
</li>
<li><a href="/article/909.htm"
title="Flex4中使用组件添加柱状图、饼状图等图表" target="_blank">Flex4中使用组件添加柱状图、饼状图等图表</a>
<span class="text-muted">AdyZhang</span>
<a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a>
<div>1.添加一个最简单的柱状图
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<?xml version=
"1.0"&n</div>
</li>
<li><a href="/article/1036.htm"
title="Android 5.0 - ProgressBar 进度条无法展示到按钮的前面" target="_blank">Android 5.0 - ProgressBar 进度条无法展示到按钮的前面</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：
[html]
view plain
copy
<RelativeLa</div>
</li>
<li><a href="/article/1163.htm"
title="查询汇总的sql" target="_blank">查询汇总的sql</a>
<span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
<div>select list.listname, list.createtime,listcount from dream_list as list , (select listid,count(listid) as listcount from dream_list_user group by listid order by count(</div>
</li>
<li><a href="/article/1290.htm"
title="Linux du命令和df命令区别" target="_blank">Linux du命令和df命令区别</a>
<span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div> 1，两者区别
du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。
</div>
</li>
<li><a href="/article/1417.htm"
title="AngularJS中的$apply，用还是不用？" target="_blank">AngularJS中的$apply，用还是不用？</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%24apply/1.htm">$apply</a>
<div> 在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。
但是首先，让我们把$apply转换成一种简化的形式。
scope.$apply就像一个懒惰的工人。它需要按照命</div>
</li>
<li><a href="/article/1544.htm"
title="[Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化" target="_blank">[Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div>ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理
ClientCnxn构造方法
&</div>
</li>
<li><a href="/article/1671.htm"
title="【Java命令一】jmap" target="_blank">【Java命令一】jmap</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a>
<div>jmap命令的用法：
[hadoop@hadoop sbin]$ jmap
Usage:
jmap [option] <pid>
(to connect to running process)
jmap [option] <executable <core>
(to connect to a </div>
</li>
<li><a href="/article/1798.htm"
title="Apache 服务器安全防护及实战" target="_blank">Apache 服务器安全防护及实战</a>
<span class="text-muted">ronin47</span>
<div>此文转自IBM.
Apache 服务简介
Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。
由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到</div>
</li>
<li><a href="/article/1925.htm"
title="unity 3d实例化位置出现布置？" target="_blank">unity 3d实例化位置出现布置？</a>
<span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a>
<div>问：unity 3d实例化位置出现布置？
答：实例化的同时就可以指定被实例化的物体的位置,即 position
Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object
这样你不需要再用Transform.Position了,
如果你省略了第二个参数(</div>
</li>
<li><a href="/article/2052.htm"
title="《重构，改善现有代码的设计》第八章 Duplicate Observed Data" target="_blank">《重构，改善现有代码的设计》第八章 Duplicate Observed Data</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a>
<div>
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import java.awt.Label;
import java.awt.TextField;
import java.awt.event.FocusAdapter;
import java.awt.event.FocusE</div>
</li>
<li><a href="/article/2179.htm"
title="struts2更改struts.xml配置目录" target="_blank">struts2更改struts.xml配置目录</a>
<span class="text-muted">chiangfai</span>
<a class="tag" taget="_blank" href="/search/struts.xml/1.htm">struts.xml</a>
<div>struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml)
web.xml文件修改如下：
<filter>
<filter-name>struts2</filter-name>
<filter-class&g</div>
</li>
<li><a href="/article/2306.htm"
title="redis做缓存时的一点优化" target="_blank">redis做缓存时的一点优化</a>
<span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/pipeline/1.htm">pipeline</a>
<div>
最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。
首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi</div>
</li>
<li><a href="/article/2433.htm"
title="mysql导出数据不输出标题行" target="_blank">mysql导出数据不输出标题行</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA/1.htm">数据导出</a><a class="tag" taget="_blank" href="/search/%E5%8E%BB%E6%8E%89%E7%AC%AC%E4%B8%80%E8%A1%8C/1.htm">去掉第一行</a><a class="tag" taget="_blank" href="/search/%E5%8E%BB%E6%8E%89%E6%A0%87%E9%A2%98/1.htm">去掉标题</a>
<div>当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数
如通过下面命令导出数据：
mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName" > exportResult.txt
结果为：
studentid</div>
</li>
<li><a href="/article/2560.htm"
title="phpexcel导出excel表简单入门示例" target="_blank">phpexcel导出excel表简单入门示例</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/phpexcel/1.htm">phpexcel</a>
<div>先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下
<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
if (PHP_SAPI == 'cli')
die('</div>
</li>
<li><a href="/article/2687.htm"
title="爱情格言" target="_blank">爱情格言</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E6%A0%BC%E8%A8%80/1.htm">格言</a>
<div> 1) I love you not because of who you are, but because of who I am when I am with you. 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 2) No man or woman is worth your tears, and the one who is, won‘t</div>
</li>
<li><a href="/article/2814.htm"
title="转 Activity 详解——Activity文档翻译" target="_blank">转 Activity 详解——Activity文档翻译</a>
<span class="text-muted">e200702084</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a>
<div>activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro</div>
</li>
<li><a href="/article/2941.htm"
title="win7安装MongoDB服务" target="_blank">win7安装MongoDB服务</a>
<span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div>1. 下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads
2. 解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d</div>
</li>
<li><a href="/article/3068.htm"
title="Javascript魔法方法:__defineGetter__,__defineSetter__" target="_blank">Javascript魔法方法:__defineGetter__,__defineSetter__</a>
<span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/
在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为
例如,在一个图书类中,我们自动为Book加上书名符号:
function Book(name){ </div>
</li>
<li><a href="/article/3195.htm"
title="错误的日期格式可能导致走nginx proxy cache时不能进行304响应" target="_blank">错误的日期格式可能导致走nginx proxy cache时不能进行304响应</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
<div>昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05</div>
</li>
<li><a href="/article/3322.htm"
title="数据源架构模式之行数据入口" target="_blank">数据源架构模式之行数据入口</a>
<span class="text-muted">home198979</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E6%95%B0%E6%8D%AE%E5%85%A5%E5%8F%A3/1.htm">行数据入口</a>
<div>注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。
一、概念
行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。
二、简单实现行数据入口
为了方便理解，还是先简单实现：
<?php
/**
* 行数据入口类
*/
class OrderGateway {
/*定义元数</div>
</li>
<li><a href="/article/3449.htm"
title="Linux各个目录的作用及内容" target="_blank">Linux各个目录的作用及内容</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
<div>1）根目录“/” 根目录位于目录结构的最顶层，用斜线（/）表示，类似于
Windows
操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 2）/bin /bin 目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要
linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d</div>
</li>
<li><a href="/article/3576.htm"
title="ubuntu12.04上编译openjdk7" target="_blank">ubuntu12.04上编译openjdk7</a>
<span class="text-muted">ol_beta</span>
<a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a>
<div>获取源码
从openjdk代码仓库获取(比较慢)
安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial
将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe</div>
</li>
<li><a href="/article/3703.htm"
title="将数据库字段转换成设计文档所需的字段" target="_blank">将数据库字段转换成设计文档所需的字段</a>
<span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
<div> 哈哈，出差这么久终于回来了，回家的感觉真好！
PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。</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>