前端第6天-CSDN博客

本文链接：https://blog.csdn.net/l_11789/article/details/128182080

CSS高级

一.精灵图

作用：为了有效减小服务器接受和发送请求的次数提高页面加载速度

同一张图片上有不同的小图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9akdeELF-1670206406301)(D:\桌面\Snipaste_2022-12-02_14-59-15.png)]

<!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 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat -182px 0;
        }
        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px;
            background: url(images/sprites.png) no-repeat -155px -106px
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

二.字体图标

作用：用于一些通用或常用图标显示

优点：

轻量级：一个图标要比一系列的图像要小字体加载图标会马上渲染出来

灵活性：本质为文字可以随意改变颜色产生阴影透明效果旋转等

兼容性：几乎支持所有的浏览器

总结：简单的用字体图标难的用精灵图

字体图标的下载与使用

从IconMoon网站上下载之后把fonts文件夹放在和网页一个目录下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9WxOEHb-1670206406302)(C:\Users\t-y-x\AppData\Roaming\Typora\typora-user-images\image-20221202160516005.png)]

<!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?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix'), /* IE9 Compat Modes */ 
                url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/icomoon.woff?p4ssmb') format('woff'), /* Modern Browsers */
                url('fonts/icomoon.ttf?p4ssmb')  format('truetype'), /* Safari, Android, iOS */
                url('fonts/icomoon.svg#p4ssmb#icomoon') format('svg'); /* Legacy iOS */
            font-size: normal;
            font-style: normal;
            font-display: block;
        }
    span {
        /* 与上面一样才能引用 */
        font-family: 'icomoon';
        font-size: 100px;
        color: pink;
    }  
    </style>
</head>
<body>
    <!-- 
        从demo.html中复制这个方框 虽然看着一样但是本质不一样
        也可以使用方块前面的文字但是得加上 \ 转义符
    -->
    <span></span>
</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>三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 为了低版本的浏览器 */
            line-height: 0;
            font-size: 0;
            /*  */
            border-top: 10px solid pink;
            border-right: 10px solid rgb(87, 206, 13);
            border-left: 10px solid rgb(241, 245, 8);
            border-bottom: 10px solid rgb(70, 14, 191);
        }
        .box2 {
            width: 0;
            height: 0;
            /* 三角的大小取决于边框的像素值 像素越大三角越大 */
            border: 10px solid transparent;
            border-top-color: blue;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: red;
        }
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

四.CSS用户界面样式

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>
</head>
<body>
    <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>
</body>
</html>

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>
        input {
            /* 取消文本框的蓝色选中样式 */
            outline: none;
        }
        textarea {
            /* 取消文本域任意扩大大小的功能 */
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <!-- textarea尽量写在一行 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</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>vertical-align属性应用</title>
    <style>
        img {
            width: 300px;
            /* 让图片文字居中对齐 */
            vertical-align: middle;
            /* 
            vertical-align: middle; 中线对齐
            vertical-align: top; 顶线对齐
            vertical-align: bottom; 底线对齐
            vertical-align: base; 基线对齐（默认的）
            */

            /* 
            ps：图片被块级元素包裹后 下面会有一行空白 是图片默认基线导致的
            设置一下vertical-align: bottom/middle/top; 可以解决问题（推荐使用）
            也可以把图片设计为块级元素 因为块级元素 没有vertical-align属性 
            不能设置 所以不会出现图片底部有默认空白问题
            display: block;(不推荐使用)
            */
        }
        div {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/ying.png" alt=""> ying是雷电将军
    </div>
</body>
</html>

六.溢出文字省略号显示

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>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 100px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 
            white-space: normal; 如果文字显示不开自动换行 默认
            white-space: nowrap; 强制一行内显示文本
            */
            white-space: nowrap;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 超出部分用省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        此处省略一万字
    </div>
</body>
</html>

2.多行文本溢出显示省略号

有较大的兼容问题适合于webKit浏览器或者移动端

<!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>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 4;
            /* 设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        在七种元素交汇的大陆——「提瓦特」，
        每个人都可以成为神。 你从世界之外漂流而来，降临大地。
        在这广阔的世界中，你自由旅行、结识同伴、寻找掌控尘世元素的七神，
        直到与分离的血亲重聚，在终点见证一切旅途的沉淀。 维系者正在死去，
        创造者尚未到来。面对无法掌控的境遇，人类总会喟叹自身的无力…… 
        但在人生最陡峭的转折处，若有凡人的渴望达到极致，神明的视线就将投射而下。 
        当失散的双子在尘沙中重聚、世界的谜底在「神之眼」中尽数显现之时—— 旅行者，
        你将去往何方？
    </div>
</body>
</html>

七.常见的布局技巧

1. 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 {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid yellow;
            margin-left: -1px;
        }
        /* ul li:hover {
            相对定位会压住其他标准流的盒子 
            如果有定位就加 z-index
            position: relative;
            border: 1px solid red;
        } */
        ul li:hover {
            /* 
            如果有定位（position: relative;）就加 z-index
            */
            z-index: 1;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 600px;
            height: 300px;
            background-color: rgba(246, 201, 201, 0.819);
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            /* 浮动本身就是可以被文字环绕的 加个浮动解决问题 */
            float: left;
            width: 300px;
            height: 300px;
            margin-right: 15px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/ying.png" alt="">
        </div>
        <p>在七种元素交汇的大陆——「提瓦特」，
            每个人都可以成为神。 你从世界之外漂流而来，降临大地。
            在这广阔的世界中，你自由旅行、结识同伴、寻找掌控尘世元素的七神，
            直到与分离的血亲重聚，在终点见证一切旅途的沉淀。 维系者正在死去，
            创造者尚未到来。面对无法掌控的境遇，人类总会喟叹自身的无力…… 
        </p>
    </div>
</body>
</html>

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>
        * {
            padding: 0;
            margin: 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;
        }
        .box .prev {
            width: 85px;
        }
        .box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        .box input {
            height: 35px;
            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">1</a>
        <a href="#">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>

4. 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>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;
            /* 左边和下边的边框宽度设置为0 */
        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosa {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 15px;
        }
        .miaosa 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;
        }
        .yuanjia {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="price">
        <span class="miaosa">
            $140
            <i></i>
        </span>
        <span class="yuanjia">$160</span>
    </div>
</body>
</html>

八.CSS初始化

因为不同浏览器的标签默认值不同为了消除不同浏览器对于HTML文本呈现差异照顾浏览器的兼容性需要对CSS进行初始化

每个网页都得先初始化CSS

* {
    /* 内外边距清0 */
    margin: 0;
    padding: 0
}
/* em 和 i中文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li的原点 */
li {
    list-style: none
}
/* 
border: 0;照顾低版本浏览器 如果图片加了链接会有边框问题
vertical-align: middle 取消图片底侧有空隙
*/
img {
    border: 0;
    vertical-align: middle
}

button {
    /* 当鼠标经过button按钮是变成小手 */
    cursor: pointer
}

a {
    /* 固定链接颜色 取消a链接的下横线 */
    color: #666;
    text-decoration: none
}

a:hover {
    /* a链接经过变成红色 */
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* css3的属性 抗锯齿性 让文字更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /*  "\5B8B\4F53"--宋体 */
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

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

}

a:hover {
/* a链接经过变成红色 */
color: #c81623
}

button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif
}

body {
/* css3的属性抗锯齿性让文字更清晰 /
-webkit-font-smoothing: antialiased;
background-color: #fff;
/ “\5B8B\4F53”–宋体 */
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}

.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}
.clearfix {
*zoom: 1
}