【CSS学习笔记八】用户界面优化（鼠标样式、去掉表单轮廓...）、CSS初始化

最新推荐文章于 2025-06-08 09:01:17 发布

waski

最新推荐文章于 2025-06-08 09:01:17 发布

阅读量485

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端之路文章标签： css 学习笔记

本文链接：https://blog.csdn.net/waski/article/details/134925610

前端之路专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何通过CSS优化用户界面，包括修改鼠标样式、去除表单轮廓、防止拖拽、垂直对齐、处理溢出文字、清除边框重叠、文字围绕浮动元素、行内块元素布局以及三角形制作。同时，也讨论了CSS初始化的重要性。

文章目录

21 用户界面优化

更改一些用户操作样式，提高用户体验

更改用户的鼠标样式
去掉表单轮廓
防止表单域拖拽
行内元素 或者 行内块元素 的垂直对齐方式
溢出文字用 ... 代替
清除盒子边框重叠
文字围绕浮动元素
利用 行内块元素 进行布局
三角形的拓展

21.1 鼠标样式 `cursor：pointer；`

<!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>
	</style>	
</head>


<body>
    <ul>
        <li style="cursor: default;">我是鼠标 箭头 样式</li>
        <li style="cursor: pointer;">我是鼠标 小手 样式</li>
        <li style="cursor: move;">我是鼠标 移动 样式</li>
        <li style="cursor: text;">我是鼠标 文本 样式</li>
        <li style="cursor: not-allowed;">我是鼠标 禁止 样式</li>
    </ul>
</body>

</html>

21.2 去掉表单轮廓 `outline: none`

去掉默认的蓝色边框：

input {outline: none; }

21.3 防止表单域拖拽 `resize: none`

<head>
    <style>
         textarea {
            outline: none;
            resize: none;
         }
    </style>
</head>
<body>
	<textarea name="" id="" cols="30" rows="10"></textarea> 
	/*在一行写完，否则文字开头有空格 */
</body>

21.4 垂直对齐`vertical-align`

设置 行内元素 或者 行内块元素 的垂直对齐方式

vertical-align : baseline | top | middle | bottom

应用例子1：图片和文字挨在一起时，可以对图片设置 vertical-align : middle；

应用例子2：消除图片下面的空隙（原本是基线对齐）：

方法① 对图片设置 vertical-align: bottom；

方法② 对图片设置 display: block;

21.5 溢出文字用`...`代替

21.5.1 单行文本

具体步骤如下：

/*1．强制一行内显示所有文本*/
white-space: nowrap;(默认normal自动换行)
/*2．隐藏超出边框的文字*/
overflow: hidden;
/*3．省略号替代超出的部分*/
text-overflow: ellipsis;

21.5.2 多行文本

此处有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核)，具体步骤如下：

overflow: hidden;
text-overflow: ellipsis;
/*盒子模型转化为弹性伸缩盒子模型*/
display: -webkit-box;
/*块元素中显示省略号的行数*/
-webkit-line-clamp: 2;
/*盒子里所有子元素的排列方式为垂直居中*/
-webkit-box-orient: vertical;

注意：要将盒子高度改成显示省略号处的高度。

21.6 清除盒子边框重叠

当多个盒子在一行内，并且每一个盒子都有边框时，就会发生边框重叠。

<!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>Document</title>
    <style>
        ul li {
            list-style: none;   /* 去掉li前面的小圆点 */
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

我们定义5个盒子，这5个盒子都在周围加上一个1像素的边框。

结果，中间的边框为两像素：

我们想要所有的框都为1像素，可以对 li 设置 margin：-1px ，把所有的框都左移了1个像素。

21.7 文字围绕浮动元素

针对下图效果，可以对图片设置左浮动（浮动不会遮挡文字）进行制作：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dahezi {
            width: 300px;
            height: 80px;
            background-color: antiquewhite;
            margin: 0 auto;
        }

        .tupian {
            float: left;
        }
    </style>
</head>

<body>
    <div class="dahezi">
        <div class="tupian"><img src="images/山.jpg" alt="图片加载不出来" width="120px"></div>
        较真丨频繁做核酸引发喉癌鼻咽癌剧增？假的，一次说清三大忧虑
    </div>
</body>

我们在一个大盒子中放置了一张图片和一段文字，当图片不加浮动时：

当时当我们给图片这个盒子加上浮动，图片就不占位置了（脱标），这样文字就会向上移，但是由于浮动不会遮挡下面的文字，就会产生文字环绕效果：

21.8 利用`行内块元素`进行布局

如果想要实现这种效果：

我们可以使用 行内块元素 的简化方法进行布局：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: pink;
            border:1px solid #333;
            border-radius: 2px;
            text-decoration: none;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <a href="#" class="yemian1">1</a>
    <a href="#" class="yemian2">2</a>
    <a href="#" class="yemian3">3</a>
    <a href="#" class="yemian4">4</a>
    <a href="#" class="yemian5">5</a>
    <a href="#" class="yemian6">6</a>
    <a href="#" class="yemian7">7</a>
    <a href="#" class="yemian8">8</a>
    <a href="#" class="yemian9">9</a>
    <a href="#" class="yemian10">10</a>
</body>

</html>

定义10个盒子，最后为靠左显示：

但是我们想要将所有的盒子都居中对齐，只需要在父级添加：

body {
       text-align: center;
}

注意：text-align: center;可以让所有的行内元素或者行内块元素进行居中对齐

21.9 三角形的拓展

制作这种三角形的方法：

div {
    width: 0;
    height: 0;
    border-color: transparent red transparent transparent;
    border-style: solid;
    border-width: 50px 100px 0 0;
}

制作梯形的方法：上面的三角形右边再放一个矩形

22 css初始化!

为何需要进行初始化？

不同浏览器对于一开始的效果是不同的，如：有的链接一开始有斜体，有的没有，有的背景为灰色，有的为黑色等。我们需要将这些固定下来。清除浏览器给某些元素的预定义样式。

<style>
    /* 把所有的标签的内外边距清零 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 将默认为斜体的文字变为正常 */
    em,
    i {
        font-style: normal;
    }

    /* 去掉li的小圆点 */
    li {
        list-style: none;
    }

    img {
        /* border:0;照顾低版本浏览器，如果图片外边包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle;
    }

    /* 当我们鼠标经过按钮时，鼠标样式会变成小手 */
    button {
        cursor: pointer;
    }

    /* 改变链接的颜色，去除链接的下划线 */
    a {
        color: #666;
        text-decoration: none;
    }

    /* 在鼠标经过链接时，链接改变颜色 */
    a:hover {
        color: :#c81623;
    }

    /* 声明整个页面的背景和字体 */
    body {
        /* 字体抗锯齿，当字体放大时，不会产生锯齿 */
        -webkit-font-smoothing: antialiased;
        background-color: #fff;
        font: 12px/1.5 Microsoft YaHei, HeiTi SC, tahoma, arial;
        color: #666;
    }

    /* 清除浮动 */
    .clearfix:after {
        visibility: hidden;
        clear: both;
        display: block;
        content: ".";
        height: 0;
    }
</style>