移动端学第7天

聊了
165 阅读7分钟

Less使用

  1. less 是什么东西

less 是一种提高我们编写css效率的技术 => css预处理器（less,scss,stylues 技术名词）、

less工作流程

1.我们

使用less的过程

1 新建一个less文件 （后缀名）

2 会按照lessd的语法要求 在less 文件中编写代码

3.通过easy less vscode 插件 来编译less文件

4.会生成对应的css文件

5.在网页直接引入编译好的css文件即可

less的语法

1 变量 方便快速去修改 样式

2 运算 less 支持 数学运算 除法加（100px /300px）

​ 乘法 @name *3;

3。混合 mixin 把一大段css代码 都堆在一起

​ @less(minxin){

​ color:#eee;

​ }

4.嵌套 我们按照html的嵌套结构 来编写css嵌套

5.如何指定 编译好的css文件存放在哪里

使用easy less 指定生成的css 目录位置，这个技术以后工作用不到

后期会有其他的编译工具统一处理css生成目录 常用 */

学习less语法

1.png

less变量

1-1647954438614.png

@them-color:red;
@width:80px;
@height:80px;
@border:1px ;
@solid:solid;
@color:blue;
div{
    color:@them-color;
    width:@width;
    height: @height;
    border:@border @solid @color ;
}
@size:11px;
@flex:1;
@flex-name:flex;
@block:block;
@inline-block:inline-block;
@inline:inline;
@url:url('./images/1.png');
@bakcground-poistion:1222px 10px;
@left:220px;
@right:200px;

p{
    color:@color;
    font-size: @size;
    flex:@flex;
    display:@flex-name;
    background:@url @bakcground-poistion;
    left:@left;
    right:@right;
}

less混合mixin

图片

16.png

代码

.name(@1,@2){
    background-color: #fff;
    background-size: 100%;
    background-position:@1 @2;
}
.title(){
    color:#eee;
    width: 200px;
    height: 200px;
    background-color: red;
}
p{
    .name(-200px,40px);
    color: #eee;
    
}
// > 子代选择器 
// /
// *
        // 伪元素
// **
// / 


div{
    .title();
}
.box{
    p{

    }
    section{
        #header{

        }
        button{
            color: #eee;
        }
    }

}

/* 
需求  有三个 元素 想要使用 一张精灵图
      1 A元素  图片位置 x y   (-300px,30px)
      1 B元素  图片位置 x y   (-400px,60px)
      1 C元素  图片位置 x y   (-50px,100px)

使用 less的mixin来解决    （用法有点类似变量）

 */

/* 1 定义一个mixin */
.aaaaaa(@a1,@a2) {
  /* 存放你想要用到一坨代码 */
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;

  /* 背景图片的位置 */
  background-position: @a1 @a2;
}
div {
  // .aaaaaa();
  // background-position: -300px 30px;
  /* ================== */
  .aaaaaa(-300px,30px);
}

less运算

@ine-height:30px;
div{
    width: 100px + 200px;
    height: (300px / 100px);
    line-height: @ine-height * 2;
}

less嵌套

1嵌套 后代 变成 子代选择器 >

嵌套 子代选择器图片

代码

div{
    height: 200px;
    background-color:red;
    // &::before  
    &::before{
        // 
        content: '实现伪元素';
    }
}
// 子代选择器
div{
    >span{
        color:#eee;
    }
}



div {
  height: 200px;
  background-color: red;
}
div::before {
  content: '实现伪元素';
}
div > span {
  color: #eee;
}

2.伪元素

13.png

div{
    height: 200px;
    background-color:red;
    // &::before  
    &::before{
        // 
        content: '实现伪元素';
    }
}
div >span{
    color:#eee;
}

媒体查询

媒体查询

​ 可以根据屏幕的不同 去使用不同的css

1 。我希望  当屏幕的宽度    =  400px    body标签的颜色  red

2.    我希望  当屏幕的宽度   =  800px    body 标签的颜色  yellow
3.

