CSS的相关应用

相信光的奥特王小懒
105 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

1. 用户界面样式

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

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

1.1 鼠标样式

image.png

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

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-鼠标样式</title>
</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>

1.2 取消表单轮廓以及防止拖拽文本域

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

image.png

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

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input, textarea {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>
<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>

2. vertical-align的属性应用

image.png

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

官方解释∶用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

image.png

image.png

image.png

默认是基线对齐

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
        img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }
        textarea {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="images/ldh.jpg" alt="">  pink老师是刘德华

    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea> 请您留言
</body>
</html>

注意：我们在实际开发中会经常遇到图片底侧会有空白缝隙，原因是行内块元素和文字的基线是默认对齐的。

avatar
文章
阅读
粉丝