CSS学习文档（5）：精灵图、CSS三角、用户界面样式、vertical-align属性应用、常见布局技巧

码农_小文

于 2024-07-29 23:27:51 发布

阅读量354

点赞数 8

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_58433849/article/details/140782998

版权

一、精灵图

1、目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

2、核心原理：

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

3、精灵图基本使用

    <title>精灵图基本使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;

            margin: 100px auto;
            background: url(images/sprites.png) no-repeat;
            background-position: -182px 0;
        }

        .box2 {
            width: 27px;
            height: 25px;
            background: url(images/sprites.png) no-repeat;
            margin: 200px;
            background-position: -155px -106px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

二、CSS三角

1、css三角：

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

2、核心原理：

准备一个矩形，之后在里面放一个小盒子，小盒子只有三角形，利用定位的关系将其定出来（子绝父相）。

3、京东三角案例：

    <title>京东三角案例</title>
    <style>
        .box {
            position: relative;
            width: 250px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
        }

        .box span {
            position: absolute;
            top: 45px;
            left: 250px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

三、用户界面样式

1、定义：

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

2、鼠标样式：

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

3、轮廓线outline

给表单添加outline:0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。

input { outline: none; }

4、防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none; }

四、vertical-align属性应用

1、使用场景

CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素)和字垂直对齐。

vertical-align : baseline l top l middle l bottom

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。设置完，就可以让文字和图片垂直居中对齐了。

2、解决图片底部空白缝隙问题

（1）给图片添加vertical-align:middle | top] bottom等。(强烈推荐使用)

（2）把图片转换为块级元素display: block;

（3）核心代码如下所示：

    <title>解决图片底部默认空白缝隙问题</title>
    <style>
        .box1 {
            border: 1px solid red;
        }

        .box1 img {
            /* vertical-align: bottom; */
            display: block;
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="images/ldh.jpg" alt="">
    </div>
</body>

五、常见布局技巧

1、margin负值运用

（1）让每个盒了margin往左侧移动-1px 正好压住相邻盒子边框

（2）鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index )

（3）核心代码如下所示

    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            margin-left: -1px;
            width: 150px;
            height: 200px;
            border: 1px solid red;
        }

        ul li:hover {
            /* position: relative; */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>

2、文字围绕浮动元素

（1）例子如图：

（2）核心代码如下所示：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西o-1秘鲁内马尔替补两人血染赛场</p>
    </div>
</body>

3、行内快巧妙运用

（1）例子如图：

（2）核心代码如下所示：

    <title>行内块巧妙运用</title>
    <style>
        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: 0;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev"> &lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

总结：以上是我对于精灵图、CSS三角、用户界面样式、vertical-align属性应用以及常见布局技巧的使用等相关知识的描述，我也是跟着边看边敲的，记忆的会好些，理解也能跟的上，感谢大家的观看谢谢！！！