css学习3：精灵图、字体图标、三角、用户界面样式、vertical-align

}

.i { width: 64px; height: 116px; background-position: -324px -136px; }

.a { width: 113px; height: 126px; }

.n { width: 121px; height: 120px; background-position: -249px -270px; }

##### 2. 字体图标


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7834378cafa44859ab37013ceb4d0cf4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=vyH0luHL16zHMxBQysOrDHxuo8I%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3066d5b283844940933e2feb22109ebe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=9z%2B7qqt15%2BrvvW5FftiWhh%2B898U%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a3bd0a7165444d818655652748b032b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=zqe7Nx%2FfAc%2FfZ%2FfGzvOEUMtgzZk%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6c9aab02132b42049a3cac6e8786f479~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=i6wX643uZN2mh1i7VjxJ1ZXh548%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8500f422df224bc1ade428e8060f534c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=REjhN9kmzqyHTK8AFCW7k8AnNR8%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4079d4cda6b64fedb9c304dec050afed~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=WtgNRoRbm7QWRhAU%2B1zjEWEt1Cg%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5259853bb23e41b8aee9523fc8fe7573~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=BT8PXB2FBZcfns%2FJ8jhSt6sa7XI%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/933b3ce83d0c4ffcb4d58be8857f063b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=5hQDHAIO68sPfXL4KvJZeCZaCkM%3D)


##### 3. CSS三角


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cfa4103d1cc643f9a0848b78d8a1bdff~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=rr55d30HBxkyqWHwrTFHdMS30EI%3D)  
 练习：  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0615ee7193ef43bb8e4a7a5f69e9fd10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=OP9TPOiGLemDjqo8EqqZwIwLazQ%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/271e8190b3284438a4fcf8f27fa77f7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=CE35DZDXAhLNQoPRm0FC7KwKybc%3D)


##### 4. CSS用户界面样式


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b8865efc9f194a2fa00ad94673540e86~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=pMcatrxFxMCC46ANTkQVgXay78c%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/76418ceee7cb41ccb4c6fc1c88bcd9ef~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=7OHytetqhQvPvH5GYsBCjF6J2WU%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/aa51fbd7d7144534820b5f457aba109c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=B8H9JJYVTJW3TBTTTXaS3vqQQ24%3D)


##### 5. vertical-align属性应用


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e9fbee9d28b0450aa55794845adf298a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=VerbuOE4TovVaI8LMErlVGKDZw0%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/82faf4e98d9e4e81949684441d969065~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=fSXWysL2nwovXqznxtzmQtm5eqM%3D)


##### 6. 溢出的文字省略号显示


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/256b67e8166342bb8f747de062d0a6f9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=djeUxkRFVBIAsFOeVOeRboaOeHo%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e4f94f4fef6f43618777463eeb986b9e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=UCYdOfdpTaTeAwtP9H4ixo%2FZA3g%3D)


##### 7. 常见的布局技巧


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/674c1c888c6e4d97abe7e5d6b7e1ac01~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=4l6TmRAKy2kJLVasTwrg4A1CcHQ%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/367b4bfc088941f3b8fc0451ee595637~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=zjmiMmtoVMl0XmlVqjoGXizEsOU%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1db2e10aba614ea2b2aae931f759023a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=%2FebBFf0yLPNR1TNZmqCLMkgdweo%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/17f4e881009044a0ae7dd74afb27f060~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=EbWCOU0ert%2BUSATmvbOXLI62AAI%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e9bf5f3f9e8343fcba8bffd7ef224aa8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=8Dd4Ge1YwrHQO9reh0QgOAOhdhc%3D)  
 练习：  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7d59e3a9a79f4691b4efd4274f41f1fa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=yrhROU67VDn8yZZV58%2FEf%2FRTAuM%3D)

Document \* { margin: 0; padding: 0; } .box { text-align: center; }

.box a { display: inline-block; width: 36px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; text-align: center; line-height: 36px; text-decoration: none; color: #333; font-size: 14px; }

.box .prev, .box .next { width: 85px; }

.box .current, .box .elp { background-color: #fff; border: none; }

.box input { width: 45px; height: 36px; border: 1px solid #ccc; outline: none; }

.box button { width: 60px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; }

![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b9025de984764399804af911092bd0e1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=0Pp1zKrJlpnTdZBML3UYlte13lc%3D)  
 练习：  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7a38cdcacd194e3f9ea1e30e551052b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1773221472&x-signature=WgpJys9hIZtMSzCOurbB4vPg4RY%3D)

Document .price { width: 160px; height: 24px; border: 1px solid red; margin: 0 auto; line-height: 24px; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color: red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; }

.miaosha i { position: absolute; top: 0; right: 0; width: 0; height: 0; border-color: transparent #fff transparent transparent; border-style: solid; border-width: 24px 10px 0 0; }

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：docs.qq.com/doc/DSmRnRG…