CSS（层叠样式表）是控制网页元素样式的强大工具。随着Web开发技术的进步，CSS不断引入新的选择器和伪类，以增强开发者对页面元素的控制能力。:placeholder-shown伪类是CSS中一个相对较新的特性，它允许开发者针对输入字段中显示占位符文本的元素应用特定的样式。本文将深入探讨:placeholder-shown伪类的使用，以及如何通过它来提升表单输入框的用户体验。
:placeholder-shown
:placeholder-shown伪类代表的是一个输入字段（或</code>元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。</p> <h4>使用场景</h4> <p><code>:placeholder-shown</code>伪类在以下场景中特别有用：</p> <ol> <li><strong>占位符样式定制</strong>：为输入框的占位符文本设置特定的样式。</li> <li><strong>表单验证反馈</strong>：在用户输入不符合要求时，通过改变占位符的样式提供反馈。</li> <li><strong>动态表单交互</strong>：根据输入框是否有占位符显示来触发特定的CSS动画或变换效果。</li> <li><strong>改善可访问性</strong>：通过样式变化帮助用户识别哪些输入是必填的。</li> </ol> <h4>基本语法</h4> <p><code>:placeholder-shown</code>伪类的语法与普通CSS选择器类似。例如，如果你想为当前输入框的占位符文本设置样式，可以这样写：</p> <pre><code class="prism language-css"><span class="token selector">input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，<code>:placeholder-shown</code>伪类被用在<code><input></code>选择器上，表示选择所有显示占位符的输入框，并为它们设置文本颜色。</p> <h4>示例：占位符文本样式定制</h4> <p>假设我们有一个登录表单，需要为用户名和密码输入框的占位符设置不同的样式：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"><span class="token selector">input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">input[type="password"]:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #cc0000<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，所有显示占位符的输入框文本将斜体显示，并且颜色较淡。对于密码输入框，占位符文本颜色被设置为红色，以提醒用户这是一个敏感字段。</p> <h4>示例：动态表单交互</h4> <p>考虑一个注册表单，其中包含一个电子邮件输入框。我们可以使用<code>:placeholder-shown</code>伪类来实现一个简单的动画效果，当用户开始输入时，占位符淡出：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"><span class="token selector">#email-input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.5s ease-out<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#email-input:focus:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，当输入框获得焦点时，占位符文本将逐渐变为透明，从而给用户一种动态的交互体验。</p> <h4>注意事项</h4> <ol> <li><strong>浏览器兼容性</strong>：<code>:placeholder-shown</code>伪类是一个相对较新的CSS特性，可能不是所有浏览器都支持。在使用之前，需要检查目标浏览器的兼容性。</li> <li><strong>用户体验</strong>：在设计占位符样式时，应确保它们对用户是有帮助的，不会误导用户。</li> <li><strong>性能考虑</strong>：虽然使用<code>:placeholder-shown</code>伪类可以提供更丰富的样式效果，但过度使用动画和过渡可能会影响页面性能。</li> </ol> <h4>结论</h4> <p><code>:placeholder-shown</code>伪类为CSS开发者提供了一种新的工具，用于针对输入框中的占位符文本进行样式定制。通过本文的探讨，我们了解到了<code>:placeholder-shown</code>伪类的定义、使用场景、基本语法和示例代码。随着Web技术的不断发展，<code>:placeholder-shown</code>伪类将在提升表单输入框用户体验方面发挥越来越重要的作用。</p> <p>通过深入理解并合理应用<code>:placeholder-shown</code>伪类，开发者可以创建更加直观、友好和动态的表单输入体验。记住，合理利用CSS的每一个特性，都是提升网页设计质量的关键。</p> <hr> <p>本文提供了对<code>:placeholder-shown</code>伪类的全面介绍，包括其定义、使用场景、基本语法和示例代码。希望这篇文章能够帮助你更好地理解和运用<code>:placeholder-shown</code>伪类，为你的Web开发工作提供更多的创新思路和解决方案。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1827099705411203072"></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/1834601242836430848.htm" title="前端有关文件上传下载操作" target="_blank">前端有关文件上传下载操作</a> <span class="text-muted">发呆小天才yy</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> <div>文件上传文件上传有两种形式（传给后端的文件形式）变成blob通过formData搭载传输（二进制blob传输）转为base64直接传输(简便，但是后端需要解码，时间长)，通过fileReader搭载相关对象：files（blob的一个子类）：通过input标签读取过来的文件对象（属于前端的方法，没办法直接传给后端）blob:不可变的二进制内容，包含很多操作方法（newBlob([file])直接将</div> </li> <li><a href="/article/1834600233804328960.htm" title="springmvc 前后端日期格式的转换" target="_blank">springmvc 前后端日期格式的转换</a> <span class="text-muted">owlets_ju</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.后台Date类型返回前端String类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")它的作用是，出参时，自动把Date型对象数据转化成格式化后的字符串输出:yyyy-MM-ddHH:mm:ss示例：@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")priva</div> </li> <li><a href="/article/1834590657881141248.htm" title="前后端时间转换的那些常见问题及处理方法" target="_blank">前后端时间转换的那些常见问题及处理方法</a> <span class="text-muted">繁依Fanyi</span> <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见</div> </li> <li><a href="/article/1834570718755516416.htm" title="记一次生产环境大面积404问题！" target="_blank">记一次生产环境大面积404问题！</a> <span class="text-muted">冰河团队</span> <div>写在前面发布到线上的接口服务一直好端端的，今天突然运营反馈说很多功能无法正常使用。经过排查，发现前端调用后端接口时，部分接口出现404的现象。今天，我到公司比较晚，肯定是哪个小伙伴昨晚下班，走出办公室前没有祈祷服务器不要出问题。要把这个人揪出来，吊在服务器上——祭天！文章已收录到：https://github.com/sunshinelyz/technology-binghehttps://git</div> </li> <li><a href="/article/1834567911600123904.htm" title="2019最值得投资的餐饮品类为什么是“它”！" target="_blank">2019最值得投资的餐饮品类为什么是“它”！</a> <span class="text-muted">輕描淡寫_3722</span> <div>相信大家都听过一句话：什么火，什么就流行！最近餐饮品类有一单品，独树一帜，走在潮流前端，被众多网友可尽的玩弄了一把！从最初火遍全球的具象产物小黄鸭，到如今摸不到的流行话语，“鸭”是真的火了！今天也要开心鸭、冲鸭、我的马鸭......一系列的流行语，高强度的曝光量，“鸭”火得一塌糊涂。而随着“鸭”的火爆，很多投资者也在“鸭”身上看到了商机，想借着这股还未褪去的“东风”，从事与“鸭”相关的产业，老鸭汤</div> </li> <li><a href="/article/1834562560750350336.htm" title="使用Spring Boot开发一个准妈妈交流平台" target="_blank">使用Spring Boot开发一个准妈妈交流平台</a> <span class="text-muted">BABA8891</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>开发一个准妈妈交流平台涉及到许多不同的功能和组件。以下是一个使用SpringBoot来构建这样一个平台：1.项目规划需求分析：确定平台的核心功能，如用户注册、登录、论坛发帖、评论、消息通知等。系统设计：设计系统架构，包括前端、后端、数据库和可能的第三方服务集成。2.技术选型前端：可以选择React、Vue或Angular等现代JavaScript框架。后端：使用SpringBoot作为后端框架。数</div> </li> <li><a href="/article/1834553486256205824.htm" title="Rust：重塑编程世界的利器，对前端开发的深远影响" target="_blank">Rust：重塑编程世界的利器，对前端开发的深远影响</a> <span class="text-muted">大鱼前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言：在编程语言的海洋中，有一颗璀璨的明星正在冉冉升起——那就是Rust。它不仅在后端领域展现出强大的实力，更在前端领域带来了颠覆性的变革。本文将带你深入了解Rust的魅力，探讨其独特的优势，以及Rust如何影响前端开发，并通过案例分析展示Rust在前端应用的实力。一、Rust：编程语言的新星Rust，这门由Mozilla主导开发的系统编程语言，自诞生之初就以其独特的设计理念和出色的性能赢得了众多</div> </li> <li><a href="/article/1834550838689886208.htm" title="Rust 编程语言构建出跨平台应用开源框架 Dioxus" target="_blank">Rust 编程语言构建出跨平台应用开源框架 Dioxus</a> <span class="text-muted">百态老人</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>是的，Rust编程语言确实构建了一个跨平台应用开源框架Dioxus。Dioxus是一个可移植、高性能的框架，用于在Rust中构建跨平台的用户界面。它支持多种平台的应用开发，包括网页前端、桌面应用、静态网站、移动端应用和TUI程序等。Dioxus的核心特点之一是其声明式编程风格，类似于React框架，但提供了更高效的性能和更好的开发者体验。此外，Dioxus还具有原生桌面支持、强大的状态管理、快速异</div> </li> <li><a href="/article/1834550457662533632.htm" title="Vue + Django的人脸识别系统" target="_blank">Vue + Django的人脸识别系统</a> <span class="text-muted">DXSsssss</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/DRF/1.htm">DRF</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB/1.htm">人脸识别</a> <div>最近在研究机器学习，刚好最近看了vue+Djangodrf的一些课程，学以致用，做了一个人脸识别系统。项目前端使用Vue框架，用到了elementui组件，写起来真是方便。比之前传统的dtl方便了太多。后端使用了drf，识别知识刚开始打算使用opencv+tensorflow,但是发现吧识别以后的结果返回到浏览器当中时使用opencv比较麻烦（主要是我太菜，想不到比较好的方法），因此最终使用了tf</div> </li> <li><a href="/article/1834528271094607872.htm" title="RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO" target="_blank">RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO</a> <span class="text-muted">PhoenixAI8</span> <a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a><a class="tag" taget="_blank" href="/search/Milvus/1.htm">Milvus</a><a class="tag" taget="_blank" href="/search/Chroma/1.htm">Chroma</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%8F%8A%E5%AE%9E%E8%B7%B5/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/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/socketio/1.htm">socketio</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a> <div>目录背景技术理念RAG结合点实时数据更新与推送实时查询与响应安装使用完整案例说明后端python代码代码解释前端html代码JS代码代码解释总结背景构建RAG系统或别的系统时，如果后端采用的全Python，或者说是以python为主的系统，是很常见的一个选择，因为毕竟python对LLM，图片，乃至其他video等resource的model都有较完善的支撑，为了快速开发出原型，甚至之后的商用，往</div> </li> <li><a href="/article/1834504454880194560.htm" title="ref 和 reactive 区别" target="_blank">ref 和 reactive 区别</a> <span class="text-muted">有一个好名字</span> <a class="tag" taget="_blank" href="/search/Vue/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前言ref和reactive是Vue3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的</div> </li> <li><a href="/article/1834504328082190336.htm" title="HTML5（六）canvas 矩形、路径、画板功能" target="_blank">HTML5（六）canvas 矩形、路径、画板功能</a> <span class="text-muted">祝名</span> <div>一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功</div> </li> <li><a href="/article/1834503950427058176.htm" title="【前端】vue+html+js 实现table表格展示，以及分页按钮添加" target="_blank">【前端】vue+html+js 实现table表格展示，以及分页按钮添加</a> <span class="text-muted">Loong_DQX</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/vue.js/1.htm">vue.js</a> <div>一.问题描述数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。二.代码写法思路：按照上述图示思路，需要有两个数据列表，一个存储的是所有的列表数据，一个存储的是展示的数据列表，程序开始后先选择数据头部的几条数据。因此也会需要一个当前第几页的参数。2.1代码展示html部分v-for展示列表，以及两个按钮对当前页面进行选择。{{item.name}}上一页{{currentPage}</div> </li> <li><a href="/article/1834480753681985536.htm" title="cross-plateform 跨平台应用程序-06-uni-app 介绍" target="_blank">cross-plateform 跨平台应用程序-06-uni-app 介绍</a> <span class="text-muted">知识分享官</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js</div> </li> <li><a href="/article/1834479871229784064.htm" title="后端Controller获取成功，但是前端报错404" target="_blank">后端Controller获取成功，但是前端报错404</a> <span class="text-muted">有一个好名字</span> <a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</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> <div>问题描述今天要做一个查看详情功能，debug时候能够成功进入到对应的Controller方法，Contorller方法里面也能得到对应的数据，但是前端页面一直报错404，显示对应的Controller方法路径找不到。解决Controller方法里面返回的是一个对象，但是我没有在该方法上加@ResponseBody注解。</div> </li> <li><a href="/article/1834466377218486272.htm" title="数仓开发之DWD层完整使用 (第五章)" target="_blank">数仓开发之DWD层完整使用 (第五章)</a> <span class="text-muted">小坏讲微服务</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>数仓开发之DWD层完整使用一、流量域未精加工的事务事实表1、主要任务1）数据清洗（ETL）2）新老访客状态标记修复3）分流2、思路1）数据清洗（ETL）2）新老访客状态标记修复（1）前端埋点新老访客状态标记设置规则（2）新老访客状态标记修复思路3）利用侧输出流实现数据拆分（1）埋点日志结构分析（2）分流日志分类（3）分流思路3、图解4、代码1）在KafkaUtil工具类中补充getKafkaPro</div> </li> <li><a href="/article/1834462469813268480.htm" title="Python基础知识进阶之正则表达式_头歌python正则表达式进阶" target="_blank">Python基础知识进阶之正则表达式_头歌python正则表达式进阶</a> <span class="text-muted">前端陈萨龙</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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>最后硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是</div> </li> <li><a href="/article/1834461068588576768.htm" title="当背景为两种颜色交替出现时？用重复性渐变实现" target="_blank">当背景为两种颜色交替出现时？用重复性渐变实现</a> <span class="text-muted">痛心凉</span> <div>重复性渐变cssdiv{background-image:linear-gradient(0deg,rgba(255,255,255,.2)50%,transparent50%,transparent);background-size:37px37px;background-color:#EBEBEB;//按需要改动背景色}</div> </li> <li><a href="/article/1834436261545340928.htm" title="如何有效防止重复提交表单" target="_blank">如何有效防止重复提交表单</a> <span class="text-muted">德墨忒尔</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>如何有效防止重复提交表单在企业级项目中，防止重复提交是一个常见且重要的问题，尤其是在处理订单、支付等敏感操作时。重复提交不仅会影响用户体验，还可能引发严重的业务问题，如订单重复、支付异常等。本文将从多个角度讨论如何防止重复提交，并介绍几种在实际项目中广泛应用的技术方法。1.前端层面的防重策略前端是用户提交表单的入口，常见的防重策略是在这里进行表单的状态控制，通过按钮状态的变化来防止重复提交。以下是</div> </li> <li><a href="/article/1834428954291826688.htm" title="HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石" target="_blank">HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石</a> <span class="text-muted">一杯梅子酱</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>引言：在Web开发中，HTML、CSS和JavaScript是三个不可或缺的技术，它们共同构成了前端开发的核心。本文旨在全面解析这三个技术的关键知识点，探讨它们之间的联系，并通过实际案例加深理解，最后分享一些宝贵的经验总结。一、HTML：内容的骨架1.基本结构标签的使用：,,文本内容：,至链接与图像：,列表：,,表格：,,,表单：,,,,2.语义化标签,,,,,3.案例创建一个简单的网页：Html</div> </li> <li><a href="/article/1834424918419271680.htm" title="vue+threeJS示例（001）: 不断翻转的立体箱体" target="_blank">vue+threeJS示例（001）: 不断翻转的立体箱体</a> <span class="text-muted">还是大剑师兰特</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/ThreeJS%E7%BB%BC%E5%90%88%E6%95%99%E7%A8%8B200%2B/1.htm">ThreeJS综合教程200+</a><a class="tag" taget="_blank" href="/search/threejs%E5%85%A5%E9%97%A8/1.htm">threejs入门</a><a class="tag" taget="_blank" href="/search/threejs%E6%95%99%E7%A8%8B/1.htm">threejs教程</a><a class="tag" taget="_blank" href="/search/threejs%E7%A4%BA%E4%BE%8B/1.htm">threejs示例</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%91%E5%B8%88/1.htm">大剑师</a> <div>作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示</div> </li> <li><a href="/article/1834413199424843776.htm" title="【前端echarts】echarts双饼图与easyui列表联动" target="_blank">【前端echarts】echarts双饼图与easyui列表联动</a> <span class="text-muted">时光匆匆岁月荏苒,转眼我们已不是当年</span> <a class="tag" taget="_blank" href="/search/EasyUI/1.htm">EasyUI</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a> <div>echarts双饼图与easyui列表联动包括饼图与列表页联动，基本上无bugecharts双饼图与easyui列表联动-->-->$(function(){//定义参数varpieOptionDataList=[{titleText:"用户",seriesId:"user",seriesDataValue:"userRatio",seriesDataName:"userName",},{titl</div> </li> <li><a href="/article/1834405762600890368.htm" title="xwiki html和css,MediaWiki vs. XWiki" target="_blank">xwiki html和css,MediaWiki vs. XWiki</a> <span class="text-muted">Ake阿科</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E8%AF%AD%E8%A8%80/1.htm">多语言</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF/1.htm">信息技术</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>140Afar,Abkhazian,Afrikaans,Amharic,Arabic,Assamese,Aymara,Azerbaijani,Bashkir,Byelorussian,Bulgarian,Bihari,Bislama,Bengali;Bangla,Tibetan,Breton,Catalan,Corsican,Czech,Welsh,Danish,German,Bhutani,Gr</div> </li> <li><a href="/article/1834371223065292800.htm" title="前端工程化详解 & 包管理工具" target="_blank">前端工程化详解 & 包管理工具</a> <span class="text-muted">lin-lins</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E6%88%98/1.htm">工程化实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端工程化详解&包管理工具1、工程化体系介绍1.1、什么是前端工程化1.2、前端工程化发展2、脚手架能力2.1准备阶段2.2开发阶段2.3发布流程3、npm能力3.1剖析package.json3.1.1必备属性3.1.2描述信息3.1.3依赖配置3.1.4协议3.1.5目录&文件相关3.1.5.1程序入口3.1.5.2命令行工具入口3.1.5.3发布文件配置3.1.5.4man3.1.5.5规范</div> </li> <li><a href="/article/1834370970375254016.htm" title="3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）" target="_blank">3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）</a> <span class="text-muted">lin-lins</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>前端异步编程规范Promise介绍手写Promise（resolve，reject）手写Promise（then）Promise相关API实现allraceallSettledanyasync/await和Promise的关系async/await的使用Promise介绍Promise是一个类，可以翻译为承诺、期约Promise就像一个容器，里面存放着未来才会结束，返回结果的容器，返回的结果只需要</div> </li> <li><a href="/article/1834360380466491392.htm" title="最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求" target="_blank">最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求</a> <span class="text-muted">2401_84433769</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>自学几个月前端，为什么感觉什么都没学到？？这种现象在很多的初学者和自学前端的同学中是比较的常见的。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。这就会给人一个错误的信息就是，我把资料上的学</div> </li> <li><a href="/article/1834359623633694720.htm" title="构建工具webpack&vite" target="_blank">构建工具webpack&vite</a> <span class="text-muted">2301_80480494</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>1.webpack使用步骤:1.初始化项目yarninit-y（也可以是npm其他包管理工具）2.安装依赖webpackwebpack-cli：yarnadd-Dwebpackwebpack-cli（-D是只用于开发时候加）3.在项目中创建src目录，然后编写代码4.yarnwebpack打包项目代码观察dist目录*注意：1.src里的是源码用的是前端规范(比如导出：exportdefault)</div> </li> <li><a href="/article/1834357354934661120.htm" title="Node.js 、Yarn、npm、Vue、Vite、Webpack 前端一套流程" target="_blank">Node.js 、Yarn、npm、Vue、Vite、Webpack 前端一套流程</a> <span class="text-muted">叫我DPT</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.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/npm/1.htm">npm</a> <div>前端项目的搭建Vue、Vite、Webpack、Yarn、Node.js和npm的概念解释，以及它们之间的关系：Node.js：一个开源、跨平台的JavaScript运行时环境，可以让JavaScript代码在服务器端运行。它提供了一个事件驱动、非阻塞的I/O模型，使得它非常适合构建高性能的网络应用。Node.js基于ChromeV8引擎构建，能够执行JavaScript代码。npm（NodePa</div> </li> <li><a href="/article/1834357354271961088.htm" title="制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格" target="_blank">制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格</a> <span class="text-muted">Passion不晚</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/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>–你是否觉得自己的网站应该看起来更炫酷？今天我将教你如何使用HTML和CSS3制作一个拥有炫酷动画和现代设计风格的个人网页，让它在任何设备上看起来都无敌酷炫！哈哈哈哈哈哈哈哈,我感觉自己有点中二哈哈哈哈~目录炫酷设计理念构建HTML结构CSS3炫酷美化炫酷效果预览1.炫酷设计理念在炫酷网页中，我们将使用：全屏背景渐变：让页面背景充满动感的色彩变化。文字动画：为标题和内容添加动态效果，让它们“飞”入</div> </li> <li><a href="/article/1834333009592020992.htm" title="【前端UI框架】VUE ElementUI 离线文档 可不联网打开" target="_blank">【前端UI框架】VUE ElementUI 离线文档 可不联网打开</a> <span class="text-muted">我是Superman丶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>【前端UI框架】VUEElementUI离线文档可不联网打开Element-Theworld'smostpopularVueUIframeworkElement-Theworld'smostpopularVueUIframework离线文档下载地址https://download.csdn.net/download/G971005287W/89742895文档制作第一步:克隆源代码Gitee地址:</div> </li> <li><a href="/article/32.htm" title="对于规范和实现，你会混淆吗？" target="_blank">对于规范和实现，你会混淆吗？</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div> </li> <li><a href="/article/159.htm" title="android 网络" target="_blank">android 网络</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来 方便查找 , 服务器使用的是TomCat 服务器代码; servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr</div> </li> <li><a href="/article/286.htm" title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div> 1831年的时候,一年可以赚到1000英镑的人..应该很少的... 要成为一个科学家,没有足够的资金支持,很多实验都无法完成 但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div> </li> <li><a href="/article/413.htm" title="随机数的产生" target="_blank">随机数的产生</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a> <div>c++中阐述随机数的方法有两种： 一是产生假随机数（不管操作多少次，所产生的数都不会改变） 这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 //默认种子 for (int i = 0; i < 5; i++) { cout<<</div> </li> <li><a href="/article/540.htm" title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码： [php] view plain copy // Filename: functions.php <?php&nbs</div> </li> <li><a href="/article/667.htm" title="银行各系统功能简介" target="_blank">银行各系统功能简介</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>银行各系统功能简介 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系</div> </li> <li><a href="/article/794.htm" title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a> <div> 最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p</div> </li> <li><a href="/article/921.htm" title="php 数组" target="_blank">php 数组</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a> <div>1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不 是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,</div> </li> <li><a href="/article/1048.htm" title="安装python2.7" target="_blank">安装python2.7</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp /opt/soft/Python-2</div> </li> <li><a href="/article/1175.htm" title="java异常的处理探讨" target="_blank">java异常的处理探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a> <div>//java异常 /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常 b,抛出异常 c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常 */ //2，学会使用try-catch-finally来处理异常 </div> </li> <li><a href="/article/1302.htm" title="getElementsByName实例" target="_blank">getElementsByName实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x</div> </li> <li><a href="/article/1429.htm" title="探索JUnit4扩展：Runner" target="_blank">探索JUnit4扩展：Runner</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/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div> 参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。 文章地址：http://www.blogjava.net/jiangshachina/archive/20</div> </li> <li><a href="/article/1556.htm" title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 副本集的特性 1)一台主服务器(Primary),多台从服务器(Secondary) 2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 2</div> </li> <li><a href="/article/1683.htm" title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div> </li> <li><a href="/article/1810.htm" title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a> <span class="text-muted">ronin47</span> <div>nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div> </li> <li><a href="/article/1937.htm" title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>方法一：常用方法 关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=</div> </li> <li><a href="/article/2064.htm" title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline { </div> </li> <li><a href="/article/2191.htm" title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div> </li> <li><a href="/article/2318.htm" title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a> <div> 之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。 我先说说GFS &n</div> </li> <li><a href="/article/2445.htm" title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a> <div>在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property> <name>dfs.balance.bandwidthPerSec</name> <value>10485760</value> <description&g</div> </li> <li><a href="/article/2572.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得</div> </li> <li><a href="/article/2699.htm" title="Android学习之路" target="_blank">Android学习之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a> <div>转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视</div> </li> <li><a href="/article/2826.htm" title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式 </div> </li> <li><a href="/article/2953.htm" title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{ </div> </li> <li><a href="/article/3080.htm" title="自动补全" target="_blank">自动补全</a> <span class="text-muted">huyana_town</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div> </li> <li><a href="/article/3207.htm" title="jquery在线预览PDF文件，打开PDF文件" target="_blank">jquery在线预览PDF文件，打开PDF文件</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。 核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div> </li> <li><a href="/article/3334.htm" title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a> <span class="text-muted">lovelease</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a> <div> 使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div> </li> <li><a href="/article/3461.htm" title="利用按位取反（~）从复合枚举值里清除枚举值" target="_blank">利用按位取反（~）从复合枚举值里清除枚举值</a> <span class="text-muted">草料场</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以 C# 中的 System.Drawing.FontStyle 为例。 如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline; 如果需要去除 style 里的某一种效果， </div> </li> <li><a href="/article/3588.htm" title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/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/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div> 随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu</div> </li> <li><a href="/article/3715.htm" title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a> <span class="text-muted">wangzhezichuan</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>/** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul</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>
</code>元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。</p> <h4>使用场景</h4> <p><code>:placeholder-shown</code>伪类在以下场景中特别有用：</p> <ol> <li><strong>占位符样式定制</strong>：为输入框的占位符文本设置特定的样式。</li> <li><strong>表单验证反馈</strong>：在用户输入不符合要求时，通过改变占位符的样式提供反馈。</li> <li><strong>动态表单交互</strong>：根据输入框是否有占位符显示来触发特定的CSS动画或变换效果。</li> <li><strong>改善可访问性</strong>：通过样式变化帮助用户识别哪些输入是必填的。</li> </ol> <h4>基本语法</h4> <p><code>:placeholder-shown</code>伪类的语法与普通CSS选择器类似。例如，如果你想为当前输入框的占位符文本设置样式，可以这样写：</p> <pre><code class="prism language-css"><span class="token selector">input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，<code>:placeholder-shown</code>伪类被用在<code><input></code>选择器上，表示选择所有显示占位符的输入框，并为它们设置文本颜色。</p> <h4>示例：占位符文本样式定制</h4> <p>假设我们有一个登录表单，需要为用户名和密码输入框的占位符设置不同的样式：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"><span class="token selector">input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">input[type="password"]:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #cc0000<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，所有显示占位符的输入框文本将斜体显示，并且颜色较淡。对于密码输入框，占位符文本颜色被设置为红色，以提醒用户这是一个敏感字段。</p> <h4>示例：动态表单交互</h4> <p>考虑一个注册表单，其中包含一个电子邮件输入框。我们可以使用<code>:placeholder-shown</code>伪类来实现一个简单的动画效果，当用户开始输入时，占位符淡出：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"><span class="token selector">#email-input:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.5s ease-out<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#email-input:focus:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在这个例子中，当输入框获得焦点时，占位符文本将逐渐变为透明，从而给用户一种动态的交互体验。</p> <h4>注意事项</h4> <ol> <li><strong>浏览器兼容性</strong>：<code>:placeholder-shown</code>伪类是一个相对较新的CSS特性，可能不是所有浏览器都支持。在使用之前，需要检查目标浏览器的兼容性。</li> <li><strong>用户体验</strong>：在设计占位符样式时，应确保它们对用户是有帮助的，不会误导用户。</li> <li><strong>性能考虑</strong>：虽然使用<code>:placeholder-shown</code>伪类可以提供更丰富的样式效果，但过度使用动画和过渡可能会影响页面性能。</li> </ol> <h4>结论</h4> <p><code>:placeholder-shown</code>伪类为CSS开发者提供了一种新的工具，用于针对输入框中的占位符文本进行样式定制。通过本文的探讨，我们了解到了<code>:placeholder-shown</code>伪类的定义、使用场景、基本语法和示例代码。随着Web技术的不断发展，<code>:placeholder-shown</code>伪类将在提升表单输入框用户体验方面发挥越来越重要的作用。</p> <p>通过深入理解并合理应用<code>:placeholder-shown</code>伪类，开发者可以创建更加直观、友好和动态的表单输入体验。记住，合理利用CSS的每一个特性，都是提升网页设计质量的关键。</p> <hr> <p>本文提供了对<code>:placeholder-shown</code>伪类的全面介绍，包括其定义、使用场景、基本语法和示例代码。希望这篇文章能够帮助你更好地理解和运用<code>:placeholder-shown</code>伪类，为你的Web开发工作提供更多的创新思路和解决方案。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1827099705411203072"></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/1834601242836430848.htm" title="前端有关文件上传下载操作" target="_blank">前端有关文件上传下载操作</a> <span class="text-muted">发呆小天才yy</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> <div>文件上传文件上传有两种形式（传给后端的文件形式）变成blob通过formData搭载传输（二进制blob传输）转为base64直接传输(简便，但是后端需要解码，时间长)，通过fileReader搭载相关对象：files（blob的一个子类）：通过input标签读取过来的文件对象（属于前端的方法，没办法直接传给后端）blob:不可变的二进制内容，包含很多操作方法（newBlob([file])直接将</div> </li> <li><a href="/article/1834600233804328960.htm" title="springmvc 前后端日期格式的转换" target="_blank">springmvc 前后端日期格式的转换</a> <span class="text-muted">owlets_ju</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.后台Date类型返回前端String类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")它的作用是，出参时，自动把Date型对象数据转化成格式化后的字符串输出:yyyy-MM-ddHH:mm:ss示例：@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")priva</div> </li> <li><a href="/article/1834590657881141248.htm" title="前后端时间转换的那些常见问题及处理方法" target="_blank">前后端时间转换的那些常见问题及处理方法</a> <span class="text-muted">繁依Fanyi</span> <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见</div> </li> <li><a href="/article/1834570718755516416.htm" title="记一次生产环境大面积404问题！" target="_blank">记一次生产环境大面积404问题！</a> <span class="text-muted">冰河团队</span> <div>写在前面发布到线上的接口服务一直好端端的，今天突然运营反馈说很多功能无法正常使用。经过排查，发现前端调用后端接口时，部分接口出现404的现象。今天，我到公司比较晚，肯定是哪个小伙伴昨晚下班，走出办公室前没有祈祷服务器不要出问题。要把这个人揪出来，吊在服务器上——祭天！文章已收录到：https://github.com/sunshinelyz/technology-binghehttps://git</div> </li> <li><a href="/article/1834567911600123904.htm" title="2019最值得投资的餐饮品类为什么是“它”！" target="_blank">2019最值得投资的餐饮品类为什么是“它”！</a> <span class="text-muted">輕描淡寫_3722</span> <div>相信大家都听过一句话：什么火，什么就流行！最近餐饮品类有一单品，独树一帜，走在潮流前端，被众多网友可尽的玩弄了一把！从最初火遍全球的具象产物小黄鸭，到如今摸不到的流行话语，“鸭”是真的火了！今天也要开心鸭、冲鸭、我的马鸭......一系列的流行语，高强度的曝光量，“鸭”火得一塌糊涂。而随着“鸭”的火爆，很多投资者也在“鸭”身上看到了商机，想借着这股还未褪去的“东风”，从事与“鸭”相关的产业，老鸭汤</div> </li> <li><a href="/article/1834562560750350336.htm" title="使用Spring Boot开发一个准妈妈交流平台" target="_blank">使用Spring Boot开发一个准妈妈交流平台</a> <span class="text-muted">BABA8891</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>开发一个准妈妈交流平台涉及到许多不同的功能和组件。以下是一个使用SpringBoot来构建这样一个平台：1.项目规划需求分析：确定平台的核心功能，如用户注册、登录、论坛发帖、评论、消息通知等。系统设计：设计系统架构，包括前端、后端、数据库和可能的第三方服务集成。2.技术选型前端：可以选择React、Vue或Angular等现代JavaScript框架。后端：使用SpringBoot作为后端框架。数</div> </li> <li><a href="/article/1834553486256205824.htm" title="Rust：重塑编程世界的利器，对前端开发的深远影响" target="_blank">Rust：重塑编程世界的利器，对前端开发的深远影响</a> <span class="text-muted">大鱼前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言：在编程语言的海洋中，有一颗璀璨的明星正在冉冉升起——那就是Rust。它不仅在后端领域展现出强大的实力，更在前端领域带来了颠覆性的变革。本文将带你深入了解Rust的魅力，探讨其独特的优势，以及Rust如何影响前端开发，并通过案例分析展示Rust在前端应用的实力。一、Rust：编程语言的新星Rust，这门由Mozilla主导开发的系统编程语言，自诞生之初就以其独特的设计理念和出色的性能赢得了众多</div> </li> <li><a href="/article/1834550838689886208.htm" title="Rust 编程语言构建出跨平台应用开源框架 Dioxus" target="_blank">Rust 编程语言构建出跨平台应用开源框架 Dioxus</a> <span class="text-muted">百态老人</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>是的，Rust编程语言确实构建了一个跨平台应用开源框架Dioxus。Dioxus是一个可移植、高性能的框架，用于在Rust中构建跨平台的用户界面。它支持多种平台的应用开发，包括网页前端、桌面应用、静态网站、移动端应用和TUI程序等。Dioxus的核心特点之一是其声明式编程风格，类似于React框架，但提供了更高效的性能和更好的开发者体验。此外，Dioxus还具有原生桌面支持、强大的状态管理、快速异</div> </li> <li><a href="/article/1834550457662533632.htm" title="Vue + Django的人脸识别系统" target="_blank">Vue + Django的人脸识别系统</a> <span class="text-muted">DXSsssss</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/DRF/1.htm">DRF</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB/1.htm">人脸识别</a> <div>最近在研究机器学习，刚好最近看了vue+Djangodrf的一些课程，学以致用，做了一个人脸识别系统。项目前端使用Vue框架，用到了elementui组件，写起来真是方便。比之前传统的dtl方便了太多。后端使用了drf，识别知识刚开始打算使用opencv+tensorflow,但是发现吧识别以后的结果返回到浏览器当中时使用opencv比较麻烦（主要是我太菜，想不到比较好的方法），因此最终使用了tf</div> </li> <li><a href="/article/1834528271094607872.htm" title="RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO" target="_blank">RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO</a> <span class="text-muted">PhoenixAI8</span> <a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a><a class="tag" taget="_blank" href="/search/Milvus/1.htm">Milvus</a><a class="tag" taget="_blank" href="/search/Chroma/1.htm">Chroma</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%8F%8A%E5%AE%9E%E8%B7%B5/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/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/socketio/1.htm">socketio</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a> <div>目录背景技术理念RAG结合点实时数据更新与推送实时查询与响应安装使用完整案例说明后端python代码代码解释前端html代码JS代码代码解释总结背景构建RAG系统或别的系统时，如果后端采用的全Python，或者说是以python为主的系统，是很常见的一个选择，因为毕竟python对LLM，图片，乃至其他video等resource的model都有较完善的支撑，为了快速开发出原型，甚至之后的商用，往</div> </li> <li><a href="/article/1834504454880194560.htm" title="ref 和 reactive 区别" target="_blank">ref 和 reactive 区别</a> <span class="text-muted">有一个好名字</span> <a class="tag" taget="_blank" href="/search/Vue/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前言ref和reactive是Vue3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的</div> </li> <li><a href="/article/1834504328082190336.htm" title="HTML5（六）canvas 矩形、路径、画板功能" target="_blank">HTML5（六）canvas 矩形、路径、画板功能</a> <span class="text-muted">祝名</span> <div>一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功</div> </li> <li><a href="/article/1834503950427058176.htm" title="【前端】vue+html+js 实现table表格展示，以及分页按钮添加" target="_blank">【前端】vue+html+js 实现table表格展示，以及分页按钮添加</a> <span class="text-muted">Loong_DQX</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/vue.js/1.htm">vue.js</a> <div>一.问题描述数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。二.代码写法思路：按照上述图示思路，需要有两个数据列表，一个存储的是所有的列表数据，一个存储的是展示的数据列表，程序开始后先选择数据头部的几条数据。因此也会需要一个当前第几页的参数。2.1代码展示html部分v-for展示列表，以及两个按钮对当前页面进行选择。{{item.name}}上一页{{currentPage}</div> </li> <li><a href="/article/1834480753681985536.htm" title="cross-plateform 跨平台应用程序-06-uni-app 介绍" target="_blank">cross-plateform 跨平台应用程序-06-uni-app 介绍</a> <span class="text-muted">知识分享官</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js</div> </li> <li><a href="/article/1834479871229784064.htm" title="后端Controller获取成功，但是前端报错404" target="_blank">后端Controller获取成功，但是前端报错404</a> <span class="text-muted">有一个好名字</span> <a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</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> <div>问题描述今天要做一个查看详情功能，debug时候能够成功进入到对应的Controller方法，Contorller方法里面也能得到对应的数据，但是前端页面一直报错404，显示对应的Controller方法路径找不到。解决Controller方法里面返回的是一个对象，但是我没有在该方法上加@ResponseBody注解。</div> </li> <li><a href="/article/1834466377218486272.htm" title="数仓开发之DWD层完整使用 (第五章)" target="_blank">数仓开发之DWD层完整使用 (第五章)</a> <span class="text-muted">小坏讲微服务</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>数仓开发之DWD层完整使用一、流量域未精加工的事务事实表1、主要任务1）数据清洗（ETL）2）新老访客状态标记修复3）分流2、思路1）数据清洗（ETL）2）新老访客状态标记修复（1）前端埋点新老访客状态标记设置规则（2）新老访客状态标记修复思路3）利用侧输出流实现数据拆分（1）埋点日志结构分析（2）分流日志分类（3）分流思路3、图解4、代码1）在KafkaUtil工具类中补充getKafkaPro</div> </li> <li><a href="/article/1834462469813268480.htm" title="Python基础知识进阶之正则表达式_头歌python正则表达式进阶" target="_blank">Python基础知识进阶之正则表达式_头歌python正则表达式进阶</a> <span class="text-muted">前端陈萨龙</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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>最后硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是</div> </li> <li><a href="/article/1834461068588576768.htm" title="当背景为两种颜色交替出现时？用重复性渐变实现" target="_blank">当背景为两种颜色交替出现时？用重复性渐变实现</a> <span class="text-muted">痛心凉</span> <div>重复性渐变cssdiv{background-image:linear-gradient(0deg,rgba(255,255,255,.2)50%,transparent50%,transparent);background-size:37px37px;background-color:#EBEBEB;//按需要改动背景色}</div> </li> <li><a href="/article/1834436261545340928.htm" title="如何有效防止重复提交表单" target="_blank">如何有效防止重复提交表单</a> <span class="text-muted">德墨忒尔</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>如何有效防止重复提交表单在企业级项目中，防止重复提交是一个常见且重要的问题，尤其是在处理订单、支付等敏感操作时。重复提交不仅会影响用户体验，还可能引发严重的业务问题，如订单重复、支付异常等。本文将从多个角度讨论如何防止重复提交，并介绍几种在实际项目中广泛应用的技术方法。1.前端层面的防重策略前端是用户提交表单的入口，常见的防重策略是在这里进行表单的状态控制，通过按钮状态的变化来防止重复提交。以下是</div> </li> <li><a href="/article/1834428954291826688.htm" title="HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石" target="_blank">HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石</a> <span class="text-muted">一杯梅子酱</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>引言：在Web开发中，HTML、CSS和JavaScript是三个不可或缺的技术，它们共同构成了前端开发的核心。本文旨在全面解析这三个技术的关键知识点，探讨它们之间的联系，并通过实际案例加深理解，最后分享一些宝贵的经验总结。一、HTML：内容的骨架1.基本结构标签的使用：,,文本内容：,至链接与图像：,列表：,,表格：,,,表单：,,,,2.语义化标签,,,,,3.案例创建一个简单的网页：Html</div> </li> <li><a href="/article/1834424918419271680.htm" title="vue+threeJS示例（001）: 不断翻转的立体箱体" target="_blank">vue+threeJS示例（001）: 不断翻转的立体箱体</a> <span class="text-muted">还是大剑师兰特</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/ThreeJS%E7%BB%BC%E5%90%88%E6%95%99%E7%A8%8B200%2B/1.htm">ThreeJS综合教程200+</a><a class="tag" taget="_blank" href="/search/threejs%E5%85%A5%E9%97%A8/1.htm">threejs入门</a><a class="tag" taget="_blank" href="/search/threejs%E6%95%99%E7%A8%8B/1.htm">threejs教程</a><a class="tag" taget="_blank" href="/search/threejs%E7%A4%BA%E4%BE%8B/1.htm">threejs示例</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%91%E5%B8%88/1.htm">大剑师</a> <div>作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示</div> </li> <li><a href="/article/1834413199424843776.htm" title="【前端echarts】echarts双饼图与easyui列表联动" target="_blank">【前端echarts】echarts双饼图与easyui列表联动</a> <span class="text-muted">时光匆匆岁月荏苒,转眼我们已不是当年</span> <a class="tag" taget="_blank" href="/search/EasyUI/1.htm">EasyUI</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a> <div>echarts双饼图与easyui列表联动包括饼图与列表页联动，基本上无bugecharts双饼图与easyui列表联动-->-->$(function(){//定义参数varpieOptionDataList=[{titleText:"用户",seriesId:"user",seriesDataValue:"userRatio",seriesDataName:"userName",},{titl</div> </li> <li><a href="/article/1834405762600890368.htm" title="xwiki html和css,MediaWiki vs. XWiki" target="_blank">xwiki html和css,MediaWiki vs. XWiki</a> <span class="text-muted">Ake阿科</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E8%AF%AD%E8%A8%80/1.htm">多语言</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF/1.htm">信息技术</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>140Afar,Abkhazian,Afrikaans,Amharic,Arabic,Assamese,Aymara,Azerbaijani,Bashkir,Byelorussian,Bulgarian,Bihari,Bislama,Bengali;Bangla,Tibetan,Breton,Catalan,Corsican,Czech,Welsh,Danish,German,Bhutani,Gr</div> </li> <li><a href="/article/1834371223065292800.htm" title="前端工程化详解 & 包管理工具" target="_blank">前端工程化详解 & 包管理工具</a> <span class="text-muted">lin-lins</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%AE%9E%E6%88%98/1.htm">工程化实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端工程化详解&包管理工具1、工程化体系介绍1.1、什么是前端工程化1.2、前端工程化发展2、脚手架能力2.1准备阶段2.2开发阶段2.3发布流程3、npm能力3.1剖析package.json3.1.1必备属性3.1.2描述信息3.1.3依赖配置3.1.4协议3.1.5目录&文件相关3.1.5.1程序入口3.1.5.2命令行工具入口3.1.5.3发布文件配置3.1.5.4man3.1.5.5规范</div> </li> <li><a href="/article/1834370970375254016.htm" title="3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）" target="_blank">3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）</a> <span class="text-muted">lin-lins</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>前端异步编程规范Promise介绍手写Promise（resolve，reject）手写Promise（then）Promise相关API实现allraceallSettledanyasync/await和Promise的关系async/await的使用Promise介绍Promise是一个类，可以翻译为承诺、期约Promise就像一个容器，里面存放着未来才会结束，返回结果的容器，返回的结果只需要</div> </li> <li><a href="/article/1834360380466491392.htm" title="最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求" target="_blank">最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求</a> <span class="text-muted">2401_84433769</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>自学几个月前端，为什么感觉什么都没学到？？这种现象在很多的初学者和自学前端的同学中是比较的常见的。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。这就会给人一个错误的信息就是，我把资料上的学</div> </li> <li><a href="/article/1834359623633694720.htm" title="构建工具webpack&vite" target="_blank">构建工具webpack&vite</a> <span class="text-muted">2301_80480494</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>1.webpack使用步骤:1.初始化项目yarninit-y（也可以是npm其他包管理工具）2.安装依赖webpackwebpack-cli：yarnadd-Dwebpackwebpack-cli（-D是只用于开发时候加）3.在项目中创建src目录，然后编写代码4.yarnwebpack打包项目代码观察dist目录*注意：1.src里的是源码用的是前端规范(比如导出：exportdefault)</div> </li> <li><a href="/article/1834357354934661120.htm" title="Node.js 、Yarn、npm、Vue、Vite、Webpack 前端一套流程" target="_blank">Node.js 、Yarn、npm、Vue、Vite、Webpack 前端一套流程</a> <span class="text-muted">叫我DPT</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.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/npm/1.htm">npm</a> <div>前端项目的搭建Vue、Vite、Webpack、Yarn、Node.js和npm的概念解释，以及它们之间的关系：Node.js：一个开源、跨平台的JavaScript运行时环境，可以让JavaScript代码在服务器端运行。它提供了一个事件驱动、非阻塞的I/O模型，使得它非常适合构建高性能的网络应用。Node.js基于ChromeV8引擎构建，能够执行JavaScript代码。npm（NodePa</div> </li> <li><a href="/article/1834357354271961088.htm" title="制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格" target="_blank">制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格</a> <span class="text-muted">Passion不晚</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/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>–你是否觉得自己的网站应该看起来更炫酷？今天我将教你如何使用HTML和CSS3制作一个拥有炫酷动画和现代设计风格的个人网页，让它在任何设备上看起来都无敌酷炫！哈哈哈哈哈哈哈哈,我感觉自己有点中二哈哈哈哈~目录炫酷设计理念构建HTML结构CSS3炫酷美化炫酷效果预览1.炫酷设计理念在炫酷网页中，我们将使用：全屏背景渐变：让页面背景充满动感的色彩变化。文字动画：为标题和内容添加动态效果，让它们“飞”入</div> </li> <li><a href="/article/1834333009592020992.htm" title="【前端UI框架】VUE ElementUI 离线文档 可不联网打开" target="_blank">【前端UI框架】VUE ElementUI 离线文档 可不联网打开</a> <span class="text-muted">我是Superman丶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>【前端UI框架】VUEElementUI离线文档可不联网打开Element-Theworld'smostpopularVueUIframeworkElement-Theworld'smostpopularVueUIframework离线文档下载地址https://download.csdn.net/download/G971005287W/89742895文档制作第一步:克隆源代码Gitee地址:</div> </li> <li><a href="/article/32.htm" title="对于规范和实现，你会混淆吗？" target="_blank">对于规范和实现，你会混淆吗？</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div> </li> <li><a href="/article/159.htm" title="android 网络" target="_blank">android 网络</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来 方便查找 , 服务器使用的是TomCat 服务器代码; servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr</div> </li> <li><a href="/article/286.htm" title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div> 1831年的时候,一年可以赚到1000英镑的人..应该很少的... 要成为一个科学家,没有足够的资金支持,很多实验都无法完成 但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div> </li> <li><a href="/article/413.htm" title="随机数的产生" target="_blank">随机数的产生</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a> <div>c++中阐述随机数的方法有两种： 一是产生假随机数（不管操作多少次，所产生的数都不会改变） 这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 //默认种子 for (int i = 0; i < 5; i++) { cout<<</div> </li> <li><a href="/article/540.htm" title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码： [php] view plain copy // Filename: functions.php <?php&nbs</div> </li> <li><a href="/article/667.htm" title="银行各系统功能简介" target="_blank">银行各系统功能简介</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>银行各系统功能简介 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系</div> </li> <li><a href="/article/794.htm" title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a> <div> 最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p</div> </li> <li><a href="/article/921.htm" title="php 数组" target="_blank">php 数组</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a> <div>1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不 是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,</div> </li> <li><a href="/article/1048.htm" title="安装python2.7" target="_blank">安装python2.7</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp /opt/soft/Python-2</div> </li> <li><a href="/article/1175.htm" title="java异常的处理探讨" target="_blank">java异常的处理探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a> <div>//java异常 /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常 b,抛出异常 c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常 */ //2，学会使用try-catch-finally来处理异常 </div> </li> <li><a href="/article/1302.htm" title="getElementsByName实例" target="_blank">getElementsByName实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x</div> </li> <li><a href="/article/1429.htm" title="探索JUnit4扩展：Runner" target="_blank">探索JUnit4扩展：Runner</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/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div> 参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。 文章地址：http://www.blogjava.net/jiangshachina/archive/20</div> </li> <li><a href="/article/1556.htm" title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 副本集的特性 1)一台主服务器(Primary),多台从服务器(Secondary) 2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 2</div> </li> <li><a href="/article/1683.htm" title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div> </li> <li><a href="/article/1810.htm" title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a> <span class="text-muted">ronin47</span> <div>nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div> </li> <li><a href="/article/1937.htm" title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>方法一：常用方法 关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=</div> </li> <li><a href="/article/2064.htm" title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline { </div> </li> <li><a href="/article/2191.htm" title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div> </li> <li><a href="/article/2318.htm" title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a> <div> 之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。 我先说说GFS &n</div> </li> <li><a href="/article/2445.htm" title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a> <div>在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property> <name>dfs.balance.bandwidthPerSec</name> <value>10485760</value> <description&g</div> </li> <li><a href="/article/2572.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得</div> </li> <li><a href="/article/2699.htm" title="Android学习之路" target="_blank">Android学习之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a> <div>转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视</div> </li> <li><a href="/article/2826.htm" title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式 </div> </li> <li><a href="/article/2953.htm" title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{ </div> </li> <li><a href="/article/3080.htm" title="自动补全" target="_blank">自动补全</a> <span class="text-muted">huyana_town</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div> </li> <li><a href="/article/3207.htm" title="jquery在线预览PDF文件，打开PDF文件" target="_blank">jquery在线预览PDF文件，打开PDF文件</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。 核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div> </li> <li><a href="/article/3334.htm" title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a> <span class="text-muted">lovelease</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a> <div> 使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div> </li> <li><a href="/article/3461.htm" title="利用按位取反（~）从复合枚举值里清除枚举值" target="_blank">利用按位取反（~）从复合枚举值里清除枚举值</a> <span class="text-muted">草料场</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以 C# 中的 System.Drawing.FontStyle 为例。 如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline; 如果需要去除 style 里的某一种效果， </div> </li> <li><a href="/article/3588.htm" title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/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/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div> 随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu</div> </li> <li><a href="/article/3715.htm" title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a> <span class="text-muted">wangzhezichuan</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>/** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul</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>
