前端基础篇4--移动web总结

最新推荐文章于 2022-07-31 14:36:56 发布
最新推荐文章于 2022-07-31 14:36:56 发布
阅读量341 收藏 10
点赞数 7
分类专栏： 前端从入门到精通 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TroyeSivanlp/article/details/120229593
版权

以下几篇是前端html，css基础的学习。

1.html，css基础https://blog.csdn.net/TroyeSivanlp/article/details/119682179
2.html5和css3新特性https://blog.csdn.net/TroyeSivanlp/article/details/120079143
3. css高级技巧https://blog.csdn.net/TroyeSivanlp/article/details/120113411
4.移动web总结https://blog.csdn.net/TroyeSivanlp/article/details/120229593
5.案例：品优购demohttps://blog.csdn.net/TroyeSivanlp/article/details/120079465

前端移动web

1.平面转换

平面
  1. x和y 2条坐标轴组成的屏幕
  2. x轴正值向右
  3. y轴正值向下
属性： transform
位移
  1. translate(x, y)
  2. translateX()
  3. translateY()
定位盒子居中

在这里插入图片描述

    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
旋转
  1. rotate(角度)
  2. 单位：deg
  3. 旋转方向:正值：顺时针;负值：逆时针
转换中心点
  1. 属性:transform-origin
  2. 取值

请添加图片描述

<!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>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>
多重转换
  1. 定义：同时改变盒子的多个形态
  2. 注意：旋转放在最后；旋转会改变坐标轴向

请添加图片描述

    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre1.png" alt="">
    </div>
</body>
缩放
  1. scale(倍数)
  2. 值：大于1，表示放大；小于1，表示缩小

请添加图片描述

    <style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* width: 150%; */

            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

2.渐变

  1. 使用background-image属性添加渐变背景效果
  2. 基本写法：background-image： linear-gradient(颜色1, 颜色2, …);
  3. 透明渐变：background-image: linear-gradient( transparent, rgba(0, 0, 0, .6) );

