我是一阵风xu
我是一阵风xu

移动web开发布局模式（单独制作移动端界面）之流式布局和Flex布局

移动web开发布局模式（单独制作移动端界面一）

  • 单独制作移动端界面布局方式
    • 1.移动端开发基础
      • 1.1移动端常见布局
      • 1.2移动端大量使用 CSS3盒子模型box-sizin
      • 1.3移动端公共与特殊样式
    • 2.流式布局
    • 3.Flex布局
      • 3.1Flex布局原理
      • 3.2父项常见属性
        • 3.2.1flex-direction设置主轴的方向
        • 3.2.2justify-content 设置主轴上的子元素排列方式
        • 3.2.3flex-wrap设置是否换行
        • 3.2.4 align-items 设置侧轴上的子元素排列方式（单行 ）
        • 3.2.5 align-content 设置侧轴上的子元素的排列方式（多行）
        • 3.2.6 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
      • 3.3 子项常见属性
        • 3.3.1 子项常见属性
        • 3.3.2 align-self控制子项自己在侧轴上的排列方式
        • 3.3.3 order 属性定义项目的排列顺序

单独制作移动端界面布局方式

单独制作移动端页面是目前移动端界面开发的主流方式。响应式开发（pc端和移动端共用一套网站）是移动端界面发开的此要方式。

1.移动端开发基础

1.1移动端常见布局

1.移动端单独制作:

  • 流式布局（百分比布局）
  • flex 弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

2.响应式:

  • 媒体查询
  • bootstarp

1.2移动端大量使用 CSS3盒子模型box-sizin

  • 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

  • CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了。

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

移动端可以全部CSS3 盒子模型。
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型。

1.3移动端公共与特殊样式

移动端公共样式：

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

2.流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 流式布局方式是移动web开发使用的比较常见的布局方式。

代码如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }    
        section div:nth-child(1) {
            background-color: pink;
        }
        section div:nth-child(2) {
            background-color: purple;
        }
    style>
head>
<body>
    <section>
        <div>div>
        <div>div>
    section>
body>

html>

3.Flex布局

如果是pc端页面布局，还是采用传统方式；如果是移动端或者是不考虑兼容的pc则采用flex。

3.1Flex布局原理

  • flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
    item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
代码如下：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>

html>

效果如下：
移动web开发布局模式（单独制作移动端界面）之流式布局和Flex布局_第1张图片

3.2父项常见属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.2.1flex-direction设置主轴的方向

  • 默认主轴方向就是 x 轴方向，水平向右
  • 默认侧轴方向就是 y 轴方向，水平向下

移动web开发布局模式（单独制作移动端界面）之流式布局和Flex布局_第2张图片

3.2.2justify-content 设置主轴上的子元素排列方式

移动web开发布局模式（单独制作移动端界面）之流式布局和Flex布局_第3张图片

3.2.3flex-wrap设置是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

  • nowrap 不换行
  • wrap 换行

3.2.4 align-items 设置侧轴上的子元素排列方式（单行 ）

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用。

  • flex-start 从头部开始
  • flex-end 从尾部开始
  • center 居中显示
  • stretch 拉伸

3.2.5 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

单行和多行区别：

  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items 多行找 align-content

3.2.6 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

3.3 子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序（前后顺序）

3.3.1 子项常见属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

3.3.2 align-self控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

3.3.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。

.item {
    order: ;
}

代码如下：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }      
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }       
        div span:nth-child(3) {
            align-self: flex-end;
        }
    style>
head>
<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>
html>

效果如下：
移动web开发布局模式（单独制作移动端界面）之流式布局和Flex布局_第4张图片

