移动端布局之流式布局1（百分比布局）：流式布局基础、案例：京东移动端首页1

news2024/11/23 13:02:22

移动端布局之流式布局1

  • 流式布局（百分比布局）基础
  • 案例：京东移动端首页
    • 搭建相关文件夹结构
    • 设置视口标签以及引入初始化样式
      • normalize.css
      • 引入我们的css初始化文件与首页css
    • body设置
      • index.css
    • app布局和app内容填充
      • index.html
      • index.css
    • 搜索模块布局
      • 实现思想
      • 具体实现
        • index.html
        • index.css
    • 搜索模块内容制作
      • index.html
      • index.css

流式布局（百分比布局）基础

  • 流式布局，就是百分比布局，也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式
  • max-width 最大宽度（max-height 最大高度）
  • min-width 最小宽度（min-height 最小高度）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    section{
      width: 100%;
      max-width: 980px;
      min-width: 320px;
      margin: 0 auto;
    }
    section div{
      height: 400px;
      float: left;
      width: 50%;
    }
    section div:nth-child(1){
      background-color: pink;
    }
    section div:nth-child(2){
      background-color: skyblue;
    }
  </style>
</head>
<body>
<section>
  <div></div>
  <div></div>
</section>
</body>
</html>

请添加图片描述
请添加图片描述

案例：京东移动端首页

  • 技术选型
    • 方案：我们采取单独制作移动页面方案
    • 技术：布局采取流式布局

搭建相关文件夹结构

请添加图片描述

设置视口标签以及引入初始化样式

<meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

引入我们的css初始化文件与首页css

<meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">

请添加图片描述

body设置

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
}

app布局和app内容填充

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东APP，实惠又轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img{
    width: 10px;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    /*由于图片默认和文字的基线对齐，因此要将图片和文字居中对齐（适用于行内块元素）*/
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #f53516;
}

请添加图片描述
close.png:
请添加图片描述
logo.png:
请添加图片描述
请添加图片描述

搜索模块布局

实现思想

请添加图片描述

具体实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东APP，实惠又轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!--搜索-->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="search-login"></div>
    </div>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
    background-color: #ccc;
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img{
    width: 10px;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    /*由于图片默认和文字的基线对齐，因此要将图片和文字居中对齐（适用于行内块元素）*/
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #f53516;
}

.search-wrap{
    height: 44px;
    position: relative;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    overflow: hidden;
}
.search-btn{
    position: absolute;
    width: 40px;
    height: 44px;
    top: 0;
    left: 0;
    background-color: pink;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}
.search{
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 7px;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
}

请添加图片描述

搜索模块内容制作

s-btn:
请添加图片描述
jd：
请添加图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
    <!--引入我们的css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
    <!--引入我们首页的css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东APP，实惠又轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!--搜索-->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
</body>
</html>

index.css

