移动前端开发
文章平均质量分 52
移动前端
元气满满的大咸鱼
学习总结记录(公众号:元气满满的大咸鱼。欢迎关注。)
展开
-
flex布局(弹性布局)
pc端页面布局,推荐传统布局方式;移动端或者是不考虑兼容的pc则采用flexflex:flexible Box 的缩写。注意:当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和vertical-align 属性将失效。小概念:①Flex 容器(flex container)采用 Flex 布局的元素②Flex 项目(flex item)Flex 容器的所有子元素...原创 2021-05-15 13:17:12 · 411 阅读 · 0 评论 -
Flex布局应用典型案例
1.左右两侧宽度100px固定,中间宽度根据屏幕宽度自适应实现:<div class="main"> <div class="box1"> 左侧 </div> <div class="box2"> 中间 </div> <div class="box3"> 右侧 &l原创 2020-12-30 17:26:30 · 1153 阅读 · 0 评论 -
Flex布局应用---导航栏实现
实现效果:html:<!-- 局部导航栏 --> <ul class="local-nav"> <li> <a href="#" title="攻略景点"> <span class="local-nav-icon1"></span> <span>攻略景点</span> &l原创 2020-12-30 11:18:12 · 4583 阅读 · 0 评论 -
Flex布局应用---子盒子定宽和子盒子自适应父盒子宽度
1.实现效果:红色盒子宽度不变,蓝色盒子宽度自适应父盒子宽度2.实现html<div class="father"> <div class="box1">1</div> <div class="box2">2</div> </div>css.father { width: 50%; height: 600px;原创 2020-12-30 10:54:54 · 2749 阅读 · 0 评论 -
百分比布局应用---实现导航栏
1.实现结果:2.使用浮动+百分比布局:index.html<body> <nav> <a href="#"> <img src="./imgs/shop.png" alt=""> <span>京东超市</span> </a> <a href="#"> <img src=原创 2020-12-30 10:40:50 · 322 阅读 · 0 评论 -
移动开发前准备
1.搭建文件夹骨架,如图:2.index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 设置视口:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽 --> <meta name="viewport" content="width=device-width, initial-sc原创 2020-12-30 10:13:32 · 100 阅读 · 0 评论 -
移动端开发---精灵图2倍图做法
有精灵图,如图(宽度:80,高度400):1.利用Fireworks修改图片宽高为原来的一半(宽40,高200),切片工具量出每一个小图标的X,Y值,方便写background:url() x y no-repeat;中的x,y值;2.设置背景缩放background-size:图片原来宽度的1/2 auto;//高度自适应...原创 2020-12-29 21:26:52 · 503 阅读 · 0 评论