Cecilia_He
Cecilia_He

css3 flex流动自适应响应式布局实例2

上次简要的说了一些css3中flex的相关概念（详细：css学习16：css3 flex流动自适应响应式布局设计），这次继续说下css3的flex，简单的举几个实例。

一、图片自适应居中

实例图：

实例HTML：

  1. class="demo">
  2. src="http://dummyimage.com/100x100" alt="">
  • class="demo">
  • class="" src="http://dummyimage.com/200x100" alt="">
  • class="demo">
  • src="http://dummyimage.com/100x200" alt="">
  • class="demo">
  • src="http://dummyimage.com/200x200" alt="">
  • class="demo">
  • src="http://dummyimage.com/50x50" alt="">

    • 实例CSS：

     
    .demo{
	width: 100px;
	height: 100px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
	float: left;
	margin-left: 20px;

	/*flex布局（作用于容器）*/
	display: flex;

	/*水平居中（作用于容器）*/
	justify-content: center;

	/*垂直居中（作用于容器）*/
	align-items: center;
}

.demo img{
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
}

    demo：http://demo.qianduanblog.com/2799/1.html

     二、水平响应式列表

    实例图：

    实例HTML：

    1. class="demo-wrap">
    2. class="demo">
    3. class="item item1">高120px
  • class="item item2">高50px
  • class="item item3">高140px
  • class="item item4">高100px

    • 实例CSS：
    1. .demo-wrap{
    2. border: 2px solid #ddd;
    3. background: #f5f5f5;
    4. padding: 6px;
    5. }
    7. .demo{
    8. width: 100%;
    10. /*flex布局（作用于容器）*/
    11. display: flex;
    13. /*两端对齐（作用于容器）*/
    14. justify-content: space-between;
    15. }
    17. .demo .item{
    18. width: 100px;
    19. background: #ffd;
    20. color: #C90000;
    21. font-size: 20px;
    22. text-align: center;
    23. line-height: 50px;
    24. }
    26. .demo .item1{
    27. height: 120px;
    28. }
    30. .demo .item2{
    31. height: 50px;
    32. }
    34. .demo .item3{
    35. height: 140px;
    36. }
    38. .demo .item4{
    39. height: 100px;
    40. }

    demo：http://demo.qianduanblog.com/2799/2.html

    三、水平响应式列表底端对齐

    和上个例子差不多，只是增加了底端对齐的的特性。

    只是修改了容器的样式：

    1. .demo{
    2. width: 100%;
    4. /*flex布局（作用于容器）*/
    5. display: flex;
    7. /*两端对齐（作用于容器）*/
    8. justify-content: space-around;
    10. /*侧轴方向对齐方式（作用于容器）*/
    11. align-items: flex-end;
    12. }

    demo：http://demo.qianduanblog.com/2799/3.html

    四、多行响应式布局

    宽屏：

    中屏：

    窄屏：

    HTML代码：
    1. class="demo-wrap">
    2. class="demo">
    3. class="item">
    4. class="item">
    5. class="item">
    6. class="item">
    7. class="item">
    8. class="item">
    9. class="item">
    10. class="item">

    CSS代码：

    1. .demo-wrap{
    2. border: 2px solid #ddd;
    3. background: #f5f5f5;
    4. padding: 6px;
    5. }
    7. .demo{
    8. width: 100%;
    10. /*flex布局（作用于容器）*/
    11. display: flex;
    13. /*两端对齐（作用于容器）*/
    14. justify-content: space-around;
    16. /*侧轴方向对齐方式（作用于容器）*/
    17. align-items: flex-end;
    19. /*换行（作用于容器）*/
    20. flex-wrap: wrap;
    21. }
    23. .demo .item{
    24. width: 300px;
    25. height: 50px;
    26. background: #444;
    27. margin-bottom: 20px;
    28. }

    demo：http://demo.qianduanblog.com/2799/4.html

    五、左固定右自适应等高布局

    演示截图：

    HTML：
    1. class="demo">
    2. class="left">左边固定宽度为100px，这里设置了高度为auto
    3. class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px

    CSS：

    1. .demo{
    2. /*flex布局（作用于容器）*/
    3. display: flex;
    5. /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
    6. /*align-items: stretch;*/
    7. }
    9. .demo .left{
    10. /*左边固定宽度，必须设置其最小宽度和最大宽度*/
    11. width: 100px;
    12. min-width: 100px;
    13. max-width: 100px;
    15. /*高度自由分配*/
    16. height: auto;
    17. background: #B4D3F7;
    19. /*空白区域分配比例为0（作用于项目）*/
    20. flex-grow: 0;
    21. }
    23. .demo .right{
    24. margin-left: 10px;
    25. width: auto;
    26. height: 200px;
    27. background: #F7E8B4;
    29. /*空白区域分配比例为1（作用于项目）
    30. 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
    31. 左边成固定的宽度，右边为自适应宽度*/
    32. flex-grow: 1;
    33. }

    demo：http://demo.qianduanblog.com/2799/5.html

    六、左右固定中间自适应宽度底部对齐布局

    上面的例子是左右布局的，相比较而言，双栏布局会做了，那么三栏布局也就不是问题了。先看实例图：

    HTML：
    1. class="demo">
    2. class="left">左边固定宽度为100px，这里设置了高度为auto
    3. class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px
    4. class="right">右边固定宽度为150px，这里设置了高度为auto

    CSS：

     
  
       
   
    1. .demo{
      2.  
   
    2.  /*flex布局（作用于容器）*/
      3.  
   
    3.  display: flex;
      4.  
   
    4.  
      5.  
   
    5.  /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/
      6.  
   
    6.  align-items: flex-end;
      7.  
   
    7. }
      8.  
   
    8.  
      9.  
   
    9. .demo .left{
      10.  
   
    10.  /*左边固定宽度，必须设置其最小宽度和最大宽度*/
      11.  
   
    11.  width: 100px;
      12.  
   
    12.  min-width: 100px;
      13.  
   
    13.  max-width: 100px;
      14.  
   
    14.  
      15.  
   
    15.  /*高度自由分配*/
      16.  
   
    16.  height: auto;
      17.  
   
    17.  background: #B4D3F7;
      18.  
   
    18.  
      19.  
   
    19.  /*空白区域分配比例为0（作用于项目）*/
      20.  
   
    20.  flex-grow: 0;
      21.  
   
    21. }
      22.  
   
    22.  
      23.  
   
    23. .demo .center{
      24.  
   
    24.  margin: 0 10px;
      25.  
   
    25.  width: auto;
      26.  
   
    26.  height: 200px;
      27.  
   
    27.  background: #F7E8B4;
      28.  
   
    28.  
      29.  
   
    29.  /*空白区域分配比例为1（作用于项目）
      30.  
   
    30.  左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
      31.  
   
    31.  左边成固定的宽度，右边为自适应宽度*/
      32.  
   
    32.  flex-grow: 1;
      33.  
   
    33. }
      34.  
   
    34.  
      35.  
   
    35. .demo .right{
      36.  
   
    36.  /*右边固定宽度，必须设置其最小宽度和最大宽度*/
      37.  
   
    37.  width: 150px;
      38.  
   
    38.  min-width: 150px;
      39.  
   
    39.  max-width: 150px;
      40.  
   
    40.  
      41.  
   
    41.  /*高度自由分配*/
      42.  
   
    42.  height: auto;
      43.  
   
    43.  background: #CBFFD2;
      44.  
   
    44.  
      45.  
   
    45.  /*空白区域分配比例为0（作用于项目）*/
      46.  
   
    46.  flex-grow: 0;
      47.  
   
    47. }
      48.  
  
     
  
     demo：http://demo.qianduanblog.com/2799/6.html
     
  
     
     
  
     原文地址：http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
     
  

                            
                        
                    
                    
                    
    
                    
                    
                    
    
                
                
    
                    
                
    
            
        
    
    
    
        
    你可能感兴趣的:(web前端)
    
        
    
            
    
                
      
                    
    • 计算机学习建议
                        qincjun
