Cecilia_He

css3 flex流动自适应响应式布局设计

可以先看看css3 flex的实例：/post/css-learning-18-css3-flex-responsive-design-example.html。

一、flex应运而生

HTML是骨骼、架构，CSS是肌肉、美妆，JS是运动、表现。他们的互相配合才诞生了成千上万的网页，丰富多彩的前端世界让前端开发人员越来越痴迷。尤其是HTML5、CSS3的出现，更加让这种感觉越来越深厚。

在以往要排版一个图片、文字的列表，如：

在做这样的贴边均匀等分列表，一般有2种做法。

1、浮动方法（普通）

采用ul>li的DOM结构，li左浮动（ie6需要设置为行内样式）。假设ul的宽度为W，每个li项目的总宽度是x，每一行有4个项目。为了让每一行的第一个li都贴边对齐，那么就需要设置ul左边距为负值。可得，li之间的左边距ML=(W-x*4)/4。详细代码如下：

lang="en">
charset="UTF-8">
rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
</span><span class="pln" style="color:rgb(72,72,76);">贴边的均匀等分列表1</span><span class="tag" style="color:rgb(30,52,123);">
class="container">
class="clearfix">
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称
class="pull-left">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称

  上述代码，ul应占用的宽度为700px，每个li的宽度是100px，每行4个，有3个空隙，如果要贴边对齐，就再加一个。每个空隙的宽度为(700-100*4)/4=75px。
  2、两端对齐方法（另类）
  两端对齐方法采用的是css2中text-align:textify; 属性，它具有良好的文字排版效果，就像word里的两端对齐一样，表现效果也一致。
  
  
  一般认为，两端对齐只对行内样式起作用，而CSS当中是可以重置任意元素为行内或者块状样式的。要想目标群体两端对齐，那么就需要设置所有项目的display为inline-block（行内块状样式）。因为每一行要两端对齐，每行四个项目li，那么每个项目li占用的宽度就是25%，但在实际情况中，因为要处理空白的缘故，写20~24%都是比较合理的，下面例子就是一个简单的说明。 
    
    在这里需要注意的是，设置两端对齐，项目之间的空白需要额外处理。设置ul的字体大小为0即可。更多详细可以参考：http://www.w3cplus.com/css/text-align-justify-and-rwd.html。 
   
  详细的页面代码如下：

lang="en">
charset="UTF-8">
rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
</span><span class="pln" style="color:rgb(72,72,76);">贴边的均匀等分列表2</span><span class="tag" style="color:rgb(30,52,123);">
class="container">
class="clearfix">
class="inner">
class="img"> src="http://dummyimage.com/100x100" alt="">
class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="inner">

class="img"> src="http://dummyimage.com/100x100" alt="">

class="title"> href="#">标题名称

class="break-li">

这种方法工程量比较大，结果如下图：

上面说的例子是前端开发中遇到最多的情况，处理的方式也多种多样，并不局限于以上2种。前端开发中要处理的排版是比较多的，上下排版最简单，左右排版比较麻烦一点，均匀分布、错位排版是最难处理的，我们需要处理和计算各种宽度，这是一个很繁重的过程。

二、什么是flex

在这种情况，CSS3的flex属性应运而生了。它的作用是能够按照设置好的规则来排列容器内的项目，而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候，都可以重新计算，以至于更符合预期的排版。不仅解放了计算器，而且更加优美的服务于响应式设计。

在使用了flex属性之后，居左对齐、居右对齐、两端对齐、居中对齐、顶端对齐、底部对齐，以及处理项目之间的空白和项目宽度、高度的伸缩都可以简单的设置到。

flex的字面意思是，伸缩性的、弯曲的，引申含义为可自由配置的、灵活的意思。CSS3中的flex属性也是这么理解，具有flex属性的容器和容器内的项目都具有弹性计算的能力，以至于符合预定的规则。

三、flex属性

flex是display的属性值，目前还处于草稿状态中，所以在书写的时候，需要加上各个浏览器的私有前缀，即-webkit、-moz、-ms、-o等，下面的例子都省略了前缀。

