移动web——学习笔记整理

目录

Day1

00.流式布局

00.1目标

00.2目录

01.移动端浏览器

02.视口(layout viewport)

03.meta视口标签(单标签)

04.物理像素&物理像素比

05.二倍图

06.背景缩放(background-size)

07.背景二倍图以及多倍图切图

08.移动端开发选择

09.移动端技术解决方案

10.移动端特殊样式

11.移动端技术选型

12.流式布局(百分比布局)

13.京东移动端首页

13.1 准备工作

13.2 App布局——先写顶层Header

13.3 搜索模块布局

13.4 搜索模块布局内容填充

13.5 二倍精灵图的做法

13.6 焦点图制作

13.7 品牌日模块制作

13.8 补充:行内元素&块元素&行内块元素

13.9 导航栏nav模块制作

13.10 新闻模块

13.11 商城移动端首页终结

Day2

00. 移动WEB开发之flex布局

00.1目标

00.2目录

01.flex布局体验

02.flex布局原理

03.flex布局父项常见属性(6个)

03.1 flex-direction  设置主轴的方向☆

03.2 justify-content  设置主轴子元素排列☆

03.3 flex-wrap  设置子元素是否换行

03.4 align-items  设置侧轴上的子元素的排列方式(单行)

03.5 align-contents  设置侧轴上的子元素的排列方式(多行)

03.6 align-contents和align-items的区别

03.7 flex-flow  设置复合属性

04.flex布局子项常见属性(个)

04.1 flex子项目占的份数

04.2 align-self和order

05.携程网案例

05.1 准备工作,技术选型

05.2 搜索模块布局

05.3  搜索模块user制作

05.4  搜索模块search制作

05.5  焦点图focus模块制作

05.6  local-nav布局

05.7  local-nav布局——利用属性选择器更换背景图片

05.8  nav外观布局

05.9  nav内容制作

05.10  nav内容制作——背景线性渐变色(linear-gradient)

05.11  subnav-entry模块制作

05.12  热门模块制作

05.13  更多福利模块制作

05.14  sales-bd模块制作

携程网首页案例制作自行补写后得:

Day3

00.移动web开发——rem适配布局

00.1目标

00.2目录

01.rem单位

02.媒体查询语法(Media Query)

02.1 mediatype查询类型

02.2 关键字

02.3 media feature媒体查询

02.4 媒体查询——背景变色

02.5 媒体查询+rem实现元素动态大小变化

02.6 媒体查询——引入资源(理解)

03.css弊端

04.Less

05.Less使用

05.1 Less变量

05.2 Less编译  (easy less插件)

05.3 Less嵌套

05.4 Less运算※

06.rem适配方案原理

06.1 rem适配方案使用(市场主流)

06.2 rem适配方案一

07. 苏宁首页案例制作

07.1 苏宁首页common.less制作

07.2 苏宁首页import导入样式

07.3 苏宁首页body样式设置

07.4 苏宁首页search-content模块布局

07.5 苏宁首页search-content内容布局、模块制作

07.6 苏宁首页banner和广告模块制作

07.7 苏宁首页nav制作

08.rem适配方案二

09.使用rem适配方案二

09.1 使用rem适配方案二 ——苏宁首页body样式修改

09.2 使用rem适配方案二 ——vscode插件之cssrem(px to rem & rpx)

09.3 使用rem适配方案二 ——修改flexible默认html字体大小

09.4 使用rem适配方案二 ——search-content内容制作一

09.5 使用rem适配方案二 ——search-content内容制作二

16.Swiper插件的使用

Day4

00.移动web开发四——响应式布局

00.1目标

00.2目录

01.响应式开发原理

02.响应式布局容器

03.响应式导航案例

04.Bootstrap简介

05.Bootstrap使用

05.1 Bootstrap使用一

05.2 Bootstrap使用二

06.Bootstrap布局容器

07.Bootstrap栅格系统

