css 盒子布局的问题

在微信小程序之中，对盒子布局的时候，我们要注意布局大小不要超过页面的宽度，否则会出现布局混乱的问题

这是.wxml内容：

 
        
          
          复制密文
        
                <button class="clickEncryptBtn" bindtap="clickEncrypted">点击加密</button>
        <textarea placeholder="{{encrypedPlaceholderEnc}}"  maxlength='-1' value="{{encryptedText}}" />
 </view></code></pre> 
  <br> 这是.wxss 
  <p></p> 
  <pre><code class="language-html">.encryption{
 <strong> box-sizing: border-box;</strong>
  display: block;
  padding:0px;
  <strong>margin-left:20px;
  margin-right:20px;
  width:100%;</strong>
  min-width: 310px;</code></pre> 
  <pre><code class="language-html">}</code></pre> 
  <br> 如上所述，width:100%，margin-left和margin-right是20px，这样子肯定会把盒子撑大，所以布局就显示混乱。改成下面这样就OK了 
  <p></p> 
  <pre><code class="language-html">  <strong>margin-left:auto;
  margin-right:auto;
  width:90%;</strong></code></pre> 
  <br> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1306406219845505024"></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,css,盒子模型)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1901959215161864192.htm"
                           title="前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个" target="_blank">前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个</a>
                        <span class="text-muted">大莲芒</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在前端处理批量请求时，确保只弹出一个toast通知，可以通过以下步骤实现：使用状态管理首先，您可以使用状态管理工具（例如React的useState或Redux）来跟踪请求的状态。创建一个Toast组件如果还没有创建toast组件，可以简单实现一个。以下是一个基本的Reacttoast组件示例importReactfrom'react';import'./Toast.css';//添加样式cons</div>
                    </li>
                    <li><a href="/article/1901946108742004736.htm"
                           title="CSS 溢出问题及解决方案：实用案例与技巧" target="_blank">CSS 溢出问题及解决方案：实用案例与技巧</a>
                        <span class="text-muted">Judy1623</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在网页开发中，CSS的布局和样式起着至关重要的作用，但经常会遇到一个棘手的问题——溢出问题。溢出是指元素内的内容超出了其设定的容器大小，这不仅会影响页面的美观，还可能干扰用户体验。本文将详细探讨CSS溢出问题的案例，并提供常见的解决方法，同时给出相应的代码示例以供验证。visible：默认值，内容不会被剪裁，也不会显示滚动条。hidden：内容会被剪裁，并且不会显示滚动条。scroll：内容会被剪</div>
                    </li>
                    <li><a href="/article/1901897696445263872.htm"
                           title="【css酷炫效果】纯CSS实现3D翻转卡片动画" target="_blank">【css酷炫效果】纯CSS实现3D翻转卡片动画</a>
                        <span class="text-muted">冰夏之夜影</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe</div>
                    </li>
                    <li><a href="/article/1901888236280672256.htm"
                           title="CSS语言的数论算法" target="_blank">CSS语言的数论算法</a>
                        <span class="text-muted">宇瞳月</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论</div>
                    </li>
                    <li><a href="/article/1901885085544673280.htm"
                           title="【开原宝藏】30天学会CSS - DAY1 第一课" target="_blank">【开原宝藏】30天学会CSS - DAY1 第一课</a>
                        <span class="text-muted">hikktn</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AE%9D%E8%97%8F/1.htm">开源宝藏</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/</div>
                    </li>
                    <li><a href="/article/1901879406662578176.htm"
                           title="GTP生成UI代码" target="_blank">GTP生成UI代码</a>
                        <span class="text-muted">酒江</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a>
                        <div>使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能</div>
                    </li>
                    <li><a href="/article/1901864143464493056.htm"
                           title="下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？" target="_blank">下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？</a>
                        <span class="text-muted">liangshanbo1215</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/1.htm">前端性能</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载</div>
                    </li>
                    <li><a href="/article/1901842823418802176.htm"
                           title="Flexbox 布局详细笔记" target="_blank">Flexbox 布局详细笔记</a>
                        <span class="text-muted">.毅晨.</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx</div>
                    </li>
                    <li><a href="/article/1901781766990000128.htm"
                           title="基于 Vue 和 Element Plus 的时间范围控制与数据展示" target="_blank">基于 Vue 和 Element Plus 的时间范围控制与数据展示</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/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>文章目录1.核心功能2.实现效果3.代码实现️3.1HTML部分3.2JavaScript部分3.3CSS部分本文将重点讲解如何在Vue项目中使用ElementPlus的el-date-picker组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。！1.核心功能时间范围选择：使用el-date-picker实现日期范围选择。快速切换：通过“日”、“月”、“年”按钮快速设置时间</div>
                    </li>
                    <li><a href="/article/1901765497108623360.htm"
                           title="前端学习路线：从零基础到初级工程师的完整指南（2025最新版）" target="_blank">前端学习路线：从零基础到初级工程师的完整指南（2025最新版）</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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体</div>
                    </li>
                    <li><a href="/article/1901741152277688320.htm"
                           title="uniapp-x 子组件样式覆盖" target="_blank">uniapp-x 子组件样式覆盖</a>
                        <span class="text-muted">陆康永</span>
