ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-01-21 23:59:15  阅读:127  来源: 互联网

标签:color iconfont height width html url background font css


总结:
    插入图片: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  设置检索对象内文本显示方式  通常是强制一行显示
    normal 默认处理
    nowrap 强制在同一行内显示所有文本,直到文本遇到br或者才能换行
text-overflow 文字溢出
    clip 直接裁剪
    ellipsis 超出部分 省略号代替

  

 <!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: 120px;
                height: 20px;
                border: 1px solid green;
                /*word-break: break-all;*/ /*允许单词拆开显示*/
                word-break: keep-all; /*不允许拆开字符 除非连字符 - Z-index*/
            }
        </style>
    </head>
    <body>
        <div>Day is My Brothday happy me to</div>
    </body>
    </html>

white-space
  

 <!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">
            /*默认的自动换行 nowrap会强制显示在一行*/
            div{
                width: 120px;
                height: 20px;
                border: 1px solid green;
                white-space: nowrap; /*强制一行显示*/
            }
        </style>
    </head>
    <body>
        <div>
            你好,我的名叫叫安娜,我是安迪的好朋友
        </div>
    </body>
    </html>

text-overflow 超出文字
  

  <!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: 120px;
                height: 20px;
                border: 1px solid green;
                white-space: nowrap; /*将文字强制一行*/
                overflow: hidden; /*超出部分隐藏*/
                /*text-overflow: clip;*/ /*直接裁剪*/
                text-overflow: ellipsis; /*超出部分省略号代替*/
            }
        </style>
    </head>
    <body>
        <div>我是安迪,我是安南的好朋友皮特。</div>
    </body>
    </html>

CSS精灵技术 裁剪图片
  

 <!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">
            /*原理就是有一张图片,通过设置backgroiund-position:-100px -200px来截取图片*/
            div:first-child{
                width: 12px;
                height: 20px;
                background: url(images/jd.png) -2px -101px no-repeat; /*图片时网上移动。所以是负值*/
                margin: 100px auto;
            }
            div:nth-child(2){
                width: 218px;
                height: 50px;
                background: url(images/jd.png) no-repeat -2px -324px;
                margin: 0 auto;
            }
            div:nth-child(3){
                width: 19px;
                height: 19px;
                background: url(images/jd.png) -1px -411px no-repeat;
                margin: 0 auto;
            }

            p{
                width: 54px;
                height: 49px;
                background: url(images/jd.png) no-repeat 0 -438px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <p></p>
    </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: 1027px;
                margin: 150px auto;
                height: 117px;
                /*background-color: green;*/
                padding-top: 10px;
            }
            span{
                background: url(images/abcd.jpg) no-repeat;
                float: left;
                margin-right: 5px;
            }
            span:first-child{
                width: 101px;
                height: 117px;
                background-position: -368px -411px;
            }
            span:nth-child(2){
                width: 114px;
                height: 110px;
                background-position: -369px -277px;
            }
            span:nth-child(3){
                width: 144px;
                height: 111px;
                background-position: -104px -277px;
            }
            span:nth-child(4){
                width: 106px;
                height: 115px;
                background-position: 0 -5px;
            }
            span:nth-child(5){
                width: 112px;
                height: 113px;
                background-position: -256px -275px;
            }
            span:nth-child(6){
                width: 98px;
                height: 106px;
                background-position: -362px -8px;
            }
            span:nth-child(7){
                width: 103px;
                height: 106px;
                background-position: -389px -143px;
            }
            span:nth-child(8){
                width: 106px;
                height: 115px;
                background-position: 0 -5px;
            }
            span:nth-child(9){
                width: 103px;
                height: 110px;
                background-position: -239px -8px;
            }
                span:last-child{
                width: 106px;
                height: 109px;
                background-position: -494px -143px;
            }
            span:nth-child(5n){
                margin-right: 0;
            }
            .clearfix{
                clear: both; /*清除浮动*/
                display: none; /*空盒子隐藏起来*/
            }
            .box{
                /*width: 100px;*/
                height: 100px;
                background-color: red;
            }

        </style>
    </head>
    <body>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="clearfix"></div><!-- 添加空盒子 清除浮动 -->
        </div>
        <div class="box"></div>
    </body>

    </html>

