CSS高级技巧

最新推荐文章于 2021-02-12 21:42:12 发布

程序媛知七

最新推荐文章于 2021-02-12 21:42:12 发布

阅读量81

点赞数

分类专栏：前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_45592339/article/details/109491650

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

精灵图

在这里插入图片描述

精灵图实践

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>smd专属</title>
    <style>
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        span {
            display: inline-block;
            margin: 10px 130px;
        }

        .box {
            height: 730px;
            width: 1170px;
            /* background-color: blue; */
            /* background: url(image/shu.jpg) no-repeat; */
        }

        .s {
            height: 120px;
            width: 111px;
            /* background-color: blue; */
            background: url(image/abcd.jpg);
            background-position: -256px -422px;
        }

        .m {
            height: 114px;
            width: 138px;
            /* background-color: blue; */
            background: url(image/abcd.jpg);
            background-position: -108px -270px;
        }

        .d {
            height: 117px;
            width: 113px;
            /* background-color: blue; */
            background: url(image/abcd.jpg);
            background-position: -357px 0;
        }

        .shu {
            height: 651px;
            width: 578px;
            background-image: url(image/bao.jpg);
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="s"></span>
        <span class="m"></span>
        <span class="d"></span>
        <img src="image/shu.jpg" alt="">
        <img src="image/bao.jpg" alt="">
    </div>
</body>

</html>

字体图标

在这里插入图片描述

三角做法

在这里插入图片描述

用户界面样式

在这里插入图片描述

图片下方空白缝隙问题

在这里插入图片描述

溢出文字省略号显示

在这里插入图片描述

.box {
    margin: 30px auto;
    /* 盒子垂直居中且距离上边距30像素 */
    white-space: nowrap;
    /* 强制一行内显示文本 */
    overflow: hidden;
    /* 超出隐藏非省略 */
    text-overflow: ellipsis;
    /* 用省略号替代溢出的文字部分 */
    height: 100px;
    width: 100px;
    background-color: salmon;
    
}

在这里插入图片描述

margin负值的运用



 ul li {
     list-style: none;
     /* 去掉列表的小圆点 */
     float: left;
     margin-left: -1px;
     /* 重合部分折叠 */
     height: 200px;
     width: 100px;
     background-color: springgreen;
     border: 1px solid red;
 }

在这里插入图片描述
文字围绕浮动显示的做法
使用浮动，因为不会压住盒子。使得文字环绕在图片周围

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>anli</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin-top: 70px;
            text-align: center;
        }
        a {
            display: inline-block;
            height: 40px;
            width: 40px;
            background-color: rgb(177, 184, 180);
            font-size: 18px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            color: #000;
        }
        .prev,
        .next {
            width: 100px;
        }
        .nb,
        .nj {
            border: none;
            background-color: #fff;
        }
        .box input {
            height: 35px;
            width: 50px;
        }
        .box .surebutton {
            height: 40px;
            width: 50px;
            border: 1px solid #fff;
            background-color: rgb(177, 184, 180);
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev"><<上一页</a>
        <!-- &it小于号 -->
        <a href="#" class="nb">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="nj">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第<input type="text">页
        <input  class="surebutton" type="button" value="确定">
    </div>
</body>

</html>