• 移动开发之h5学习大纲


    移动开发
    学习形式:
    授课、自学


    1、html5 css3 htm5shiv.js response.js

    2、流式布局 自适应布局 盒模型 弹性盒模型 响应式布局
    3、iscroll swiper bootstrap animate.css zepto.js
    4、jquery mobile、jquery ui、EasyUI、amazeui、Sencha Touch 、select3、frozenui
    5、echart hcharts
    图表
    地图


    达成效果的方法有无数种。。重要的是哪种方法效果更好,更方便


    标签:

    1.<meta charset="utf-8">

    2.属性:宽度 height:高度

    3.背景:background

    background-attachment:fixed; 背景是否滚动

        background-color:gray;背景颜色

        background-image:url(bg. jpg);背景图

        background-repeat:no-repeat;背景图是否重复

        background-position:center,等等;背景图位置

    4.边框:border

        border-width:边框宽度

        border-style:边框样式

        border-color:边框颜色

        边框样式:solid实线;dashed虚线;dotted点线(IE6不兼容);

        例:border:1px solid red;边框为1像素大实线红色边框

    5.内边框:padding

        padding-top:上边内边距

        padding-right:右边···

        padding-left:左边···

        padding-bottom:下边···

        注意:内边距相当于给盒子加了填充厚度,会影响盒子大小。

    6.外边距:margin

        margin:top,right,left,bottom;(同上,不包括注意)


    /*新版弹性盒模型*/
    /*display: flex;*/
    /*设置主轴方向水平(左->右)*/
    /*flex-direction: row;*/
    /*设置主轴方向垂直(上->下)*/
    /*flex-direction: column;*/
    /*设置主轴元素排列方向(右->左)*/
    /*flex-direction: row-reverse;*/
    /*设置主轴元素排列方向(下->上)*/
    /*flex-direction: column-reverse;*/
    /*主轴赋予空间管理*/
    /*justify-content: flex-start;*/
    /*justify-content: flex-end;*/
    /*justify-content: center;*/
    /*justify-content: space-between;*/
    /*justify-content: space-around;*/
    /*侧轴赋予空间管理*/
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    /*align-items: center;*/
    /*文字基线对其*/
    /*align-items: baseline;*/


    /*老版弹性盒模型*/
    display: -webkit-box;
    /*设置主轴方向水平*/
    /*-webkit-box-orient: horizontal;*/
    /*设置主轴方向垂直*/
    /*-webkit-box-orient: vertical;*/
    /*设置主轴方向水平(左->右)*/
    /*-webkit-box-direction: normal;*/
    /*设置主轴元素排列方向(右->左)*/
    /*-webkit-box-direction: reverse;*/

    /*-webkit-box-pack: center;
    -webkit-box-pack: start;
    -webkit-box-pack: end;*/
    /*-webkit-box-pack: justify;*/
    /*-webkit-box-align: start;
    -webkit-box-align: end;
    -webkit-box-align: center;*/

    /*新版*/
    /*flex-grow: 1;*/
    /*老板*/
    /*-webkit-box-flex: 1;*/

  • 相关阅读:
    Gecko Bootloader的介绍(Silicon Labs)【一】
    使用模板新建ZigBee工程的方法
    代码控制ZigBee网络密钥的生成
    Ubuntu20编译最新版Android源码教程
    C和C++常用代码片段整理
    Java易错的知识点整理
    仿IntelliJ Darcula的Swing主题FlatLaf使用方法
    PuTTYTabManager汉化版
    WinSCP整合SecureCRT打开终端
    异想家博客图片批量压缩程序
  • 原文地址:https://www.cnblogs.com/mtl-key/p/6649631.html
Copyright © 2020-2023  润新知