最推荐的媒体查询.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @media(width:400px){
            body{
                background-color: blue;
            }
        }
        /* 最常用和推荐写法 */
        @media screen and (width:600px){
            body{
                background-color: yellow;
            }   
            
        }
        /* 、不只是可以针对屏幕宽度 还可以针对屏幕的高度 */
        @media screen and(height:599px){
            body{
                background-color: green;

            }
        }

    </style>
</head>
<body>
    
</body>
</html>

设置屏幕的宽度

媒体查询333.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-媒体查询-</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 当屏幕的宽度   小于 1000px  red  (最大就是100px) */
        @media screen and (max-width:100px){
           body{
            background-color:red;
           }
           div{
                
           }
        }
        /*  */
        @media screen and (min-width:500px ){
            body{
                background-color: green;
            }
        }

        /* 当屏幕的宽度 大于 300 小于 500px  */
        @media screen and (min-width:300px) and (max-width:500px){
              body{
                background-color: yellow;
              }
        }
    </style>
</head>
<body>
    <div class="info1"></div>
    <div class="info1"></div>
    <div class="info1"></div>
    <div class="info1"></div>
</body>
</html>

媒体查询体验

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-媒体查询体验.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }


      /* 媒体查询语法1  */
      @media (width:400px){
        body{
          background-color: red;
        }
      }
    
      /* 媒体查询语法2 */
      @media (width:600px){
        body{
          background-color: yellow;
        }
      }
    </style>
  </head>
  <body>
    <!-- 
      媒体查询 
      可以根据屏幕宽的不同 去使用不同的css 


      1 我希望 当屏幕的宽度 =  400px  body标签的颜色 red 
    
      2 我希望 当屏幕的宽度 =  800px  body标签的颜色 yellow 
      
     -->
  </body>
</html>

补充知识

