Dreamweaver中加入豎直線的巧妙辦法

來源:互聯網
上載者:User

  網頁製作時經常用到1個像素高或寬的細線條來修飾,可以使網頁的布局更加清晰,整體更加美觀。由於一直習慣使用Dreamweaver編輯網頁,所以在閱讀《巧妙的在Fontpage中給網頁加入一條豎直線》一文後,筆者利用文中的方法二,在Dreamweaver中給網頁加入一條豎直線。

  依葫蘆畫瓢,按照《巧妙》一文的所述的方法二,筆者在Dreamweaver中插入表格,設定儲存格邊距和間距均為0,表格的寬度為1個像素,並設定背景色為藍色。確認設定無誤後,按F12預覽,可是網頁上並沒有如願出現豎直細線條(如圖1)。明明進行了正確的設定卻不能實現豎直細線條,真是鬱悶!

  圖1

  這是什麼原因呢?於是筆者開啟Dreamweaver的原始碼視窗,經過仔細觀察,發現設定為1像素寬的儲存格中有個“ ”的標記(如圖2),這個標記是HTML中的轉義符,在瀏覽器輸出為一個空格。發現這個標記,筆者終於恍然大悟,原來就是這個標記在作祟!於是刪除這個標記後,再次開啟網頁,豎直細線條終於成功的設定了!

  圖2

  在Dreamweaver中插入表格都會自動在每個儲存格中加上“ ”的標記,正是因為這個標記,使得設定為1像素寬的儲存格在瀏覽器中顯示時多了個空格,把儲存格撐大。

  另外,《巧妙》一文的方法一使用

  語句來插入豎直線,筆者覺得有不妥之處,因為

  語句插入的豎直線上下都會留有空白,並不能在任何時候都滿足自己的需要,所以筆者建議盡量使用插入表格的方法來實現。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。