<a class="tag" taget="_blank" href="/search/uniapp-x/1.htm">uniapp-x</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>不支持scoped默认不支持scoped，所以写也没用那如果我想修改子孙节点的样式是不是很方便，不需要v-deep了？的确如此自带页面样式隔离在uni-appx中，不支持cssscoped，样式的作用范围遵循以下规则：App.uvue中的样式作用于全局。页面的样式作用于当前页面及其子组件。组件的样式仅作用于当前组件。(作者补充：以及其子组件)对于uniapp自带ui库的样式拓展例如input在we</div>
                    </li>
                    <li><a href="/article/1901726524248223744.htm"
                           title="通过css和js实现流星雨效果" target="_blank">通过css和js实现流星雨效果</a>
                        <span class="text-muted">郭宝</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a>
                        <div>页面代码：============================流星雨============================import"./css/style.css"exportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp'}},mounted(){this.shootingStar();},meth</div>
                    </li>
                    <li><a href="/article/1901725639656927232.htm"
                           title="elementui 组件基本颜色的修改" target="_blank">elementui 组件基本颜色的修改</a>
                        <span class="text-muted">怡宝丶加冰</span>
<a class="tag" taget="_blank" href="/search/vue%2Belementui/1.htm">vue+elementui</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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>再用elementui中的组件时根据项目的不同主题色也不一样,这里是对一些常用组件基础颜色的修改,可以直接用,根据主题色的不同直接替换--theme_color变量的值就行创建一个css文件/*全局样式*/html,body{--theme_color:#0C871B;}/*primary按钮样式*/.el-button--primary{background-color:var(--theme_</div>
                    </li>
                    <li><a href="/article/1901723618577018880.htm"
                           title="css3-学习" target="_blank">css3-学习</a>
                        <span class="text-muted">江西谢霆锋</span>
<a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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特性选择器基础选择器标签选择器ID选择器类选择器CSS的优先级是什么？!important>内联样式(style=“”)>ID选择器>类选择器=属性选择器=伪类>标签选择器=伪元素选择器。层级选择器foobar后代选择器，元素的后代元素foo>bar子代选择器，元素的子代元素foo+bar相邻同胞选择器foo~bar通用同胞选择器foo,bar并集选择器foo.class交集选择器条件选择器</div>
                    </li>
                    <li><a href="/article/1901713150269517824.htm"
                           title="Angular 17与PrimeNG复选框图标定制" target="_blank">Angular 17与PrimeNG复选框图标定制</a>
                        <span class="text-muted">t0_54program</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%89%8B%E5%86%8C/1.htm">编程问题解决手册</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.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><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
                        <div>在Angular和PrimeNG的开发过程中，经常需要对UI组件进行细致的定制以满足特定的设计需求。本文将详细介绍如何在不更改HTML模板的情况下，通过全局CSS文件来修改PrimeNG复选框的默认勾选图标。背景介绍随着Angular从15版本升级到17版本，很多开发者也需要更新其依赖库，包括PrimeNG。由于PrimeNG的更新，组件的样式和行为可能会发生变化，这就要求开发者了解如何适应这些变</div>
                    </li>
                    <li><a href="/article/1901708356242960384.htm"
                           title="Volar ——Vue3 完美的配套工具" target="_blank">Volar ——Vue3 完美的配套工具</a>
                        <span class="text-muted">web13985857354</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/%E9%9D%A2%E8%AF%95/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/vscode/1.htm">vscode</a>
                        <div>Volar——Vue3完美的配套工具0.前言1.`volar`是什么2.Volar的新功能介绍2.1`refsugar`2.2`template`语法转换2.3`classreferences`2.4`props`类型检测2.5各种语法提示2.5.1模板语法提示2.5.2cssmodule语法提示2.5.3`lang`提示2.6编辑器三分天下3.总结博主在b站录制了vue3.2的详细教程，点击来看</div>
                    </li>
                    <li><a href="/article/1901669353040965632.htm"
                           title="CSS竟然开始支持函数了！编程语言的未来能否在此掀起波澜？" target="_blank">CSS竟然开始支持函数了！编程语言的未来能否在此掀起波澜？</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
                        <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读当我第一次看到CSS即将支持原生函数时？没错，朋友，这是真的！如今，CSS也开始拥抱函数特性了——那些曾坚称CSS不配称作“编程语言”的人，现在或许得重新考虑一下了。好了，兴奋之余，我们还是先稳一下，深入了解它的具体内容吧！基础知识：函数的定义和调用试想一下，你正在给网页中的多个元素添加相同的虚线边框。通常</div>
                    </li>
                    <li><a href="/article/1901650477267873792.htm"
                           title="利用github部署项目" target="_blank">利用github部署项目</a>
                        <span class="text-muted">浪裡遊</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%83%A8%E7%BD%B2/1.htm">持续部署</a>
                        <div>挂载GitHubPages的方法基本步骤创建仓库：在GitHub上创建一个新的仓库。如果使用自定义域名，则仓库名应为.github.io；否则可以是任意名称。启用GitHubPages：进入仓库的设置页面，在“Pages”部分选择要发布的分支（通常是main或master），然后保存更改。上传网站内容：将你的HTML、CSS、JavaScript等文件上传到仓库中指定的分支。什么是SSHSSH是一</div>
                    </li>
                    <li><a href="/article/1901552508782833664.htm"
                           title="css预处理器sass" target="_blank">css预处理器sass</a>
                        <span class="text-muted">小华0000</span>
<a class="tag" taget="_blank" href="/search/scss/1.htm">scss</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>在前端开发的世界中，CSS是构建网页样式的基础。然而，随着项目规模的增大，纯CSS的编写和维护往往会变得复杂而繁琐。为了解决这些痛点，Sass（SyntacticallyAwesomeStyleSheets）应运而生。Sass是一种CSS预处理器，它扩展了CSS的功能，让CSS的编写更加高效、灵活和易于维护。本文将深入探讨Sass的概念、优势、语法、以及如何在实际项目中应用它，帮助你提升CSS技能</div>
                    </li>
                    <li><a href="/article/1901552506404663296.htm"
                           title="Animate.css" target="_blank">Animate.css</a>
                        <span class="text-muted">小华0000</span>
<a class="tag" taget="_blank" href="/search/Animate/1.htm">Animate</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a>
                        <div>这个库提供了多种预定义的动画效果，比如平移、缩放、旋转、淡入淡出等，开发者可以通过简单的类名直接在HTML元素上应用这些动画，而无需自己编写复杂的CSS动画代码。以下是对Animate.css的详细介绍：1.Animate.css简介Animate.css是一个基于CSS的动画库，主要特点包括：简单易用：只需在HTML元素中添加指定的类名即可使用动画。丰富的动画效果：包括入场、出场、注意效果等数十</div>
                    </li>
                    <li><a href="/article/1901546580452896768.htm"
                           title="2025前端面试题超全面解析（附答案与深度扩展）" target="_blank">2025前端面试题超全面解析（附答案与深度扩展）</a>
                        <span class="text-muted">北辰alk</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>文章目录一、HTML篇（扩展版）1.**HTML5语义化标签的实际应用场景**2.**WebComponents实战：如何封装一个自定义按钮组件？**3.**WebWorker的用途与限制**二、CSS篇（扩展版）1.**CSS盒模型详解：border-boxvscontent-box**2.**CSS动画性能优化技巧**3.**CSS预处理器（Sass/Less）核心功能对比**三、JavaSc</div>
                    </li>
                    <li><a href="/article/1901543677889671168.htm"
                           title="前端初学者，该如何开始学习？" target="_blank">前端初学者，该如何开始学习？</a>
                        <span class="text-muted">四六的六</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
                        <div>前端初学者，该如何开始学习？嗨，作为一个曾经的前端小白，现在也算是入门了，我特别理解刚开始学习前端时的迷茫，所以很愿意和你分享一下我的学习经验。刚开始的时候，得先搞清楚前端技术到底是啥。简单来说，前端就是咱们平常在浏览器里看到的网页那些东西。它主要由HTML、CSS和JavaScript三个部分组成。HTML（超文本标记语言）：作为构建网页内容的基石，HTML以其独特的标签体系定义了网页的基本架构</div>
                    </li>
                    <li><a href="/article/1901540276007137280.htm"
                           title="重生之我在学Vue--第16天 Vue 3 插件开发" target="_blank">重生之我在学Vue--第16天 Vue 3 插件开发</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/%E5%89%8D%E7%AB%AF%E6%88%90%E4%BB%99%E4%B9%8B%E8%B7%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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>重生之我在学Vue–第16天Vue3插件开发文章目录重生之我在学Vue--第16天Vue3插件开发前言一、插件的作用与开发思路1.1插件能做什么？1.2插件开发四部曲二、开发全局通知插件2.1插件基础结构2.2完整插件代码（带注释解析）2.3样式文件notification.css三、插件的安装与使用3.1在main.js中安装3.2在组件中使用四、插件开发进阶技巧4.1支持TypeScript类</div>
                    </li>
                    <li><a href="/article/1901534852117753856.htm"
                           title="前端初学者，有哪些适合的学习网站？" target="_blank">前端初学者，有哪些适合的学习网站？</a>
                        <span class="text-muted">四六的六</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
                        <div>对于前端初学者而言，选择合适的学习网站至关重要，以下是一些我知道的优质学习平台，在这里分享给大家：菜鸟教程：该网站以其简洁明了的界面设计和通俗易懂的教程内容而受到广大初学者的欢迎。其前端教程体系涵盖了前端开发的大量入门知识，包括HTML、CSS、JavaScript等基础技术，以及当前主流的前端框架和工具的使用方法，如Vue.js、React、Webpack等。教程内容的讲解方式深入浅出，注重从基</div>
                    </li>
                    <li><a href="/article/1901528802215915520.htm"
                           title="css background动态图片,CSS3 background-position定位背景图片动画效果" target="_blank">css background动态图片,CSS3 background-position定位背景图片动画效果</a>
                        <span class="text-muted">会咕咕咕的小夫爷</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/background%E5%8A%A8%E6%80%81%E5%9B%BE%E7%89%87/1.htm">background动态图片</a>
                        <div>本章节分享一段代码实例，它实现了利用background-position属性控制背景图片实现动画效果。背景图片都集中在一张图片上，如下:蚂蚁部落*{padding:0px;margin:0px;}body,html{width:100%;height:100%;margin:0px;padding:0px;}body{position:relative;background-attachment</div>
                    </li>
                    <li><a href="/article/1901525901615624192.htm"
                           title="CSS3学习教程，从入门到精通，CSS3 列表样式语法知识点及案例代码（8）" target="_blank">CSS3学习教程，从入门到精通，CSS3 列表样式语法知识点及案例代码（8）</a>
                        <span class="text-muted">知识分享小能手</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/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Java%E5%BC%80%E5%8F%91/1.htm">Java开发</a>
                        <div>CSS3列表样式语法知识点及案例代码一、列表样式类型1.list-style-type属性用于指定列表项标记的样式类型。语法格式：list-style-type:;取值说明：对于无序列表（），常见的取值有：disc：实心圆（默认值）。circle：空心圆。square：实心方块。none：无标记。对于有序列表（），常见的取值有：decimal：数字（默认值）。lower-roman：小写罗马数字。</div>
                    </li>
                    <li><a href="/article/1901525773823569920.htm"
                           title="CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5）" target="_blank">CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5）</a>
                        <span class="text-muted">知识分享小能手</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><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/css3/1.htm">css3</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><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><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>CSS3选择器权重问题语法知识点及案例代码一、选择器权重概述在CSS中，当多个选择器同时匹配同一个元素时，浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。二、选择器权重计算规则1.内联样式（InlineStyles）内联样式直接写在HTML元素的style属性中，权重为1000。2.ID选择器（IDSelectors）ID选择器以#开头，权重为100。3</div>
                    </li>
                    <li><a href="/article/1901525775350296576.htm"
                           title="CSS3学习教程，从入门到精通，CSS3 常用文本属性语法知识点及案例代码（6）" target="_blank">CSS3学习教程，从入门到精通，CSS3 常用文本属性语法知识点及案例代码（6）</a>
                        <span class="text-muted">知识分享小能手</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/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a>
                        <div>CSS3常用文本属性语法知识点及案例代码一、文本颜色(color)语法:color:;取值:颜色名称:例如red,blue,green等十六进制颜色值:例如#ff0000,#00ff00,#0000ff等RGB颜色值:例如rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)等RGBA颜色值:例如rgba(255,0,0,0.5),rgba(0,255,0,0.5),rgba</div>
                    </li>
                    <li><a href="/article/1901525772359757824.htm"
                           title="CSS3学习教程，从入门到精通， CSS3 样式引入语法知识点及案例代码（2）" target="_blank">CSS3学习教程，从入门到精通， CSS3 样式引入语法知识点及案例代码（2）</a>
                        <span class="text-muted">知识分享小能手</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/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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/css/1.htm">css</a>
                        <div>CSS3样式引入语法知识点及案例代码一、CSS3样式引入方式CSS3样式可以通过以下几种方式引入到HTML文档中：1.内联样式(InlineStyles)语法：直接在HTML元素的style属性中编写CSS代码。优点：优先级最高，方便调试。缺点：不利于维护和复用，代码冗余。案例：这是一个段落。2.内部样式表(InternalStyleSheet)语法：在HTML文档的标签内使用标签定义CSS样式。</div>
                    </li>
                    <li><a href="/article/1901525519455809536.htm"
                           title="HTML 样式与布局初体验：学习进程中的关键节点（二）" target="_blank">HTML 样式与布局初体验：学习进程中的关键节点（二）</a>
                        <span class="text-muted">计算机毕设定制辅导-无忧学长</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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>学习中的困难与突破在学习HTML样式与布局的过程中，我也遇到了不少困难，这些困难就像是学习道路上的绊脚石，但也正是在克服它们的过程中，我实现了自我的突破和成长。（一）样式冲突：规则的碰撞样式冲突是我遇到的第一个难题。当使用多个CSS规则来定义同一个元素的样式时，由于选择器的优先级和规则的先后顺序不同，经常会出现样式不符合预期的情况。比如，我在一个项目中，同时使用了外部样式表和内嵌样式来设置按钮的样</div>
                    </li>
                                <li><a href="/article/43.htm"
                                       title="集合框架" target="_blank">集合框架</a>
                                    <span class="text-muted">天子之骄</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a>
                                    <div>   集合框架 
集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 
从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。 
  
简单介绍： 
  
Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi</div>
                                </li>
                                <li><a href="/article/170.htm"
                                       title="Table Driven（表驱动）方法实例" target="_blank">Table Driven（表驱动）方法实例</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/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/Table+Driven/1.htm">Table Driven</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E9%A9%B1%E5%8A%A8/1.htm">表驱动</a>
                                    <div>实例一：   
/**
 * 驾驶人年龄段
 * 保险行业，会对驾驶人的年龄做年龄段的区分判断
 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞)
 */
public class AgePeriodTest {

    //if...el</div>
                                </li>
                                <li><a href="/article/297.htm"
                                       title="Jquery 总结" target="_blank">Jquery 总结</a>
                                    <span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/jquery%E6%96%B9%E6%B3%95/1.htm">jquery方法</a>
                                    <div>1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$</div>
                                </li>
                                <li><a href="/article/424.htm"
                                       title="面向对象概念的提出" target="_blank">面向对象概念的提出</a>
                                    <span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E8%BF%87%E7%A8%8B/1.htm">面向过程</a>
                                    <div>   
     面向对象中，一切都是由对象展开的，组织代码，封装数据。 
  在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。 
  
    下面就结合编程语言的发展史，聊一聊面向过程和面向对象。 
     c语言由贝尔实</div>
                                </li>
                                <li><a href="/article/551.htm"
                                       title="linux网口绑定" target="_blank">linux网口绑定</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 
 
一、环境描述 
我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 
 
二、双网卡绑定步骤： 
2.1 修改/etc/sysconfig/network</div>
                                </li>
                                <li><a href="/article/678.htm"
                                       title="XML基础语法" target="_blank">XML基础语法</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>一、什么是XML？ 
XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。 
  
二、为什么学习XML？ 
用来解决程序间数据传输的格式问题 
做配置文件 
充当小型数据库 
  
三、XML与HTM</div>
                                </li>
                                <li><a href="/article/805.htm"
                                       title="为网页添加自己喜欢的字体" target="_blank">为网页添加自己喜欢的字体</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%97%E4%BD%93+%E7%A7%92%E8%A1%A8+css/1.htm">字体 秒表 css</a>
                                    <div>@font-face {
			font-family: miaobiao;//定义字体名字
			font-style:  normal;
		    font-weight: 400;
			src: url('font/DS-DIGI-e.eot');//字体文件
		} 
使用： 
 
<label style="font-size:18px;font-famil</div>
                                </li>
                                <li><a href="/article/932.htm"
                                       title="redis范围查询应用-查找IP所在城市" target="_blank">redis范围查询应用-查找IP所在城市</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
                                    <div>原文地址： 
http://www.tuicool.com/articles/BrURbqV 
需求 
 
根据IP找到对应的城市 
 
原来的解决方案 
 
oracle表（ip_country）： 
 
 
查询IP对应的城市： 
 
1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 
 
2. select city from ip_</div>
                                </li>
                                <li><a href="/article/1059.htm"
                                       title="输入两个整数， 计算百分比" target="_blank">输入两个整数， 计算百分比</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>	public static String getPercent(int x, int total){
		 
		double result=(x*1.0)/(total*1.0);
		System.out.println(result);
		
		
		DecimalFormat df1=new DecimalFormat("0.0000%");
		
</div>
                                </li>
                                <li><a href="/article/1186.htm"
                                       title="百合——————>怎么学习计算机语言" target="_blank">百合——————>怎么学习计算机语言</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java+%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">java 移动开发</a>
                                    <div>    对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和</div>
                                </li>
                                <li><a href="/article/1313.htm"
                                       title="linux下tomcat开机自启动" target="_blank">linux下tomcat开机自启动</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a>
                                    <div>方法一： 
修改Tomcat/bin/startup.sh 为: 
export JAVA_HOME=/home/java1.6.0_27
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export PATH=$JAVA_HOME/bin:$PATH
export CATALINA_H</div>
                                </li>
                                <li><a href="/article/1440.htm"
                                       title="spring aop实例" target="_blank">spring aop实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a>
                                    <div>1.AdviceMethods.java 
package com.bijian.study.spring.aop.schema;

public class AdviceMethods {

	public void preGreeting() {
		System.out.println("--how are you!--");
	}
} 
2.beans.x</div>
                                </li>
                                <li><a href="/article/1567.htm"
                                       title="[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization" target="_blank">[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/serialization/1.htm">serialization</a>
                                    <div>enableComplexMapKeySerialization配置项的含义 
 Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。 
  
GsonBuilder用于</div>
                                </li>
                                <li><a href="/article/1694.htm"
                                       title="【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题" target="_blank">【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a>
                                    <div>包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 
1. At most once，数据最多只能接受一次，有可能接收不到 
2. At least once, 数据至少接受一次，有可能重复接收 
3. Exactly once  数据保证被处理并且只被处理一次， 
  
具体的多读几遍http://spark.apache.org/docs/lates</div>
                                </li>
                                <li><a href="/article/1821.htm"
                                       title="shell脚本批量检测端口是否被占用脚本" target="_blank">shell脚本批量检测端口是否被占用脚本</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>#!/bin/bash
cat ports   |while read line
do#nc -z  -w 10  $line

nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then
echo $line:ok
else
echo $line:fail
fi

done

这里的ports 既可以是文件</div>
                                </li>
                                <li><a href="/article/1948.htm"
                                       title="java-2.设计包含min函数的栈" target="_blank">java-2.设计包含min函数的栈</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ 
 

import java.util.ArrayList;
import java.util.List;


public class MinStack {

	//maybe we can use origin array rathe</div>
                                </li>
                                <li><a href="/article/2075.htm"
                                       title="Netty源码学习-ChannelHandler" target="_blank">Netty源码学习-ChannelHandler</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> 
一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 
例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 
因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 
它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 
 
 

p</div>
                                </li>
                                <li><a href="/article/2202.htm"
                                       title="java生成随机数" target="_blank">java生成随机数</a>
                                    <span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>方法一： 
/** 
* 生成随机数 
* @author cngolon@126.com 
* @return 
*/ 
public synchronized static String getChargeSequenceNum(String pre){ 
StringBuffer sequenceNum = new StringBuffer(); 
Date dateTime = new D</div>
                                </li>
                                <li><a href="/article/2329.htm"
                                       title="POI读写海量数据" target="_blank">POI读写海量数据</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/%E6%B5%B7%E9%87%8F%E6%95%B0%E6%8D%AE/1.htm">海量数据</a>
                                    <div>import java.io.FileOutputStream; 
import java.io.OutputStream; 
 
import org.apache.poi.xssf.streaming.SXSSFRow; 
import org.apache.poi.xssf.streaming.SXSSFSheet; 
import org.apache.poi.xssf.streaming</div>
                                </li>
                                <li><a href="/article/2456.htm"
                                       title="mysql 日期格式化date_format详细使用" target="_blank">mysql 日期格式化date_format详细使用</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/date_format/1.htm">date_format</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E8%BD%AC%E6%8D%A2/1.htm">日期格式转换</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%8C%96/1.htm">日期格式化</a>
                                    <div> 
 日期转换函数的详细使用说明 
   DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n</div>
                                </li>
                                <li><a href="/article/2583.htm"
                                       title="一个程序员分享8年的开发经验" target="_blank">一个程序员分享8年的开发经验</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                                    <div>  
在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 
明确入行的目的 
很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容</div>
                                </li>
                                <li><a href="/article/2710.htm"
                                       title="android欢迎界面淡入淡出效果" target="_blank">android欢迎界面淡入淡出效果</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 
主要代码如下： 
package com.myaibang.activity; 
import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown</div>
                                </li>
                                <li><a href="/article/2837.htm"
                                       title="linux 复习笔记之常见压缩命令" target="_blank">linux 复习笔记之常见压缩命令</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/tar%E8%A7%A3%E5%8E%8B/1.htm">tar解压</a><a class="tag" taget="_blank" href="/search/linux%E7%B3%BB%E7%BB%9F%E5%B8%B8%E8%A7%81%E5%8E%8B%E7%BC%A9%E5%91%BD%E4%BB%A4/1.htm">linux系统常见压缩命令</a><a class="tag" taget="_blank" href="/search/linux%E5%8E%8B%E7%BC%A9%E5%91%BD%E4%BB%A4/1.htm">linux压缩命令</a><a class="tag" taget="_blank" href="/search/tar%E5%8E%8B%E7%BC%A9/1.htm">tar压缩</a>
                                    <div>转载请出自出处:http://eksliang.iteye.com/blog/2109693 
linux中常见压缩文件的拓展名 
*.gz   gzip程序压缩的文件
*.bz2  bzip程序压缩的文件
*.tar  tar程序打包的数据，没有经过压缩
*.tar.gz  tar程序打包后，并经过gzip程序压缩
*.tar.bz2 tar程序打包后，并经过bzip程序压缩
*.zi</div>
                                </li>
                                <li><a href="/article/2964.htm"
                                       title="Android 应用程序发送shell命令" target="_blank">Android 应用程序发送shell命令</a>
                                    <span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 
 
发就发吧！ 
 
一、关于shell指令： 
我们知道，shell指令是Linux里面带的</div>
                                </li>
                                <li><a href="/article/3091.htm"
                                       title="java 无损读取文本文件" target="_blank">java 无损读取文本文件</a>
                                    <span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6/1.htm">读取文件</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%8D%9F%E8%AF%BB%E5%8F%96/1.htm">无损读取</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E5%8F%96%E6%96%87%E6%9C%AC%E6%96%87%E4%BB%B6/1.htm">读取文本文件</a><a class="tag" taget="_blank" href="/search/charset/1.htm">charset</a>
                                    <div>java 如何无损读取文本文件呢？ 
以下是有损的 
@Deprecated
	public static String getFullContent(File file, String charset) {
		BufferedReader reader = null;
		if (!file.exists()) {
			System.out.println("getFull</div>
                                </li>
                                <li><a href="/article/3218.htm"
                                       title="Firebase 相关文章索引" target="_blank">Firebase 相关文章索引</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/firebase/1.htm">firebase</a>
                                    <div>Awesome Firebase 
最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 
Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 
开发者只需引用一个 API 库文件就可以使用标准 RE</div>
                                </li>
                                <li><a href="/article/3345.htm"
                                       title="C++学习重点" target="_blank">C++学习重点</a>
                                    <span class="text-muted">lx.asymmetric</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                                    <div>1.c++面向对象的三个特性：封装性，继承性以及多态性。 
  
2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。 
  
3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。 
  
4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 
&n</div>
                                </li>
                                <li><a href="/article/3472.htm"
                                       title="java bean和xml相互转换" target="_blank">java bean和xml相互转换</a>
                                    <span class="text-muted">q821424508</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E5%92%8Cbean%E8%BD%AC%E6%8D%A2/1.htm">xml和bean转换</a><a class="tag" taget="_blank" href="/search/java+bean%E5%92%8Cxml%E8%BD%AC%E6%8D%A2/1.htm">java bean和xml转换</a>
                                    <div>这几天在做微信公众号 
做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 
然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 
还是贴出来记录一下  
  
  
顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。 
  
packag</div>
                                </li>
                                <li><a href="/article/3599.htm"
                                       title="C 语言初级 位运算" target="_blank">C 语言初级 位运算</a>
                                    <span class="text-muted">1140566087</span>
<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/c/1.htm">c</a>
                                    <div>  第十章 位运算    1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节    2、位运算符：  运算符 作用  ~ 按位求反  << 左移  >> 右移  & 按位与  ^ 按位异或  | 按位或   他们的优先级从高到低；    3、位运算符的运算功能：  a、按位取反：  ~01001101 = 101</div>
                                </li>
                                <li><a href="/article/3726.htm"
                                       title="14点睛Spring4.1-脚本编程" target="_blank">14点睛Spring4.1-脚本编程</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a>
                                    <div>14.1 Scripting脚本编程 
 
 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 
 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 
 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 
 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; 
 spring支持脚本</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>