你可能感兴趣的:(移动web开发)

  • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
    移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
  • 移动开发中“单位”的那些事儿 小灯光环 前端开发移动开发pxviewportandroidwebapp
    前言在移动开发中我们常常会考虑度量单位的问题，在传统pc的web开发中用的比较多的是px（css像素），在android开发中一般则用dp、sp、px（物理像素）等，而移动web开发中同样也是用px（css像素）做单位，通常会结合viewport进行缩放。本篇blog就梳理一下在移动开发中用到的各种单位以及他们之间的联系和区别。绝对单位和相对单位如题，首先来看看什么是绝对单位和相对单位：绝对单位：
  • Web前端-移动web开发_rem布局 北方的南& Web笔记前端
    文章目录移动web开发之rem布局1.0rem基础1.1rem单位(重点)1.2em单位(了解)1.3媒体查询什么是媒体查询媒体查询语法规范1.4less基础维护css弊端Less介绍Less安装Less使用之变量使用node编译less的指令Less编译vocodeLess插件Less嵌套Less运算Less中的Mixin混入Less中的导入2.0rem适配方案2.1rem实际开发适配方案12.
  • 跟着pink老师前端入门教程-day20 axiu呀 移动端HTML5+CSS3前端开发语言html5css3vscodecss
    二、移动WEB开发之flex布局1、flex布局体验1.1传统布局与flex布局传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持建议：1.如果是PC端页面布局，我们还是传统布局。2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.
  • 跟着pink老师前端入门教程-day19 axiu呀 HTML5+CSS3移动端前端开发语言html5css3vscode
    一、移动WEB开发之流式布局1、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2常见移动屏幕尺寸注：以上
  • 移动web开发流式布局 Gao_xu_sheng 前端
    1.0移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。内核：浏览器内核备注Safariwebkitwebkit内核是苹果公司开发的一款渲染引擎，目前已被很多手机厂商所采用，包括谷歌、三星、HTC等chromeBlink在chrome项目中研发Blink渲染引擎（即浏览器核心），内置于Chrome浏览器之中。Blink
  • Web前端-移动web开发——flex布局 北方的南& Web笔记前端web3
    移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0flex布局原理flex是flexibleBo
  • Web前端-移动web开发_流式布局 北方的南& Web笔记前端
    文章目录移动web开发流式布局1.0移动端基础1.1浏览器现状1.2手机屏幕的现状1.3常见移动端屏幕尺寸1.4移动端调试方法2.0视口2.1布局视口layoutviewport2.2视觉视口visualviewport2.3理想视口idealviewport（苹果）2.4meta标签3.0物理像素(手机分辨率)&物理像素比3.1概述3.2二倍图3.3背景缩放background-size4.0移
  • 学习回顾No.6 小Z想打代码 学习webhtmlcssjavascript
    移动WEB开发视口（viewport）布局视口视觉视口理想视口meta视口标签width=>设viewport宽度initial-scale=>初始缩放比maximum-scale=>最大minimum-scale=>最小user-scalable=>用户是否可缩放，yes或no（1或0）物理像素&物理像素比Retina(视网膜屏幕)使移动端和PC端像素不一一对应多倍图=>先放大再缩小背景图片缩放
  • 《二》CSS 中常用的单位 花铛 移动端移动端
    CSS中的单位整体上可以分为两类：绝对长度单位和相对长度单位。绝对长度单位：绝对长度单位与其他任何东西都没有关系，总是相同的大小。除了常用的px像素外，还有pt点、in英寸、cm厘米、mm毫米等。px：px：像素。在进行移动Web开发时，当需要设置固定宽高或字体大小时可用。相对长度单位：相对长度单位是指相对于其他一些东西来计算大小。百分比%：百分比%：在进行移动Web开发时，可用来进行布局。为不同
  • 移动前端开发进阶之路—页面布局 微光姑娘
    Viewport移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思是视图窗口，通俗的讲就是指移动设备上能用来显示页面的那部分区域。设备像素对于设备来说，有两个设备像素：物理像素和独立像素。物理像素：是指设备显示屏中使用的最小显示单位，也就是屏幕分辨率独立像素：Web编程种的逻辑像素，也就是CSS像素。像素密度PPI（pixelsperinch）用来表示设备每英寸所拥有
  • 移动web开发——flex布局 過尽千帆_YL
    一，传统布局和——flex布局1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex二，flex布局原理当我们为父盒子设为flex布局以后，子元素的float、clea
  • 移动web开发之自适应布局解决方案一: less+媒体查询+rem 百思不得小李 JS实战记录前端lesswebapp
    移动web自适应布局有两种方案：1.less+媒体查询+rem2.flexible.js+rem(推荐)推荐方案2，下面我们一起来学习一下。less+媒体查询+remless这种CSS预处理语言我们可以去less中文网学习，这里不复述。less+媒体查询+rem实现自适应布局的原理是通过动态设置html标签的font-size大小，然后页面元素以rem作为单位从而可以适配不同屏幕。下面我们用此方案
  • 6天移动web开发视频教程_针对Web和移动开发人员的完整视频解决方案 culi4814 数据库大数据pythonjava编程语言
    6天移动web开发视频教程ThisarticlewasoriginallypublishedonCloudinaryBlog.ThankyouforsupportingthepartnerswhomakeSitePointpossible.本文最初发布在CloudinaryBlog上。感谢您支持使SitePoint成为可能的合作伙伴。Videosinwebsitesandappsarestarti
  • 常用移动web开发框架 道简（Linus） 移动WEBWEB开发移动开发框架
    阿里云优惠：最高￥2000云产品通用代金券https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=dansrwg4纯粹的总结一下移动web开发框架，移动web开发框架有jQueryMobile、SenchaTouch等等,他们都来源于web开发，是成熟的框架，jQueryMobile出自于jQuery家族，SenchaTou
  • 移动web开发调试工具vorlon（适合app混合开发） 李佳明先生
    一、介绍：相信一开始开发移动端web页面的小伙伴会有一个问题，移动端页面在移动设备上真机调试或者是app混合开发测试的时候会有很大的不方便，并不能像chrome浏览器那样控制台打log，查看dom布局，css样式等问题，当在真机出现错误的时候也很难进行排查。今天介绍一个移动端web调试工具，可以像操作chrome控制台那样进行错误排查。官方介绍Vorlon.js可以帮助开发者加载、检查、测试及调试
  • 响应式 稻草人_9ac7
    什么是响应式开发：可以响应不同的布局：a)在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读b)之前，通常的做法是对移动端单独开发一套特定的版本c)但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配d)响应式开发的目的就是:一个网站能够兼容多种终端e)在新建的网站上一般都会使用响应式开发f)移动web开发和响应式开发是必须具备的技能g)演
  • 技术栈 小白IT
    一、HTML、CSS基础、JavaScript语法基础。二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。三、ES6语法。这部分属于JS新增的语法，promise、async等内容要尤其关注。四、HTML5和CSS3。要熟悉其中的新特性。五、canvas。加分项。六、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。七、前端框架：Vue.js和Re
  • 移动web开发之flex布局 柒小莫 前端csshtml
    文章目录前言一、flex布局体验1.1传统布局与flex布局1.2初体验二、flex布局原理2.1布局原理三、flex布局父项常见属性3.1常见父项属性3.2flex-direction设置主轴的方向*3.3justify-content设置主轴上的子元素排列方式*3.4flex-wrap设置子元素是否换行*3.5align-items设置侧轴上的子元素排列方式（单行）*3.6align-cont
  • 移动Web开发之flex布局 瑾川致知 前端之美前端csscss3Flex布局布局
    文章目录一、1.0传统布局和flex布局对比1.1、传统布局1.2、flex布局1.3、总结二、flex布局原理三、flex布局父项常见属性3.1、flex-direction设置主轴的方向3.2、justify-content设置主轴上的子元素排列方式3.3、flex-wrap设置是否换行3.4、align-items设置侧轴上的子元素排列方式(单行)3.5、align-content设置侧轴上
  • 移动WEB开发 之 flex布局 不爱吃菜的蔡菜 移动Web开发前端csscss3web移动端
    目录flex布局体验flex布局原理布局原理flex布局父项常见属性常见父项属性flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-items设置侧轴上的子元素排列方式（单行）align-content设置侧轴上的子元素的排列方式（多行）align-content和align-items区别flex-fl
  • Web前端学习笔记09：移动web开发流式布局_flex布局 JasonYangQ Web前端web
    文章目录移动web开发流式布局1.0移动端基础1.1浏览器现状1.2手机屏幕的现状1.3移动端调试方法2.0视口2.1布局视口layoutviewport2.3理想视口idealviewport2.4meta标签3.0二倍图3.2背景缩放background-size4.0移动开发选择和技术解决方案4.2移动端技术解决方案4.3移动端大量使用CSS3盒子模型box-sizin4.4移动端特殊样式5
  • 移动WEB开发之flex布局 丑八怪223 前端前端csshtml
    一、flex布局体验1.1传统布局与flex布局建议：1.如果是PC端页面布局，我们还是传统布局。2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.2初体验1.搭建HTML结构123里面的3个span是行内元素2.CSS样式span直接给宽度和高度，背景颜色，还有蓝色边框给div只需要添加display:flex即可Documentdiv{display:fle
  • 移动web开发之flex布局笔记 打怪升级的雪菜 前端开发学习flexcsshtmljavascriptweb
    flex盒子的布局原理flex布局的常用属性携程移动端首页案例1flex布局体验1.1传统布局与flex布局传统布局：兼容性好布局繁琐局限性，不能在移动端很好地布局flex弹性布局：操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况很差IE11或更低版本，不支持或仅部分支持建议：如果是PC端页面布局，还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，就使用flex弹性布局2f
  • 《HTML5移动web开发指南》笔记（二） 重庆淡静
    第1章移动互联网时代的web技术智能手机的web浏览器Android：AndroidBrowser；IOS：MobileSafari；BackBerry：Webkit浏览器；SymbianS60：WebBrowserforS60。这些移动web浏览器不同于过去的WAP浏览器，它们能识别和解释HTML、CSS、JavaScript等代码，而且都有一个共同的特点就是其浏览器的核心都是基于Webkit。
  • 移动web开发调试工具eruda（适合app混合开发） 李佳明先生
    一、介绍：相信一开始开发移动端web页面的小伙伴会有一个问题，移动端页面在移动设备上真机调试或者是app混合开发测试的时候会有很大的不方便，并不能像chrome浏览器那样控制台打log，查看dom布局，css样式等问题，当在真机出现错误的时候也很难进行排查。今天介绍一个移动端web调试工具，可以像操作chrome控制台那样进行错误排查。NPM介绍移动浏览器控制台（社会我E哥，人狠话不多。。）面板样
  • 移动web开发rem适配布局 qq_46372132 前端less
    移动web开发rem适配布局学习目标:能够使用rem单位能够使用媒体查询的基本语法能够使用Less的基本语法能够使用Less中的嵌套能够使用Less中的运算能够使用2种rem适配方案1.rem单位基础2.媒体查询2.1什么是媒体查询媒体查询是css3的新语法使用@media查间，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会
  • 移动web开发 七分之二十四
    前端开发常用单位像素在前端开发中视口的水平方向和垂直方向是由很多小方格组成的,一个小方格就是一个像素特点:不会随着视口大小的变化而变化,像素是一个固定的单位(绝对单位)百分比百分比是前端开发中的一个动态单位,永远都是以当前元素的父元素作为参考进行计算特点子元素宽度是参考父元素宽度计算的子元素高度是参考父元素高度计算的子元素padding和margin无论是垂直方向还是水平方向都是参考父元素的宽度计
  • 移动WEB开发 甄子健
    了解移动端基础浏览器移动端的浏览器大多都是基于webkit修改的内核，国内尚无自主研发的内核。所以，兼容移动端主流浏览器，处理webkit内核浏览器即可。手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：400*800，480*854，540*960，720*1290，1080*1920等。近年来iPhone的碎片化也加剧了，640*960，640*1136，750
  • 移动web开发 你带来了我的快乐
    一、屏幕适配问题解决方案流式布局:就是百分比布局，非固定像素，内容像两侧填充，理解成流动的布局，称为流式布局。viewport视口(主流的适配方案):移动端特有，是一个虚拟的区域，承载网页的。承载的关系:浏览器->viewport->网页3.非主流适配(淘宝:目前看已经改为主流，已淘汰):根据物理像素放大当前的页面(2或者3倍)二、移动端常设置盒子的类型为边框盒box-sizing:border-
  • springmvc 下 freemarker页面枚举的遍历输出 杨白白 enumfreemarker
    spring mvc freemarker 中遍历枚举 1枚举类型有一个本地方法叫values（），这个方法可以直接返回枚举数组。所以可以利用这个遍历。 enum public enum BooleanEnum { TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否");
  • 实习简要总结 byalias 工作
    来白虹不知不觉中已经一个多月了，因为项目还在需求分析及项目架构阶段，自己在这段 时间都是在学习相关技术知识，现在对这段时间的工作及学习情况做一个总结： （1）工作技能方面 大体分为两个阶段，Java Web 基础阶段和Java EE阶段 1）Java Web阶段 在这个阶段，自己主要着重学习了 JSP, Servlet, JDBC, MySQL，这些知识的核心点都过 了一遍，也
  • Quartz——DateIntervalTrigger触发器 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208559 一.概述 simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间，这就导致他有不适合调度的定时任务。例如我们想每天的 1：00AM 执行任务，如果使用 SimpleTrigger，间隔时间就是一天。注意这里就会有一个问题，即当有 misfired 的任务并且恢复执行时，该执行时间
  • Unix快捷键 18289753290 unixUnix；快捷键;
    复制，删除，粘贴： dd:删除光标所在的行                             &nbs
  • 获取Android设备屏幕的相关参数 酷的飞上天空 android
    包含屏幕的分辨率  以及 屏幕宽度的最大dp 高度最大dp   TextView text = (TextView)findViewById(R.id.text); DisplayMetrics dm = new DisplayMetrics(); text.append("getResources().ge
  • 要做物联网？先保护好你的数据 蓝儿唯美 数据
    根据Beecham Research的说法，那些在行业中希望利用物联网的关键领域需要提供更好的安全性。 在Beecham的物联网安全威胁图谱上，展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。 Beecham Research的技术主管Jon Howes说：“之所以我们目前还没有看到与物联网相关的严重安全事件，是因为目前还没有在大型客户和企业应用中进行部署，也就
  • Java取模（求余）运算 随便小屋 java
            整数之间的取模求余运算很好求，但几乎没有遇到过对负数进行取模求余，直接看下面代码： /** * * @author Logic * */ public class Test { public static void main(String[] args) { // TODO A
  • SQL注入介绍 aijuans sql注入
    二、SQL注入范例 这里我们根据用户登录页面 <form action="" > 用户名：<input type="text" name="username"><br/> 密 码：<input type="password" name="passwor
  • 优雅代码风格 aoyouzi 代码
    总结了几点关于优雅代码风格的描述： 代码简单：不隐藏设计者的意图，抽象干净利落，控制语句直截了当。 接口清晰：类型接口表现力直白，字面表达含义，API 相互呼应以增强可测试性。 依赖项少：依赖关系越少越好，依赖少证明内聚程度高，低耦合利于自动测试，便于重构。 没有重复：重复代码意味着某些概念或想法没有在代码中良好的体现，及时重构消除重复。 战术分层：代码分层清晰，隔离明确，
  • 布尔数组 百合不是茶 java布尔数组
      androi中提到了布尔数组;   布尔数组默认的是false,  并且只会打印false或者是true   布尔数组的例子;  根据字符数组创建布尔数组 char[] c = {'p','u','b','l','i','c'}; //根据字符数组的长度创建布尔数组的个数 boolean[] b = new bool
  • web.xml之welcome-file-list、error-page bijian1013 javaweb.xmlservleterror-page
    welcome-file-list 1.定义： <welcome-file-list> <welcome-file>login.jsp</welcome> </welcome-file-list>  2.作用：用来指定WEB应用首页名称。   error-page1.定义： <error-page&g
  • richfaces 4 fileUpload组件删除上传的文件 sunjing clearRichfaces 4fileupload
     页面代码               <h:form id="fileForm">            <rich:
  • 技术文章备忘 bit1129 技术文章
    Zookeeper http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV
  • org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案 白糖_ Hibernate
    文章摘自：http://blog.csdn.net/yangwawa19870921/article/details/7553181   在编写HQL时，可能会出现这种代码： select a.name,b.age from TableA a left join TableB b on a.id=b.id  如果这是HQL，那么这段代码就是错误的，因为HQL不支持
  • sqlserver按照字段内容进行排序 bozch 按照内容排序
    在做项目的时候，遇到了这样的一个需求：           从数据库中取出的数据集，首先要将某个数据或者多个数据按照地段内容放到前面显示，例如:从学生表中取出姓李的放到数据集的前面；          select * fro
  • 编程珠玑-第一章-位图排序 bylijinnan java编程珠玑
    import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.Random; public class BitMapSearch {
  • Java关于==和equals chenbowen00 java
    关于==和equals概念其实很简单，一个是比较内存地址是否相同，一个比较的是值内容是否相同。虽然理解上不难，但是有时存在一些理解误区，如下情况： 1、 String a = "aaa"; a=="aaa"; ==> true 2、 new String("aaa")==new String("aaa
  • [IT与资本]软件行业需对外界投资热情保持警惕 comsci it
          我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...       如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然
  • oracle 数据块结构 daizj oracle块数据块块结构行目录
    oracle 数据块是数据库存储的最小单位，一般为操作系统块的N倍。其结构为： 块头－－〉空行－－〉数据，其实际为纵行结构。 块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块（Standard Block）。块的大小和标准块的大小不同的块叫非标准块（Nonstandard Block）。同一数据库中，Oracle9i及以上版本支持同一数据库中同时使用标
  • github上一些觉得对自己工作有用的项目收集 dengkane github
    github上一些觉得对自己工作有用的项目收集 技能类 markdown语法中文说明 回到顶部 全文检索 elasticsearch bigdesk elasticsearch管理插件 回到顶部 nosql mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用 C
  • 初二上学期难记单词二 dcj3sjt126com englishword
    dangerous 危险的 panda 熊猫 lion 狮子 elephant 象 monkey 猴子 tiger 老虎 deer 鹿 snake 蛇 rabbit 兔子 duck 鸭 horse 马 forest 森林 fall 跌倒；落下 climb 爬；攀登 finish 完成；结束 cinema 电影院；电影 seafood 海鲜；海产食品 bank 银行
  • 8、mysql外键(FOREIGN KEY)的简单使用 dcj3sjt126com mysql
    一、基本概念 1、MySQL中“键”和“索引”的定义相同，所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引，但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引，InnoDB不能自动地创建索引。 2、外键可以是一对一的，一个表的记录只能与另一个表的一条记录连接，或者是一对多的，一个表的记录与另一个表的多条记录连接。 3、如
  • java循环标签 Foreach shuizhaosi888 标签java循环foreach
    1. 简单的for循环 public static void main(String[] args) { for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) { System.err.println("i=" + i + " y="
  • Spring Security（05）——异常信息本地化 234390216 exceptionSpring Security异常信息本地化
    异常信息本地化          Spring Security支持将展现给终端用户看的异常信息本地化，这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息（如配置错误）则是不能够进行本地化的，它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x
  • DUBBO架构服务端告警Failed to send message Response javamingtingzhao 架构DUBBO
     废话不多说，警告日志如下，不知道有哪位遇到过，此异常在服务端抛出(服务器启动第一次运行会有这个警告)，后续运行没问题，找了好久真心不知道哪里错了。    WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)
  • JS中Date对象中几个用法 leeqq JavaScriptDate最后一天
    近来工作中遇到这样的两个需求 1. 给个Date对象，找出该时间所在月的第一天和最后一天 2. 给个Date对象，找出该时间所在周的第一天和最后一天   需求1中的找月第一天很简单，我记得api中有setDate方法可以使用 使用setDate方法前，先看看getDate var date = new Date(); console.log(date); // Sat J
  • MFC中使用ado技术操作数据库 你不认识的休道人 sqlmfc
    1.在stdafx.h中导入ado动态链接库 #import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti
  • Android Studio加速 rensanning android studio
    Android Studio慢、吃内存！启动时后会立即通过Gradle来sync & build工程。 （1）设置Android Studio a) 禁用插件 File -> Settings...  Plugins 去掉一些没有用的插件。 比如：Git Integration、GitHub、Google Cloud Testing、Google Cloud
  • 各数据库的批量Update操作 tomcat_oracle javaoraclesqlmysqlsqlite
    MyBatis的update元素的用法与insert元素基本相同，因此本篇不打算重复了。本篇仅记录批量update操作的 sql语句，懂得SQL语句，那么MyBatis部分的操作就简单了。 　　注意：下列批量更新语句都是作为一个事务整体执行，要不全部成功，要不全部回滚。 MSSQL的SQL语句 　WITH R AS（ 　　SELECT 'John' as name, 18 as
  • html禁止清除input文本输入缓存 xp9802 input
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他