CSS学习7（）

1. CSS三角

1.普通三角制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-bottom: 10px solid green;
            border-left: 10px solid red;
            border-right: 10px solid blue;
        }
        .box2 {
            width:0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角制作</title>
    <style>
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
           position: absolute;
            top: -9px;
            right: 15px;
            width: 0;
            height: 0;
            /*为了照顾兼容性*/
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

效果：

2. 用户界面

2.1鼠标样式cursor

使用方法：

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

2.2 表单轮廓outline

点击表单的时候，不想出现轮廓线。css

        input {
            outline: none;
        }

2.3 文本域设置防拖拽 resize

        textarea {
            resize: none;
        }

小细节：在些textarea的时候，尽量在一行里面写，如下

如果换行的话，在页面中会出现这个空白区域，有点难受。

2.4vertical-align属性

经常使用于使图片、表单和文字垂直居中对齐。（行内块属性可以）

默认是文字和图片基线对齐，可以通过给行内块元素添加vertical-align属性进行修改。

解决图片底部默认的空白缝隙问题

图片底侧会有一个空白缝隙，因为行内块元素会和文字的基线对齐

解决方法：

1.给图片添加vertical-align: middle | top | bottom等

2.把图片转换为块级元素：display: block

2.5 溢出文字省略

2.5.1 单行文本溢出

步骤：

1. 强制一行内显示（即不换行）--> white-space: nowrap

2.溢出部分隐藏 --> overflow: hidden

3.文字用省略号替代超出部分 --> text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /*默认自动换行*/
            /*white-space: normal;*/
            /*关闭自动换行，强制一行内显示所有文字*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        大家好，我是xxx，很高兴认识你们
    </div>
</body>
</html>

View Code点击查看代码

2.5.2 多行文本溢出

有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)。

3. 布局技巧

posted on 2023-04-15 21:21 201812 阅读(30) 评论(0) 收藏举报