黑马程序员:移动web
一、盒子宽度calc函数
width: calc(100% - 20px);
表示宽度为父元素的100%-20px。
二、3D移动
transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);transform: translate3d(x,y,z);
需要有一个透视效果才能有效果:
perspective: 1000px;推荐800到1200px,是指人和屏幕的距离(给父元素加)
当视距等于y轴唯一的距离是,盒子就相当于和眼睛一个位置,所以就会消失
三、3d旋转
transform: rotateX();transform: rotateY();transform: rotateZ();默认的就是Z轴transform: rotate3d(s,y,z,角度度数);
四、立体呈现
transform-preserve-3d添加在父元素
五、渐变背景
background-image: linear-gradient(pink,green,更多的颜色...可以是transparent,rgba());
六、动画
@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}
}.box {width: 200px;height: 100px;background-color: pink;/* 使用动画 */animation: change 1s liner(动画正放一次后倒放) forwords(截止在动画结束时,默认动画开始时);}
七、flex布局
给父元素添加display: flex;改变盒子显示模式
主轴对齐方式:justify-content: space-xxx;属性使盒子可以延主轴均匀分布在一行。
.box {width: 100%;height: 200px;border: 1px solid #ccc;/*改变盒子显示模式*/display: flex;/* 两边顶头中间平均分布 */justify-content: space-between;/* 子盒子两边都有相同边距 */justify-content: space-around;/* 顶头和中间的边距都一样 */justify-content: space-evenly;}.box div {width: 100px;height: 100px;background-color: pink;}侧轴对齐方式.box {display: flex; /* 居中 *//* align-items: center; *//* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) *//* align-items: stretch; */height: 300px;margin: auto;border: 1px solid #000;}.box div {/* width: 100px; *//* height: 100px; */background-color: pink;}/* 单独设置某个弹性盒子的侧轴对齐方式 */.box div:nth-child(2) {align-self: center;}
flex布局中如果弹性盒子没有宽高则默认宽度为内容宽度高度为弹性容器的高度。当侧轴有属性时高度为弹性盒子内容的高度。
伸缩比:
弹性盒子没有宽度时,给弹性盒子加flex:整数;可以给弹性盒子等比宽度
改变主轴方向:
主轴方向改变后,align_items、justify-content方向也会反
display: flex;/*改变主轴为Y轴*/flex-direction: column;/* 视觉效果: 实现盒子水平居中 */align-items: center;/* 视觉效果: 垂直居中 */justify-content: center;
弹性盒子换行:
弹性盒子在使用了flex布局后不会换行,因此需要给他加一个属性
flex-wrap: wrap;
八、移动适配
1rem=1html标签字号大小
九、媒体查询
- 使用媒体查询,根据不同的视口宽度设置不同的根字号
当视口宽度为375px时html根字号为40px
@media (width:375px) {html {font-size: 40px;}} @media (width:320px) {html {font-size: 20px;}}
下面的media不会层叠上面的。
通常html根字号为视口宽度的1/10。
在查看设计稿时一般都是px单位,所以我们需要计算出rem
一般设计稿都是视口宽度都是375px
因此rem=元素px/37.5我们不可能每个尺寸都给媒体查询
flexible.js用来帮助我们给不同视口宽度媒体查询
引用方法:<script src="js/flexible.js"></script>
十、less
less是css的预处理器后缀名为.less
浏览器不识别less我们在使用时还是要引入css
easy less 插件:保存less文件自动生成css文件
注释
单行注释:// 快捷键:CTRL+/
多行注释:/**/ 快捷键:shift+alt+a写法
.box {width: 100 + 10px;width: 100 - 20px;width: 100 * 2px;// 除法需要加()// 68 > remwidth: (68 / 37.5rem);// height: 29 ./ 37.5rem;(也可以写./但会报红还是不要这样写的好) }
- 嵌套
less代码:
.father {width: 100px;.son {color: pink;// & 表示当前选择器&:hover {color: green;}}&:hover {color: orange;} }
转换后css代码:
转换后css代码:
.father {width: 100px; } .father .son {color: pink; } .father .son:hover {color: green; } .father:hover {color: orange; }
变量
定义变量
@变量名:变量;
使用变量
.box {
属性:@变量名;
}导入
less文件可以相互导入
导入方式:
@import ‘xxx.less’; //后缀可以省略导出
less文件自动生成的css文件可以更改导出路径
在设置中搜索easy—>点击setting.json—>在"less.compile"中添加 “out”: "…/css/"代码
之后自动生成的css文件都会导出在css文件夹里
*如果某个less需要单独的导出路径时:
在less文件里开头写
// out: …/css/禁止导出
如base等只需要别的less直接引入就可以
// out: flase
十一、vw/vh
1vw/vh=1/100视口宽度/高度
vw=像素px÷1/100视口宽度一般为3.75
vh=像素px÷1/100视口高度一般为6.67
vw vh不要混用
十二、响应式
根据不同条件改变样式
1.使用媒体查询
/*小于等于700px时背景颜色为red*/
@media (max-width: 700px) { body {background-color: red;}}
/*大于于等于900px时背景颜色为green*/
@media (max-width: 900px) { body {background-color: green;}}
2.使用媒体查询时注意事项
min-width要从小到大书写
max-width要从大到小书写
3.媒体查询link引入
/*当视口宽度大于等于700px时引用one.css文件样式*/
<link rel="stylesheet" href="./css/one.css" media="(min-width: 700px)">
十三、Bootstrap
1.下载
www.bootcss.com ---->选择3.4.1—>下载第一个使用 (第一个是框架,第二个是源码,第三个是大量sass源码)
2.引用
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">
3.bootstarp栅格系统
bootstrap默认将视口宽度分为12等分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoq00gEt-1657859048196)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714170215828.png)]
4.bootstrap中的类名
.container:版心居中自带左右15px的内边距;
.row:左右自带-15px的内边距,用来抵消.container的内边距
.container-fluid:宽度为100%视口宽度,自带15px内边距
5.插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNnwfUY6-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175534516.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWBTtRvr-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175458830.png)]
dist/css/bootstrap-theme.min.css">
3.bootstarp栅格系统bootstrap默认将视口宽度分为12等分[外链图片转存中...(img-aoq00gEt-1657859048196)]4.bootstrap中的类名.container:版心居中自带左右15px的内边距;.row:左右自带-15px的内边距,用来抵消.container的内边距.container-fluid:宽度为100%视口宽度,自带15px内边距5.插件[外链图片转存中...(img-QNnwfUY6-1657859048198)][外链图片转存中...(img-EWBTtRvr-1657859048198)]
黑马程序员:移动web相关推荐
- 黑马程序员 JAVA WEB 第三节 MYSQL 约束
这是阿锃总结的第三节黑马程序员JAVA WEB视频的MYSQL约束部分的笔记.希望可以帮助跟我一样正在学习Java web的同学们.我们一起进步. b_d 若果有同学也想学习黑马程序员Java w ...
- 黑马程序员之Web前端全栈 · 阶段一 前端开发基础 (3)
Web前端全栈 · 阶段一 前端开发基础 (3) 说明 三.HTML 标签 1. HTML 语法规范 1.1 基础语法概述 1.2 标签的关系 2. 基本结构标签 2.1 第一个 HTML 2.2 基 ...
- Flask学习 黑马程序员-6节课入门Flask框架web开发视频(中途撤退,寻找py3教程)
文章目录 postman工具 get和post 如何给路由传参 解析 @app.route('')这个叫视图函数 Jinja2模板引擎 动态传参 注释.变量代码块以及控制代码块的使用 注释:ctrl+ ...
- 黑马程序员:从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
- 飞鸽传书官方网站 创立黑马程序员训练营
张孝祥于2001年创办锐信科技有限公司,2005年创办传智播客科技有限公司,飞鸽传书官方网站 创立黑马程序员训练营,一直致力于陶瓷的飞鸽传书软件开发教育事业,张孝祥老师善于解剖和分析问题,善于使用生动 ...
- 移动端开发语言的未来的猜想#华为云·寻找黑马程序员#
[摘要] #华为云.寻找黑马程序员# 不管是最早的Phonegap,还是后来的React Native.Weex,Flutter,或者是各个公司自创开发语言,都是在不断寻求开发语言统一,从而解决ios ...
- 黑马程序员 python 基础版 哪个老师_(看黑马程序员Python基础班视频挺好,犹豫该不该报班?)...
看黑马程序员Python基础班视频挺好,犹豫该不该报班? 如果看视频比较好的话,还是建议自学吧,毕竟录制视频的老师不一定参与实质的讲课,且能自学也省一笔培训费用了.我是看的bilibili上黑马程序员 ...
- 黑马程序员最新版JavaWeb基础教程-学习笔记
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言 是一门语言,所有 ...
- 最近整理的一些常见的面试题,面试大全,黑马程序员面试宝典题库---最新技术--篇
第八章 最新技术(评论区留言获取原件) 一. Redis 1. Redis 的特点? Redis 是由意大利人 Salvatore Sanfilippo(网名: antirez)开发的一款内存高速缓存 ...
- 黑马程序员入学Java知识——精华总结
黑马程序员入学Java知识--精华总结 J2SE部分,Java高新技术部分,7K面试题部分等黑马入学要求的知识点总结! 一.黑马程序员-java概述与基础知识 6 1.何为编程? 6 2.Java语言 ...
最新文章
- 两台ubuntu虚拟机环境下hadoop安装配置
- 《Cracking the Coding Interview》——第6章:智力题——题目5
- Windows 8 系统安装教程
- hdu- 5015 233 Matrix
- Git 标签(tag)相关操作
- Golang map 三板斧第一式:快速上手
- 学堂在线计算机网络工程实践答案,计算机网络实验(本科生2017年春)
- ERROR: Could not find a version that satisfies the requirement absl (from versions: none) ERROR: No
- 鸿蒙os系统使用技巧,鸿蒙OS系统的四大技术特性介绍
- IDEA打开窗口的数量及打开窗口的排列方式调整
- windows资源监视器中内存项(提交、工作集、可共享、专用)的含义及区别
- python怎么循环合并数组_python数组循环合并python执行系统命令四种方法比较
- swipe放大效果的焦点图demo
- idea android 真机,intellij idea 设置用真机测试android
- 视频+公众号是未来微信生态的一种新的运营方式!
- 获取下一个周几的日期
- 华硕主板禁用UEFI安全启动(Disable Secure Boot for ASUS Motherboard)
- ROS古月资料学习之ROS简介
- 一大波短视频应用 为何只有美拍这么火?
- C# (初入江湖)-几行代码也可以写个电脑屏保