<p id="3xtv7"></p>

          <noframes id="3xtv7">

                  建站知識

                  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:'微軟雅黑'; 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(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(images/icon1.gif) no-repeat 6px 20px; 這里的的背景圖片就是我們需要定位的小圖標。第一個6px,指的是水平位置即圖片距離左側有多少個px;第二個20px,指的就是垂直位置即圖片距離頂部有多少個px。
                  最后我們來預覽一下效果:
                  制作網頁時,CSS背景圖片怎么定位?(圖4)
                  看,做出來的效果是不是跟網站上的一模一樣?如果覺得這個小圖標不夠美觀,還可以替換成其他圖片。
                  本文TAG標簽:
                  返回關閉本頁
                  上一篇:網站制作時,CSS圓角下拉菜單的樣式怎樣實現    下一篇:瀏覽器的兼容性問題與解決方案
                  推薦閱讀

                  Copyright ? 2010-2021 北京瑞恒天龍科技有限公司  All Rights Reserved  |  北京網站建設知名服務商  |  北京網站制作 | 京ICP備11004170號-1   京公網安備110107000463號
                  地址:北京市海淀區永定路長銀大廈B座  非工作時間:15810379666  服務熱線:400-600-6204 座機:010-89941606 轉801/802/803/804  版權所有 盜版必究!

                  在線咨詢
                  關閉
                  電話咨詢
                  網站制作電話
                  400-600-6204
                  侮辱丰满的人妻HD高清
                  <p id="3xtv7"></p>

                          <noframes id="3xtv7">