flex属性的命名可谓是一波三折：

2009年以前：display:box;
2011年：display:flex-box;
2012年：display:flex;

目前的格式为：

.container{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}

1、流动布局

一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。「flex-flow」的值决定了这些术语如何对应到物理方向（上／右／下／左）、物理轴（垂直／水平）、物理大小（宽度／高度）。——来自 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

详细说明如下：

主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。
主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是「width」或「height」属性，由哪一个对着主轴方向决定。
侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

注意：CSS的columns在伸缩容器上没有效果。float、clear和vertical-align在伸缩项目上没有效果。

2、flex容器属性

2.1、display（应用于flex属性）

flex：相当于block
inline-flex：相当于inline-block

2.2、flex-direction（流动布局的主轴方向）

row（默认）：行方向，在“ltr”（left-to-right）排版方式下从左向右排列；在“rtl”（right-to-left）排版方式下从右向左排列。
row-reverse：行反方向，与row排列方向相反。在“ltr”（left-to-right）排版方式下从右向左排列；在“rtl”（right-to-left）排版方式下从左向右排列。
column：列方向，与行方向垂直。在“ttb”（top-to-bottom）排版方式下从上向下排列；在“btt”（bottom-to-top）排版方式下从下向上排列。
column-reverse：类似于row-reverse，与column排列方向相反。在“ttb”（top-to-bottom）排版方式下从下向上排列；在“btt”（bottom-to-top）排版方式下从上向下排列。

2.3、flex-wrap（流动布局的侧轴方向）

nowrap（默认）：无侧轴，即不换行。
wrap：侧轴垂直于主轴。在“ltr”、“rtl”排版方式下，侧轴方向向下；在“ttb”、“btt”排版方式下，侧轴方向向左。
wrap-inverse：与wrap属性相反。

2.4、flex-flow（“flex-direction”和“flex-wrap”属性的缩写）

row nowrap为其默认属性值，分别表示flex-direction和flex-wrap属性。

2.5、justify-content（主轴方向内容对齐方式）

flex-srart（默认）：与主轴起始方向对齐。
flex-end：向主轴终点方向对齐。
center：向主轴中点方向对齐。
space-between：起始位置向主轴起始方向对齐，终点位置向主轴终点方向对齐，其余位置向主轴中点方向对齐。
space-around：与space-between类似，只是起始位置和终点位置保留一半空白。

以上描述，参考下图：

2.6、align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）

flex-start：多个主轴沿侧轴起始方向对齐。
flex-end：多个主轴沿侧轴终点方向对齐。
center：多个主轴沿侧轴中点方向对齐。
space-between：第一个主轴沿主轴起始方向对齐，末尾主轴沿主轴终点方向对齐，其他主轴均匀分布对齐。
space-around：与space-between类似，只是侧轴起始位置和侧轴终点位置保留一半空白。
stretch（默认）：伸缩多个主轴，保持侧轴方向统一距离。

以上描述，参考下图：

2.7、align-items（侧轴方向内容对齐方式）

与justify-content类似，只是这里的参考方向为侧轴。

stretch（默认）：在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置。
flex-srart：与侧轴起始方向对齐。
flex-end：向侧轴终点方向对齐。
center：向侧轴中点方向对齐。
baseline：在侧轴上保持基线对齐，以第一个项目的基线为准。

以上描述，参考下图：

3、flex项目属性

3.1、order（排序）

整数，默认为0，负无穷到正无穷。容器中的项目都是依order值从小到大排列，order值越大越就越在主轴方向的末尾。比如：

3.2、flex-grow（空白空间分配比例）

大于0的正数值。

3.3、flex-shrink（项目空间分配比例）

大于0的正数值。

3.4、flex-basis（项目的主轴方向长度）

如果项目制定了实际长度，则此长度为主。否则为自动计算长度。默认为auto。

3.5、flex（flex-grow、flex-shrink和flex-basis三个属性的简写）

格式为：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

3.6、align-self（项目在侧轴方向的对齐方式）

参考于容器的align-items（2.7）。

四、更多阅读