08.Bootstrap栅格系统的使用

09.Bootstrap列嵌套

10.Bootstrap列偏移(.col-md-offset-)

11.Bootstrap列排序

12.Bootstrap响应式工具

13.阿里百秀(使用Bootstrap)

13.1 阿里百秀首页制作分析

13.2 阿里百秀首页准备工作

13.3 阿里百秀logo制作

13.4 阿里百秀nav制作

13.5 阿里百秀nav制作引入字体图标

13.6 阿里百秀news制作

13.7 阿里百秀publish模块制作

13.8 阿里百秀aside模块制作

13.9 阿里百秀logo响应式制作

13.10 阿里百秀nav响应式制作

13.11 阿里百秀news响应式制作

13.12 阿里百秀publish响应式制作

移动端总结

移动端主流方案

移动端技术选型

其余补充的小内容

01.vw和vh

02.vw怎么使用

03.怎么还原设计稿

04.vw注意事项

05.B站仿作——下载B站的字体图标

05.1 easyless自动保存css指定位置

05.2按px转换为vw的小插件(px2vw)

05.3 bilibili搜索栏布局(用vw)、logo制作、right制作


学习笔记整理——移动web(黑马的教程)

Day1

00.流式布局

00.1目标

知道web开发现状、写标签viewport、用移动web调试方法、说出移动端常见的布局方案、描述流式布局、独立完成京东移动端首页。

00.2目录

移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见开发——流式布局、京东移动首页制作

01.移动端浏览器

兼容移动端主流浏览器,处理webkit内核浏览器即可。

02.视口(layout viewport)

  • 布局视口(layout viewport)
  • 视觉视口(visual viewport)
  • 理想视口(ideal viewport):需要给移动端添加meta视口标签。手机屏幕多宽,视口就多宽。

03.meta视口标签(单标签)

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

content="width=device-width":viewport的宽度=设备宽度 

initial-scale=1.0:初始缩放比为1,maximum-scale=1.0:最大缩放比为1,

minimum-scale=1.0:最小缩放比为1,user-scalable=no":用户是否可以缩放(yes或no)

04.物理像素&物理像素比

物理像素:即为分辨率。

物理像素比:一个px能显示物理像素点的个数。

【eg:Iphone8:1px开发像素=2个物理像素】

05.二倍图

即:准备的图片比实际需要的图片大小大两倍。

06.背景缩放(background-size)

语法:background-size:图宽 图高

  • 只写其中一个参数时,会等比例缩放
  • 单位可跟%,相对于父盒子而言的
  • cover:等比例拉伸,但是背景图会显示不全
  • contain:宽、高等比例拉伸,故可能会有留白区域

07.背景二倍图以及多倍图切图

background:url(...);//插入图片
background-size:...px ...px;//缩放比例50%即可得二倍图

多倍图切图:PS——>cutterman(可一下子切3倍图、2倍图、1倍图原图)

08.移动端开发选择

单独制作移动端页面(主流) 响应式页面(其次)
一般情况下,网址域名前加m(mobile)可以打开移动端。通过判断设备,若为移动设备,则可跳转到移动页面。 通过判断屏幕宽度来改变样式以适应不同终端。

09.移动端技术解决方案

传统模型宽度计算(会撑大盒子) CSS3盒子模型(不会撑大盒子)
box-sizing:content-box box-sizing:border-box

盒子的宽度

=CSS中设置的width+border+padding

盒子的宽度

=CSS中设置的width[width里包含了border+padding]

10.移动端特殊样式

CSS盒子模型

box-sizing:border-box;

-webkit-box-sizing:border-box;

取消点击时的高亮

设置为transparent完成透明

-webkit-tap-highlight-color:transparent;

在移动端浏览器默认的外观,在ios上加上这个属性才能给按钮和输入框自定义样式 -webkit-appearance:none
禁用长按页面时的弹出菜单 img,a{-webkit-touch-callout:none;}

