美文网首页
移动web阶段补充知识

移动web阶段补充知识

作者: leeleepro | 来源:发表于2020-11-11 22:47 被阅读0次

补充

元素居中解决方案

标准流:margin: 0 auto

定位脱标:定位  + margin。定位 + 2d 位移  +  3d 位移

伸缩盒子:主轴居中。侧轴居中

渐变

线性渐变

本质:背景图

语法:background: linear-gradient();

方向:to + 方位名称

角度:0deg  从下向上。90deg 从左向右

径向渐变

本质:背景图

语法:background: radial-gradient();

圆心位置和半径大小

半径大小  at    圆心位置坐标



Bootstrap框架

使用:引入css文件

应用:

全局样式:给标签设置基本的样式或者布局排列

栅格系统

作用:实现响应式布局

实现的原理:流式布局,媒体查询

使用步骤:

父元素设置类名

container : 居中

container-fluid: 通栏显示

栅格参数:

手机设备:col-xs-值

ipad设备:col-sm-值

默认中等设备:col-md-值

大设备:col-lg-值

栅格参数取值范围:1 - 12之间

特点:栅格参数会让元素浮动,栅格参数如果超过12,会换行显示

响应式工具

控制元素隐藏和显示:hidden-xs、hidden-sm、hidden-md、hidden-lg

列偏移

修改元素的位置:col-xs-offset-值、col-sm-offset-值、col-md-offset-值、col-lg-offset-值



CSS预处理器

less

sass

相关文章

  • 移动web阶段补充知识

    补充 元素居中解决方案 标准流:margin: 0 auto 定位脱标:定位 + margin。定位 + 2d 位...

  • 移动web阶段总结

    适配问题 1.布局适配 流式布局(百分比) : 核心问题:页面不能出现缩放;页面不能出现滚动条。 解决方案:1.设...

  • 常用链接

    腾讯移动Web前端知识库

  • 文集

    若web前端到达了瓶颈,如何冲出重围? 移动端汇总 腾讯移动web知识库移动前端开发指南移动端上遇到的各种坑移动端...

  • 鼠标指针实现拖拽

    实现思路: 移动对象绝对定位 计算移动距离 移动对象跟随鼠标 添加 JS 监听按下松开 需要补充的知识:docum...

  • Web学习笔记1--跨资源共享(CORS)

    最近开始学习补充web相关的知识,在研究XML HTTP Response、Websocket之间的区别与应用时,...

  • 前端自学路线图之移动Web自学

    黑马程序员前端自学路线图中第二阶段是移动Web网页开发的学习:主要介绍了前端这自学路线图中移动web网页开发的自学...

  • 已经有了微信、支付宝小程序,还有必要开发百度智能小程序吗?

    众所周知,小程序作为WEB生态战略的能力补充,以及APP生态唯一的接入方案,对于新移动时代具有不可替代的意义。 纵...

  • SpringBoot | 第二十章:异步开发之异步请求

    原文出处: oKong 前言 关于web开发的相关知识点,后续有补充时再开续写了。比如webService服务、发...

  • 招聘留档

    UI设计师 工作职责: 1.负责公司产品线相关的WEB、移动端界面视觉设计; 2.根据产品原型补充产品交互细节; ...

网友评论

      本文标题:移动web阶段补充知识

      本文链接:https://www.haomeiwen.com/subject/lmiybktx.html