王者荣耀导航栏
  

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>王者荣耀</title>
        <style type="text/css">
            /*清除浮动的两中方式
            1 在浮动对象标签后添加空标签 clear:both 清除浮动
            2 在父元素标签内添加 overflow:hidden 出发BFC清除浮动*/
            body{
                background-color: #009;
            }
            nav{
                background-color: #000;
                overflow: hidden; /*出发BFC可以清除浮动*/
                border-radius: 10px;
            }
            a{
                float: left;
                width: 196px;
                height: 53px;
                text-align: center;
                line-height: 53px;
                color: #FFF;
                font-weight: bold;
                text-decoration: none; /*取消下划线*/
                background: url(images/sp.png) no-repeat -389px -303px;
                margin: 1px 5px;
                font-size: 25px;
            }
            a:hover{
                /*text-decoration:underline;*/
                color: white;
                background-position: -170px -300px;
            }
        </style>
    </head>
    <body>
        <nav>
        <a href="#">游戏首页</a>
        <a href="#">英雄介绍</a>
        <a href="#">充值专区</a>
        <a href="#">兑换奖励</a>
        <a href="#">帮助</a>
        <a href="#">客户服务</a>
        </nav>
    </body>
    </html>

icofont 可以在网站上搜索下载
    网站:https://fontello.com/
        https://icomoon.io/app
        https://fontawesome.dashgame.com/#basic
        https://www.iamxk.com/icons8-website
        https://icons8.com/?ref=iamxk
        https://icomoon.io/
inconfont 注意:一定要生成incon fot文件才可以
    

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>https://icomoon.io/</title>
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> -->
    <style type="text/css">
        
        @font-face { /*电脑中没有的字体,需要在这里声明*/
              font-family: 'icomoon';
              src:  url('fonts/icomoon.eot?r2bhug');
              src:  url('fonts/icomoon.eot?r2bhug#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?r2bhug') format('truetype'),
            url('fonts/icomoon.woff?r2bhug') format('woff'),
            url('fonts/icomoon.svg?r2bhug#icomoon') format('svg');
              font-weight: normal;
              font-style: normal;
              font-display: block;
        }
        span{
            font-family: "icomoon"; /*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/
            font-size: 100px;
            color: hotpink;
        }
        div{
            height: 2px;
            background-color: deeppink;
        }
        div::after{ /*伪元素选择器*/
            font-family: "icomoon";/*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/
            content: "\e9e0";
            font-size: 100px;
            color: yellow;
        }
    </style>

    </head>
    <body>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div></div>
    </body>
    </html>

阿里巴巴iconfont图标文字
  

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>https://www.iconfont.cn/</title>
        <!-- 需要在此网站上https://www.iconfont.cn/下载iconfont包 -->
        <style type="text/css">
            @font-face { /*拷贝项目下面生成的 @font-face*/
              font-family: 'iconfont';
              src:
              url('阿里巴巴/alibaba/iconfont.woff2?t=1642771478703') format('woff2'),
            url('阿里巴巴/alibaba/iconfont.woff?t=1642771478703') format('woff'),
            url('阿里巴巴/alibaba/iconfont.ttf?t=1642771478703') format('truetype');
        }
        .iconfont { /*定义使用 iconfont 的样式*/
              font-family: "iconfont" !important;
              font-size: 160px;
              font-style: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
        }
        body{
            background-color: AAA;
        }
        div{
            height: 10px;
            background-color: red;
        }
        .clearfix{
                clear: both; /*清除浮动*/
                /*display: none;*/ /*空盒子隐藏起来*/
            }
        .box{
            border: 1px dashed green;
            width: 180px;
            height: 220px;
            background-color: #80acd8;
            /*padding: 5px;*/
        }
        .box span{
            display: block; /*需要转换为块级元素*/
            margin: 10px;
            height: 160px;
            width: 160px;
            background-color: #d7f7a7;
        }
        h4{
            text-align: center; /*文字居中*/
            color: #FFF;
        }
        </style>
    </head>
    <body>
        <span class="iconfont">&#xe638;</span>
        <span class="iconfont">&#xe63a;</span>
        <span class="iconfont">&#xe63b;</span>
        <span class="iconfont">&#xe63c;</span>
        <span class="iconfont">&#xe648;</span>
        <div></div>
        <div class="box">
            <span class="iconfont">&#xe650;</span>
                <h4>雾炮车</h4>
        </div>
    </body>
    </html>

css实现图片左右拉开适配内容文字[推拉门效果]
    

