CSS精灵图实现移动端导航(DPR=2)

最新推荐文章于 2024-05-10 14:01:58 发布

夹心776655

最新推荐文章于 2024-05-10 14:01:58 发布

阅读量317

点赞数

分类专栏：代码实例文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_37086980/article/details/109718792

版权

代码实例专栏收录该内容

72 篇文章 3 订阅

订阅专栏

一. 像素(pixel)

像素是计算机屏幕中显示特定颜色的最小区域。

当设备尺寸相同时，像素越密集，画面就越精细。

设备像素：设备像素又称为物理像素，此像素是设备的固有属性。任何设备屏幕的物理像素的数量自出场从出厂的那一刻，设备像素已经固定，不会再发生改变，每个物理像素可以根据操作系统设置自己的颜色和亮度。

CSS 像素：又称为设备独立像素、逻辑像素。CSS中使用的一个抽象的概念，单位是 px

像素比 DPR：设备像素比(device pixel ratio)，简称dpr，定义了物理像素和设备独立像素的对应关系，它的值可以按下面的公式计算得到：设备像素比 = 物理像素 / 设备独立像素。

二. 实现效果

三.CSS精灵图技术

图标的获取来源于CSS精灵图技术, 并把宽高缩小为原图大小的一半, 这里就需要用到background-size属性：

 .wrap .list li > a > i{
      display: block;
      background-image: url("ctrip.png");
      background-repeat: no-repeat;
      background-size: 28px auto;
      width: 28px;
      height: 28px;
}
.wrap .list li:nth-of-type(1) > a > i{
   background-position:0 0;
}

四.弹性盒布局模型

布局方面主要使用了flex弹性盒进行了移动端的布局:

首先设置为弹性盒display: flex;/ display: inline-flex;

容器属性：

1.flex-direction属性决定了主轴的方向

row | row-reverse | column | column-reverse

2.justify-content 定义了项目在主轴上的对齐方式

flex-start（默认值）：主轴的起点对齐

flex-end：主轴的终点对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

2.align-items 定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

3.flex-wrap 如果一条轴线排不下，如何换行

nowrap（默认）：不换行

wrap：换行，第一行在下方

wrap-reverse：换行，第一行在上方

4.align-content属性定义了交叉轴上多根轴线的对齐方式

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目属性：

1.order：1；定义项目的排列顺序

数值越小，排列越靠前

数值相同可以按照结构的先后顺序进行排列

2.flex-grow定义项目的放大比例

默认为0，如果存在剩余空间, 也不放大

flex-grow: 1; 如果存在剩余空间, 按照比列放大

3.flex-shrink定义项目的缩小比例

默认为1，即如果空间不足, 则将该项目缩小

flex-shrink: 0 如果空间不足，则将该项目不缩小，保持原大小

4.align-self属性允许单个项目与有其他项目不一样的对齐方式

可覆盖align-items属性，默认值为auto, 表示继承align-items属性

如果没有父元素, 则等同于stretch

5. flex-basis 定义了项目的初始长度

默认值为auto，即项目的本来大小。

注意：优先级会比width属性更高一点，两个值共存时，取 flex-basis的长度

6. flex 简写

flex ：flex-grow flex-shrink flex-basis

flex: 0 1 auto
如果存在剩余空间，也不放大,如果空间不足，该项目将缩小,项目的本来大小。

五、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ctrip List</title>
    <style>
        *{
            margin: 0;
            padding:0;
            text-decoration: none;
            list-style: none;
        }
        .wrap{
            box-sizing: border-box;
            padding:14px 0 13px;
            height: 124px;
            background-color: aquamarine;
            max-width: 540px;
            margin: 0 auto;
        }
        .wrap .list{
             /* 默认主轴排列(从左到右) */
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* 两根轴线的两端对齐 */
            align-content: space-between; 
        }
        .wrap .list li{
            width: 20%;
            height: 45px;
        }
        .wrap .list > li > a{
            height: 100%;
            color:#222222;
            font-size: 12px;
            display:flex ;
            flex-direction: column;
            /* 主轴对齐方式 */
            justify-content: space-between; 
            /* 交叉轴的对齐方式 */
            align-items: center; 
            
        }
        .wrap .list li > a > i{
            display: block;
            background-image: url("ctrip.png");
            background-repeat: no-repeat;
            background-size: 28px auto;
            width: 28px;
            height: 28px;
        }
        .wrap .list li:nth-of-type(1) > a > i{
            background-position:0 0;
        }
        .wrap .list li:nth-of-type(2) > a > i{
            background-position:0 -28px;
        }
        .wrap .list li:nth-of-type(3) > a > i{
            background-position:0 -56px;
        }
        .wrap .list li:nth-of-type(4) > a > i{
            background-position:0 -84px;
        }
        .wrap .list li:nth-of-type(5) > a > i{
            background-position:0 -112px;
        }
        .wrap .list li:nth-of-type(6) > a > i{
            background-position:0 -140px;
        }
        .wrap .list li:nth-of-type(7) > a > i{
            background-position:0 -168px;
        }
        .wrap .list li:nth-of-type(8) > a > i{
            background-position:0 -196px;
        }
        .wrap .list li:nth-of-type(9) > a > i{
            background-position:0 -224px;
        }
        .wrap .list li:nth-of-type(10) > a > i{
            background-position:0 -252px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="list">
            <li>
                <a href="#">
                    <i></i>
                    <span>自由行</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>WIFI电话卡</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>保险&bull;签证</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>换钞&bull;购物</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>向导&bull;包车</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>特价机票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>礼品卡</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>申卡&bull;借钱</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>旅拍</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <span>更多</span>
                </a>
            </li>
            
        </ul>
    </div>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS精灵图实现移动端导航(DPR=2)

一. 像素(pixel)像素是计算机屏幕中显示特定颜色的最小区域。当设备尺寸相同时，像素越密集，画面就越精细。设备像素：设备像素又称为物理像素，此像素是设备的固有属性任何设备屏幕的物理像素的数量自出场从出厂的那一刻，设备像素已经固定，不会再发生改变，每个物理像素可以根据操作系统设置自己的颜色和亮度。CSS 像素：又称为设备独立像素、逻辑像素。CSS中使用的一个抽象的概念，单位是 px像素比 DPR：设备像素比(device pixel ratio)，简称dpr，定义了物理像素和设备独
复制链接

扫一扫