11.移动端技术选型

单独制作移动端页面(主流) 响应式页面(其次)
一般情况下,网址域名前加m(mobile)可以打开移动端。通过判断设备,若为移动设备,则可跳转到移动页面。 通过判断屏幕宽度来改变样式以适应不同终端。
  • 流式布局(百分比布局)
  • flex弹性布局(推荐使用的)
  • less+rem+媒体查询布局
  • 混合布局
  • 媒体查询
  • bootstrap

12.流式布局(百分比布局)

  • 流式布局,也称为百分比布局,或称为非固定像素布局。
  • 是移动web开发使用的比较常见的布局方式。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

  • max-width  最大宽度      min-width 最小宽度
  • max-height  最大高度      min-height 最小高度

13.京东移动端首页

13.1 准备工作

  • 技术选型

方案:采用单独制作移动页面方案

技术:布局采用流式布局

  • 移动端,要设置视口标签以及引入初始化样式(如果没有,则需手动添加)
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

引入css文件

    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">

写入index.css文件中:

body {
    width: 100%;
    min-width: 320px;
    max-width: 1080px;
    margin: 0 auto;
    font-size: 14px;
    font-family: Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

13.2 App布局——先写顶层Header

  • 分析结构布局

先写顶层 header

/*布局*/
    <header class="app">
        <ul>
            <li>8</li>
            <li>10</li>
            <li>57</li>
            <li>25</li>
        </ul>
    </header>
/*样式*/
.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}
  • 13.2.1 App布局内容填充——顶层Header
<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/QQ图片20220125221525.png" alt="">
            </li>
            <li>小龙格林商城APP</li>
            <li>立即打开</li>
        </ul>
    </header>
</body>
/* index.css文件  顶部*/
body {
    width: 100%;
    min-width: 320px;
    max-width: 1080px;
    margin: 0 auto;
    font-size: 14px;
    font-family: Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
.app {
    height: 45px;
}
ul {
    /* 清除边框,清除ul中的原点 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333333;
    color: #ffff;
}
.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图片和文字需要居中对齐 */
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

得到Header样式

13.3 搜索模块布局

类似圣杯布局:左右固定,中间自适应

    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="search-login"></div>
    </div>
/* index.css文件  搜索 */
.search-wrap {
    position: relative;
    /* 子盒子添加了一个margin-top,为了不影响自身,则需添加overflow:hidden */
    overflow: hidden;
    height: 44px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}
.search {
    background-color: skyblue;
    height: 30px;
    border-radius: 15px;
    margin: 0 50px;
    margin-top: 7px;
}
.search-login {
    position: absolute;
    top: 0;
    right: 0;
    background-color: purple;
    width: 40px;
    color: #ffff;
    height: 44px;
}

 此时的效果图:

13.4 搜索模块布局内容填充

    <!--布局补写 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="gl-icon"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
/*index.css文件 补写*/
.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
}
.gl-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/gl.png) no-repeat;
    background-size: 20px 15px;
}

.gl-icon::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: -8px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

13.5 二倍精灵图的做法

  • 遇到需要缩放的精灵图做法:
  • 可在firework里将精灵图等比例缩放为原来的一半
  • 根据大小测量坐标。但是注意在代码里,background-size也要写:精灵图原来宽度的一半。

    精灵图缩放三个步骤: 
        1.在切图工具中将精灵图缩放为原来的一半大小。 
        2.量一下缩放后的大小,写代码width和height,得到坐标59px和194px。  
        3.将精灵图缩放为原大小的一半,background-size: 104px auto 

<!-- 搜索 -->
......
    <div class="sou"></div>
......
.sou {
    position: absolute;
    width: 20px;
    height: 15px;
    top: 8px;
    left: 50px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -80px 0;
    background-size: 200px auto;
}

13.6 焦点图制作