<!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">
            *{
                margin: 0;
                padding: 0;
            }
            a{ /*实现推拉门效果是不可以给宽值的,要拉伸图片实现宽度自由*/
                margin: 100px;
                display: inline-block; /*转换为行块内元素*/
                height: 33px;
                background: url(images/ao.png) no-repeat;
                padding-left: 15px; /*左边撑开15px*/
                color: #FFF;
                text-decoration: none; /*取消下划线*/
                line-height: 33px;
            }
            a span{
                display: inline-block;
                height: 33px;
                background: url(images/ao.png) no-repeat right; /*图片右边*/
                padding-right: 15px; /*右边撑开15px*/
            }
        </style>
    </head>
    <body>
        <a href="#"><span>首页</span></a>
        <a href="#"><span>中国人民中央银行行长</span></a>
        <a href="#"><span>二维码支付</span></a>
    </body>
    </html>

微信导航栏
  

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>微信</title>
        <style type="text/css">
            /*公共部分模块*/
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: url(images/wx.jpg) repeat-x;/* body背景图片 沿x轴平铺*/
            }
            a{ /*a标签*/
                text-decoration: none; /*取消下划线*/
            }
            ul{
                list-style: none; /*取消样式*/
            }
            nav{
                height: 75px;
            }
            li{
                float: left; /*浮动*/
                margin: 0 10px; /*上下 左右*/
                padding-top: 21px;
            }
            li a{
                display: block;
                background: url(images/to.png) no-repeat;
                color: #FFF;
                font-size: 14px;
                line-height: 33px;
                padding-left: 15px; /*左偏移15px*/
            }
            li a span{
                display: block;
                line-height: 33px;
                background: url(images/to.png) no-repeat right center;
                padding-right: 15px; /*右偏移15px*/
            }
            /*鼠标经过时更换背景图片*/
            li a:hover{
                background: url(images/ao.png) no-repeat;
            }
            li a span:hover{
                background: url(images/ao.png) no-repeat right center;
                padding-right: 15px; /*右偏移15px*/
            }

        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#"><span>首页</span></a></li>
                <li><a href="#"><span>帮助与反馈</span></a></li>
                <li><a href="#"><span>公众号平台</span></a></li>
                <li><a href="#"><span>开发者文档</span></a></li>
                <li><a href="#"><span>招商投资入口</span></a></li>
            </ul>
        </nav>
    </body>
    </html>

伪元素选择器after和before
  

 <!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">
            /*.box 类选择器  :hover伪元素选择器  ::after伪元素选择器[该元素不存在]*/
            div::before{
                content: "欢庆探家";
                background-color: deeppink;
                border: 1px solid green;
                display: block;
                height: 100px;
                width: 100px;
            }
            /*区别
            类选择器  伪类选择器 就是选取对象
            伪元素选择器 本质上就是一个元素[标签  盒子]是行内元素 没有宽高*/
            div::after{
                content: "小蝴蝶";
                display: block;
                height: 200px;
                width: 200px;
                border: 1px solid orange;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div>是</div>
        <p></p>
        <div></div>
    </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: 296px;
                height: 180px;
                margin: 20px auto;
                position: relative; /*相对定位 子绝父相*/
            }
            /*鼠标经过的时候插入一个伪元素*/
            div:hover::after{
                content: "";
                width: 100%;
                height: 100%;
                border: 10px solid rgba(255, 0, 0,.3);
                position: absolute; /*绝对定位*/
                display: block;
                top: 0;
                left: 0;
                box-sizing: border-box; /*padding 和margin都算入width中*/
            }
        </style>
    </head>
    <body>
        <div><img src="images/mi.jpg" ></div>
        <div><img src="images/mi.jpg" ></div>
        <div><img src="images/mi.jpg" ></div>
        <div><img src="images/mi.jpg" ></div>
    </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: 100px;
                background-color: deeppink;
                /*transition 要过渡的属性 花费的时间 运动的曲线 何时开始*/
                /*transition: width 0.6s ease 0s , height 0.3s ease-in 1s;*/
                /*过渡需要写在div里,不是hover里 所有属性都在变化用all 后边可以省略*/
                /*transition: all 0.6s;*/
                transition: width 1s,height 3s; /*默认是ease先块后慢*/

            }
            div:hover{ /*鼠标经过时宽度变为800px*/
                width: 600px;
                height: 600px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

标签:color,iconfont,height,width,html,url,background,font,css
来源: https://blog.csdn.net/qq_64353584/article/details/122631531

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有