body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif; /*苹果手机文字，安卓手机默认字体*/
    line-height: 1.5;  /*字体大小的1.5倍*/
    background-color: #ccc;
}
.app{
    height: 45px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li{
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;  /*图片水平居中*/
    line-height: 45px;  /*图片垂直居中*/
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img{
    width: 10px;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    /*由于图片默认和文字的基线对齐，因此要将图片和文字居中对齐（适用于行内块元素）*/
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #f53516;
}

.search-wrap{
    height: 44px;
    position: relative;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    overflow: hidden;
}
.search-btn{
    position: absolute;
    width: 40px;
    height: 44px;
    top: 0;
    left: 0;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url("../images/s-btn.png") no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
.search{
    height: 30px;
    margin: 0 50px;
    border-radius: 15px;
    background-color: #fff;
    /*外边距合并，解决方法是给父级添加overflow:hidden*/
    margin-top: 7px;
    position: relative;
}
.jd-icon{
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url("../images/jd.png") no-repeat;
    background-size: 20px 15px;
}
/*JD图标后的小竖杠*/
.jd-icon::after{
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/601435.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小说App源码分享，从零开始搭建小说阅读平台

小说App源码分享，从零开始搭建小说阅读平台

作为一名小说阅读爱好者或者创业者&#xff0c;你是否也曾经想要搭建自己的小说阅读平台&#xff1f;然而&#xff0c;开发一款小说App通常需要大量的人力、物力和时间成本&#xff0c;怎样才能让它变得更加容易&#xff1f;今天&#xff0c;我将与大家分享如何从零开始&#x…
阅读更多...
VSD？啥是VSD？VSD应用场景你知道吗？

VSD？啥是VSD？VSD应用场景你知道吗？

软件介绍 Vayo-Stencil Designer Vayo-Stencil Designer&#xff08;简称VSD&#xff09;是一款面向企业的专业钢网设计软件&#xff0c;可以为企业高效构建适合企业自身产品和工艺know-how的数字化开口规范&#xff0c;解决钢网开口审查、局部开口设计、完整钢网设计、PIP焊…
阅读更多...
07 【内置指令 自定义指令】

07 【内置指令 自定义指令】

1. 内置指令 之前学过的指令&#xff1a; v-bind 单向绑定解析表达式&#xff0c;可简写为 :v-model 双向数据绑定v-for 遍历数组 / 对象 / 字符串v-on 绑定事件监听&#xff0c;可简写为****v-show 条件渲染 (动态控制节点是否展示)v-if 条件渲染&#xff08;动态控制节点是…
阅读更多...
一文读懂责任分配矩阵，解决你80%的项目难题

一文读懂责任分配矩阵，解决你80%的项目难题

成功的项目管理取决于整个团队对角色和职责的理解&#xff0c;使用责任分配矩阵分配和定义角色是使项目保持在正轨并为成功做好准备的好方法。 如果设计得当&#xff0c;责任分配矩阵能够促进项目的成功交付。 一、什么是责任分配矩阵 责任分配&#xff08;RACI&#xff09;矩…
阅读更多...
行驶的汽车-第14届蓝桥杯国赛Scratch真题初中级组第1题

行驶的汽车-第14届蓝桥杯国赛Scratch真题初中级组第1题

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第143讲。 行驶的汽车&#xff0c;本题是2023年5月28日上午举行的第14届蓝桥杯国赛Scratch图形化编程初中级组真题第1题…
阅读更多...
chatgpt赋能python：如何关闭Python中的Figure？

chatgpt赋能python：如何关闭Python中的Figure？

如何关闭Python中的Figure&#xff1f; 简介 在Python中使用Matplotlib生成图形时&#xff0c;我们会使用到Figure对象&#xff0c;它是图形的容器。在一些情况下&#xff0c;我们可能需要手动关闭这个Figure&#xff0c;例如多次运行程序导致Figure叠加、或者让程序周期性的…
阅读更多...
Java程序设计入门教程--字符类String

Java程序设计入门教程--字符类String

String构造方法 创建字符串有两种格式 String 字符串名 new String &#xff08;字符串常量&#xff09; ; String 字符串名 字符串常量 ; String str new String ( "student" ); String str "student"&#xff1b;两种格式的区别 这两种格式生成…
阅读更多...
配置WordPress主题时RESTAPI问题

配置WordPress主题时RESTAPI问题

问题1&#xff1a; session_start()函数调用生成了一个会话.该会话干扰了RESTAPI及环回请求。在做出任何HTTP请求前&#xff0c;该会话必须由session_write_close()函数关闭. 问题2&#xff1a; RESTAPI是WordPress及其他应用与服务器通信的一种途径。例如区块编辑器页面&am…
阅读更多...
93年的测试人，什么也不会敢要12K！思绪万千..

93年的测试人，什么也不会敢要12K！思绪万千..

前不久&#xff0c;公司面试了一个93年的测试人&#xff0c;听同事说&#xff0c;在IT行业也摸爬滚打很多年了&#xff0c;现在从事测试岗位&#xff0c;可是什么也不会&#xff0c;却开口说要1.2w.其实挺佩服他的勇气。同事表示开始对他还挺满意的&#xff0c;但是中间发现他包…
阅读更多...
【离散数学】群论考核回顾

【离散数学】群论考核回顾

写在前面&#xff1a; 1&#xff1a;本文依然不回顾小题的具体题目&#xff0c;此次考试的小题多为二级结论&#xff0c;且全卷基本上没考陪集后面的知识点。小题较多&#xff0c;耗时可能会较大&#xff0c;反正我差点没做完卷子&#xff08;排除完全没思路的题&#xff09;。…
阅读更多...
EWM是什么，需要了解什么

EWM是什么，需要了解什么

EWM是SAP的一个模块&#xff0c;代表扩展仓库管理&#xff08;Extended Warehouse Management&#xff09;&#xff0c;是SAP企业资源计划&#xff08;ERP&#xff09;的一部分。它提供了一个完整的、高级的仓库管理解决方案&#xff0c;支持企业在全球范围内的仓库管理、订单管…
阅读更多...
Elasticsearch 聚合数据结果不精确问题解决方案

Elasticsearch 聚合数据结果不精确问题解决方案

Elasticsearch 聚合数据结果不精确 背景 近期我们项目中出现使用ES聚合某个索引的数据取TOP 10的数据和相同条件下查询所有数据然后按数据量排序取的TOP 10的数据不一致的问题。 下面我们简单分析一下这个问题&#xff0c;列出一些常见的解决方案。 问题 Elasticsearch分片…
阅读更多...
Nginx配置文件 所在路径 到底在哪？

Nginx配置文件 所在路径 到底在哪？

&#xff08;大坑&#xff0c;误&#xff09;不同安装方式&#xff0c;nginx配置文件路径也不一样。 Nginx配置文件位置 源码编译安装方式 在安装目录下的conf目录下&#xff0c;比如我的安装目录是/etc/nginx&#xff0c;那么他的配置文件就在/etc/nginx/conf目录下。 若安…
阅读更多...
从初稿到精品：编辑和校对的全面指南

从初稿到精品：编辑和校对的全面指南

要将初稿打磨成一篇精品文章&#xff0c;编辑和校对是关键步骤。 本指南将为您提供全面的编辑和校对方法&#xff0c;助您提高写作质量。 1.内容审查 在初稿完成后&#xff0c;首先进行内容审查。确保文章的观点清晰、论证有力&#xff0c;同时保持逻辑连贯性。注意以下几点&am…
阅读更多...
Share Creators快速、安全的大文件传输解决方案

Share Creators快速、安全的大文件传输解决方案

文件大小正在爆炸式增长&#xff0c;随之而来的挑战是如何将大文件以快速、安全的方式发送。随着工作流程愈发数字化&#xff0c;越来越多的企业和团队开始尝试多办公室/远程办公&#xff0c;而大文件远程传输与共享是工作流程的必需功能&#xff0c;这对于游戏行业、影视制作行…
阅读更多...
JAVA的BIO、NIO、AIO模式精解（二）

JAVA的BIO、NIO、AIO模式精解（二）

4.JAVA NIO深入剖析 4.1 java NIO基本介绍 Java NIO&#xff08;New IO&#xff09;即java non-block IO。NIO支持面向缓冲区的&#xff0c;基于通道的IO操作。NIO可理解为非阻塞IO&#xff0c;传统IO只能阻塞读写&#xff0c;而NIO可配置socket为非阻塞式。NIO类在java.nio包…
阅读更多...
[游戏开发][Unity] Xlua与C#互相调用规则

[游戏开发][Unity] Xlua与C#互相调用规则

第一部分&#xff1a;Xlua调用C# --Lua获取C#类 local GameObjectClass CS.UnityEngine.GameObject--使用C#类New新对象 local newGameObj GameObjectClass(helloworld) print(GameObjectClass, newGameObj)--调用C#类的静态方法 local FindObj GameObject.Find(helloworld…
阅读更多...
Flask+表格静态展示

Flask+表格静态展示

Python网页开发&#xff08;持续更新ing…&#xff09; 诸神缄默不语-个人CSDN博文目录 本文的需求场景是&#xff1a;我现在有一个JSON格式的表格&#xff0c;这个具体格式不重要相信你们能看懂其他格式的表格怎么改。总之我想用PythonFlask提取这个表格&#xff0c;并展示在…
阅读更多...
PMP考试的难点在哪里以及应对策略

PMP考试的难点在哪里以及应对策略

PMP考试内容非常综合&#xff0c;新考纲增加了一半的敏捷混合型题目&#xff0c;综合了《PMBOK指南》第6版和《敏捷实践指南》两本书的内容&#xff0c;考生需要掌握的内容就更多了&#xff0c;下面剖析PMP考试的难易点和PMP新考纲备考技巧&#xff01; 一、容易忽视的知识点 …
阅读更多...
不负童年时光，涂鸦智能用IoT塑造新式童年

不负童年时光，涂鸦智能用IoT塑造新式童年

一直以来&#xff0c;儿童消费市场都是商家必争之地&#xff0c;市场前景十分广阔。尤其是随着IoT技术的发展&#xff0c;让哆啦A梦的“魔法道具”照进现实&#xff0c;越来越多的智能儿童产品开始进入家庭&#xff0c;并成为陪伴儿童成长的重要“伙伴”。 那么&#xff0c;究竟…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023