腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

王金龙的专栏

想获取更多文章与资源，请关注我的技术公众号：Dali王的技术博客

专栏作者

37

文章

68523

阅读量

16

订阅数

前端实战Demo：一张图片搞定一页布局

整个页面只有一个或者两个不多的需要操作的组件，比如按钮、输入框之类的，图片中的其他元素都只是作为静态展示的设计而存在，那么专门把这个几个元素抠出来再写进页面中去显然就有点复杂化了，并且可能还会出现一些元素与元素之间相对位置重叠或者间距过大等问题。那么就可以用一个空的div标签来框选出上述图片中的输入和按钮区域，然后在这个空的div中添加input或者button元素，当然要保持样式和设计图中的一致。那么上图中的例子，我给出的页面的主体代码就是这样： Html代码： <div class="container"> <div class="btn"> <input id="tel" type="text" placeholder=""> </div> </div> Css代码： .container{ position: absolute; background:url("imgs/1.jpg"); background-size: 100% 100%; background-repeat: no-repeat; } .btn{ position: absolute; margin-top: 40%; margin-left: 20%; 　　 width: 55%; 　　 height: 20%; display: none; } 　　因为这里是用一个空的div来框选图片中的input或者按钮区域，所以为了保持原有图片的样式，就需要把实际上的input或者button的区域的display设置为none。当然要使用Javascript设置，当input和按钮区域获得焦点时，显示input和button了。可以直接写内联的input的onfocus属性： onfocus="this.style.display='block'" 　　当然上面两幅图都是设计相对比较简单的图片，倘若是复杂一些的图片呢？

2019-02-25

7720

CSS：CSS样式表及选择器优先级总结

　　我们在写网页的时候经常会遇到同一个HTML文件，使用了外部样式、内部样式以及内联样式，那么如果发生冲突时浏览器是怎么抉择的呢？

2019-02-25

9810

jQuery：详解jQuery中的事件（一）

jquery javascript html

之前用过一些jQuery的动画和特效，但是用到的部分也不超过10%的样子，感觉好浪费啊——当然浪费的不是jQuery，而是Web资源。后来就想深入研究下jQuery的内部机理，读过两遍jQuery源代码，但是自觉还差的好远，跟好多大神（比如阮一峰）的理解还是有很大差距。现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery。

2019-02-25

1.6K0

svg.js教程及使用手册详解（一）

svg javascript html

　　　做毕设的时候，因为要使用到画图和自定义动画，所以接触到了SVG。网上关于SVG和Canvas的对比很多，具体的辨析这里就不赘言。网上关于SVG的所谓教程基本上都是SVG本身，但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程，做这件事的，本文应该是第一篇，也是给那些需要动态的使用SVG的兄弟们一点帮助。

2019-02-25

7.6K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态