flex详细实例：/post/css-learning-18-css3-flex-responsive-design-example.html。
flex样式类：/post/css-learning-19-css3-flex-responsive-design-class.html

五、参考资料

http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://www.w3cplus.com/css3/a-guide-to-flexbox.html

原文地址：

http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html

你可能感兴趣的:(web前端)

《Java前端开发全栈指南：从Servlet到现代框架实战》
前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比
前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指
使用ENO将您的JSON对象生成HTML显示土族程序员 json html javascript eno 前端
ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请
Web 前端性能优化：从代码到加载速度的全面剖析码力无边-OEC 前端性能优化 web
Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指
Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总代码背锅人日志 ios 小程序 uni-app iphone android webview https
在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本
大学生HTML期末大作业——HTML+CSS+JavaScript传统文化无·糖 Web前端期末大作业 html 课程设计 css 大学生前端大作业期末作业
HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目传统文化精美设计5页含注册登录二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮
大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站（英雄联盟）无·糖 Web前端期末大作业 html 课程设计 css 美食游戏 javascript 大作业
HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目游戏网站（英雄联盟）含注册登录13页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、
Web前端工程化
Web前端工程化前端工程化是指将软件工程的方法和原则应用到前端开发中，以提高开发效率、保证代码质量、便于团队协作和项目维护的一套体系化实践。以下是前端工程化的主要内容和实践：核心组成部分1.模块化开发JavaScript模块化：CommonJS、AMD、ESModuleCSS模块化：CSSModules、CSS-in-JS组件化：Vue/React/Angular组件体系微前端：将大型应用拆分为多
Vue3 学习教程，从入门到精通，Vue3 简介知识点及案例代码（1）知识分享小能手 vue3 前端开发网页开发学习 bootstrap javascript typescript 前端 vue.js vue
Vue3简介知识点及案例代码一、Vue3简介Vue3是一款用于构建用户界面的渐进式JavaScript框架，采用MVVM模式，具有响应式、组件化等优点，可提高开发效率，优化应用性能。二、Web前端开发概述Web前端开发涉及HTML、CSS、JavaScript等技术，用于构建用户可直接交互的页面部分。随着技术发展，出现了多种前端框架，Vue3是其中的优秀代表，基于前后端分离模式，使前后端开发解耦，
WEB前端缓存解决方案 qermeng WEB前端 SPA 缓存 WEB前端缓存解决
WEB前端缓存解决方案问题描述页面缓存js/css缓存问题描述使用angularjs(1.5.0)+gulp(3.9.0)做SPA开发时，修改js后，使用gulp-rev(6.0.1)对文件名进行了修改，但是刷新界面后修改的文件并没有加载，必须使用CRLT+F5深度刷新才可以。页面缓存页面缓存解决方案：js/css缓存通过gulp-rev在文件名增加哈希值来解决缓存问题gulp-rev:Stati
web前端基础知识:表单标签黄昏终结者前端 html javascript
一.input系列标签语法:form表单用来收集用户信息的input输入type类型type属性值:text文本password密码框radio单选框checkbox多选框file选择文件submit提交按钮reset重置按钮button普通按钮1.input系列标签-text文本框属性:placeholder占位符文本输入框语法:昵称:2.input系列标签-password密码框属性:plac
Web前端数据可视化：ECharts高效数据展示完全指南
Web前端数据可视化：ECharts高效数据展示完全指南当产品经理拿着一堆密密麻麻的Excel数据走向你时，你知道又到了"化腐朽为神奇"的时刻。数据可视化不仅仅是把数字变成图表那么简单，它是将复杂信息转化为直观洞察的艺术。在过去两年的项目实践中，我发现很多开发者在数据可视化这个领域存在一个误区：要么选择了过重的解决方案导致性能问题，要么选择了过轻的工具无法满足复杂需求。今天我们来深入探讨如何在前端
JavaWeb开发1 偷萧逸苦茶 java
JavaWeb什么是web?全球广域网，能够通过浏览器访问的网站Web网站工作流程Web前端开发网页有哪些部分组成？文字，图片，音频，视频，超链接...我们看到的网页本质是程序员写的前端代码前端代码如何转换成用户眼中的网页？通过浏览器解析和渲染浏览器中对代码解析渲染的部分称为浏览器内核Web标准HTML：负责网页结构（页面元素和内容）CSS：负责网页的表现（页面元素外观，位置等页面样式，如颜色、大
基于 Three.js 与 WebGL 的商场全景 VR 导航系统源码级解析维小帮定位导航 javascript vr 前端开发场景优化 WebGL 物联网智慧商场
本文面向Web前端开发者、WebGL/Three.js爱好者、对VR/AR应用开发感兴趣的技术人员、智慧商场解决方案开发者。详细介绍如何利用WebGL(Three.js框架)构建高性能的商场全景VR环境，并实现精准的室内定位与3D路径规划导航功能。如需获取商场全景VR导航系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私信作者。一、商场全景VR导航的核心技术概述商场全景VR导航融合了全
大学专业科普 | 计算机应用、视觉与算法鸭鸭鸭进京赶烤计算机应用
一、专业概述计算机应用专业是一门实践性很强的学科，专注于将计算机技术转化为实际应用，服务于各个行业和领域，为社会的数字化转型提供人才支撑。二、课程设置专业基础课程：包括计算机组成原理、操作系统、数据结构、计算机网络等，为学生构建坚实的理论基础。专业核心课程：聚焦于程序设计语言（如C、C++、Java、Python等）、数据库原理与应用、软件工程、Web前端开发等，使学生具备开发各类软件系统的能力。
Java web%10 好学且牛逼的马 java 前端 AI编程
%10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V
设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储） Amarantine、沐风倩✨ 物联网IOT 物联网 java html5 webrtc 音视频视频编解码七牛云存储
前言：设计一个完整的监控摄像头物联网IoT平台涉及视频直播和点播、WebRTC和文件存储模块，可以分为以下几个主要部分：摄像头设备、服务端处理、Web前端、视频流存储和回放。以下是结合这些技术的一个具体完整流程设计，涵盖了各个组件的相互关系、数据流动及关键技术点。1.系统组成监控摄像头：摄像头设备负责采集实时视频流并进行编码（如H.264或VP8）。Java服务端：服务端基于SpringBoot等
Web前端页面开发阿拉伯语种适配指南冲浪的鹏多多 Web前端前端 javascript html5 css 交互
1.前言前端多语言国际化是开发中不可或缺的一环。阿拉伯语、希伯来语等语言采用从右向左的书写方向，这意味着文本排版、元素布局等都需要进行相应调整。不仅要考虑文本的显示方向，还需对按钮、导航栏、表单等各类UI元素的布局进行重新规划，这给开发带来了独特的挑战（折磨）。本文将深入探讨前端开发中阿拉伯语种的适配技术，包括如何适配，全局和局部的修改，绝对定位的替换，兼容性以及替代方案等等。2.如何适配具体适配
【web前端】Vue3 核心模块与样式管理：从理论到代码实现 JosieBook #Java全栈前端 vue3
文章目录一、Vue3核心模块架构解析1.编译器模块（Compiler）2.运行时模块（Runtime）3.响应式模块（Reactivity）4.组合式API（CompositionAPI）二、样式管理模块详解1.Scoped样式2.CSSModules3.样式穿透与全局样式三、完整页面代码实现1.项目结构2.代码实现`main.js``App.vue``components/Counter.vue
Web前端入门：JavaScript 运算符 == 和 === 有什么区别？液态不合群前端 javascript 开发语言
运算符JavaScript运算符是真的多，尤其是ES6之后还在不停的加运算符，其他编程语言看JS就像怪物一样，各种骚操作不断~~运算符分类1、算术运算符算术运算符的作用就是用来基础计算，跟小学课本一样，包含：加+，减-，乘*，除/，取余（也叫做取模）%，指数**，自增++，自减--。只是需注意：乘号不再是x，除号也不再是÷！与我们学过的运算法则一样，乘法与除法优先级比加减法高，如果要改变优先级，需
web前端之dojo(用javascript语言实现的开源DHTML工具包) 爸爸去哪了2之熊猫三胞胎 web前端 JavaScript dojo javascript web前端 dojo
web前端之dojo(用javascript语言实现的开源DHTML工具包)一、开始Dojo开发1、DojoToolkit简介Dojo于2004年创建，使开发DHTML和JavaScriptweb应用程序开发流程更为容易，隐藏了很多现代web浏览器中普遍存在的跨浏览器矛盾。这使重点放在实现功能上，而不是调整代码使其在每个浏览器上运行。Dojo属于Dojo基金会，该基金会是Russell和Dylan
Python, Rust 开发人体结构解析与功能详解APP Geeker-2025 python rust
基于Python与Rust的技术特性，结合人体解剖学的专业需求，以下是一个高性能、高可靠性的“人体构造与功能详解APP”设计方案，融合前沿医学知识、交互式学习工具及跨平台能力：---###**一、系统架构设计**```mermaidgraphLRA[移动端/Web前端]-->B(Rust高性能引擎)B-->C[Python数据处理层]B-->D[混合数据库]D-->E[(PostgreSQL)]D
HTML一键打包EXE串口API介绍 iReachers html 单片机 stm32 HTML转EXE HTML打包EXE
HTML一键打包EXE软件(HTML转EXE)支持将Web前端项目转换为Windows平台下的独立可执行程序（EXE），适用于Windows7及以上系统，无需额外配置系统环境,软件包含多种内核,包括IE内核,Chrome内核,以及WebView2(永久免费),适用于不同的使用场景.CSDN免积分下载地址:【免费】HTML转EXE最新2.1.0版本(包含免费内核)-解压密码1234资源-CSDN文库
iOS端网页调试 debug proxy策略：项目中的工具协同实践 2501_91600889 http udp https websocket 网络安全网络协议 tcp/ip
移动开发中的调试，一直是效率瓶颈之一。特别是当前Web前端与App原生高度耦合的背景下，页面调试不仅受限于浏览器，还要面对WebView实现差异、系统权限控制、设备多样性等复杂情况。但我们是否可以构建一套**“设备无关”的调试工作流**？这并不意味着完全抛弃设备测试，而是指：开发阶段尽量在“虚拟/统一调试环境”下完成大部分工作，仅在最后阶段做必要真机验证，从而提升整体效率。以下是我们在一个跨平台内
【web前端】(手写js) 函数防抖|节流实现、Promise实现、Ajax实现
1、手动实现防抖防抖:对于频繁触发事件，只在最后一次触发生效//非立即防抖：持续触发事件时，事件处理函数完全不执行，等最后一次触发结束一段时间后再执行//实现思路：每次触发事件时都取消之前的延时调用方法，并重设定时器functiondebounce(wait,funct,...args){vartimer=nullreturn()=>{clearTimeout(timer)timer=setTim
第五章：别再被扒源码了：基于棋牌源代码的前端保护实战 17源码网前端 javascript 开发语言
有一天，我们上线测试环境的H5版本，刚搭好不到2小时，就有人在群里发出完整页面截图、按钮事件名，甚至调试台打印的Socket参数。你会说：“他们是不是拿到源码了？”不，他们只是按了个F12，打开了ChromeDevTools，就把我们整个页面的结构看了个一清二楚。这其实不是谁的错。Web前端天然就是“公开”的，任何浏览器都能看到它。但我们能做的，是增加一点点难度，让调试、扒站、逆向变得麻烦，哪怕只
Web前端基础之HTML
一、浏览器火狐浏览器、谷歌浏览器(推荐)、IE浏览器推荐谷歌浏览器原因：1、简洁大方,打开速度快2、开发者调试工具（右键空白处->检查，打开调试模式）二、开发工具核心IDE工具VisualStudioCode(VSCode)‌微软开发的免费跨平台编辑器，支持智能提示、Git集成、调试功能及丰富的扩展插件‌。轻量高效，适用于HTML/CSS/JavaScript及主流前端框架开发‌。WebStorm
【面试题】Java实现自有应用App的扫码登录功能架构设计与实现混进IT圈 java 扫码登录 Spring Boot Spring Security OAuth2.0 JWT 架构设计
在当今数字化时代，扫码登录已成为主流应用的标准功能之一。它不仅提供了便捷的用户体验，还增强了安全性。本文将从架构师的角度，深入分析如何设计和实现一个高效、安全的扫码登录系统。架构设计图核心流程图1.扫码登录整体流程Web前端后端服务App客户端缓存服务请求二维码生成会话ID并存储返回二维码和会话ID显示二维码并开始轮询扫描二维码发送会话ID和用户信息更新会话状态为"已扫描"返回确认页面轮询会话状态
大学生静态HTML网页源码——佛山旅游景点介绍网页代码家乡旅游网页制作模板 web前端期末大作业 html网页制作网页设计前端 html 旅游美食 css 课程设计节日
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。⚽精彩专栏
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面 IT黑马程序员 html 旅游 css
‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1
rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
这是我自己想到的问题，结果去知呼提问，还没等别人回答，我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
java编程思想 -- 数据的初始化百合不是茶 java 数据的初始化
1.使用构造器确保数据初始化 /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
[航天与宇宙]为什么发射和回收航天器有档期 comsci
地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁... 所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
linux下批量替换文件内容商人shang linux 替换
1、网络上现成的资料　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
网页在线天气预报 oloz 天气预报
网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
SpringMVC和Struts2比较杨白白 springMVC
1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
refuse copy, lazy girl! 小桔子 copy
妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！
apache与php整合 aichenglong php apache web
一 apache web服务器 1 apeche web服务器的安装 1)下载Apache web服务器 2)配置域名(如果需要使用要在DNS上注册) 3)测试安装访问http://localhost/验证是否安装成功 2 apache管理 1)service.msc进行图形化管理 2)命令管理，配
Maven常用内置变量 AILIKES maven
Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
java的类和对象百合不是茶 JAVA面向对象类对象
java中的类： java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决 java使用 class 类名来创建类，在Java中类名要求和构造方法，Java的文件名是一样的创建一个A类： class A{ } java中的类：将某两个事物有联系的属性包装在一个类中，再通
JS控制页面输入框为只读 bijian1013 JavaScript
在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。
AngularJS与服务器交互 bijian1013 JavaScript AngularJS $http
对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
[Maven学习笔记八]Maven常用插件应用 bit1129 maven
常用插件及其用法位于：http://maven.apache.org/plugins/ 1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin 1. Jetty Pl
【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括：文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
UI设计中我们为什么需要设计动效 brotherlamp UI ui教程 ui视频 ui资料 ui自学
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用你的产品。
Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan java spring
参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
数据库连接池的工作原理 chicony 数据库连接池
随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
java 关键字 CrazyMizzz java
关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：（1）访问修饰符 public,private,protected p
Hive中的排序语法 daizj 排序 hive order by DISTRIBUTE BY sort by
Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
单态设计模式 dcj3sjt126com 设计模式
单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{ // 保存类实例在此属性中 private static&
svn locked dcj3sjt126com Lock
post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
ARM寄存器学习 e200702084 数据结构 C++c C#F#
无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。 ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
常用编码资料 gengzg 编码
List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
进程 vs. 线程 hongtoushizi 线程 linux 进程
我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。如果用多线程实现
Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linux crontab
一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来：第一段代表分钟 0—59 第二段代表小时 0—23 第三段代表日期 1—31 第四段代表月份 1—12 第五段代表星期几，0代表星期日 0—6 如： */1 * * * * 每分钟执行一次。 *
KMP算法详解 hm4123660 数据结构 C++算法字符串 KMP
字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。假设主串s="ababcabcacbab",模式串为t="
枚举类型的单例模式 zhb8015 单例模式
E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
Kafka+Storm+HDFS ssydxa219 storm
cd /myhome/usr/stormbin/storm nimbus &bin/storm supervisor &bin/storm ui &Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
Java获取本地服务器的IP 中华好儿孙 java Web 获取服务器ip地址
System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他