黑马CSS笔记（三）CSS高级技巧，H5C3提高，品优购案例

最新推荐文章于 2023-09-17 15:52:14 发布

VIP文章 jiujiujm

最新推荐文章于 2023-09-17 15:52:14 发布

阅读量544

点赞数

分类专栏：黑马CSS笔记文章标签： css

本文链接：https://blog.csdn.net/jiujiujm/article/details/116332111

版权

CSS高级技巧

01 精灵图

1.1 为什么需要精灵图

在这里插入图片描述

1.2 精灵图的使用

在这里插入图片描述

02 字体图标

2.1 字体图标的产生

在这里插入图片描述

1.2 字体图标的优点

在这里插入图片描述

2.3 字体图标的下载

在这里插入图片描述

2.4 字体图标的引入

在这里插入图片描述

@font-face {
   
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

在这里插入图片描述

2.5 字体图标的追加

在这里插入图片描述

03 CSS三角

在这里插入图片描述

div {
   
 width: 0;
 height: 0;
 line-height: 0;
 font-size: 0;
 border: 50px solid transparent;
 border-left-color: pink;
}

案例：京东三角

<!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>
        .jd {
   
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
   
            position: absolute;
            right: 15px;
            top: -10px;
            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>

04 CSS用户界面样式

4.1 什么是界面样式

在这里插入图片描述

4.1 鼠标样式cursor

在这里插入图片描述

4.2 轮廓线outline

在这里插入图片描述

4.3 防止拖拽文本域resize

在这里插入图片描述

05 vertical-aligh属性应用

在这里插入图片描述

5.1 图片、表单和文字对齐

在这里插入图片描述

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

在这里插入图片描述

06 溢出的文字省略号显示

6.1 单行文本溢出

在这里插入图片描述

6.2 多行文本溢出

在这里插入图片描述

07 常见布局技巧

7.1 margin负值运用

在这里插入图片描述

<!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>margin负值的巧妙运用</title>
    <style>
        ul li {
   
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
   
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

7.2 文字围绕浮动元素

在这里插入图片描述

<!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>
        * {
   
            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>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

7.3 行内块巧妙运用

在这里插入图片描述

<!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>
        * {
   
            margin: 0;
            padding: 0;
        }
        .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: none;
        }
        .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>
</html>

7.4 CSS三角强化

在这里插入图片描述

<!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>CSS三角强化的巧妙运用</title>
    <style>
         .box1 {
   
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
           /* 1.只保留右边的边框有颜色 */
           border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0 ;

        }
        .price {
   
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
   
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;

最低0.47元/天解锁文章

jiujiujm

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
黑马CSS笔记（三）CSS高级技巧，H5C3提高，品优购案例

CSS高级技巧01 精灵图1.1 为什么需要精灵图1.2 精灵图的使用02 字体图标2.1 字体图标的产生1.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
复制链接

扫一扫