web前端20200313学习笔记

最新推荐文章于 2024-05-04 16:34:07 发布

--believe

最新推荐文章于 2024-05-04 16:34:07 发布

阅读量83

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44850917/article/details/104852392

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.精灵技术讲解

CSS精灵其实是将网页中的一些背景图整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图

1.1精灵技术使用核心总结

首先我们知道，css精灵技术主要针对背景图片，插入的图片img是不需要这个技术的

1，精确测量，每个小背景图片的大小和位置。
2，给盒子指定小背景图片时，背景定位基本都是负数。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon1{
            width: 23px;
            height: 23px;
            background: url("imgs/index.png") no-repeat;

            background-position: 0 -107px;            
        }
        .icon2{
            width: 23px;
            height: 23px;
            background:url("imgs/index.png") no-repeat;
            background-position: -157px -107px;            
          
        }

    </style>
</head>
<body>
    <div>
        <div class="icon1"></div>
        <div class="icon2"></div>
    </div>
</body>
</html>

在这里插入图片描述

1.3精灵图的制作

css精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的就是把小图拼合成一张大图。
大部分情况下，精灵图都是由网页美工做。

2.滑动门原理

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.a是设置左侧背景图片的
        2.span是设置右侧背景
        3.因为整个导航栏都是链接 
        4.因为我们是滑动门左右推拉跟文字内容有关系就要用到行内块元素*/
        a{
            display: inline-block;
            height: 33px;
            background:url(imgs/to.png) no-repeat;
            margin: 100px;
            padding-left: 15px;
            color: #fff;
        }
        a span{
            display: inline-block;
            height: 33px;
            padding-right: 15px;
            /* 一定注意span需要图片右对齐 */
            background:url(imgs/to.png) no-repeat right top;
        }
    </style>
</head>
<body>
    <a href="#">
        
        <span>首页</span>
    </a>
</body>
</html>

运行结果：

在这里插入图片描述

3.微信导航栏案例

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        li{
            list-style: none;
            float: left;
            margin:0 5px;

        }
        body{
            background:url(imgs/wx.jpg) repeat-x;
        }
        .nav a{
            display: inline-block;
            height: 33px;
            background:url(imgs/to.png) no-repeat;
            padding-left: 15px;
            color: #fff;
            font-size: 14px;
            
        }
        .nav span{
            display:inline-block;
            height: 33px;
            background:url(imgs/to.png) no-repeat right;
            padding-right: 15px;
            line-height: 33px;
        }
        .nav{
            margin-top:20px;
         
        }
        /* .nav a:hover{
            background-image: url(imgs/ao.png);
            
        }
        .nav a:hover span{
            background-image: url(imgs/ao.png);
        } */

        .nav a:hover,
        .nav a:hover span{
            background-image: url(imgs/ao.png);
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>帮助与反馈</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>开放平台</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述

在这里插入图片描述

4.margin之美

负边距+定位：水平居中
利用父级盒子的50%，然后往左边走自己宽度的一半，可以实现盒子水平垂直居中
压住盒子相邻边距
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            float: left;
            margin-left: -1px;
            margin-top:-1px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端20200313学习笔记

1.精灵技术讲解CSS精灵其实是将网页中的一些背景图整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图1.1精灵技术使用核心总结首先我们知道，css精灵技术主要针对背景图片，插入的图片img是不需要这个技术的 1，精确测量，每个小背景图片的大小和位置。 2，给盒子指定小背景图片时，背景定位基本都是负数。 ...
复制链接

扫一扫