水平导航滚动

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>导航模块水平滚动.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        overflow-x: auto;
      }
      ul {
        list-style: none;
        display: flex;
      }
      li {
        padding: 30px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>444</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>
  </body>
</html>



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-媒体查询-练习.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        height: 100px;
        margin-bottom: 10px;
        background-color: aqua;
      }
      /* 写好媒体查询 */
      @media screen and (max-width: 400px) {
        /* 默认就是 div占一行了 */
      }

      @media screen and (min-width: 400px) and (max-width: 800px) {
        div {
          width: 50%;
          float: left;
        }
      }

      @media screen and (min-width: 800px) {
        div {
          float: left;
          width: 25%;
        }
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </body>
</html>

上下滚动

代码图 flex
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>上下滚动.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body{
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      header{
        height: 50px;
        background-color: aqua;
      }
      div{
        /* 设置元素的高度 */
        flex:1;
        background-color: yellow;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <header>1</header>
    <header>2</header>
    <div>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
      <h1>17</h1>
      <h1>18</h1>
      <h1>19</h1>
      <h1>20</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
      <h1>26</h1>
      <h1>27</h1>
      <h1>28</h1>
      <h1>29</h1>
      <h1>30</h1>
    </div>
  </body>
</html>

上下滚动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>上下滚动.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header{
        height: 50px;
        background-color: aqua;
      }
      div{
        height: calc(100vh - 50px);
        background-color: yellow;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <header></header>
    <div>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
      <h1>17</h1>
      <h1>18</h1>
      <h1>19</h1>
      <h1>20</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
      <h1>26</h1>
      <h1>27</h1>
      <h1>28</h1>
      <h1>29</h1>
      <h1>30</h1>
    </div>
  </body>
</html>


  vertical-align: middle;
less代码
/* 
设计稿的宽度是375
vw 做屏幕适配
1 vscode 开启一个插件 px2vw
2 配置中要设置 设计稿的宽度   "px2vw.width": 375,
 */

// 变量
// 粉丝
@theme-color: #fb7299;

body {
  /* 必须要设置一个高度 100vh */
  /* 不设置的话 body高度默认0  或者由内容撑开 */
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 1 头部 */
.mb-header {
  padding: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* logo */
  .logo {
    margin-right: 29.6vw;
    .iconfont {
      font-size: 7.4667vw;
      color: @theme-color;
    }
  }
  /* 搜索 */
  .search {
    .iconfont {
      font-size: 5.6vw;
      color: #ccc;
    }
  }
  /* 登录 */
  .login {
    img {
      width: 6.4vw;
    }
  }
  /* 下载 */
  .download {
    img {
      width: 19.2vw;
    }
  }
}

/* 导航 */
.mb-nav-wrap {
  display: flex;
  display: none;
  .mb-nav {
    /* 
    设置一个宽度
    屏幕的宽度 -  黑色标签的宽
     */
    //  width: calc(100vw - 30px);
    flex: 1;
    overflow-x: auto;
    display: flex;
    ul {
      display: flex;
      li {
        padding: 3.2vw 5.3333vw;
        font-size: 3.4667vw;
        color: #666;
      }
      li:first-child {
        color: @theme-color;
        position: relative;
        &::before {
          content: '';
          width: 6.9333vw;
          height: 0.2667vw;
          background-color: @theme-color;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .more {
    width: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 3.7333vw;
      color: #666;
    }
  }
}

/* 导航222 */
.mb-nav-wrap222 {
  position: relative;
  ul {
    display: flex;
    width: 100vw;
    overflow-x: auto;
    li {
      /* 设置浏览器对于文字都不要换行 */
      white-space: nowrap;
      // 设置内容不要换行
      // flex布局默认就是不会换行 对于文字不行
      // display: flex;

      padding: 3.2vw 5.3333vw;
      font-size: 3.4667vw;
      color: #666;
    }
    li:first-child {
      color: @theme-color;
      position: relative;
      &::before {
        content: '';
        width: 6.9333vw;
        height: 0.2667vw;
        background-color: @theme-color;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .more {
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 8vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 3.7333vw;
      color: #666;
    }
  }
}

.main {
  /* 
  如果list里面没有内容的话 它的高度 等于 flex：1 
  如果 list里面 有很多内容，会撑开 flex：1 高

   */
  flex: 1;
  /* 溢出就滚动 */
  overflow-y: auto;
}

/* 3 内容列表 */
.list {
  display: flex;
  flex-wrap: wrap;

  justify-content: space-evenly;

  .item {
    // margin-left: 10px;
    width: 46.1333vw;
    .item-img {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
      }
      img {
        width: 100%;
      }
      span {
        position: absolute;
        bottom: 0;
        color: #fff;
        font-size: 3.2vw;
      }
      .play-count {
        left: 0;
      }
      .comment-count {
        right: 0;
      }
    }
    .item-name {
      font-size: 3.2vw;
      color: #666;
      padding: 2.6667vw 0;

      /* 第一行文字 末尾出现 省略号 */
      /* 这三行做为一个整体一起去记 */
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
    
      /* 可以指定第N行出现 省略号  记不住 拷贝来使用 */
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}

li使用伪类选择器

实现hover效果

或者加a标签

水平导航less.png

下箭头实现

中文.png

文字溢出隐藏

	  display: -webkit-box;
      overflow: hidden;
      white-space: normal!important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

单行溢出隐藏

overflow:hidden;
设置浏览器对于文字都不要换行
white-space:nowrap;
text-overflow:ellipsis;
上下滚动

​

flex:1;
overflow-y:auto;

水平滚动

overflow-x:auto;


必须要设置一个高度100vh;
body{
height:100vh;
display:flex;
flex-direction:column;
}

省略n行文字、、、

响应式布局的网站实现的原理

根据不同屏幕宽度实现不同的cssc

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @media(width:400px){
            body{
                background-color: red;
            }
        }
        @media (width:600px){
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

响应式布局

响应式：

只写一套代码，可以在pc端运行（体验），还可以在移动端上运行（体验不错）

响应式实现原理的本质

  响应式布局的网站实现的原理

  根据屏幕宽度不同 去使用不同的css 
  假如 屏幕比较宽  里面宽度去设置  25%
  假如 屏幕比较窄  里面宽度去设置  50%


  根据屏幕宽度不同 去使用不同的css  = 专业术语 =>  媒体查询！

媒

使用boostrap

    <!-- 1 要引入 bootstrap css文件 -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
      <!-- 2 要引入 jquery.js  -->
  <script src="./lib/jquery.js"></script>
  <!-- 3 引入 bootstrap.js -->
  <script src="./lib/bootstrap/js/bootstrap.js"></script>

boostrap将屏幕按照宽度分成四种

  1 bootstrap将屏幕按照宽度分成四种
    1 大屏幕  lg  >1200px     
    2 中等屏幕 md   992px-1200px
    3 小屏幕   sm 768px-992px
    4 极小屏幕 xs <768px 

  2 固定用法
    1 先外层写一个 类 名字是固定 container
    2 里面写一个类  row 固定
    3 根据需求 （在什么样的屏幕下 一行 显示几个元素  ）
      bootstrap 默认将一行 划分成了12份 12列 1列就占一份  

 -->

<div class="container">
  <div class="row">
    <!-- 在大屏幕下 每一列占一份  -->
    <!-- 在大屏幕下 每一列占三份  -->
    <!-- 在大屏幕下 每一列 占2份 -->
    <!-- 关键就是  在什么样的屏幕下 每一列占几份  -->
    <div class="col-lg-2">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-2">3</div>
    <div class="col-lg-2">4</div>
    <div class="col-lg-2">5</div>
    <div class="col-lg-2">6</div>
  </div>
</div>

1.大屏幕 1g >1200px

2 中等屏幕 md 992-1200px

3.小屏幕 sm 768px -992px

4.极小屏幕 xs <768px

boostartp.png

boostart栅格系统23.png

如果一行超过12份 和 浮动的特性 一样 往下掉

2.container 居中的版心 宽度会跟随 屏幕宽度的变化而变化

版心（container） 全屏 .container-fluid

只要你写了栅格代码，那么就不能省略 container(版心) container-fluid(全屏);

栅格系统-实战

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-模版.html</title>
    <!-- 1 要引入 bootstrap css文件 -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">

  </head>
  <body>

    <!-- 
      1 container
      2 row 


      3 如何根据需求来编写合理的栅格系统的代码
        1 你要自己去观察 当前的页面在不同宽度下的表现
          观察出来 大屏幕下 每一列占几份   col-lg-4 
          观察出来 中等屏幕下 每一列占几份   col-md-4 
          观察出来 小等屏幕下 每一列占几份   col-sm-12
          观察出来 极小屏幕下 每一列占几份   col-xs-12
      
     -->
     <div class="container">
       <div class="row">
         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">内容即可</div>
       </div>
     </div>


​     
​     
​     
     <div class="container">
       <div class="row">
         <!-- 极小屏幕 一列6份 -->
         <!-- 其他屏幕 小 中等 大  一列3份  -->
         <div class="col-xs-6 col-sm-3">1</div>
         <div class="col-xs-6 col-sm-3">2</div>
         <div class="col-xs-6 col-sm-3">3</div>
         <div class="col-xs-6 col-sm-3">4</div>
       </div>
     </div>

  </body>

  <!-- 2 要引入 jquery.js  -->
  <script src="./lib/jquery.js"></script>
  <!-- 3 引入 bootstrap.js -->
  <script src="./lib/bootstrap/js/bootstrap.js"></script>
</html>

栅格系统补充


  1 栅格系统 方便我们 编写 代码   在不同的宽度下 不同表现的代码 容器而已！ 

  2 栅格系统的核心 也是 媒体查询  

  3 应用
    我们要根据栅格系统对于 不同屏幕的宽度的分类 来找到 当前需求 如何实现

  4 比如
    1 定版心的容器 
  
 -->

 <div class="container">
   <div class="row">
     <!-- 已经确定了屏幕种类 一列占几份（总份数12） -->
     <!-- 大屏幕  3 -->
     <!-- 中等屏幕 12 -->
     <!-- 小屏幕 12 -->
     <!-- 极小屏幕 12 -->
     <!-- 较大屏幕会沿用较小的屏幕的设置 -->
    <!-- <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">1 </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">2 </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">3 </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">4 </div> -->
    <div class="col-lg-3  col-xs-12">1 </div>
    <div class="col-lg-3  col-xs-12">2 </div>
    <div class="col-lg-3  col-xs-12">3 </div>
    <div class="col-lg-3  col-xs-12">4 </div>
   </div>
 </div>
avatar
文章
阅读
粉丝