CSS的高级技巧

x+x=2x

已于 2022-04-06 20:24:13 修改

阅读量368

点赞数

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

于 2022-04-06 16:59:10 首次发布

本文链接：https://blog.csdn.net/qq_45430594/article/details/123993734

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.字体图标
2.CSS的三角做法
3.取消表单轮廓和放在拖拽
4.鼠标样式
5.vertical-align属性应用
6.溢出的文字省略号显示
- 6.1单行文字溢出显示省略号
- 6.2多行文字溢出显示省略号
7.margin负值的妙用
8.文字围绕浮动元素
9.行内块元素的巧用
10.三角巧妙运用

1.字体图标

下载字体去阿里巴巴矢量图标库或者icomoon字体库下载字体，解压后将font目录复制到项目根目录下即可。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?um7ni1');
            src: url('fonts/icomoon.eot?um7ni1#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?um7ni1') format('truetype'),
                url('fonts/icomoon.woff?um7ni1') format('woff'),
                url('fonts/icomoon.svg?um7ni1#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        span {
            font-family: 'icomoon';
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

2.CSS的三角做法

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .box {
            width: 0;
            height: 0;
            /* 兼容性 */
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-top-color: skyblue;
        }
    </style>
</head>
<body>
    <span class="box"></span>
</body>
</html>

3.取消表单轮廓和放在拖拽

<input style="outline: none;">
<input style="outline: 0;">
<textarea style="resize: none; outline: 0;" name="" id="" cols="30" rows="10"></textarea>

4.鼠标样式

<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>

5.vertical-align属性应用

图片和文字居中对齐。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="./images/php.jpg">php是后端开发语言
</body>
</html>

6.溢出的文字省略号显示

6.1单行文字溢出显示省略号

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        p {
            /* 1.先强制一行内显示文本 */
            white-space: nowrap;
            /* 2.超出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号代替超出的部分 */
            text-overflow: ellipsis;
        }
        div {
            width: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>abcdefghijklmnopqrst</p>
    </div>
</body>
</html>

6.2多行文字溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        div {
            width: 50px;
            height: 100px;
            background-color: skyblue;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        abcdefghijklmnopqrst
    </div>
</body>
</html>

7.margin负值的妙用

用于去掉边框重叠的线条。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        li {
            list-style: none;
        }
        .box {
            width: 500px;
            margin: 100px auto;
        }
        ul>li {
            float: left;
            width: 80px;
            height: 100px;
            border: 1px solid #888;
            margin-top: 100px;
            margin-left: -1px;
        }
        ul li:hover {
            position: relative;
            border-color: #ff5000;
        }
        /* 如果li都用定位，利用z-index提供层级 */
        /*ul li:hover {
            z-index: 1;
            border-color: #ff5000;
        }*/
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>

8.文字围绕浮动元素

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<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;
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: skyblue;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 90px;
            margin: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="./images/pic.png">
        </div>
        <p>文字围绕图片效果文字围绕图片效果文字围绕图片效果文字围绕图片效果</p>
    </div>
</body>
</html>

9.行内块元素的巧用

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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 {
            color: #333;
            text-decoration: none;
        }
        .box {
            text-align: center;
            margin: 10px;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
        .box .prve,
        .box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            border: none;
            background-color: #fff;
        }
        .box input {
            height: 36px;
            width: 40px;
            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="prve">&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>
</html>

10.三角巧妙运用

在这里插入图片描述

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

<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>
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .ms {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: #e1251b;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .price i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="price">
        <span class="ms">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>
</html>

x+x=2x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的高级技巧

目录1.字体图标2.CSS的三角做法3.取消表单轮廓和放在拖拽4.鼠标样式5.vertical-align属性应用6.溢出的文字省略号显示6.1单行文字溢出显示省略号6.2多行文字溢出显示省略号1.字体图标下载字体去阿里巴巴矢量图标库或者icomoon字体库下载字体，解压后将font目录复制到项目根目录下即可。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录