CSS06-CSDN博客

本文链接：https://blog.csdn.net/weixin_45842339/article/details/115525387

文章目录

学习目标

能够使用精灵图
能使用字体图标
能写出CSS三角
能写出常见CSS用户界面样式
知道常见布局技巧

精灵图

目的：有效减少服务器接收和发送请求次数，提高页面的加载速度
方式：将网页中的一些背景图像整合在一张大图中
步骤
1. 将小背景图片整合到一张大图中(这个大图称为：sprites 精灵图or雪碧图)
2. 移动背景图片位置(使用的背景的background-position 属性进行移动；网页中的坐标和直角坐标系有所不同，一般是往上和往左移动，所以数值是负值)
3. 精确测量每个小背景图片的大小和位置
缺点：图片文件较大；图片本身放大or缩小都会失真；一旦想要更换就十分麻烦
使用PS测量方法
- 使用切片工具，将需要的部分选出来
- 然后点击鼠标右键，选择“编辑切片选项”
- 最后在弹出的窗口中得到相关的长宽、位移参数
案例


<!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>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        
        .z {
            width: 112px;
            height: 114px;
            background-position: -479px -555px;
        }
        
        .d {
            width: 101px;
            height: 106px;
            background-position: -362px -9px;
        }
        
        .y {
            width: 117px;
            height: 115px;
            background-position: -361px -554px;
        }
        
        .s {
            width: 114px;
            height: 108px;
            background-position: -254px -422px;
        }
    </style>
</head>
<body>
    <span class="z"></span>
    <span class="z"></span>
    <span class="d"></span>
    <span class="y"></span>
    <span class="y"></span>
    <span class="d"></span>
    <span class="s"></span>
</body>
</html>

精灵图

在这里插入图片描述

效果图

在这里插入图片描述

字体图标

使用场景：显示网页中通用、常用的一些小图标
目的：解决精灵图的缺点
注意事项：展示的是图标，本质属于字体
优点
- 轻量级：一个图标字体比一张精灵图要小很多，一旦字体加载，图标马上就渲染出来了
- 灵活性：因为本质是文字，所以可以随意改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎所有浏览器都能用
使用步骤
1. 下载
2. 引入
3. 追加

字体图标的下载

字体图标的引入

步骤

将下载包中的fonts文件夹放入页面根目录下
在CSS样式中全局声明字体，即引入(注意路径)
在下载包中的demo.html可以看相关字体图标

 @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;
 }

在HTML标签中添加小图标(demo.html中每个图标右侧的那个[]框，直接复制粘贴到代码中即可)
给标签定义字体(注：需要和引入的时候font-family的字体一致)

案例


<!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>
        @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;
        }
        
        span {
            font-family: "icomoon";
            font-size: 50px;
        }
    </style>
</head>
<body>
    <span>盗墓笔记</span>
    <br>
    <span></span>
</body>
</html>

效果图

在这里插入图片描述

CSS三角

使用背景：网页中一些常见的三角形，可以使用CSS直接画出来，不需要去做成图片or字体图标
案例1


