元素的运用与优化–HTML技能提升秘籍；
（1）元素显隐控制 display：block 转换为块元素；display:none 隐藏元素（保留原位）；visibility:visible、hidden（隐藏）复习 overflow 属性的使用方法：overflow隐蔽超出的内容，scroll 强制显示滚动条样式；

1. 解决父子关系带来的垂直嵌套合并问题。
2. 清除浮动后内容的超出部分可显隐处理。

精灵技术核心目的：有效减少服务器请求次数，提高页面加载速度实现原理：请求一张图片展示不同位置的小图。案例使用：background-image 响应式背景图片，background-repeat 平铺设置，background-position 背景定位。
注意点：1. 主要针对背景图片，插入的img不需要这个技术。需要测量每个小背景图片的大小和位置。2. 给盒子指定小的背景图片时，背景定位基本为负值。

字体图标的优势阐述：良好的浏览器兼容性、高灵活性；体积小，加载快，节省带宽。注意使用技巧：1. 字体图标不是图片而是字体，使用时需注意路径问题。2. 复制font文件夹到项目根目录，在html中添加结构，声明字体样式，指定盒子字体即可追加字体图标。

三角形实现原理利用盒子边框，设置宽高为零、保留所需的颜色和透明度。兼容性处理：line-height 和 font-size。案例应用：

<div class="demo">
    <i></i>
</div>

用户界面样式定制(cursor-pointer, cursor-move, cursor-text, cursor-not-allowed)。
记住！cursor-pointer–鼠标手型，cursor-move–鼠标移动形状，cursor-not-allowed–禁止操作。

轮廓线 otline 使用方法：otline:none 隐藏轮廓线。垂直对齐方式 vertical-align 设置，若让单行文本垂直居中，使用 line-height。注意：仅对行内元素和行内块元素起作用，用于图片与文本的垂直对齐及去除底部空白。

负值 margin 应用（练习！）

• relative 定位占位置，absolute 不占位置，float 浮动不占位置。
• 文字环绕效果可通过浮动实现。行内块可设置为单独宽度高度并显示为水平居中。
  京东三角形巧妙运用：

div {
  width:;
  height:;
  border-color:transparent transparent red transparent;
  border-style:solid;
  border-width:1px 5px;
}

单行文本省略号展示方法：强制一行显示、隐藏超出部分、使用省略号。多行文本省略号处理方式：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:;
-webkit-box-orient:vertical;

深入掌握网页设计的HTML代码技巧，使页面效果更佳，提升用户体验。