61,112
社区成员
发帖
与我相关
我的任务
分享希望各位兄弟可以解决学徒的难题，实在没招了。
用背景图的截取功能，实现在谷歌搜索框中间显示那七个原点，我的有个效果图，但是只能在一边，求各位大哥帮我看一下。
...全文
请发表友善的回复…
发表回复
JPF1024 2012-11-08
- 打赏
- 举报
调整：
margin和padding.
Tony-Lu 2012-11-08
- 打赏
- 举报
margin：auto 可以实现居中效果。
qq78835241 2012-11-08
- 打赏
- 举报
<div class="yi"></div>
<div class="er"></div>
<div class="san"></div>
<div class="si"></div>
<div class="wu"></div>
<div class="liu"></div>
<div class="qi"></div>
<div class="enterStyle">
<div class="yi"></div>
<div class="er"></div>
<div class="san"></div>
<div class="si"></div>
<div class="wu"></div>
<div class="liu"></div>
<div class="qi"></div>
</div>
liu6581199 2012-11-08
- 打赏
- 举报
我也遇到过类似的问题
帮顶
lsss111 2012-11-08
- 打赏
- 举报
把7个图放在一个div里面，给div加上margin：auto；别的自己调
liuzujie2011521 2012-11-08
- 打赏
- 举报
嗯，问题解决了，谢谢了大哥。
Tony-Lu 2012-11-08
- 打赏
- 举报
你要把父容器撑开啊。
加一个。<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
liuzujie2011521 2012-11-08
- 打赏
- 举报
我是新手，可能敲得不够规范，还是谢谢你。有高手请指教。
chenwei1108 2012-11-08
- 打赏
- 举报
没看懂，完全没看懂
liuzujie2011521 2012-11-08
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.beijing{ background:url(images/goolle.jpg)no-repeat; width:631px; height:353px;}
div{background:url(images/gg.png) no-repeat;width:31px; height:36px; float:left;}
.yi{ background-position: -10px -10px;}
.er{ background-position: -10px -46px;}
.san{background-position: -10px -83px;}
.si{background-position: -10px -120px;}
.wu{background-position: -10px -308px;}
.liu{background-position: -10px -10px;}
.qi{ background-position: -10px -232px;}
</style>
</head>
<body>
<div class="beijing">
<div> </div>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<div class="yi"></div>
<div class="er"></div>
<div class="san"></div>
<div class="si"></div>
<div class="wu"></div>
<div class="liu"></div>
<div class="qi"></div>
</div>
</body>
</html>
麻烦您帮我看看我的代码，结果成了那样了，我这个方法可以实现把那七个小点放在搜索框的下面么？谢谢了。
liuzujie2011521 2012-11-08
- 打赏
- 举报
以上的方法我都试过了，可还是不行，小弟添加了一个div的类选择器，设置了他的background-position位置，margin：auto也试过了，还是不行，麻烦再给指导一下，谢谢了，代码和效果图如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.beijing{ background:url(images/goolle.jpg)no-repeat; width:631px; height:353px;}
div{background:url(images/gg.png) no-repeat;width:31px; height:36px; float:left; }
.enterstyle{ background-position: 50px 50px; margin:auto;}
.yi{ background-position: -10px -10px;}
.er{ background-position: -10px -46px;}
.san{background-position: -10px -83px;}
.si{background-position: -10px -120px;}
.wu{background-position: -10px -157px;}
.liu{background-position: -10px -10px;}
.qi{ background-position: -10px -232px;}
</style>
</head>
<body>
<div class="beijing">
<div class="enterstyle">
<div class="yi"></div>
<div class="er"></div>
<div class="san"></div>
<div class="si"></div>
<div class="wu"></div>
<div class="liu"></div>
<div class="qi"></div>
</div>
</div>
</body>
</html>
