css三角，字体，显示隐藏,精灵图

最新推荐文章于 2024-08-08 14:18:17 发布

cxuyuanLch

最新推荐文章于 2024-08-08 14:18:17 发布

阅读量254

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/cxuyuanLch/article/details/123225907

版权

本文介绍了CSS精灵图技术，它是提高网页加载速度的有效手段，通过合并多个背景图片为一张大图并利用background-position属性定位显示所需部分。此外，文章还涉及到了三角形绘制、鼠标样式、文本溢出处理、显示隐藏元素等CSS技巧，以及字体图标的应用，强调了这些技术在网页设计中的重要性和实用性。

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

<title>精灵图</title>
  <style>
    span{
      display: inline-block;

      
    }
    .l{
      width: 100px;height: 80px;
      /* background-color: aqua; */
      background: url(../image/jinglingtuname.jpg) no-repeat 23px -190px;
    }
    .c{
      width: 100px;height: 80px;
      /* background-color: blue; */
      background: url(../image/jinglingtuname.jpg) no-repeat -170px 14px;
    }
    .h{
      width: 100px;height: 80px;background: url(../image/jinglingtuname.jpg) no-repeat -153px -83px;
    }
  </style>
    
</head>
<body>
  精灵图：网页背景图很多，加载太多比较困难，压力大。<b>为减少服务器接收和发送请求次数，提高页面加载速度，</b>>出现css精灵技术。--合并一张大图就可以啦<br>1 ,主要是背景图片。2，这个大图也称为精灵图，雪碧图。3，移动背景图片位置可以使用background-position。移动x，y坐标，右正下正。f12拉位置就有了<br>下面评出自己的名字、。
  <span class="l">l</span>
  <span class="c">c</span>
  <span class="h">h</span> 


</body>

<title>三角模式</title>
  <style>
    .traingle{
      /* width: 0;height: 0;border: 10px solid pink; */
      width: 0;height: 0;
      border-top: 10px solid pink;
      border-bottom: 10px solid red;
      border-right: 10px solid green;
      border-left: 10px solid yellow;
    }
    .sanjiaoxing{
      width: 0;height: 0;
      border: 100px solid transparent;
      border-top-color: pink;
    }
    .jd{
      position: relative;
      width: 120px;height: 249px;
      background-color: pink;
    }
    .jd span{
      width: 0;height: 0;position: absolute;
      right: -10px;
      line-height: 0;font-size: 0;
      border: 5px solid transparent;
      border-bottom-color: red;
    }
    /* .shubiao1{

    }
    .shubiao2{

}
.shubiao3{

}
.shubiao4{

}
.shubiao5{

} */

  .qu{
      outline: none;
    }
    textarea{
      resize: none;
    }
    img{
      vertical-align: middle;
    }
    .wbyc{
      width: 180px;height: 100px;background-color: palegoldenrod;
      white-space: nowrap;
      /* 默认normal自动换行 */
      overflow: hidden;
      /* 隐藏部分超出 */
      text-overflow: ellipsis;
      /* 超出文本省略号 */
    }
    .duohangwbyc{
width: 100px;height: 100px;background-color: aqua;
overflow: hidden;
margin:100px auto;
text-overflow: ellipsis;
display: -webkit-box;

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;   
}

  </style>
