什么是移动web: 就是运行在手机浏览器里面的web应用程序(网页) 虽然和网页是一样的 , 但是现代的web特别是移动web已经不再是简简单单的网页了 而是实现了和APP一样的功能 所以现代的网页已经可以称之为应用程序了
移动端的浏览器:
常见的移动web应用程序: 淘宝触屏版 京东手机版 苏宁手机版 携程手机版 小米手机版等等 这些都是在手机端浏览器运行的应用程序
如何区分什么是网页什么是应用程序
应用程序是指运行时多数为了实现某个功能,就像网站的后台,网站更侧重于前台的美观展示。
移动web应用程序都有什么特点
移动web的发展历史
理解响应式开发的原理
如何判断和改变布局方式
媒体查询的语法
@media(条件){
//条件成立执行的代码
}
条件通常有3种写法
width:1200px; 表示屏幕宽度等于1200 条件成立
min-width:1200px; 表示屏幕宽度大于等于1200 条件成立
max-width:1200px 表示屏幕宽度小于等于1200 条成立
如果有多个条件可以使用 and相连
@media(条件) and (条件2){
//条件成立执行的代码
}
条件成立执行的代码就是普通的CSS 代码 里面写选择{属性:值} 的方式 当条件成立就会执行这个CSS样式
媒体查询条件的判断顺序
min-width的写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
/*设置盒模型包含边框*/
box-sizing: border-box;
}
.col {
height: 100px;
float: left;
border: 1px solid red;
}
/*如果有多个条件 可以用 and连接*/
@media (min-width: 768px){
/*和CSS一样写选择器和属性 和值*/
.col {
width: 50%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (min-width: 992px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 33.33%;
}
}
@media(min-width: 1200px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 25%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (max-width: 768px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 100%;
}
}
/* 由于CSS有层叠性 如果都写min-width 大于等于生效的判断 小屏幕的判断 和 大屏幕的判断同时生效
比如屏幕宽度1400 肯定大于1200 肯定大于 992 和 768 3个条件都满足 但是由于CSS层叠性
1200 最上面 992 第二 768 第三 768把前面的样式都覆盖
希望 1200 把 992 和 768 覆盖 */
/* 写媒体查询条件的时候 如果 使用min-width 大于等于做判断
应该把条件从小到大写 让大屏幕样式把小屏幕样式覆盖 向下覆盖*/
</style>
</head>
<body>
<div class="row">
<div class="col">div1</div>
<div class="col">div2</div>
<div class="col">div3</div>
<div class="col">div4</div>
</div>
</body>
</html>
max-width的写法:
<!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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
/*设置盒模型包含边框*/
box-sizing: border-box;
}
.col {
height: 100px;
float: left;
border: 1px solid red;
}
@media(max-width: 1200px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 33.33%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (max-width: 992px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 50%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (max-width: 768px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 100%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (min-width: 1200px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 25%;
}
}
/* 由于CSS有层叠性 如果都写max-width 小于等于生效的判断 小屏幕的判断 和 大屏幕的判断同时生效
希望小屏幕生效
例如 750宽度 max-width:1200; max-width:992; max-width:768;
大家都成立希望生效 768最小那个 需要把最小768判断写在最后面把前面2个覆盖
*/
/* 写媒体查询条件的时候 如果 使用max-width 小于等于做判断
应该把条件从大到小写 让小屏幕样式把大屏幕样式覆盖 向上覆盖*/
</style>
</head>
<body>
<div class="row">
<div class="col">div1</div>
<div class="col">div2</div>
<div class="col">div3</div>
<div class="col">div4</div>
</div>
</body>
</html>
框架帮你封装好了响应式的功能 你只需要使用框架提供的类名既可实现响应式布局
常见的响应式开发框架
bootstrap: 引导程序 引导你开发程序
1. 2011 推特公司2个前端开发出来的框架 后面开源了之后有很多贡献者 一起参与开发形成了一个大型UI框架
2. Bootstrap框架: 代码比较优雅 结构很规范 代码也很规范 框架生态圈好 使用和开发维护框架的人很多
3. Bootstrap的好处: 让我们快速开发页面 更方便更快捷
下载bootstrap (推荐下载生产环境的bootstrap)
bootstrap-3.3.7-dist
如果下载整个源码需要解压使用里面的dist目录里面的代码
引入bootstrap
引包规范
移动web: 移动端(手机端)打开网页网站
移动web 已经不仅仅实现内容显示 而更多偏向应用 能够提升上网体验 生活体验 称之为应用程序了
移动web: 包含了网页(暂时只学习网页网站) APP 微信小程序公众号 内嵌页面
移动端浏览器: 都是webkit内核 兼容性少
移动web的开发方式
响应式开发原理
响应式开发框架: 为了让响应式开发更简单快捷
使用bootstrap
bootstrap文档
布局容器
栅格系统
常用的样式 组件 插件
搭建微金所项目
文章浏览阅读423次。import random1、random.random()返回随机生成的一个实数,它在[0,1)范围内2、random.uniform(a,b)用于生成一个指定范围内的随机浮点数,两格参数中,其中一个是上限,一个是下限。如果a>b,则生成的随机数n,即b<=n<=a;如果a>b,则a<=n<=b。3、random.randint(a..._随机函数19-23
文章浏览阅读295次。2020年11月12日上午,第二十四届中国国际软件博览会在杭州高新区(滨江)开幕。本届软博会以“软件铸魂 数智转型”为主题,充分展现了软件产业发展新特点、新模式、新业态。软博会期间,重磅环节举行了2020年度软件和信息技术服务竞争力前百家企业发布会。中国电子信息行业联合会副会长兼秘书长周子学出席会议并致辞,联合会副秘书长李杰发布了2020年度软件和信息技术服务竞争力前百家企业名单。北京旋极信息技术股份有限公司(以下简称“旋极信息”)凭借多年来在技术领域的积累及创新探索,脱颖而出,连续两年榜上有名。本届前_旋极信息主业竞争力
文章浏览阅读1.4k次。串口(中断设置)1.中断1.中断优先级分组中断优先级分组BIN抢占优先级响应优先级01110 位4 位11101位3位21012位2位31003 位1位40114位0 位数字越小级别越高 SCB->AIRCR |=1<<8;//[10:8] SCB->AIRCR |=1<..._stm32寄存器串口中断
文章浏览阅读1.4k次,点赞3次,收藏9次。作者:屹远(陈龙),蚂蚁金服分布式事务核心研发 。 本文根据 8月11日 SOFA Meetup#3 广州站 《分布式事务 Seata 及其三种模式详解》主题分享整理,着重分享分布式事务产生的背景、理论基础,以及 Seata 分布式事务的原理以及三种模式(AT、TCC、Saga)的分布式事务实现。本次分享的视频回顾以及 PPT 查看地址:tech.antfin.com/community/a…一、分布式事务产生的背景1.1 分布式架构演进之 - 数据库的水平拆分蚂蚁金服的业务数据库起初是单库_saga 分布式事务 seata
文章浏览阅读423次。语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(…),而是简单的裁切(clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(…)说明: 设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。 注意,text-overflow:ellipsis 属性在FF中是没有效果的。我们可以用它代替我_txt-oflow
文章浏览阅读302次。技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】:170933152然后前面我们已经把分布式微服务的,认证授权全部集成了,然后我们来测试.启动资源微服务order微服务.启动网关微服务然后启动注册中心微服务然后注意我们,这里以后访问就可以统一通过网关来访问了,我们网关的端口是53010 对吧,我们先去请求一个令牌可以看到.我们通过密码模式.获取了这个令牌以后,我们去check检查一下这个token,可以看到把token._spring security oauth2.0实现分布式系统授权(nacos注册中心+网关+认证授权服务(j
文章浏览阅读117次。Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。Springboot + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。springboot毕设项目游戏交易平台8i37q(java+VUE+Mybatis+Maven+Mysql)2. 使用IDEA/Eclipse/MyEclipse导入项目,修改配置,运行项目;_springboot游戏论坛
文章浏览阅读453次。EventHandler 泛型委托EventHandler 泛型委托// This example demonstrates the EventHandler<T> delegate.using System;using System.Collections.Generic;//---------------------------------------------------------public class MyEventArgs : EventArgs{ _事件处理器接口 eventhandler 中泛型的表示是泛型的什么
文章浏览阅读302次。软件管理: 软件包: rpm/deb centos: rpm -ivh yum rpm仓库管理软件 ubuntu: dpkg -i apt deb仓_安装libgnomeui-devel
文章浏览阅读761次,点赞2次,收藏4次。本文转载自Python编程时光(ID: Python-Time)冷知识系列,直至今日,已经更新至第五篇。前四篇给你准备好了,还没阅读的可以学习一下。谈谈 Python 那..._空字符串字典序
文章浏览阅读2.4w次,点赞32次,收藏200次。upload-labs靶场的安装搭建(windows)(1)首先当然是需要phpstudy的环境,所以要先下载安装phpstudy。(2)然后到github的网址中下载源码的压缩包。github网址:https://github.com/Tj1ngwe1/upload-labs(3)下载后解压缩到phpstudy目录下的WWW子文件夹中,这里要注意吧压缩包的名字改成upload-labs,不然靶场的页面会显示得不对。(4)然后在输入url HTTPS:..._uploadlabs
文章浏览阅读280次。笔记整理 | 吴林娟,天津大学硕士来源:EMNLP2020链接:https://www.aclweb.org/anthology/2020.findings-emnlp.265.pdf动..._吴林娟 天津大学