学习
                        
      对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去
      
                    
      • 
                    
    • web前端面试问什么，【前端，2024华为前端高级面试题及答案
                        uiuuyy67
2024年程序员学习前端面试华为
                        
      效果截图：用户名是只读的，所以无法在text文本框里输入值；账号是禁用的，直接变成灰色了。2.input标签常用的type属性值讲解text文本框password密码框radio单选框checkbox复选框file文件选择hidden隐藏域hidden是用户看不见的东西，给管理员（写网页的）操作保存信息的！submit提交reset重置（2）select下拉框option：下拉选项（下拉框的基本标
      
                    
      • 
                    
    • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了
                        阿毛sky
electronvue前端
                        
      由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
      
                    
      • 
                    
    • nodejs：express + js-mdict 网页查询英汉词典，能播放声音
                        belldeep
nodejsweb服务nodejsexpressjs-mdict
                        
      向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.
      
                    
      • 
                    
    • nodejs：express + js-mdict 网页查询英汉词典，能显示图片
                        belldeep
nodejsjavascriptnodejsjavascriptjs-mdictexpress
                        
      向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉
      
                    
      • 
                    
    • Web前端面试题(持续更新中)
                        Bearin
前端web
                        
      一、闭包是什么JS中内层函数可以访问外层函数的变量，使内部私有变量不受外界干扰，起到保护和保存的作用，我们把这个特性称作闭包。好处：1.隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。2.让我们可以使用回调，操作其他函数内部；3.变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；坏处：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起
      
                    
      • 
                    
    • 【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlhtml5css课程设计HTML学生个人网页设计javascript网页设计作业
                        
      文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、‍网站题目‍学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计，采用DIV+C
      
                    
      • 
                    
    • javascript的成熟分类：“成熟分类”之路
                        lizi88888
