背景样式包括两个方面：一个是“背景颜色”，另外一个是“背景图片”。
CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”往往涉及以下列表属性。
| 属性 |
说明 |
| background-image |
背景图片地址 |
| background-repeat |
背景图片横向、纵向重复 |
| background-position |
背景图片位置 |
| background-attachment |
背景图片固定 |
下面我们一起看看这些属性
background-color
颜色值有两种，一种是“关键字”，另外一种是“十六进制RGB值”。
注意：color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”。
background-image
在给元素的背景设置图片时候，需要为容器设置宽高。并且宽高要与背景图片宽高相同。否则就是下面例子
DOCTYPE html>
背景图片title></p>
<p> <style type="text/css"></p>
<p> div{ </p>
<p> width: 200px;</p>
<p> height: 200px;</p>
<p> background-image: url("E:/安妮海瑟薇.jpg");</p>
<p> }</p>
<p> style></p>
<p> head></p>
<p> <body></p>
<p> <div>div></p>
<p> body></p>
<p>html></p>
<p><a href="http://img.e-com-net.com/image/info8/013b9a79a6bb4dddb864817672d9cda5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/013b9a79a6bb4dddb864817672d9cda5.jpg" alt="div title样式_CSS背景样式_第2张图片" width="650" height="384" style="border:1px solid black;"></a></p>
<p>这就导致了背景图片不能完全显示。</p>
<p> 背景图片与图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。 </p>
<p><strong>background-repeat</strong></p>
<p> 使用background-repeat属性来定义背景图片的重复方式。</p>
<p> background-repeat属性取值有4个，如下表</p>
<table>
<tbody>
<tr>
<td align="center"><strong>属性值</strong></td>
<td align="center"><strong>说明</strong></td>
</tr>
<tr>
<td align="left">repeat</td>
<td align="left">在水平方向和垂直方向上同时平铺</td>
</tr>
<tr>
<td align="left">repeat-x</td>
<td align="left">只在水平方向平铺</td>
</tr>
<tr>
<td align="left">repeat-y</td>
<td align="left">只在垂直方向平铺</td>
</tr>
<tr>
<td align="left">no-repeat</td>
<td align="left">不平铺</td>
</tr>
</tbody>
</table>
<p>下面看一个例子</p>
<p>DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="UTF-8" /></p>
<p> <title>背景图片重复title></p>
<p> <style type="text/css"></p>
<p> div{ </p>
<p> width: 100px;</p>
<p> height: 100px;</p>
<p> border: 1px solid silver;</p>
<p> background-image: url("E:/king.png");</p>
<p> }</p>
<p> .div1{ background-repeat: repeat;}</p>
<p> .div2{ background-repeat: repeat-x;}</p>
<p> .div3{ background-repeat: repeat-y;}</p>
<p> .div4{ background-repeat: no-repeat;}</p>
<p> style></p>
<p> head></p>
<p> <body></p>
<p> <div class="div1">div></p>
<p> <div class="div2">div></p>
<p> <div class="div3">div></p>
<p> <div class="div4">div></p>
<p> body></p>
<p>html></p>
<p><a href="http://img.e-com-net.com/image/info8/eb308c70052046bda31f18e312ae4cc0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb308c70052046bda31f18e312ae4cc0.jpg" alt="div title样式_CSS背景样式_第3张图片" width="650" height="606" style="border:1px solid black;"></a></p>
<p> 注意：元素的宽度和高度必须大于背景图片的宽度和高度，这样才会有重复效果。 </p>
<p><strong>background-position</strong></p>
<p> 使用background-position属性来定义背景图片的位置。</p>
<p> background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”。</p>像素值
<p> 当取像素值时候，要同时设置水平方向和垂直方向的数值。 </p>
<p> 例如“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。</p>
<p>DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="UTF-8" /></p>
<p> <title>背景图片位置title></p>
<p> <style type="text/css"></p>
<p> div{ </p>
<p> width: 300px;</p>
<p> height: 200px;</p>
<p> border: 1px solid silver;</p>
<p> background-image: url("E:/lion.png");</p>
<p> background-repeat: no-repeat;</p>
<p> <strong> background-position: 20px 20px;</strong></p>
<p> }</p>
<p> style></p>
<p> head></p>
<p> <body></p>
<p> <div>div></p>
<p> body></p>
<p>html></p>
<p><a href="http://img.e-com-net.com/image/info8/b470c67fab454213a1ec5260c6d157d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b470c67fab454213a1ec5260c6d157d6.jpg" alt="div title样式_CSS背景样式_第4张图片" width="650" height="426" style="border:1px solid black;"></a></p>
<p>background-position属性设置的两个值是相对该元素的左上角来的。</p> 关键字
<p> background-position属性的关键字取值如下表</p>
<table>
<tbody>
<tr>
<td align="center"><strong>属性值</strong></td>
<td align="center"><strong>说明</strong></td>
</tr>
<tr>
<td align="left">top left</td>
<td align="left">左上</td>
</tr>
<tr>
<td align="left">top center</td>
<td align="left">靠上居中</td>
</tr>
<tr>
<td align="left">top right</td>
<td align="left">右上</td>
</tr>
<tr>
<td align="left">left center</td>
<td align="left">靠左居中</td>
</tr>
<tr>
<td align="left">center center</td>
<td align="left">正中</td>
</tr>
<tr>
<td align="left">right center</td>
<td align="left">靠右居中</td>
</tr>
<tr>
<td align="left">bottom left</td>
<td align="left">左下</td>
</tr>
<tr>
<td align="left">bottom center</td>
<td align="left">靠下居中</td>
</tr>
<tr>
<td align="left">bottom right</td>
<td align="left">右下</td>
</tr>
</tbody>
</table>
<p>这些关键字效果如下图</p>
<p><a href="http://img.e-com-net.com/image/info8/b60fcbe9a6724fc0bf7da115b95e4841.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b60fcbe9a6724fc0bf7da115b95e4841.jpg" alt="div title样式_CSS背景样式_第5张图片" width="472" height="251" style="border:1px solid black;"></a></p>
<p>实例如下 </p>
<p>DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="UTF-8" /></p>
<p> <title>背景图片位置title></p>
<p> <style type="text/css"></p>
<p> div{ </p>
<p> width: 300px;</p>
<p> height: 200px;</p>
<p> border: 1px solid silver;</p>
<p> background-image: url("E:/lion.png");</p>
<p> background-repeat: no-repeat;</p>
<p> <strong>background-position: center righ</strong><strong>t</strong><strong>;</strong></p>
<p> }</p>
<p> style></p>
<p> head></p>
<p> <body></p>
<p> <div>div></p>
<p> body></p>
<p>html></p>
<p><a href="http://img.e-com-net.com/image/info8/7dde878aa5c54ee4b0ce61db4a21c269.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7dde878aa5c54ee4b0ce61db4a21c269.jpg" alt="div title样式_CSS背景样式_第6张图片" width="650" height="387" style="border:1px solid black;"></a></p>
<p><strong>background-attachment</strong></p>
<p> 使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。</p>
<p> background-attachment属性取值只有2个，如下表</p>
<table>
<tbody>
<tr>
<td>属性值</td>
<td>说明</td>
</tr>
<tr>
<td>scroll</td>
<td>随元素一起滚动</td>
</tr>
<tr>
<td>fixed</td>
<td>固定不动</td>
</tr>
</tbody>
</table>
<p>DOCTYPE html></p>
<p><html></p>
<p> <head></p>
<p> <meta charset="UTF-8" /></p>
<p> <title>背景图片固定title></p>
<p> <style type="text/css"></p>
<p> div{ </p>
<p> width: 200px;</p>
<p> height: 1200px;</p>
<p> border: 1px solid silver;</p>
<p> background-image: url("E:/lion.png");</p>
<p> background-repeat: no-repeat;</p>
<p> <strong>background-attachment: fixed;</strong></p>
<p> }</p>
<p> style></p>
<p> head></p>
<p> <body></p>
<p> <div>div></p>
<p> body></p>
<p>html></p>
<p>结果如下图</p>
<p><a href="http://img.e-com-net.com/image/info8/dae1a7e5783c47e1b7d1451406d9156a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dae1a7e5783c47e1b7d1451406d9156a.jpg" alt="div title样式_CSS背景样式_第7张图片" width="650" height="519" style="border:1px solid black;"></a></p>
<p>可以看出，右边的滑板都到中间了，但是顶部的图片也相对在顶部。</p>
<hr>
<p>本节主要学习了背景样式，最后对其总结。</p>
<ul>
<li><p>背景颜色：background-color</p></li>
<li><p>背景图片：background-image</p></li>
<li><p>背景图片重复：background-repeat</p></li>
<li><p>背景图片位置：background-position</p></li>
<li><p>背景图片固定：background-attachment</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1356916179624603648"></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">你可能感兴趣的:(div,title样式)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1899405119406010368.htm"
title="JavaScript面试宝典" target="_blank">JavaScript面试宝典</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.JS由哪三部分组成？JavaScript由以下三部分组成：ECMAScript（ES）：JavaScript的核心语法，如变量、作用域、数据类型、函数、对象等。DOM（文档对象模型）：用于操作HTML和XML文档的API，可以动态修改网页内容、结构和样式。BOM（浏览器对象模型）：用于操作浏览器窗口和页面，例如window、navigator、location、history、screen等对</div>
</li>
<li><a href="/article/1899388469533274112.htm"
title="uniapp 滚动尺" target="_blank">uniapp 滚动尺</a>
<span class="text-muted">走，带你去玩</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>scale组件代码（部分class样式使用到了uview1.0的样式）{{item/10}}exportdefault{name:'Scale',components:{},props:{value:{type:String,default:'0.0'},//最小值min:{type:Number,default:0,},//最大值max:{type:Number,default:100,},//</div>
</li>
<li><a href="/article/1899388470401495040.htm"
title="修改uview组件样式无效" target="_blank">修改uview组件样式无效</a>
<span class="text-muted">走，带你去玩</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
<div>在自己的components组件目录下修改uview组件样式不起效果，添加如下代码与metnods平级即可exportdefault{options:{styleIsolation:'shared'},}</div>
</li>
<li><a href="/article/1899381531961520128.htm"
title="FastAPI 自定义参数验证器完全指南：从基础到高级实战" target="_blank">FastAPI 自定义参数验证器完全指南：从基础到高级实战</a>
<span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%80%A7/1.htm">安全性</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%A0%A1%E9%AA%8C/1.htm">数据校验</a><a class="tag" taget="_blank" href="/search/Web%E5%BC%80%E5%8F%91/1.htm">Web开发</a><a class="tag" taget="_blank" href="/search/API%E8%AE%BE%E8%AE%A1/1.htm">API设计</a><a class="tag" taget="_blank" href="/search/Field%E5%87%BD%E6%95%B0/1.htm">Field函数</a><a class="tag" taget="_blank" href="/search/%E5%8F%82%E6%95%B0%E9%AA%8C%E8%AF%81/1.htm">参数验证</a><a class="tag" taget="_blank" href="/search/FastAPI/1.htm">FastAPI</a>
<div>title:FastAPI自定义参数验证器完全指南：从基础到高级实战date:2025/3/11updated:2025/3/11author:cmdragonexcerpt:本教程深入探讨FastAPI中自定义参数验证器的使用，特别是通过Field函数进行数据校验。从基础概念到高级用法，通过详细的代码示例、课后测验和常见错误解决方案，帮助初学者快速掌握FastAPI中自定义参数验证器的核心知识。</div>
</li>
<li><a href="/article/1899343573246078976.htm"
title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a>
<span class="text-muted">IT-司马青衫</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div>
</li>
<li><a href="/article/1899328948634972160.htm"
title="CSS入门指南：从零开始学习网页开发——（一）简介" target="_blank">CSS入门指南：从零开始学习网页开发——（一）简介</a>
<span class="text-muted">GIS小白吃</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、什么是CSS？CSS（CascadingStyleSheets，层叠样式表）是一种用于描述网页的外观和布局的样式表语言。它通过定义网页元素的样式（如颜色、字体、边距等）来与HTML内容分离，提升了网页的可维护性和设计的灵活性。CSS的核心目的是增强网页的表现力。早期的网页仅使用HTML来进行内容的展示，但由于HTML只能描述内容的结构，页面设计和内容变得难以管理。于是，CSS作为一种辅助技术应</div>
</li>
<li><a href="/article/1899317343830470656.htm"
title="C# &Unity 唐老狮 No.8 模拟面试题" target="_blank">C# &Unity 唐老狮 No.8 模拟面试题</a>
<span class="text-muted">咩咩-哈基米版</span>
<a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/%26amp%3B%26amp%3B/1.htm">&&</a><a class="tag" taget="_blank" href="/search/Unity/1.htm">Unity</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B8%8E%E7%AE%97%E6%B3%95%E5%90%88%E9%9B%86/1.htm">面试题与算法合集</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>本文章不作任何商业用途仅作学习与交流安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程打好坚实的基础非常非常重要:全部-游习堂-唐老狮创立的游戏开发在线学习平台-PoweredByEduSoho如果你发现了文章内特殊的字体格式,那是AI补充的知识,我发现原网站下面有答案,我将会把答案以不同样式穿插在回答之中目录C#1.如果我们想为Unity中的Transfor</div>
</li>
<li><a href="/article/1899270434461904896.htm"
title="拉取gitlab项目时出现500的错误的权限问题" target="_blank">拉取gitlab项目时出现500的错误的权限问题</a>
<span class="text-muted">one 大白(●—●)</span>
<a class="tag" taget="_blank" href="/search/gitlab/1.htm">gitlab</a>
<div>title:拉取gitlab项目时出现500的错误的权限问题date:2025-03-1018:09:08tags:gitlabgit拉取gitlab项目时出现500的错误的权限问题Gitlab克隆代码**我遇到的问题错误**：**问题解决步骤**：1、确定你可以浏览器访问到项目页面2、确定你的邮箱或账号已添加，有权限可以拉取项目**解决步骤**本地拉取代码时生成ssh密钥：密钥查看地址：此步骤完</div>
</li>
<li><a href="/article/1899256563449786368.htm"
title="vue中为组建添加样式的方式" target="_blank">vue中为组建添加样式的方式</a>
<span class="text-muted">晨枫阳</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在Vue中，可以通过多种方式为view添加样式，并且支持动态绑定样式。以下是几种常见的方式：1.内联样式直接在模板中使用style属性来添加样式。这是一个内联样式的示例2.使用:style动态绑定样式可以通过:style动态绑定样式对象或数组。2.1绑定样式对象这是一个动态绑定样式对象的示例exportdefault{data(){return{styleObject:{color:'red',f</div>
</li>
<li><a href="/article/1899211793948012544.htm"
title="最新网络安全-跨站脚本攻击(XSS)的原理、攻击及防御_xsstrike原理" target="_blank">最新网络安全-跨站脚本攻击(XSS)的原理、攻击及防御_xsstrike原理</a>
<span class="text-muted">2401_84239830</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
<div>XSS的类型反射型XSS/不持久型XSS存储型XSS/持久型XSS基于DOM的XSS常用Payload与工具XSS扫描工具Payloadsscript标签类结合js的html标签伪协议绕过危害防御简介跨站脚本攻击(全称CrossSiteScripting,为和CSS（层叠样式表）区分，简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码（也可能包含html代码），当用户浏览网</div>
</li>
<li><a href="/article/1899208387200086016.htm"
title="P11：利用marked+highlight.js重构前台文章详细页面" target="_blank">P11：利用marked+highlight.js重构前台文章详细页面</a>
<span class="text-muted">知其黑、受其白</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Hooks%2BLaravel/1.htm">Hooks+Laravel</a><a class="tag" taget="_blank" href="/search/%E5%88%B6%E4%BD%9C%E5%8D%9A%E5%AE%A2/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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
<div>ReactHooks+Laravel前端博客实战阐述安装marked和highlight.js重构`detailed.js`文件增加Code的高亮显示CSS样式的更换MySQL数据阐述之前我们在博客文章详细页使用了react-markdown模块，但是这个插件的配置项还是太少了，而且我也没做太多的技术调研，所以我决定转回我目前项目中使用的一套方案marked+highlight.js。这个方案是比</div>
</li>
<li><a href="/article/1899204856170737664.htm"
title="SassScript：Sass中的编程特性详解" target="_blank">SassScript：Sass中的编程特性详解</a>
<span class="text-muted">love729234ming</span>
<a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8%E5%88%86%E4%BA%AB/1.htm">日常分享</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变</div>
</li>
<li><a href="/article/1899175844694257664.htm"
title="Vue大屏实战一：数字翻牌器的实现" target="_blank">Vue大屏实战一：数字翻牌器的实现</a>
<span class="text-muted">博主逸尘</span>
<a class="tag" taget="_blank" href="/search/Vue%E5%A4%A7%E5%B1%8F/1.htm">Vue大屏</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/javascript/1.htm">javascript</a>
<div>文章目录1.效果预览2.数字翻牌器的实现3.vue项目中引入DataV4.大屏顶部翻牌器布局5.大屏数字翻牌器样式6.大屏数字翻牌器逻辑实现1.效果预览页面整体效果如下顶部的数字翻牌器效果2.数字翻牌器的实现数字翻牌器我们借助于DataV组件来实现，示例如下config属性配置如下注意：number属性是个数组，我们在初始化的时候给number属性一个默认的数组及值，当我们想动态改变数字翻牌器的值</div>
</li>
<li><a href="/article/1899172183998001152.htm"
title="The power of perseverance turns dreams into reality, one step at a time." target="_blank">The power of perseverance turns dreams into reality, one step at a time.</a>
<span class="text-muted">Vic10101</span>
<a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0/1.htm">英语学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>文章内容：Title:TheStrengthofPerseveranceDreamsarenotachievedovernight;theyarebuiltthroughconsistenteffortandunwaveringdetermination.Perseveranceisthebridgebetweengoalsandaccomplishments.Whenfacedwithobsta</div>
</li>
<li><a href="/article/1899169409700786176.htm"
title="分治法的适用条件及基本步骤，快速幂算法" target="_blank">分治法的适用条件及基本步骤，快速幂算法</a>
<span class="text-muted">王哈哈嘻嘻噜噜</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>分治法所能解决的问题一般具有一下几个特征*该问题的规模缩小到一定程度就可以容易的解决*该问题可以分解为若干个规模较小的问题*利用该问题分解的子问题的解可以合并为该问题的解*该问题所分解出的各个子问题是相互独立的divide-and-conquer(P){if(|p|1二分搜索技术非递减序的n个元素a[0:n-1],先要在这n个元素中找出一特定的元素x分析：设在a[l:r]中找x，mid=（l+r）</div>
</li>
<li><a href="/article/1899169410287988736.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>1.块级标签块级元素会独占一行，通常用于构建页面的结构。常见的块级元素包括：：通用的块级容器。没有任何语意。可以创建网页的不同部分，导航栏侧边栏等。链接1链接2链接3若是想创建一个初始带标签的话：可以直接：#nav或者div.nav或者div#nav创建第二个div标签，第一个是导航栏，第二个就是主要内容了.content文章标题文章内容文章内容文章内容：段落。到：标题。：无序列表。：有序列表。：</div>
</li>
<li><a href="/article/1899156554616205312.htm"
title="你知道 Vue scoped 原理吗？这波你在第几层？" target="_blank">你知道 Vue scoped 原理吗？这波你在第几层？</a>
<span class="text-muted">CRMEB定制开发</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>⭐佛系回答scoped原理？不就是给那啥加一个特殊标识，然后样式就被唯一标记，就实现了样式隔离的作用。⭐⭐普通回答scoped原理呀当style标签加上scoped属性时，scoped会在DOM结构及css样式上加上唯一性的标记data-v-xxx属性，从而达到样式私有化，不污染全局的作用；⭐⭐⭐专业回答嗯！ScopeCSS的本质是基于HTML和CSS属性选择器，即分别给HTML标签和CSS选择器</div>
</li>
<li><a href="/article/1899154031557799936.htm"
title="VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理" target="_blank">VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理</a>
<span class="text-muted">Hyman-ya</span>
<a class="tag" taget="_blank" href="/search/vue3%2Bts%2Bvite/1.htm">vue3+ts+vite</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>一、webpack构建Vue3项目（纯手写不用cli）为什么要手写webpack不用cli（脑子有病）并不是其实是为了加深我们对webpack的了解方便以后灵活运用webpack的技术1.初始化项目结构（跟cli结构保持一致）创建publi文件夹下面创建index.html文件然后初始化一下!然后改一下title标签的内容名称，一般与项目名称一样即可创建src文件夹src文件夹下面创建App.vu</div>
</li>
<li><a href="/article/1899153779358494720.htm"
title="深入理解Vue3中style的scoped" target="_blank">深入理解Vue3中style的scoped</a>
<span class="text-muted">Jinuss</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>概述scoped的作用就是样式模块化（CSSModule），即给组件每一个元素（以及非动态添加的子组件的根元素）加上一个data-v-xxxx的属性，样式选择器也会格式化成选择器[data-v-xxxx],这样就做到了样式隔离，每个组件内定义的样式只对该组件生效，避免了不同组件或页面的样式（选择器）冲突。本文将以vue3为例，深入了解scoped原理。scoped实践vue3组件是如下定义样式：标</div>
</li>
<li><a href="/article/1899140669725798400.htm"
title="鸿蒙HarmonyOS NEXT开发：文本通用" target="_blank">鸿蒙HarmonyOS NEXT开发：文本通用</a>
<span class="text-muted">「已注销」</span>
<a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/ArkTS/1.htm">ArkTS</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a>
<div>文本通用文本通用属性目前只针对包含文本元素的组件，设置文本样式。说明：从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。fontColorfontColor(value:ResourceColor)设置字体颜色。卡片能力：从APIversion9开始，该接口支持在ArkTS卡片中使用。原子化服务API：从APIversion11开始，该接口支持在原子化服</div>
</li>
<li><a href="/article/1899115201819635712.htm"
title="vue3修改elementui-plus的默认样式的几种方法" target="_blank">vue3修改elementui-plus的默认样式的几种方法</a>
<span class="text-muted">Demons_kirit</span>
<a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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>
<div>#创作灵感今天写vue的前端项目，因为需要去修改elementui-plus中drawer的默认样式，所以刚好将修改步骤记录下来。一共提供了三种方法，但亲测第二种最好用。使用第二种是可以无视自己的代码中是否定义了该盒子，因为有时候盒子的出现和框架有关，并非你能左右的。1.通过全局CSS覆盖样式直接在你的全局样式文件（如src/style/global.css或src/style/global.sc</div>
</li>
<li><a href="/article/1899067278616489984.htm"
title="【每日学点HarmonyOS Next知识】对话框去掉圆角、数组拼接、自定义对话框依附某个控件、平移动画、页面栈管理" target="_blank">【每日学点HarmonyOS Next知识】对话框去掉圆角、数组拼接、自定义对话框依附某个控件、平移动画、页面栈管理</a>
<span class="text-muted">轻口味</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E5%AD%A6%E7%82%B9HarmonyOS/1.htm">每天学点HarmonyOS</a><a class="tag" taget="_blank" href="/search/Next%E7%9F%A5%E8%AF%86/1.htm">Next知识</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/harmonyosnext/1.htm">harmonyosnext</a>
<div>1、HarmonyOSCustomDialog怎么去掉左右和底部的透明以及圆角？CustomDialog怎么去掉左右和底部的透明以及圆角设置customStyle为true即可开启使用自定义样式。设置borderRadius为0去掉圆角属性。属性用法参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/t</div>
</li>
<li><a href="/article/1899038876165533696.htm"
title="vite+vue+ts+element-plus从零开发管理后台框架(15)-暗黑模式" target="_blank">vite+vue+ts+element-plus从零开发管理后台框架(15)-暗黑模式</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a>
<div>设置编辑src/main.ts，引入暗黑模式样式文件。import'element-plus/dist/index.css'import'element-plus/theme-chalk/dark/css-vars.css'编辑src/views/Main.vue，template段header-right下最前面添加如下代码。script段引入并实例化useDarkimport{useFulls</div>
</li>
<li><a href="/article/1899035133520965632.htm"
title="【一文学会 HTML5】" target="_blank">【一文学会 HTML5】</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>目录HTML概述基本概念HTML发展历程HTML基本结构网页基本标签标题标签（``-``）段落标签（``）换行标签（``）水平线标签（``）注释（``）特殊符号图像标签基本语法主要属性图像的对齐和样式响应式图像链接标签基本语法重要属性`href`属性`target`属性`title`属性`rel`属性`download`属性链接样式示例代码特殊链接形式图像链接按钮链接块元素和行内元素块元素（Blo</div>
</li>
<li><a href="/article/1898964158167183360.htm"
title="二级word" target="_blank">二级word</a>
<span class="text-muted">信奉者z</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>样式类替换：*（通配符）代表任意多个段落排序：大纲视图->一级->排序字体宽度：alt矩形选择制表位：段落->制表符->tab键样式的复制：对话框->管理样式->导入/导出->打开文件->文档类型（所有文件）样式的赋予：选中目标->选中样式->右击->更新shift：连续选择样式的删除：对话框->管理样式->导入/导出->shift选中->删除样式集在（设计）阻止样式集切换：对话框->管理样式-></div>
</li>
<li><a href="/article/1898960753688375296.htm"
title="如何使用staruml创建时序图" target="_blank">如何使用staruml创建时序图</a>
<span class="text-muted">forjav</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/staruml/1.htm">staruml</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E5%BA%8F%E5%9B%BE/1.htm">时序图</a>
<div>说明：staruml版本：5.0.2.15701、打开staruml2、添加模型，右键Untitled=>add=>model=>取名myuml(可以随意取)3、添加图表，右键myuml=>AddDiagram=>SequenceDiagram4、重命名图表5、添加参与者actor，右键myuml=>add=>actor=>重命名为person6、添加对象，右键mysd=>Add=>Object=</div>
</li>
<li><a href="/article/1898931889171918848.htm"
title="前端学习——CSS3实现时钟效果" target="_blank">前端学习——CSS3实现时钟效果</a>
<span class="text-muted">younger_LF</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%EF%BC%88HTML%2BCSS%2BJS%EF%BC%89/1.htm">前端（HTML+CSS+JS）</a><a class="tag" taget="_blank" href="/search/CSS%E5%8A%A8%E7%94%BB/1.htm">CSS动画</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%92%9F%E6%95%88%E6%9E%9C/1.htm">时钟效果</a>
<div>CSS3实现时钟效果最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。最先是用CSS实现的是一个时钟的效果，如下图：实现效果1.圆盘说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。先写一个div，然后给相关的样式.clock{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate</div>
</li>
<li><a href="/article/1898909949669470208.htm"
title="前端学习——CSS" target="_blank">前端学习——CSS</a>
<span class="text-muted">W起名有点难</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>CSSCSS（CascadingStyleSheets）级联样式表语法选择器全局选择器元素选择器类选择器ID选择器合并选择器选择器的优先级字体属性字体颜色背景属性background-color属性background-image属性background-repeat属性background-size属性background-position属性文本属性text-aligntext-decorat</div>
</li>
<li><a href="/article/1898898593775939584.htm"
title="uni_app实现下拉刷新" target="_blank">uni_app实现下拉刷新</a>
<span class="text-muted">_未知_开摆</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
<div>1.在页面配置中启用下拉刷新首先，你需要在页面的pages.json文件中启用下拉刷新功能。{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"首页","enablePullDownRefresh":true//启用下拉刷新}}]}2.在页面中监听下拉刷新事件在页面的.vue文件中，你可以通过onPull</div>
</li>
<li><a href="/article/1898812479484522496.htm"
title="JavaScript学习笔记一" target="_blank">JavaScript学习笔记一</a>
<span class="text-muted">跨界科技汇</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>web三大标准：HTML(结构)+CSS（样式）+JavaScript(行为)JavaScript的作用：动态效果+数据交互编程语言编程让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果是什么？世界上最流行的语言之一，是一种运行在客户端的脚本语言脚本语言不需要编译，运行过程中由**js解析器(js引擎)**逐行来进行解释并执行现在也可以基于Node.js技术来进行服务器端编程作</div>
</li>
<li><a href="/article/47.htm"
title="jdk tomcat 环境变量配置" target="_blank">jdk tomcat 环境变量配置</a>
<span class="text-muted">Array_06</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/tomcat/1.htm">tomcat</a>
<div>Win7 下如何配置java环境变量
1。准备jdk包，win7系统，tomcat安装包（均上网下载即可）
2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。）
3。分别配置高级环境变量。
电脑-->右击属性-->高级环境变量-->环境变量。
分别配置 :
path
&nbs</div>
</li>
<li><a href="/article/174.htm"
title="Spring调SDK包报java.lang.NoSuchFieldError错误" target="_blank">Spring调SDK包报java.lang.NoSuchFieldError错误</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>
<div> 在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。
org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l</div>
</li>
<li><a href="/article/301.htm"
title="LeetCode[位运算] - #136 数组中的单一数" target="_blank">LeetCode[位运算] - #136 数组中的单一数</a>
<span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a>
<div>原题链接：#136 Single Number
要求：
给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素
注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间
难度：中等
分析：
题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进</div>
</li>
<li><a href="/article/428.htm"
title="qq登陆界面开发" target="_blank">qq登陆界面开发</a>
<span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a>
<div>今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下：
public class First { public void initul(){ jf=ne</div>
</li>
<li><a href="/article/555.htm"
title="Linux的程序包管理器RPM" target="_blank">Linux的程序包管理器RPM</a>
<span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的</div>
</li>
<li><a href="/article/682.htm"
title="socket通信遇到EOFException" target="_blank">socket通信遇到EOFException</a>
<span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/EOFException/1.htm">EOFException</a>
<div>java.io.EOFException
at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281)
at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:</div>
</li>
<li><a href="/article/809.htm"
title="基于spring的web项目定时操作" target="_blank">基于spring的web项目定时操作</a>
<span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div>废话不多说，直接上代码，很简单 配置一下项目启动就行
1，web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="h</div>
</li>
<li><a href="/article/936.htm"
title="树形结构的数据库表Schema设计" target="_blank">树形结构的数据库表Schema设计</a>
<span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a>
<div>原文地址：
http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488
程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，</div>
</li>
<li><a href="/article/1063.htm"
title="maven将jar包和源码一起打包到本地仓库" target="_blank">maven将jar包和源码一起打包到本地仓库</a>
<span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository
<project>
...
<build>
<plugins>
<plugin>
<groupI</div>
</li>
<li><a href="/article/1190.htm"
title="java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！" target="_blank">java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！</a>
<span class="text-muted">百合不是茶</span>
<div>类 File
File是指文件和目录路径名的抽象表示形式。
1，何为文件：
标准文件（txt doc mp3...）
目录文件（文件夹）
虚拟内存文件
2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都</div>
</li>
<li><a href="/article/1317.htm"
title="Spring注入有继承关系的类（2）" target="_blank">Spring注入有继承关系的类（2）</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>
<div>被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类
package com.bijian.spring.test4;
public class AClass {
private String a;
private String b;
public String getA() {
retu</div>
</li>
<li><a href="/article/1444.htm"
title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a>
<div> 很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人</div>
</li>
<li><a href="/article/1571.htm"
title="【Velocity四】Velocity与Java互操作" target="_blank">【Velocity四】Velocity与Java互操作</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a>
<div>Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，
POJO
package com.tom.servlets;
public</div>
</li>
<li><a href="/article/1698.htm"
title="【Hive十一】Hive数据倾斜优化" target="_blank">【Hive十一】Hive数据倾斜优化</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a>
<div>什么是Hive数据倾斜问题
操作：join,group by,count distinct
现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。
原因：key分布不均匀
倾斜度衡量：平均记录数超过50w且</div>
</li>
<li><a href="/article/1825.htm"
title="在nginx中集成lua脚本：添加自定义Http头，封IP等" target="_blank">在nginx中集成lua脚本：添加自定义Http头，封IP等</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+lua+csrf/1.htm">nginx lua csrf</a>
<div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。
location /{</div>
</li>
<li><a href="/article/1952.htm"
title="java-3.求子数组的最大和" target="_blank">java-3.求子数组的最大和</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>package beautyOfCoding;
public class MaxSubArraySum {
/**
* 3.求子数组的最大和
题目描述：
输入一个整形数组，数组里有正数也有负数。
数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。
求所有子数组的和的最大值。要求时间复杂度为O(n)。
例如输入的数组为1, -2, 3, 10, -4,</div>
</li>
<li><a href="/article/2079.htm"
title="Netty源码学习-FileRegion" target="_blank">Netty源码学习-FileRegion</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/netty/1.htm">netty</a>
<div>今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java
可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder：
//pipeline（没有诸如“FileRegionEncoder”的handler）：
public ChannelPipeline ge</div>
</li>
<li><a href="/article/2206.htm"
title="使用ZeroClipboard解决跨浏览器复制到剪贴板的问题" target="_blank">使用ZeroClipboard解决跨浏览器复制到剪贴板的问题</a>
<span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">跨浏览器</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E5%88%B6%E5%88%B0%E7%B2%98%E8%B4%B4%E6%9D%BF/1.htm">复制到粘贴板</a><a class="tag" taget="_blank" href="/search/Zero+Clipboard/1.htm">Zero Clipboard</a>
<div>Zero Clipboard的实现原理
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。
Zero Clipboard的安装方法
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js </div>
</li>
<li><a href="/article/2333.htm"
title="单例模式" target="_blank">单例模式</a>
<span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a>
<div>第一种（懒汉，线程不安全）：
public class Singleton { 2 private static Singleton instance; 3 pri</div>
</li>
<li><a href="/article/2460.htm"
title="spring+websocket的使用" target="_blank">spring+websocket的使用</a>
<span class="text-muted">dalan_123</span>
<div>一、spring配置文件
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.or</div>
</li>
<li><a href="/article/2587.htm"
title="细节问题：ZEROFILL的用法范围。" target="_blank">细节问题：ZEROFILL的用法范围。</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div> 1、zerofill把月份中的一位数字比如1，2，3等加前导0
mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL, -> day</div>
</li>
<li><a href="/article/2714.htm"
title="Android开发10——Activity的跳转与传值" target="_blank">Android开发10——Activity的跳转与传值</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a>
<div>Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。
一、Activity跳转
方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)
方法二Intent intent = new Intent();intent.setCla</div>
</li>
<li><a href="/article/2841.htm"
title="jdbc 得到表结构、主键" target="_blank">jdbc 得到表结构、主键</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/jdbc+%E5%BE%97%E5%88%B0%E8%A1%A8%E7%BB%93%E6%9E%84%E3%80%81%E4%B8%BB%E9%94%AE/1.htm">jdbc 得到表结构、主键</a>
<div>转自博客：http://blog.csdn.net/ocean1010/article/details/7266042
假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt</div>
</li>
<li><a href="/article/2968.htm"
title="Android 应用程序开关GPS" target="_blank">Android 应用程序开关GPS</a>
<span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>要在应用程序中操作GPS开关需要权限：
<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" />
但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？
1、方法一：将项目放到Android源码中编译；
2、方法二：网上有人说cl</div>
</li>
<li><a href="/article/3095.htm"
title="Windows上调试MapReduce" target="_blank">Windows上调试MapReduce</a>
<span class="text-muted">zhiquanliu</span>
<a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a>
<div>1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b</div>
</li>
<li><a href="/article/3222.htm"
title="如何看待一些知名博客推广软文的行为？" target="_blank">如何看待一些知名博客推广软文的行为？</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a>
<div>本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621
互联网上的两种典型心态：
当初求种像条狗，如今撸完嫌人丑
当初搜贴像条犬，如今读完嫌人软
你为啥感觉不舒服呢？
难道非得要作者把自己的劳动成果免费给你用，你才舒服？
就如同 Google 关闭了 Gooled Reader，那是</div>
</li>
<li><a href="/article/3349.htm"
title="sql优化总结" target="_blank">sql优化总结</a>
<span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
<div>为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！
要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。
一、简单的统计语句执行时间
declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id</div>
</li>
<li><a href="/article/3476.htm"
title="Linux Oracle中常遇到的一些问题及命令总结" target="_blank">Linux Oracle中常遇到的一些问题及命令总结</a>
<span class="text-muted">超声波</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1.linux更改主机名
(1)#hostname oracledb 临时修改主机名
(2) vi /etc/sysconfig/network 修改hostname
(3) vi /etc/hosts 修改IP对应的主机名
2.linux重启oracle实例及监听的各种方法
（注意操作的顺序应该是先监听，后数据库实例）
&nbs</div>
</li>
<li><a href="/article/3603.htm"
title="hive函数大全及使用示例" target="_blank">hive函数大全及使用示例</a>
<span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hive%E5%87%BD%E6%95%B0/1.htm">hive函数</a>
<div>
具体说明及示例参 见附件文档。
文档目录：
目录
一、关系运算： 4
1. 等值比较: = 4
2. 不等值比较: <> 4
3. 小于比较: < 4
4. 小于等于比较: <= 4
5. 大于比较: > 5
6. 大于等于比较: >= 5
7. 空值判断: IS NULL 5</div>
</li>
<li><a href="/article/3730.htm"
title="Spring 4.2新特性-使用@Order调整配置类加载顺序" target="_blank">Spring 4.2新特性-使用@Order调整配置类加载顺序</a>
<span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a>
<div>4.1 @Order
Spring 4.2 利用@Order控制配置类的加载顺序
4.2 演示
两个演示bean
package com.wisely.spring4_2.order;
public class Demo1Service {
}
package com.wisely.spring4_2.order;
public class</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> 