精灵图、字体图标、CSS三角、用户界面、溢出文字省略号、常见布局技巧

半夜删你代码·

于 2021-08-10 11:22:59 发布

阅读量136

点赞数 1

本文链接：https://blog.csdn.net/m0_60376759/article/details/119547325

版权

使用精灵图：

1.精灵技术主要针对于小背景图片使用。就是把多个小背景图片整合到一张大图片中去。

2.这个大图片也称为sprites精灵图或者雪碧图。

3.移动背景图片位置，此时可以使用background-position。

4.一般情况下精灵图都是负值。（网页中的坐标，x轴右边走是正值，左边走是负值，y轴同理）

字体图标：结构和样式比较简单的小图标用字体图标，可以直接网上下载。

1.字体图标下载：icomoom字体库 http://icomoon.io

iconfont字体库 http://www.iconfont.cn/

2.把下载包里面的fonts文件夹放在根目录下

在css样式中全局声明字体

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

如果工作中，原来的字体图标不够用了，需要添加新的字体图标到原来的文字中，把压缩包里面的 selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来文件

CSS三角：

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

用户界面：

鼠标样式cursor：li{cursor: pointer;}

default：小白默认、pointer：小手、move：移动、text：文本、not-allowed：禁止

表单轮廓线outline：给表单添加outline: 0;或者outline：none;样式之后，就可以去掉默认蓝色边框

input{outline: none}

防止拖拽文本域resize：textarea(resize: none)

vertical-align：设置元素垂直对齐方式，只针对行内元素或者行内块元素有效

vertical-align：baseline：默认。元素放置在父元素的基线上

top：把元素的顶端与行中最高元素的顶端对齐

middle：把此元素防止在父元素的中部

bottom：把元素的顶端与行中最低的元素的顶端对齐

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。解决办法有两种：

1.给图片添加 vertical-align：middle | top | bottom

2. 把图片转换为块级元素 display：block；

溢出的文字省略号显示：

1.单行文本溢出显示省略号——必须满足三个条件

（1）先强制一行内显示文本：white-space：nowrap；（默认normal自动换行）

（2）超出部分隐藏：overflow：hidden；

（3）文字用省略号替代超出的部分：text-overflow：ellipsis；

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

（1）overflow：hidden；

（2）text-overflow：ellipsis；

（3）弹性伸缩盒子模型显示：display：-webKit-box；

（4）限制在一个块元素显示的文本的行数：-webKit-line-clamp：2；

（5）设置或检索伸缩盒对象的子元素的排列方式：-webKit-box-orient：vertical；

常见布局技巧：

1.margin负值的运用：

让每个盒子margi往左移动-1px 正好压住邻盒子边框。

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

ul li:hover{position: relative; border :1px solid blue;}

ul li:hover{z-index: 1; border :1px solid blue;}

2.文字围绕浮动元素：浮动元素不会压住文字，设置文字元素的盒子与文字大小一致即可。

3.行内块：行内块元素可设置宽高、且中间有空隙不需要调节，对父盒子添加text-align，所有元素都可居中（页面跳转）

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

4.CSS三角

（1）只保留右边边框有颜色

（2）样式都是solid

（3）上边框宽度要大，右边框宽度稍小，其余边框为0

width: 0;
height: 0;
border-color: transparent blue transparent transparent;/*上右下左*/
border-style: solid;
border-width: 22px 8px 0 0;/*上右下左*/

<style>
        .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;
            font-weight: 700;
            margin-right: 8px;

        }

        .miaosha 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="miaosha">
            ¥1650
            <i></i>
        </span>
        <span class="origin">¥5650</span>
    </div>
</body>

</html>

CSS初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    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
}