5197.com

建站常识

Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

制作网页时,CSS背景图片怎么定位?

时间:  来源:网站建设企业  编辑:网站制作企业  点击量:
相信大家在浏览网站时,经常会看到一个资讯列表,每一列前面都有一个小图标,例如: 那么如何控制这些小图标的位置正好跟大家的资讯列的文字对齐呢?怎么样能让背景图片定位到大家想要的位置呢?下面详细给大家做个案例: 首先,大家先将html的布局写好,内容
相信大家在浏览网站时,经常会看到一个资讯列表,每一列前面都有一个小图标,例如:
制作网页时,CSS背景图片怎么定位?(图1)
制作网页时,CSS背景图片怎么定位?(图2)
那么如何控制这些小图标的位置正好跟大家的资讯列的文字对齐呢?怎么样能让背景图片定位到大家想要的位置呢?下面详细给大家做个案例:
首先,大家先将html的布局写好,内容如下:
<div class="news">
         <ul>
                  <li><a href=”#”><span>2015/07/27</span>大家拥有国家系统集成3级资质远程视频会议系统</a></li>
                   <li><a href=”#”><span>2015/07/27</span>大家拥有国家系统集成3级资质远程视频会议系统</a></li>
                   <li><a href=”#”><span>2015/07/27</span>大家拥有国家系统集成3级资质远程视频会议系统</a></li>
                   <li><a href=”#”><span>2015/07/27</span>大家拥有国家系统集成3级资质远程视频会议系统</a></li>
                   <li><a href=”#”><span>2015/07/27</span>大家拥有国家系统集成3级资质远程视频会议系统</a></li>
         </ul>
</div>
其次大家把小图标命名为:
制作网页时,CSS背景图片怎么定位?(图3)
最后大家再将css样式写出来:
<style type="text/css">
body{ font-size:12px; font-family:'MicroSoft雅黑'; margin:0 auto; padding:0px; color:#000; line-height:180%;}
ul,li{ list-style:none; margin:0px; padding:0px;}
a {text-decoration:none; color:#333333;}
a:hover{ text-decoration:none; color:#4ac5ee;}
.clear{ clear:both}
img{ border:none}
.news {width:415px; height:220px; float:left; margin:100px 300px;}
.news ul { line-height:40px;}
.news ul li { border-bottom:1px dashed #ccc; padding:2px 0 2px 17px; background:url(/news3/images/icon1.gif) no-repeat 6px 20px;}
.news ul li a { width:390px;  display:inline-block;}
.news ul li span { float:right;}
</style>
注意,大家今天要说的重点来了:background:url(/news3/images/icon1.gif) no-repeat 6px 20px; 这里的的背景图片就是大家需要定位的小图标。第一个6px,指的是水平位置即图片距离左侧有多少个px;第二个20px,指的就是垂直位置即图片距离顶部有多少个px。
最后大家来预览一下效果:
制作网页时,CSS背景图片怎么定位?(图4)
看,做出来的效果是不是跟网站上的一模一样?如果觉得这个小图标不够美观,还可以替换成其他图片。
本文TAG标签:
返回关闭本页
上一篇:网站制作时,CSS圆角下拉菜单的样式怎样实现    下一篇:浏览器的兼容性问题与解决方案
推荐阅读

Copyright ? 2010-2021 北京瑞恒天龙科技有限企业  All Rights Reserved  |  5197.com知名服务商  |  5197.com | 京ICP备11004170号-1   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!

在线咨询
关闭
电话咨询
网站制作电话
400-600-6204
XML 地图 | Sitemap 地图