请添加图片描述

    <style>
        .box {
            position: relative;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;

            /* display: none; */
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;
        }

        .box:hover .mask {
            opacity: 1;
            /* display: block; */
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景 mask -->
        <div class="mask"></div>
    </div>
</body>

3.空间转换

空间转换介绍

  1. 坐标轴:X、Y、Z(Z轴与用户视线方向重叠)

  2. 某个坐标轴位移:translateX();translateY();translateZ()

透视
  1. 作用:产生近大远小，近实远虚的视觉效果
  2. 写法:perspective: 值添加给父级;取值一般800-1200px之间

请添加图片描述

  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
空间旋转

  1. 旋转: rotateX();rotateY();rotateZ()
缩放
  1. 完整写法:scale3d(x, y, z)
  2. 某个坐标轴缩放:scaleX();scaleY();scaleZ()

4.动画

定义动画
  1. @keyframes{
    from {}
    to {}
    }
  2. @keyframes{
    0% {}
    20% {}
    50% {}
    100% {}
    }
使用动画

animation: 动画名称 动画时长;

animation属性
复合属性 animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

在这里插入图片描述

逐帧动画
核心：动画速度曲线为steps(N)；N与精灵图小图个数相同

请添加图片描述

  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
多组动画
  1. 作用：一个元素添加多个动画效果
  2. 写法：animation: 动画1，动画2，动画N；

5.百分比布局

特点
  1. 流式布局;
  2. 宽度自适应，高度固定
布局方式
宽度为半分比写法

6.FLex布局

Flex的优势和特点
  1. 浏览器提倡的布局模型，页面渲染性能高
  2. 布局简单、方便
  3. 避免浮动脱标的问题
  4. 兼容性较高（不兼容低版本浏览器）
组成部分
  1. 弹性容器（父级， 添加display:flex的盒子）
  2. 弹性盒子（子级）
  3. 主轴（默认水平）
  4. 侧轴（默认垂直）
主侧轴对齐方式
  1. 主轴
    在这里插入图片描述
  2. 侧轴

在这里插入图片描述

弹性伸缩比
  1. flex: 整数数字;
  2. 占用父级剩余尺寸的份数
修改主轴方向
flex-direction：column；(垂直方向)
弹性盒子换行
  1. 弹性盒子换行 flex-wrap: wrap;
  2. 调整行对齐方式:align-content(取值与主轴对齐方式基本相同)

案例

请添加图片描述

主体框架

<!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>确认订单</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
</head>
<body>
    <!-- 主体内容：滑动查看 start-->
    <div class="main">
        <!-- 用户信息start -->
        <div class="pannel user_massage">
            <div class="location">
                <div class="iconfont icon-location"></div>
            </div>
            <div class="user">
                <div class="top">
                    <h5>丽丽</h5>
                    <p>1234567890</p>
                </div>
                <div class="bottom">
                    北京市 海淀区 中关村科技园 信息科技大楼 410#
                </div>
            </div>
            <div class="more">
                <div class="iconfont icon-more"></div>
            </div>
        </div>
        <!-- 用户信息end -->
        <!-- 商品区域start -->
        <div class="pannel goods">
            <div class="pic">
                <a href="">
                    <img src="./uploads/pic.png" alt="">
                </a>
            </div>
            <div class="info">
             <h5>康尔贝 非接触之红外体侧仪
                 领券立减30元 婴儿级材质 测温
             </h5> 
             <p><span>粉色</span>  <span>红外体温计</span></p>  
             <div class="price">
                 <span class="red">$<i>299</i></span>
                 <span><i>$399</i> </span>
             </div>
            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
            <span>1</span>
        </div>
        </div>
        <!-- 商品区域end -->

        <!-- 其他信息 -->
        <section class="pannel rest">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
        </section>
    </div>
    <!-- 主体内容：滑动查看 end-->

    <!-- 底部支付：固定定位start -->
    <footer>
        <div class="left">
            合计：<span>$<i class="red">266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </footer>
    <!-- 底部支付：固定定位end -->

</body>
</html>

7.rem

rem介绍
  1. 相对单位，相对于HTML标签字号计算尺寸
  2. 1rem = 1HTML标签字号
基本使用
  1. 给HTML标签添加字号
  2. 设置元素尺寸为rem单位
媒体查询基本使用
  1. 视口不同，添加不同的根字号
  2. @media (视口宽度) {
    差异化CSS样式 }
rem布局流程
  1. 媒体查询添加根字号
    @media (视口宽度) {
    html {
    font-size: 37.5px;
    }
    }
  2. flexible添加根字号

案例

请添加图片描述

HTML框架

<!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>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 主体内容start -->
    <div class="main">
        <!-- banner -->
        <div class="banner">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>
        <!-- 活动标题 -->
        <div class="title">
            <h4 >乐园标题</h4>
        </div>
        <!-- 活动 -->
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                </a>
                <!-- 收藏小图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动状态 -->
                <div class="active off">惊醒中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        
    </div>
    <!-- 主体内容 end-->
    <!-- 底部工具栏start -->
    <footer>
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>

    </footer>
    <!-- 底部工具栏end-->


    <script src="./js/flexible.js"></script>
</body>
</html>

8.less介绍

less介绍
  1. CSS预处理器，让CSS具备逻辑和计算能力
  2. 浏览器和网页不识别less，目前需要将less文件导出CSS文件，HTML引入CSS文件
插件

EasyLess

语法
  1. 注释:单行 ctrl + /; 块 alt + shift + A
  2. 嵌套
    ①作用：生成后代选择器
    ②写法：&（表示当前选择器， 不会生成后代选择器）
  3. 运算
    ① 作用：完成常用数学计算
    ②除法：(xx / xx)； xx ./ xx
  4. 变量
    ①作用：存储数据，方便修改和使用
    ②用法：
    1. 定义变量：@变量名: 值;
    2. 使用变量：CSS属性: @变量;
  5. 导入
    ①作用：引入其他less文件
    写法：@import: ‘文件及路径’;
  6. 导出
    ①导出CSS文件
    控制所有Less导出路径：修改EasyLess插件
    ②禁止导出CSS文件
    less文件第一行添加： // out: false

9.vw / vh

vw和vh基本使用
  1. vw和vh为相对单位，相对视口尺寸计算结果
  2. 1vw = 1/100视口宽度
  3. 1vh = 1/100视口高度
布局流程
  1. 根据设计稿确定1vw尺寸
  2. px单位转换成vw单位尺寸（px / (1/100视口宽度)）
vh弊端
  1. vh是相对视口高度计算尺寸
  2. 需要考虑全面屏，视口高度尺寸偏大

案例

请添加图片描述

主体框架

<!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>B站</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="left">
                <a href="#">
                    <i class="iconfont Navbar_logo"></i>
                </a>
            </div>
            <div class="right">
                <a href="#">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="login"><img src="./images/login.png" alt=""></a>
                <a href="#" class="download"><img src="./images/download.png" alt=""></a>
            </div>


        </div>
        <div class="bottom">
            <div class="tab">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                </ul>
            </div>
            <div class="more">
                <a href="#">
                    <i class="iconfont general_pulldown_s"></i>

                </a>
            </div>
        </div>
    </header>

    <!-- 视频 -->
    <section>
        <div class="vedio_content">
            <div class="vedio_list">
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a><a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a><a href="#">
                    <div class="pic">
                        <img src="./images/2.jpg" alt="">

                        <div class="count">
                            <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>111</span>万
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>111</span>万
                            </p>
                        </div>

                    </div>
                    <div class="txt">
                        <div class="txt ellipsis-2">鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼鸿蒙牛逼</div>

                    </div>

                </a>
            </div>
        </div>
    </section>

    <!-- 底部固定按钮 -->
    <footer>
       <div class="lauch">
        <i class="iconfont Navbar_logo"></i>
        <span>打开APP，看你感兴趣的视频</span>
       </div>
    </footer>
</body>

</html>

10.媒体查询

  1. 能够使用媒体查询写法，检测不同的响应断点，设置差异化CSS样式
  2. max-width / min-width

11.Bootstrap

  1. BootStrap介绍
    封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果
  2. 生产环境:压缩的代码;开发可以直接使用
  3. 栅格系统
    在这里插入图片描述
  4. 组件
  5. 插件
  6. 定制
咖啡壶子
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
移动端部分知识总结
11-20
移动端的一些知识点总结，有关于H5C3的一些新增属性方法，和canvas的一些用法
前端项目-pixi-filters.zip
09-02
本篇文章将深入探讨一个名为“pixi-filters”的前端项目，它为Pixi.js提供了可选的显示过滤器，使得在Web上实现复杂的视觉特效变得更加简单。 首先，让我们了解什么是Pixi.js。Pixi.js是一个跨平台的2D渲染引擎，它...
移动web前端小结
热门推荐
小米哥的专栏
03-31 1万+
在智能手机横行的时代，作为一个web前端，不会编写移动web界面，的确是件悲催的事情。当公司准备做一个微信的微网站时，作为一个多年经验的web前端码农，我迷茫了，真心不知道从何下手。 接下来就是搜一堆教程，然后开始编写代码，三天后，我的第一个移动端web页面编写完成。 回头想想，移动端的web页面代码编写远没有我想的那样复杂（可能是我做的这个项目比较简单的缘故）。但是就入门来说，其实是
移动web页面前端开发总结
weixin_30672295的博客
06-10 166
工作笔记：移动web页面前端开发总结 移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，...
移动Web开发小结
weixin_34124939的博客
09-26 95
在做移动 Web 开发时有很多地方跟 PC 端是不一样的，需要不一样的设置，这里就记录下移动 Web 开发中有用的设置和一些通用代码。 我的博客地址 HTML 设置页面宽度等于设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=...
web移动开发总结(六)
庚中
12-10 4205
总结 分类左侧的点击吸顶 移动端的滑动事件 (重点) 移动端点击事件延迟和解决 (重点) 移动端的zepto框架 rem的概念和实现屏幕适配 (重点) rem工具的使用实现jd项目 分类页面左侧的点击吸顶效果 需求 点击了左侧分类的菜单 位移到当前点击的分类菜单 到顶部的位置 位移为 （-当前菜单索引*菜单高度） 位移的时候还需要添加过渡效果 慢慢的上去 当菜单需要位移...
Web-前端html+css从入门到精通 139. transform复合写法与注意点.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。`transform`属性是CSS中的一个强大工具，用于在不改变文档流的情况下对元素进行二维或三维转换。本篇内容主要聚焦于`transform`属性的复合写法及其使用时的注意点。 `...
frontend-2018:前端基础2018
05-18
【前端基础2018】知识点详解 前端开发在2018年已经发展到一个相当成熟的阶段，这个时期的前端技术栈主要围绕JavaScript展开，涵盖了众多框架和工具，旨在提升开发效率，优化用户体验。本篇文章将针对"frontend-2018...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
最新发布
01-20
总的来说，理解和熟练掌握HTML DOM的元素操作是成为优秀Web前端开发者的基础。通过学习本教程，你将能够更加自如地使用JavaScript动态地改变网页内容，实现丰富的交互效果。这不仅提升了用户体验，也为网页应用的...
android基础 - 读取PHP
02-16
本篇将详细介绍在Android基础应用中如何实现这一功能。 首先，理解基本概念。PHP是一种广泛用于Web开发的开源脚本语言，常用于服务器端，处理数据并返回结果给前端。Android是Google开发的移动设备操作系统，主要...
web移动开发小结
weixin_44388435的博客
03-14 268
总结 分类左侧的点击吸顶 移动端的滑动事件 (重点) 移动端点击事件延迟和解决 (重点) 移动端的zepto框架 rem的概念和实现屏幕适配 (重点) rem工具的使用实现jd项目 分类页面左侧的点击吸顶效果 需求 点击了左侧分类的菜单 位移到当前点击的分类菜单 到顶部的位置 位移为 （-当前菜单索引*菜单高度） 位移的时候还需要添加过渡效果 慢慢的上去 当菜单需要位移的距离超过了最小位移的距离 ...
移动端web学习总结
weixin_30527323的博客
07-30 444
前言： 　　一直想做一个移动端的阶段性学习总结，但是工作太忙总是加班。现在总算可以抽出一点时间来写一写，把知道的都写下来，这样就算忘掉了，也能很快想起来，不要太机智啊，哈哈哈！ 一、移动端页面常识 1.常见操作系统：Android、IOS、Firefox、os 2.使用内核：webkit（Android、IOS）,greasemonkey（Firefox、os） 3.在移动端上，...
前端——移动web（移动适配）
Y_jun1004的博客
07-31 181
移动适配
【S3-E426】移动web开发问题和优化小结
前端JavaScript
09-25 839
本文：【第3章第426回】 文章底部可跳转至 目录 查看更多文章 1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨
移动web学习总结
奋斗的小绿萝
08-07 2929
最近学习了些移动web开发的知识，总结一下： Hello,移动web： https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px，逻辑像素，浏览器使用的抽象单位 dp，pt： device independence pixel 物理像素：设备无关像素 dpr ： devicePixelRatio 设备像...
移动web开发 流式布局
Ulrica_Amaris的博客
03-18 243
流式布局 移动端基础 PC端常见浏览器: 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 手机屏幕现状
移动端web开发总结（自适应）
探索未知
05-21 1068
关于viewport 移动端开发中，通常我们都会设置viewport。关于viewport &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt; 框架 优秀的移动端web框架 推荐：淘宝SUI Mobile框架 ， 官网...
移动web知识总结（超详细）附带思维导图
weixin_41821949的博客
12-03 2306
移动web简介 什么是移动web 用于展示在移动设备上的网页(web)，称之为移动端页面。 移动设备泛指手机、平板等设备。 如何调试移动web页面 一些浏览器为前端开发者提供了真机调试模拟环境。例如：chrome。 打开开发者工具，点击手机图标即可切换到模拟环境。 移动web发展历程 从2014年10月HTML5标准规范最终发布后，移动web就迎来了飞速的发展。因为使用HTML5技术可以更方便 更快捷的开发现代web应用程序 而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都.
移动Web开发实战专栏总结（PPT分享）
前端向朔
06-25 4712
以下为我将专栏《移动Web开发实战》重新从不同的角度进行整体的梳理之后，在团队分享的PPT。在这里分享给大家。 写PPT之前，先将要分享的内容用脑图梳理出来，有了框架填内容就比较快了。 1、禁止ios和android用户选中文字 2、禁止ios长按时触发系统的菜单，禁止ios&amp;android长按时下载图片 3、webkit去除表单元素的默认样式 4、去除a...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咖啡壶子

你的鼓励奖是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值