腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
王金龙的专栏
想获取更多文章与资源,请关注我的技术公众号:Dali王的技术博客
专栏作者
举报
37
文章
68519
阅读量
16
订阅数
订阅专栏
申请加入专栏
全部文章(37)
java(16)
编程算法(8)
css(5)
其他(4)
javascript(4)
html(4)
kafka(4)
jquery(3)
api(3)
http(3)
jvm(3)
数据结构(3)
python(2)
数据库(2)
linux(2)
unix(2)
文件存储(2)
容器(2)
存储(2)
缓存(2)
jdk(2)
windows(2)
ios(1)
iphone(1)
xcode(1)
c++(1)
php(1)
json(1)
ecmascript(1)
云数据库 SQL Server(1)
oracle(1)
云数据库 Redis(1)
sql(1)
git(1)
github(1)
消息队列 CMQ 版(1)
svg(1)
开源(1)
分布式(1)
ssh(1)
npm(1)
安全(1)
数据处理(1)
系统架构(1)
搜索文章
搜索
搜索
关闭
前端实战Demo:一张图片搞定一页布局
html
css
整个页面只有一个或者两个不多的需要操作的组件,比如按钮、输入框之类的,图片中的其他元素都只是作为静态展示的设计而存在,那么专门把这个几个元素抠出来再写进页面中去显然就有点复杂化了,并且可能还会出现一些元素与元素之间相对位置重叠或者间距过大等问题。那么就可以用一个空的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
772
0
CSS:CSS样式表及选择器优先级总结
html
css
http
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式、内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢?
王金龙
2019-02-25
981
0
CSS:CSS使用Tips
css
Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证。
王金龙
2019-02-25
1.1K
0
CSS:使用CSS媒体查询创建响应式布局
css
iphone
ios
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。
王金龙
2019-02-25
2.9K
0
IE6浏览器常见的bug及其修复方法
css
IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px; // IE6下内容高度超过会自动扩展高度 } ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item; 未定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:1)子元
王金龙
2018-09-05
593
0
没有更多了
社区活动
腾讯技术创作狂欢月
“码”上创作 21 天,分 10000 元奖品池!
立即发文
Python精品学习库
代码在线跑,知识轻松学
立即查看
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
立即体验
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
立即查看
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档