javascript开发语言ecmascript
                        
      JavaScript是一门广泛应用于Web前端开发的高级编程语言，具有交互性强、界面效果丰富等优点。其在Web开发中的广泛应用越来越受到业界的关注，从最初的“套壳”式编程到现在的成熟分类，JavaScript已经发生了巨大的变化。ES5ES5标准于2009年发布，是JavaScript发展的一个重要里程碑。这个版本添加了一些新的语言特性，例如：严格模式、Object.create()方法、Func
      
                    
      • 
                    
    • 36.Web前端网页制作 NBA体育主题网页设计实例 大学生期末大作业 html+css+js
                        d321654987123
体育前端课程设计htmlhtml5javascriptcssjquery
                        
      目录一、前言二、网页文件三、网页效果四、代码展示1.HTML2.CSS3.JS五、更多推荐一、前言本实例以“体育”NBA为主题设计，应用html+css+js，包括图片轮翻效果、视频、表单等，12个子页面，代码简洁明了，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q
      
                    
      • 
                    
    • Web前端三大主流框架：Angular、React与Vue的对比与解析
                        生活的方式简单点
前端框架前端angular.jsreact.jsvue.js
                        
      在快速发展的Web前端领域，框架的选择对于项目的成功至关重要。Angular、React和Vue作为三大主流前端框架，各自拥有独特的特点和优势，为开发者提供了强大的工具集和灵活的解决方案。本文将对这三大框架进行详细的对比与解析，帮助读者更好地了解它们的特点和适用场景。一、AngularAngular是Google开发的一款开源JavaScript框架，它提供了一套完整的开发解决方案，包括数据绑定、
      
                    
      • 
                    
    • Web前端第一次作业
                        unfeeling_