放入图片,设置好盒子的宽高

    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="./images/huadong1.jpg" alt="">
        </div>
    </div>
.slider img {
    width: 100%;
}

此时页面展示如下:

应将图片展示在搜索栏下方,所以改动搜索栏的信息,将搜索栏改为固定定位:

  • 注:固定定位与父盒子无关,不继承宽度。所以需要再设置宽高。
/* 将 .search-wrap搜索 的样式进行修改 */
.search-wrap {
    position: fixed;
    /* 子盒子添加了一个margin-top,为了不影响自身,则需添加overflow:hidden */
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 1080px;
}

最后展示情况如下:

13.7 品牌日模块制作

品牌日的布局如下,分成三块 

    <!-- 活动日 -->
    <div class="brand">
        <div class="b1">
            <a href="#">
                <img src="./images/20220126.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="#">
                <img src="./images/20220126-3.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="#">
                <img src="./images/20220126-2.jpg" alt="">
            </a>
        </div>
    </div>
/* 活动日 */
.brand {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.brand div {
    /* 浮动在一起 */
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}

得到展示如下:

发现该层与上一层之间有缝隙。原因:图片默认会有空白缝隙。

解决方法:

/*加入一个样式:*/
img {
    vertical-align: top;
}

13.8 补充:行内元素&块元素&行内块元素

  • 行内元素:不会独占一行,总是和相邻的行内元素在同一行上(物以类聚);设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。默认宽度是他自身内容的宽度。行内元素只能容纳其他行内元素或者文本。

eg标签:a、abbr、big、br、em、img、input、label、span、strong、select等

注:文字类的块级元素不能放块元素,例如<p>/<h1>~<h6>/<dt>

  • 块元素独占一行,可以设置其宽度、高度,内外边距。宽度默认为所在容器的100%(即容器宽度)。可以容纳行内元素和其他块元素。

eg标签:div、h1-h6、menu、p、table

注:文字类的块级元素不能放块元素,例如<p>、<h1>~<h6>、<dt>

  • 行内块元素:和相邻行内元素在同一行,但是之间会有空白缝隙。默认宽度是他本身内容的宽度。宽度、高度、行高、外边距以及内边距都可以手动设置。
  • 模式转换:
  1. 块元素——>行内元素 : display:inline;
  2. 行内元素——>块: display:block;
  3. 块、行内元素——>行内块: display: inline-block;

13.9 导航栏nav模块制作

    <!-- nav导航 -->
    <nav>
        <a href="">
            <img src="./images/nav1.jpg" alt="">
            <span>超市</span>
        </a>
        <a href="">
            <img src="./images/nav2.jpg" alt="">
            <span>电器</span>
        </a>
        <a href="">
            <img src="./images/nav3.jpg" alt="">
            <span>服饰</span>
        </a>
        <a href="">
            <img src="./images/nav4.jpg" alt="">
            <span>买菜</span>
        </a>
        <a href="">
            <img src="./images/nav5.jpg" alt="">
            <span>速达</span>
        </a>
        <a href="">
            <img src="./images/nav6.jpg" alt="">
            <span>充值</span>
        </a>
        <a href="">
            <img src="./images/nav7.jpg" alt="">
            <span>货运</span>
        </a>
        <a href="">
            <img src="./images/nav8.jpg" alt="">
            <span>促销</span>
        </a>
        <a href="">
            <img src="./images/nav9.jpg" alt="">
            <span>红包</span>
        </a>
        <a href="">
            <img src="./images/nav10.jpg" alt="">
            <span>个人</span>
        </a>
    </nav>
a {
    color: rgb(73, 71, 71);
    text-decoration: none;
}

/* nav导航 */
nav a {
    /* 有浮动即可不用转化 */
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    /* 行内元素转为块元素 */
    display: block;
}

得到下面展示:

13.10 新闻模块

    <!-- 新闻模块 -->
    <div class="news">
        <a href="#">
            <img src="./images/new1.dpg" alt="">
        </a>
        <a href="#">
            <img src="./images/new2.dpg" alt="">
        </a>
        <a href="#">
            <img src="./images/new3.dpg" alt="">
        </a>
    </div>
/* news新闻模块 */
.news {
    display: inline-block;
    margin-top: 15px;
}
.news img {
    width: 100%;
}
.news a {
    float: left;
    /* c3的盒子模型,border可以直接加进去不占像素位置了 */
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}


/* 
.news a:nth-child(2) {
    width: 25%;
}
.news a:nth-child(3) {
    width: 25%;
} */

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #fff;
}
  • 本小节知识点:
/* c3的盒子模型,border可以直接加进去不占像素位置了 */
/*
.news a:nth-child(2) {width: 25%;}
.news a:nth-child(3) {width: 25%;} 
可写成:*/

/* n+2表示从第2个往后面选 */
.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #fff;
}

得到展示图:

13.11 商城移动端首页终结

/*css3盒子模型*/

box-sizing:border-box;

-webkit-box-sizing:border-box;

/*点击高亮需清除,将其设置为transparent完成透明*/

*{-webkit-tap-highlight-color:transparent;}

/*在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入框自定义样式*/

input{-webkit-appearance:none;}

/*禁止长按页面时弹出的菜单*/

img,a{-webkit-touch-callout:none}

 此时,Header上方的叉叉按钮偏上,将代码更新为:

img {vertical-align: middle;}

得到这个样子: 

Day2

00. 移动WEB开发之flex布局

00.1目标

说出flex盒子的布局原理

使用flex布局常用属性

独立完成携程移动端首页案例

00.2目录

flex布局体验

flex布局原理

flex布局父项常见属性

flex布局子项常见属性

携程网首页案例制作

01.flex布局体验

 flex布局体验

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
<style>
    div {
        /* 给父盒子加上display:flex */
        /* 不需要再清除浮动了,功能很多 */
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        /* flex布局中的方法有很多,举例 */
        justify-content: space-around;
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: blue;
        margin-right: 5px;
        flex: 1;
    }
</style>

02.flex布局原理

原理总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

  • 任何一个容器都可以指定为flex布局。
  • 当父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效。
  • (flex布局=弹性布局=弹性盒布局=伸缩盒布局=伸缩布局)

采用了Flex布局的元素都称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,成为Flex项目(flex item),简称“项目”。

举例:

03.flex布局父项常见属性(6个)

03.1 flex-direction  设置主轴的方向☆

 

 默认的主轴为x轴,则y轴为侧轴。flex-direction:row

也可以设置y轴为主轴,则x轴就为侧轴。flex-direction:column

元素是跟着主轴来排列的。

03.2 justify-content  设置主轴子元素排列☆

默认值为justify-content:flex-start

03.3 flex-wrap  设置子元素是否换行

默认值为flex-wrap:nowrap

03.4 align-items  设置侧轴上的子元素的排列方式(单行)

 默认主轴依旧为x轴,侧轴为y轴

居中代码直接使用:

align-items:center

justify-content:center

03.5 align-contents  设置侧轴上的子元素的排列方式(多行)

03.6 align-contentsalign-items的区别

03.7 flex-flow  设置复合属性

flex-flow属性时flex-direction和flex-wrap属性的复合属性


        flex-direction: column;
        flex-wrap: wrap; 
 
        /* 复合写法,可写为: */
        flex-flow: column wrap;

04.flex布局子项常见属性(个)

04.1 flex子项目占的份数

item{ 
    flex:<number>
}

  •  可以用于圣杯布局的写法
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

</html>
<style>
    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
    }
    
    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }
    
    section div:nth-child(2) {
        flex: 1;
        background-color: yellow;
    }
    
    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: skyblue;
    }
</style>

04.2 align-selforder

  • align-self

  • order


                
  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值