<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑动门原理</title> <style type="text/css"> /*1 a 是 设置左侧背景 (左门)*/ a { /*4 因为是滑动门,左右推拉， 跟 ...
分类：
其他好文 时间：
2020-05-19 11:00:09
阅读次数：
95
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-st ...
分类：
Web程序 时间：
2020-03-24 15:59:22
阅读次数：
105
需求： 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，其中最大的问题是字数不同，如何做？ 解决： 用一个a包含span来制作，字数放在span里面。 此时span里面字数多一点，也可以撑开盒子，实现这个效果。（用到了css spirit 精灵图和滑 ...
分类：
微信 时间：
2019-11-07 11:25:53
阅读次数：
108
.all{ width: 100px; height: 60px; background: red url("images/border/nav-center.jpg") repeat-x; //图片为宽度为1px margin: 200px auto; ... ...
分类：
其他好文 时间：
2019-06-28 00:51:22
阅读次数：
86
前端之HTML，CSS（十） 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式，实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时，每一个图片显示都是浏览器向服务器发送一次请求的结果，精灵技术是把多个小图片拼接为一个大图，有效减少了浏览器请求 ...
分类：
Web程序 时间：
2019-03-20 01:14:06
阅读次数：
215
一、图片整合 （一）概念：将多张图整合到一张背景图中，使用background-position 来实现图片的定位的技术叫图片整合技术，也称雪碧图，精灵图，滑动门技术 优点：1）将多张图整合到一张图中，减少了对服务器的请求，加快了图片的加载速度，从而达到了网站性能的优化； 2）减小了图片的体积（当页 ...
分类：
其他好文 时间：
2019-01-21 11:04:37
阅读次数：
175
* { padding: 0; margin: 0; } #subject { position: relative; width: 80%; height: 165px; background: skyblue; ... ...
分类：
Web程序 时间：
2018-08-06 11:46:01
阅读次数：
465
礼悟： 公恒学思合行悟，尊师重道存感恩。叶见寻根三返一，江河湖海同一体。 虚怀若谷良心主，愿行无悔给最苦。读书锻炼养身心，诚劝且行且珍惜。 代码 效果 CSS3优秀，值得学习。学习资源： www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。如果您有公开的资源，可 ...
分类：
Web程序 时间：
2018-02-11 18:02:17
阅读次数：
202
一.滑动门制作导航栏 代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,nav{ margin: 0; padding: 0; } .n ...
分类：
其他好文 时间：
2017-12-20 03:59:22
阅读次数：
119