前端
                        
      作业代码：（1）登录页面：登录会员登录页面YQ会员登录账号：密码：（2）注册页面：DocumentYQ会员注册账号：密码：确认密码：昵称：(3)主页页面跳转：index主页登录页面注册页面效果展示：总结：主页点击登录或者注册能直接跳转到新页面，登录页面，输入账号密码，就可以跳转到对应主页，注册页面也是如此，该次作业运用了表格标签修饰页面，用表单标签做出要求，最后运用超链接实现页面跳转
      
                    
      • 
                    
    • 手把手教你给 windows装个vmware虚拟机
                        python算法小白

                        
      附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ
      
                    
      • 
                    
    • Web前端第三次作业
                        shayell
前端
                        
      1.学校官网（1）相关信息学校官网-相关信息body{font-family:Arial,sans-serif;}.header{background-color:#4CAF50;color:white;padding:10px;text-align:center;}.nav{overflow:hidden;background-color:#333;}.nava{float:left;displ
      
                    
      • 
                    
    • web前端Vue项目搭建流程
                        sulu_all is well
项目搭建前端vue.jsjavascriptnode.js
                        
      Node.js安装教程一、安装环境node.js下载官网:nodejs官网.二、安装步骤1、双击安装包，一直点击下一步。2、点击change按钮，更换到自己的指定安装位置，点击下一步（不修改默认位置也是可以的）。3、一直点击下一步，最后安装成功即可。三、验证安装在键盘按下【win+R】键，输入cmd，然后回车，打开命令行界面进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功node-v显
      
                    
      • 
                    
    • AI前端开发：拥抱未来，提升薪资！
                        
前端
                        
      在AI时代，数字化转型浪潮席卷全球，前端开发人才的需求量也随之水涨船高。而更进一步，掌握AI写代码工具等AI前端开发技能，则成为提升竞争力，获得高薪的关键。本文将深入探讨AI前端开发如何助力你提升薪资水平，开启职业发展新篇章。AI前端开发的市场价值：高薪的秘密传统的Web前端开发工作，常常面临着重复性工作繁多、开发周期长、人效低下的问题。而AI前端开发的出现，彻底改变了这一现状。熟练掌握AI前端开
      
                    
      • 
                    
    • 【转】前端组件化框架之路
                        weixin_33924220

                        
      1.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混乱而欣欣向荣的景象。这一方面说明前端领域的创造力很旺盛，另一方面却说明了基础设
      
                    
      • 
                    
    • 2015前端组件化框架之路(转)
                        aisheng3237

                        
      https://github.com/xufei/blog/issues/191.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混
      
                    
      • 
                    
    • web前端学习7-css动画过渡
                        修罗_
web前端新手必看16篇css3css
                        
      学习7-css动画过渡css使用过渡p{/*初始属性*/width:100px;height:100px;background-color:#00FFFF;}p:hover{/*间接过渡法-鼠标经过区域会显示为以下属性*/width:200px;height:200px;background-color:#FF0000;transition-delay:1s;/*1秒后执行过渡*/transiti
      
                    
      • 
                    
    • web前端必做笔试题-HTML/CSS篇
                        万息集训教育
html面试css3
                        
      HTML/CSS1、什么是盒子模型？请画出盒模型示意图2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？3、如何居中一个div？如何居中一个浮动元素?(多种方式)4、什么是cssHack？5、css选择器有哪些?优先级是怎样的？6、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？7、什么是外边距重叠？重叠的结果是什么？8、Rgba()和opacity的透明效果有什么不同？9、
      
                    
      • 
                    
    • 【axios】尚硅谷Web前端axios入门与源码解析
                        abigale03
JavaScript前端1024程序员节
                        
      视频地址：【尚硅谷Web前端axios入门与源码解析】https://www.bilibili.com/video/BV1wr4y1K7tq/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155前置知识promise【Promise】阮一峰JavaScript教程-7-异步操作-CSDN博客ajax【千峰前端】day11
      
                    
      • 
                    
    • 【web前端】单向数据绑定和双向数据绑定有什么区别？
                        myt2000
arkTStypescript
                        
      单向数据绑定和双向数据绑定有什么区别？单向数据绑定和双向数据绑定有什么区别？总结单向数据绑定和双向数据绑定有什么区别？绑定方向：单向数据绑定是只从数据到模板的绑定，即外部数据（如后台数据）的变化会导致页面更新，但页面上的修改不会反馈到数据。而双向数据绑定则是数据模型（Module）和视图（View）之间的双向绑定，即无论用户在视图上的修改还是数据模型中的值发生变化，都会立刻同步到对方的层面。数据更
      
                    
      • 
                    
    • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐）
                        无·糖
Web前端期末大作业html课程设计css大学生javascript美食大作业
                        
      HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
      
                    
      • 
                    
    • 【自学笔记】Web前端的重点知识点-持续更新
                        Long_poem
笔记前端
                        
      提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、
      
                    
      • 
                    
    • html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？
                        安检
html自学学多久
                        
      HTML和CSS要学多久？相信很多想要学习网页前端开发的小伙伴都会有这个疑问，今天W3Cschool小编就来和大家探讨一下这个问题。作为Web前端开发的基础，HTML和CSS是都是非常基础的语言，但是想要以此为工作的话，只是掌握HTML和CSS还是不够的，JS也需要学习。这样还不够，最好还能花一些时间学习一下近几年非常火的HTML5和CSS3，这样才能算是完全掌握了Web前端相关技术。如果单说HT
      
                    
      • 
                    
    • Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践
                        2401_84447112
程序员前端中间件架构
                        
      最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基本使用router.get(“/”,asyncctx=>{ctx.body=“h
      
                    
      • 
                    
    • web前端三大主流框架
                        109702008
人工智能编程前端框架人工智能
                        
      Claude3OpusWeb前端开发中，目前有三个主流的框架：1.React：React是由Facebook开发的一款JavaScript库，用于构建用户界面。它采用组件化的开发模式，将界面拆分成多个独立且可复用的组件，使开发和维护更加高效。React的核心思想是虚拟DOM（VirtualDOM）和单向数据流，通过高效的DOMdiff算法进行页面更新，提供出色的性能和用户体验。2.Angular：
      
                    
      • 
                    
    • 简述大前端技术栈的渲染原理
                        
程序员
                        
      作者：京东物流卢旭大前端包括哪些技术栈大前端指的是涵盖所有与前端开发相关的技术和平台，应用于各类设备和操作系统上。大前端不仅包括Web开发，还包括移动端开发和跨平台应用开发，具体包括：•原生应用开发：Android、iOS、鸿蒙（HarmonyOS）等；•Web前端框架：Vue、React、Angular等；•小程序开发：微信小程序、京东小程序、支付宝小程序等；•跨平台解决方案：ReactNati
      
                    
      • 
                    
    • python web开发框架对比,python的web框架有哪些
                        2401_84503581
人工智能
                        
      大家好，小编为大家解答pythonweb框架主要的三大基本框架的问题。很多人还不知道pythonweb开发框架对比，现在让我们一起来看看吧！本篇文章给大家谈谈pythonweb开发框架有哪些，以及pythonweb前端开发框架，希望对各位有所帮助，不要忘了收藏本站喔。1.Django框架官网：https://github.com/django/django.git优点：是一个高层次PythonWe
      
                    
      • 
                    
    • python实战项目27：boss直聘招聘数据可视化分析
                        wp_tao
Python副业接单实战项目信息可视化python数据分析
                        
      boss直聘招聘数据可视化分析一、数据预处理二、数据可视化三、完整代码一、数据预处理在上一篇博客中，笔者已经详细介绍了使用selenium爬取南昌市web前端工程师的招聘岗位数据，数据格式如下：这里主要对薪水列进行处理，为方便处理，将日薪和周薪的数据删除，将带有13薪和14薪的数据也删除，计算出最低薪资、最高薪资和平均薪资三列。数据预处理代码如下：importpandasaspddf=pd.rea
      
                    
      • 
                    
    • web前端10--变化
                        Lorcian
css前端学习笔记html5
                        
      -transform`transform`：允许你通过改变元素的位置、旋转、缩放或倾斜来操作元素。1、rotate()`rotate()`函数旋转元素。语法：`rotate(angle)`，其中`angle`表示旋转的角度。```css.element{transform:rotate(45deg);}```2、scale()`scale()`函数缩放元素的大小。语法：`scale(x,y)`，其
      
                    
      • 
                                
    • java封装继承多态等
                                    麦田的设计者
javaeclipsejvmcencapsulatopn
                                    
             最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。 
    1、final关键字 
      译为：最终的 
       &
      
                                
      • 
                                
    • F5与集群的区别
                                    bijian1013
weblogic集群F5
                                    
              http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。 
        F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
      
                                
      • 
                                
    • LeetCode[Math] - #7 Reverse Integer
                                    Cwind
java题解MathLeetCodeAlgorithm
                                    
      原题链接：#7 Reverse Integer 
  
要求： 
按位反转输入的数字 
例1： 输入 x = 123, 返回 321 
例2： 输入 x = -123, 返回 -321 
  
难度：简单 
  
分析： 
对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
      
                                
      • 
                                
    • BufferedOutputStream
                                    周凡杨

                                    
           首先说一下这个大批量，是指有上千万的数据量。 
     例子： 
     有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！ 
     select t.msisd
      
                                
      • 
                                
    • linux下模拟按键输入和鼠标
                                    被触发
linux
                                    
      查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 
设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 
 
linux/in
      
                                
      • 
                                
    • ContentProvider初体验
                                    肆无忌惮_
ContentProvider
                                    
      ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 
在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 
如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
      
                                
      • 
                                
    • 关于Spring MVC项目（maven）中通过fileupload上传文件
                                    843977358
mybatisspring mvc修改头像上传文件upload
                                    
      Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。 
  
1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 
因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） 
<!-- 文件上传 start by zhangyd-c --&g
      
                                
      • 
                                
    • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作
                                    aigo
svnkit
                                    
       原文：http://blog.csdn.net/hardwin/article/details/7963318 
  
import java.io.File;  
  
import org.apache.log4j.Logger;  
import org.tmatesoft.svn.core.SVNCommitInfo;  
import org.tmateso
      
                                
      • 
                                
    • 对比浏览器，casperjs，httpclient的Header信息
                                    alleni123
爬虫crawlerheader
                                    
      		@Override
		protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException
		{
			String type=req.getParameter("type");
			Enumeration es=re
      
                                
      • 
                                
    • java.io操作 DataInputStream和DataOutputStream基本数据流
                                    百合不是茶
java流
                                    
      1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到 
  
  
2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
      
                                
      • 
                                
    • 车辆保险理赔案例
                                    bijian1013
车险
                                    
      理赔案例： 
一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 
赔付建议和方案： 
客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 
如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
      
                                
      • 
                                
    • 学习Spring必学的Java基础知识(5)—注解
                                    bijian1013
javaspring
                                    
              文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。 
  
        有必要对
      
                                
      • 
                                
    • 【Struts2一】Struts2 Hello World
                                    bit1129
Hello world
                                    
      Struts2 Hello World应用的基本步骤 
创建Struts2的Hello World应用，包括如下几步： 
1.配置web.xml 
2.创建Action 
3.创建struts.xml，配置Action 
4.启动web server，通过浏览器访问 
  配置web.xml 
<?xml version="1.0" encoding="
      
                                
      • 
                                
    • 【Avro二】Avro RPC框架
                                    bit1129
rpc
                                    
      1. Avro RPC简介 1.1. RPC 
 
 RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 
 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
      
                                
      • 
                                
    • lua　set get cookie
                                    ronin47
lua cookie
                                    
      lua:
local access_token = ngx.var.cookie_SGAccessToken
if access_token then
    ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000"
end
      
                                
      • 
                                
    • java-打印不大于N的质数
                                    bylijinnan
java
                                    
      

public class PrimeNumber {

	/**
	 * 寻找不大于N的质数
	 */
	public static void main(String[] args) {
		int n=100;
		PrimeNumber pn=new PrimeNumber();
		pn.printPrimeNumber(n);
		System.out.print
      
                                
      • 
                                
    • Spring源码学习-PropertyPlaceholderHelper
                                    bylijinnan
javaspring
                                    
      今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 
当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 
详见： 
http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug 
 

      
                                
      • 
                                
    • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么?
                                    comsci
拓扑
                                    
       
   如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢? 
 
   是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
      
                                
      • 
                                
    • ITEYE 都换百度推广了
                                    cuisuqiang
GoogleAdSense百度推广广告外快
                                    
      以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。 
  
为什么个人博客设置里面还是Google AdSense呢？ 
  
都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。 
  
什么时候能从ITEYE上来点外快，哪怕少点
      
                                
      • 
                                
    • 新浪微博技术架构分析
                                    dalan_123
新浪微博架构
                                    
      新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
      
                                
      • 
                                
    • 玩转ARP攻击
                                    dcj3sjt126com
r
                                    
      我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
      
                                
      • 
                                
    • PHP编码规范
                                    dcj3sjt126com
编码规范
                                    
      一、文件格式 
1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
      
                                
      • 
                                
    • linux 脱机管理（nohup）
                                    eksliang
linux nohupnohup
                                    
      脱机管理 nohup 
转载请出自出处：http://eksliang.iteye.com/blog/2166699 
nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 
nohup [命令与参数]   --在终端机前台工作
nohup [命令与参数] & --在终端机后台工作 
  
但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
      
                                
      • 
                                
    • BusinessObjects Enterprise Java SDK
                                    greemranqq
javaBOSAPCrystal Reports
                                    
      最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。 
  
首先，我是尝试用JAVA JSP 去访问的。 
  
官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
      
                                
      • 
                                
    • 系统负载剧变下的管控策略
                                    iamzhongyong
高并发
                                    
      假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 
1、水平扩展 
这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 
2、系统分组 
假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
      
                                
      • 
                                
    • BitTorrent DHT 协议中文翻译
                                    justjavac
bit
                                    
      前言 
做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 
 
 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
      
                                
      • 
                                
    • Ubuntu下Java环境的搭建
                                    macroli
java工作ubuntu
                                    
      配置命令： 
　　$sudo apt-get install ubuntu-restricted-extras 
　　再运行如下命令： 
　　$sudo apt-get install sun-java6-jdk 
　　待安装完毕后选择默认Java. 
　　$sudo update- alternatives --config java 
　　安装过程提示选择，输入“2”即可，然后按回车键确定。 
      
                                
      • 
                                
    • js字符串转日期（兼容IE所有版本）
                                    qiaolevip
TODateStringIE
                                    
      	/**
	 * 字符串转时间（yyyy-MM-dd HH:mm:ss）
	 * result （分钟）
	 */
	stringToDate : function(fDate){
		var fullDate = fDate.split(" ")[0].split("-");
		var fullTime = fDate.split("
      
                                
      • 
                                
    • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析
                                    superlxw1234
sql数据挖掘关联规则
                                    
      关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 
关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 
例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%]  支持度3%：意味3%顾客同时购买牛奶和面包。   置信度40%：意味购买牛奶的顾客40%也购买面包。   规则的支持度和置信度是两个规则兴
      
                                
      • 
                                
    • Spring 5.0 的系统需求，期待你的反馈
                                    wiselyman
spring
                                    
              
       Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。 
  
       Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。 
 
      
                                
      • 
                
    
            
    
        
    
    
    


    
    
    
        
    
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他