<!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>CSS三角</title>
    <style>
        div {
            width: 0;
            height: 0;
            /* transparent 透明 */
            border: 50px solid transparent;
            border-color: red green yellow skyblue;
            /* 下面这个两个参数是为了兼顾低版本浏览器 */
            line-height: 0;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

案例二


<!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 {
            position: absolute;
            top: -20px;
            right: 30px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom: 10px solid skyblue;
        }
        
        .box2 {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box2">
        <div class="box1"></div>
    </div>
</body>
</html>

效果图

在这里插入图片描述

CSS用户界面样式

使用背景：为了有更好的用户体验，去更改一些用户操作样式
- 更改鼠标样式
- 表单轮廓
- 防止表单域拖曳

更改鼠标样式

cursor属性更改
语法

修改标签 {
    cursor: 属性值；
}

属性值及其描述

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

案例


<!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>
        .box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-right: 50px;
        }
        
        .box1 {
            cursor: pointer;
        }
        
        .box2 {
            cursor: move;
        }
        
        .box3 {
            cursor: text;
        }
        
        .box4 {
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
</body>
</html>

效果图不方便展示，希望读者能自己试一试

轮廓线

使用背景：表单不需要默认的蓝色边框
语法

input {
    outline: none;
}

案例


<!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>
        input {
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

效果图

在这里插入图片描述

防止拖曳文本域

使用背景：文本域的大小是可以拖曳的，这样会影响整个页面的布局，所以需要使其不能拖曳
语法


<!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>
        textarea {
            resize: none;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

效果图

在这里插入图片描述

vertical-align 属性应用

使用背景：用于图片或者表单（行内块元素）和文字垂直对齐
语法

修改元素 {
    vertical-align: baseline | top | middle | bottom;
}

属性值及其描述

属性值	描述
baseline	默认，元素放置在父元素的基线上
top	将元素的顶端与行中最高元素的顶端对齐
middle	将元素放在父元素的中间
bottom	将元素的顶端与行中最低的元素对齐

案例


<!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>vertical-align属性应用</title>
    <style>
        img {
            /* vertical-align: baseline; */
            /* vertical-align: top; */
            /* vertical-align: middle; */
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="box1"><img src="images/爪子刀.png" alt="">爪子刀，永远的神</div>
</body>
</html>

效果图

在这里插入图片描述

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

解决方法
- 给图片添加 vertical-align属性
- 将图片转换为块级元素
案例


<!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>
        body {
            background-color: skyblue;
        }
        
        img {
            /* display: block; */
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="box1"><img src="images/abcd.jpg" alt=""></div>
    <div class="box2"><img src="images/abcd.jpg" alt=""></div>
</body>
</html>

效果图

在这里插入图片描述

溢出的文本省略号显示

使用背景：当一行放不下那么多字，后面就用省略号代替
单行文本溢出部分省略号代替需要满足的条件
- 强制文本内容在一行内显示
- 超出部分隐藏
- 文本用省略号代替超出的部分
案例


<!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>
        .box {
            width: 200px;
            height: 100px;
            border: 2px solid red;
            /* 强制一行内显示文本 */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 文字用省略号代替超出部分 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        各位同学：请查阅下周课程设计安排，如有冲突，请告知，谢谢
        <br> 各位同学：请查阅下周课程设计安排，如有冲突，请告知，谢谢
        <br> 各位同学：请查阅下周课程设计安排，如有冲突，请告知，谢谢
        <br> 各位同学：请查阅下周课程设计安排，如有冲突，请告知，谢谢
    </div>
</body>
</html>

效果图

在这里插入图片描述

多行文本溢出部分使用省略号代替

有兼容性问题，适合于webKit浏览器或者移动端
多行文本溢出部分省略号代替需要满足的条件
- 超出部分隐藏
- 文字用省略号代替超出部分
- 弹性伸缩盒子模型
- 限制在一个块元素显示的文本行数
- 设置or检索伸缩盒对象的子元素排列方式
案例


<!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>
        .box {
            width: 200px;
            height: 45px;
            border: 2px solid red;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 文字用省略号代替超出部分 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置or检索伸缩盒对象的子元素排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="box">各位同学：请查阅下周课程设计安排，如有冲突，请告知，谢谢</div>
</body>
</html>

效果图

在这里插入图片描述

常见布局技巧

margin负值的运用

使用背景：当鼠标指到一连排盒子中的某个上的时候，它的边框出现
案例


<!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>margin负值的运用</title>
    <style>
        ul li {
            /* 当盒子存在相对定位的时候: 可以使用z-index提高盒子层级 */
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        
        ul li:hover {
            /* 当没有定位的时候，加相对定位，因为其保留了位置 */
            /* position: relative; */
            /* 当存在定位的时候，提高盒子层级 */
            z-index: 1;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

效果图

在这里插入图片描述

文字围绕浮动元素

使文字围绕盒子显示
案例


<!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>
        .box {
            width: 650px;
            height: 230px;
            margin: 100px auto;
            background-color: gray;
            padding: 5px;
        }
        
        .box img {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/爪子刀.png" alt="">
        <p>爪子刀，永远的神；爪子刀是印尼、马来亚等地流行的一种个人随身刀具，适合防身。</p>
    </div>
</body>
</html>

效果图

在这里插入图片描述

行内块巧妙运用

案例


<!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;
        }
        
        a {
            text-decoration: none;
        }
        
        .box {
            /* margin: 100px auto; */
            text-align: center;
        }
        
        .box a {
            display: inline-block;
            color: grey;
            border: 1px solid grey;
            /* ----------- */
            display: inline-block;
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 35px;
            text-decoration: none;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            color: black;
        }
        
        .box .two,
        .box .six {
            border: none;
            background-color: #fff;
        }
        
        .box .shang,
        .box .xia {
            width: 85px;
            font-size: 14px;
        }
        
        .box input {
            width: 40px;
            height: 30px;
            outline: none;
            border: 1px solid #ccc;
        }
        
        .box button {
            width: 50px;
            height: 40px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="shang">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="two">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="six">...</a>
        <a href="#" class="xia">下一页&gt;&gt;</a> 共10页 &nbsp; 到第
        <input type="text"> 页
        <button>确定</button>
    </div>
</body>
</html>

效果图

在这里插入图片描述

CSS三角强化

案例


<!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>CSS强化</title>
    <style>
        .price {
            text-align: center;
            width: 180px;
            height: 25px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 25px;
        }
        
        .price .miaosha {
            float: left;
            position: relative;
            width: 90px;
            background-color: red;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
        }
        
        .miaosha .sanjiao {
            position: absolute;
            right: -15px;
            top: 0;
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent;
            border-style: solid;
            border-width: 25px 15px 0 0;
        }
        
        .price .yuanjia {
            float: right;
            margin-right: 20px;
            font-size: 14px;
            color: grey;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="price">
        <span class="miaosha">￥1650
            <i class="sanjiao"></i>
        </span>
        <span class="yuanjia">￥5650</span>
    </div>
</body>
</html>