跟着pink老师学前端CSS-D7

2024-03-19 11:43:16

1. 精灵图

1.1 为什么需要精灵技术

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图（sprites）的使用

  1. 精灵技术主要针对于背景图片的使用，就是将网页中的一些小背景图像整合到一张大图中。
  2. 这个大图片也称为sprites精灵图或雪碧图。
  3. 移动背景图片的位置，此时可以用background-position。
  4. 移动的距离就是这个目标图片的x和y坐标。
  5. 因为一般情况下都是往上往左移动，所以数值是负值。

1.3 案例

<!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>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }

        .p {
            width: 100px;
            height: 112px;
            background-position: -490px -276px;
        }

        .i {
            width: 60px;
            height: 108px;
            background-position: -327px -142px;
        }

        .n {
            width: 108px;
            height: 109px;
            background-position: -215px -141px;
        }

        .k {
            width: 105px;
            height: 114px;
            background-position: -495px -142px;
        }
    </style>
</head>

<body>
    <span class="p">p</span>
    <span class="i">i</span>
    <span class="n">n</span>
    <span class="k">k</span>
</body>

</html>

跟着pink老师学前端CSS-D7

2. 字体图标

字体图标主要用于显示网页中通用、常用的一些小图标，它展示的是图标，本质属于字体。

2.1 字体图标的下载

  • icomoon字库： http://icomoon.io
  • 阿里 iconfont字库： http://www.iconfont.cn/

2.2 字体图标的引用

  1. 把下载包里的fonts文件夹放入页面根目录下。
  2. 在CSS样式中字体声明：下载包里的style.css文件第一段，注意路径。
  3. 打开下载包里的demo.html，找到想要的图标，图标后面的小方框，就是我们想要的字体图标。
  4. 设置样式，font-family:（字体声明中声明的名字）

icomoon实例：

<!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.css文件第一段，注意路径*/
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?e4ufc2');
            src: url('fonts/icomoon.eot?e4ufc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?e4ufc2') format('truetype'),
                url('fonts/icomoon.woff?e4ufc2') format('woff'),
                url('fonts/icomoon.svg?e4ufc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            /* 必须和字体声明里的名字一样 */
            font-family: 'icomoon';
            font-size: 100px;
            color: hotpink;
        }
    </style>
</head>

<body>
    <!-- 打开下载包里的demo.html，找到想要的图标，图标后面的小方框，就是我们想要的字体图标 -->
    <span></span>
    <span></span>
</body>

</html>

跟着pink老师学前端CSS-D7

2.3 字体图标的追加

icomoon–>icomoonApp–>import icons–>导入下载包里的selection.json文件–>继续选择图标–>下载压缩包替换之前的文件

3. CSS三角

3.1 原理

宽高为0但是有边框的盒子实际上是四个三角形拼在一起，所以制作三角形可以让三个边框的颜色为透明色，只留下一个有颜色的三角形。

<!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>
        /* 指定宽高为0但是有边框的盒子 */
        .box1 {
            width: 0;
            height: 0;
            border-top: 50px solid hotpink;
            border-right: 50px solid springgreen;
            border-bottom: 50px solid skyblue;
            border-left: 50px solid yellow;
        }

        .box2 {
            /* 宽高必定为0 */
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            /* 有顺序，先指定透明色，再指定有颜色的，否则会被覆盖 */
            border: 50px solid transparent;
            border-top-color: hotpink;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

跟着pink老师学前端CSS-D7

3.2 京东三角案例

<!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>
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: hotpink;
            margin: 100px auto;
        }

        .jd span {
            position: absolute;
            top: -20px;
            left: 80px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="jd">
        <span></span>
    </div>
</body>

</html>

跟着pink老师学前端CSS-D7

4. 用户界面样式

4.1 鼠标样式cursor

li {cursor:pointer}
属性值 描述
default 三角默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

4.2 轮廓线outline

去掉表单默认的蓝色边框：

input {outline :none;}

或

input {outline :0;}

4.3 文本域防止拖拽resize

textarea {resize :none;}

5. vertical-align属性应用

5.1 垂直对齐

它用于设置图片或者表单（行内块元素）和文字垂直对齐。

vertic-align:baseline|top|middle|bottom
值 描述
baseline 默认，元素放在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素放在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。

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

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

两种解决方案：

  1. 给图片添加vertic-align:middle|top|bottom。
  2. 把图片转换为块级元素。

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

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

1. 先强制一行内显示文本

   white-space:nowrap;

2. 超出的部分隐藏

   overflow:hidden;

3. 文字用省略号代替超出的部分

   text-overflow:ellipsis;

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

overflow:hidden; 
text-overflow:ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display:-webkit-box;
<!-- 限制在一个块元素显示的文本的行数 -->
-webkit-line-clamp:2;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
-webkit-box-orient:vertical;

7. 布局技巧

7.1 margin负值运用

两个盒子的边框重叠实现1+1=1的效果：让每个盒子margin往左移动-1px正好压住相邻盒子边框。

实现鼠标经过盒子边框变颜色：

  1. 如果盒子没有定位，则鼠标经过添加相对定位。

    选择器：hover{
	position:relative;
	border-color:blue;
}

  2. 如果盒子有定位，则加z-index

    选择器：hover{
	z-index:1；
	border-color:blue;
}

7.2 文字围绕浮动元素

7.3 行内块的巧妙运用

<!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>
        * {
            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 {
            height: 36px;
            width: 60px;
            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>

跟着pink老师学前端CSS-D7

7.4 CSS三角强化

CSS做直角三角形

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

价格框案例

<!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>
        .box1 {}

        .price {
            width: 160px;
            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: white;
            font-weight: 700;
        }

        .miaosha i {
            position: absolute;
            right: 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="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>

</html>

跟着pink老师学前端CSS-D7

7.5 CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

京东初始化代码：

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

img {
    border: 0;
    vertical-align: middle;
}

button {
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81632;
}

button.
input {
    /* "\5B8B\4F53"是宋体 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

body {
    -webkit-font-smoothing:antialiased;
    background-color: #fff;
    font: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

.none {
    display: none;
}

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

.clearfix {
    *zoom:1;
}
上一篇：CSS高级技巧总结


下一篇：教你如何使用和下载字体图标