html网页鼠标样式、css精灵、iconfont、过渡动画笔记

红豌豆

于 2022-01-21 23:52:32 发布

阅读量754

点赞数

分类专栏：前端文章标签： css html 动画

本文链接：https://blog.csdn.net/qq_64353584/article/details/122631531

版权

这篇博客总结了HTML和CSS的相关知识点，包括插入图片、背景图片控制、鼠标样式设置、文本处理、CSS精灵技术、iconfont的使用以及过渡动画的应用。详细介绍了如何实现图片与文字居中、防止文本域拖拽、自定义鼠标样式、文字自动换行策略以及CSS精灵技术制作导航栏。同时，还提到了iconfont图标库的选择和应用，以及如何利用伪元素选择器和过渡动画实现鼠标经过时的图像边框效果。

摘要由CSDN通过智能技术生成

总结：
插入图片：margin padding float postion width height
背景图片 background控制 background-size 大小 background-position 位置

鼠标样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ui>
            <li style="cursor: default;">小白[默认]</li>
            <li style="cursor: pointer;">小手</li>
            <li style="cursor: text;">文本</li>
            <li style="cursor: move;">移动</li>
        </ui>
    </body>
    </html>

outline轮廓线

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ui>
            <li style="cursor: default;">小白[默认]</li>
            <li style="cursor: pointer;">小手</li>
            <li style="cursor: text;">文本</li>
            <li style="cursor: move;">移动</li>
        </ui>
    </body>
    </html>

resize 防止文本域拖拽

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            textarea{
                resize: none; /*防止文本域拖拽变形*/
                outline: none; /*取消轮廓线*/
                width: 400px;
                height: 120px;
                border: 12px dashed green;
                background-color: #6e6e6e;
                color: hotpink;
            }
            input{
                display: block;
                height: 120px;
                width:400px;
                outline: 12px double hotpink;
                border: 5px solid green;
                background-color: #AAA;
                margin: 12px;
            }
        </style>
    </head>
    <body>
        <textarea cols="30" rows="70">正文内容</textarea>
        <input  placeholder="今天有什么新鲜的事？说说吧">
    </body>
    </html>

图片与文字居中

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin-left: auto;
                margin-right: auto; /*左右自动auto 盒子就可以水平居中对齐*/
                text-align: center;
            }
            /*vertical-align:middle; 对于块级元素无效*/
            img{ /*行内块元素*/
                /*vertical-align: baseline;*/  /*默认对准基线*/
                /*vertical-align: middle;*/ /*文字与图片中线对齐*/
                /*vertical-align: top;*/ /*文字与图片的顶部对齐*/
                vertical-align: bottom; /*文字与图片的底线对齐*/
            }
            textarea{
                height: 60px;
                width: 900px;
                vertical-align: middle;
                resize: none; /*禁止文本域拖拽*/
            }
        </style>
    </head>
    <body>
        <div>文字居中</div><hr/>
        <img src="images/2.jpg">我不尴尬，尴尬的就是别人<hr>
        用户留言<textarea></textarea>
    </body>
    </html>

解决块级元素底部间隙

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 222px;
                height: 220px;
                background: green;
            }
        /*    解决方案
            1转换为块级元素   
            2 vertical-align:top */
            img{
                /*display: block;*/
                /*vertical-align: baseline;*/
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="images/3.jpg">
        </div>
    </body>
    </html>

word-break 自动换行主要处理英文单词
   normal 默认
   break-all 允许单词内换行
   keep-all 只能在半角空格或者连字符处换行 z-index
white-space 设置检索对象内文本显示方式通常是强制一行显示

最低0.47元/天解锁文章

红豌豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html网页鼠标样式、css精灵、iconfont、过渡动画笔记

总结：插入图片：margin padding float postion width height 背景图片 background控制 background-size 大小 background-position 位置鼠标样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam...
复制链接

扫一扫