</head>
<body>
    <div class="traingle"></div>
    <div class="sanjiaoxing">三角形</div>
    <div class="jd">jd
      <span></span>
    </div>
    <p>鼠标样式：cursor</p>
    <li style="cursor: default;">默认</li>
    <li style="cursor: pointer;">小手pointer</li>
    <li style="cursor: move;">移动move</li>
    <li style="cursor: text;">文本text</li>
    <li style="cursor: not-allowed;">禁止noallowed</li>
    <p>去掉轮廓线：outline：none</p>
    <input type="text"><input type="text" value="去轮廓" class="qu"><><textarea name="" id="" cols="30" rows="10"></textarea><textarea>防止拖：resize：none</textarea>
    <p>图片和文字居中对齐：vertical-align。对行内元素或者行内块有效</p>
    <img src="../image/backgroundnote.jpg">对齐
    <img src="../image/backgroundnote.jpg">空白缝隙去除：或者转换块级元素display：block
    <div class="wbyc">文本溢出省略号：二十秒得多久诶哦的境地藕粉色杰尔夫iOS俄金融色人觉得so耳朵软苦涩噢ID角色iOS交底书金额达我四级二娃理赔挖掘蝌蚪帕尔可敬的佛爬山的咖啡色欧派的疯狂送</div>
    <div class="duohangwbyc">多行文本溢出lineclamp设置行数2。省略号：二十秒得多久诶哦的境地藕粉色杰尔夫iOS俄金融色人觉得so耳朵软苦涩噢ID角色iOS交底书金额达我四级二娃理赔挖掘蝌蚪帕尔可敬的佛爬山的咖啡色欧派的疯狂送</div>
</body>

  <title>显示隐藏</title>
<style>
   .peppa{
    width: 200px;height: 200px;background-color: pink;
    display: none;
  }
  .george{
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
  }
  .pa{
    width: 200px;height: 200px;background-color: blue;visibility: hidden;
  }
  .mama
  {
    width: 200px;height: 200px;background-color: #f2f;
  }
  .overflow{
    width: 200px;height: 200px;overflow: scroll;
  }
</style>
</head>
<body>
  display：none隐藏对象；block除了转换块级，还可以显示元素。<br>可见性;visibility:visible可见，hidden隐藏.<br>溢出隐藏：overflow：visible:不剪切也不滚动条。auto剪切并且滚动。hidden，不显示超出内容。scroll：显示滚动条。
  <div class="peppa">pq</div>
  <div class="george">qz,佩奇在none后没了，位置不保留。</div>
  <div class="pa">猪爸爸</div>
  <div class="mama">猪妈妈 上面猪爸爸hidden后没有了但是占用位置</div>
  <div class="overflow">此处超出，滚动。度假胜地基督教啊额滴啊上降低阿萨德加暗杀掉监控安居客度搜带接口搜的咳嗽时空数据库佛随机福卡搜房咳嗽的的佛苦涩欧赔付款色斗篷咳嗽帕斯卡打破阿瑟哦【啊额搜我【我去玩aedawecawecx</div>
</body>

显示隐藏小图标：较快渲染，本质是文字，很随意改变颜色，几乎支持所有浏览器，只是对工作的图标技术的提升和优化。可以网页直接下载，再引入。网站：iconmoon或者阿里iconfront。
font目录到根目录下，css映入：在style.css里面@fontface的代码放在style里。把网站里html里的小框复制一下到框框里。如果需要重新导入则进入网站再importicon，导入selection.json文件。
导航框`

<title>字体图标</title>
  <style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?5qwsqc');
  src:  url('fonts/icomoon.eot?5qwsqc#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?5qwsqc') format('truetype'),
    url('fonts/icomoon.woff?5qwsqc') format('woff'),
    url('fonts/icomoon.svg?5qwsqc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
span{
  font-family: 'icomoon';
}
span>a{
  text-decoration: none;
}
  </style>
</head>
<body>
    小图标：较快渲染，本质是文字，很随意改变颜色，几乎支持所有浏览器，只是对工作的图标技术的提升和优化。可以网页直接下载，再引入。网站：iconmoon或者阿里iconfront。<br>font目录到根目录下，css映入：在style.css里面@fontface的代码放在style里。 把网站里html里的小框复制一下到框框里。如果需要重新导入则进入网站再importicon，导入selection.json文件。<br>
    <span><a href="#">导航框</a></span>

cxuyuanLch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css三角，字体，显示隐藏,精灵图

<title>精灵图</title> <style> span{ display: inline-block; } .l{ width: 100px;height: 80px; /* background-color: aqua; */ background: url(../image/jinglingtuname.jpg) no-repeat 23px -190px; }
复制链接

扫一扫