Day18 静态页面雪碧图表格 webp_网页table插入webp-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70432149/article/details/126495259

本文介绍了如何在HTML静态页面中使用CSS和RESER.CSS实现雪碧图技术，通过这种方式优化前端资源加载，提升网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

<div class="firstright fr">
        <!-- 用户 -->
        <div class="user">
          <a href="#" class="avatar"><img src="../images/user.jpg" alt=""></a>
          <p class="username">hi，你好</p>
          <p class="members">
            <a href="#" class="gold">领淘金币抵钱</a>
            <a href="#" class="club">会员俱乐部</a>
          </p>
          <div class="btn">
            <button class="login">登录</button>
            <button class="register">注册</button>
            <button class="shop">开店</button>
          </div>
        </div>
        <!-- 举报 -->
        <a href="#" class="tipoff">
          <span>网上有害信息举报专区</span><i class="iconfont">&#xe644;</i>
        </a>
        <!-- 公告区  选项卡 -->
        <div class="notice">
          <ul class="title">
            <li class="active"><a href="#">公告</a></li>
            <li><a href="#">规则</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">安全</a></li>
            <li><a href="#">公益</a></li>
          </ul>
          <ul class="content clearfix">
            <li class="item1"><a href="#">天猫618进入热身,84个品牌在天猫共获粉丝3.4亿</a></li>
            <li><a href="#">天猫618五折卖车</a></li>
            <li><a href="#">天猫618直播间观看指南</a></li>
          </ul>
        </div>
        <!-- 图标区域 -->
        <table class="icon">
          <!-- 表格相关知识：
               Dreamweaver编辑器用来做网站，针对网页设计，使用表格布局
               表格优势：
                       1.边框
                       2.内容垂直居中
                       3.格子宽度自动计算
                    表格可用，但不可大面积布局使用
          -->
          <tr>
            <td class="item1">
              <a href="#">
                <span></span>
                <i>充话费</i>
              </a>
            </td>
            <td class="item2">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item3">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item4">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="item5">
              <a href="#">
                <span></span>
                <i>充话费</i>
              </a>
            </td>
            <td class="item6">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item7">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item8">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="item9">
              <a href="#">
                <span></span>
                <i>充话费</i>
              </a>
            </td>
            <td class="item10">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item11">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
            <td class="item12">
              <a href="#">
                <span></span>
                <i>话费</i>
              </a>
            </td>
          </tr>
        </table>
        <!-- app -->
        <div class="app">
          <div class="title clearfix">
            <h3 class="fl">阿里APP</h3>
            <a href="#" class="fr">更多></a>
          </div>
          <ul class="appicon">
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/1.jpg" alt=""></a></li> 
          <!-- webp是谷歌公司开发，比其他格式图片小，清晰度不变，但兼容性差
           通过js判断浏览器是否支持  不支持可以转成jpg或png-->
          </ul>
        </div>
      </div>
    </div>
    <!--有好货 -->
    <div></div>
    <!-- 右侧固定定位导航 -->
    <div></div>
  </body>
</html>

CSS:

/* 首屏右边内容 */
.firstright {
  width: 290px;
  /* height: 621px; */
  margin-top: 10px;
}
/* 用户 */
.firstright .user {
  height: 140px;
  padding-top: 5px;
}
.firstright .user .avatar {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
.firstright .user .avatar img {
  width: 50px;
  height: 50px;
}
.firstright .user .username {
  text-align: center;
  line-height: 16px;
}
.firstright .user .members {
  text-align: center;
  font-size: 0;
  /* font-size设置为0时的用途：
       （行内级元素之间，换行会被解释成空格）
        1、解决表格之间的空隙
        2、解决图片之间的空隙 
  */
}
.firstright .user .members a {
  display: inline-block;
  font-size: 12px;
  border-radius: 9px;
  background: #ffe4dc;
  padding: 0 10px 0 20px;
  margin: 0 2px;
}
/* 雪碧图（css精灵）：css图像合并技术，将小图标和背景图片合并为一张图片
  优点：大小减小
        减少http的请求
  找到指定图标方法：background-position

  给的值的意思：x轴和y轴，即水平和竖直方向，一般元素的高应与小图标高度一致
       
       .firstright .user .members a.gold {
         background: #ffe4dc url(../images/图标.png) 0 -572px no-repeat;
         }


.       firstright .user .members a.club {
         background: #ffe4dc url(../images/图标.png) 0 -528px no-repeat;
         }
*/
.firstright .user .btn {
  text-align: center;
}
.firstright .user .btn button {
  width: 75px;
  height: 25px;
  line-height: 25px;
  margin: 12px 2px 0 2px;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  border: none;
}
.firstright .user .btn button.login {
  width: 92px;
}
/* 举报 */
.firstright .tipoff {
  display: block;
  line-height: 26px;
  height: 26px;
  color: #f40;
  background: #ffe4dc;
  text-align: center;
}
.firstright .tipoff i {
  font-size: 12px;
  vertical-align: 1px;
  position: relative;
  left: 30px;
}
.firstright .notice {
  height: 108px;
  background-color: #fff;
}
.firstright .notice .title {
  text-align: center;
  font-size: 0;
  padding-top: 10px;
}
.firstright .notice .title li {
  display: inline-block;
  font-size: 12px;
  line-height: 20px
  padding:0 4px;
  margin:0 10px;
}
.firstright .notice .title li.active{
  font-weight: bold;
  border-bottom: 2px solid #f40;
}
.firstright .notice .title li a:hover{
  color:#f40;
}
.firstright .notice .content{
  margin:0 12px;
  padding-top: 10px;
}
.firstright .notice .content li{
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  float: left;
  width: 130px;

}
.firstright .notice .content li a:hover{
  color: #ff5000;
}
.firstright .notice .content li.item1{
  width:100%;
  color: #ff5000;
}
.firstright .notice .content li.item1 a{
  color: #ff5000;
}
/* 图标区域 */
.firstright .icon{
  width:100%;
  height: 231px;
  background-color: #fff;
  table-layout: fixed;
  /*  定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度
       */
}
.firstright .icon td{
  border: 1px solid #f4f4f4;
  text-align: center;
}
.firstright .icon td span{
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: url(../images/user.jpg);
}
.firstright .icon td i{
  line-height: 34px;
  color: #333;
}
.firstright .app{
  height: 111px;
  background: #fff;
}
.firstright .app .title{
  height: 30px;
  line-height: 30px;
}
.firstright .app h3{
  font-size: 14px;
  padding-left: 14px;
}
.firstright .app a{
  margin-right: 10px;
}
.firstright .app a:hover{
  color: #f40;
}
.firstright .app .appicon{
  text-align: center;
  font-size: 0;
}
.firstright .app .appicon li{
  width:32px;
  height: 32px;
  display: inline-block;
  margin: 0px 10px 8px 10px;
}
.firstright .app .appicon li img{
  width:32px;
  height: 32px;
}

RESER.CSS:

table {
  border-collapse: collapse;
  /* 边框模式：合并模式 
     特点：两个单元格之间显示一像素的边框*/
}
th,
td {
  /* th表示表格头，其余的为td */
  padding: 0;
}

Day18 静态页面 雪碧图 表格 webp

Day18 静态页面雪碧图表格 webp