您現在的位置是:電腦技術吧?>? 編程技術 ??>??border怎么用,border2??>??正文詳情

border怎么用,border2

忻寄松2019-11-08 09:31:53 人圍觀
簡介border bottom首先,如果你曾經用表來制作網頁,你應該知道如何在表中畫一條虛線你需要畫一張很小的畫來填滿它事實上,我們有一個更簡單的方法。只需在TD/TD中添加這樣一個段落,就

首先,如果你曾用過table制作網頁,你就應該知道,如果要在表格中繪制一條虛線該如何做,那需要制作一個很小的圖片來填充,其實我們還有更簡單的辦法,只要在td/td中加入這么一段就可以了,你可以試試:div style=border-bottom:1px dashed #ccc/div大家可以再次參考手冊,然后你就能明白dashed、solid、dotted...等的作用,利用它們你可以制作出許多效果來,實線、虛線、雙線、陰影線等等。

div id=banner/div以上代碼便可以實現設計草圖中的banner,在css.css中加入以下樣式:#banner {background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/width:730px; /*設定層的寬度*/margin:auto; /*層居中*/height:240px; /*設定高度*/border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/clear:both /*清除浮動*/}通過border很容易就繪制出一條實線了,并且減少了圖片下載所占用的網絡資源,使得頁面載入速度變得更快。

另一個要說明的就是clear:both,表示清除左、右所有的浮動,在接下來的布局中我們還會用這個屬性:clear:left/right。

在這里添加clear:both是由于之前的ul、li元素設置了浮動,如果不清除則會影響banner層位置的設定。

div id=pagebody!--頁面主體-- div id=sidebar!--側邊欄-- /div div id=mainbody!--主體內容-- /div /div以上是頁面主體部分,我們在css.css中添加以下樣式:#pagebody { width:730px; /*設定寬度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*設定寬度*/ text-align:left; /*文字左對齊*/ float:left; /*浮動居左*/ clear:left; /*不允許左側存在浮動*/ overflow:hidden; /*超出寬度部分隱藏*/ } #mainbody { width:570px; text-align:left; float:right; /*浮動居右*/ clear:right; /*不允許右側存在浮動*/ overflow:hidden }為了可以查看到效果,建議在#sidebar和#mainbody中加入以下代碼,預覽完成后可以刪除這段代碼:border:1px solid #E00;height:200px保存預覽效果,可以發現這兩個層完美的浮動,在達到了我們布局的要求,而兩個層的實際寬度應該160 2(border) 570 2=734px,已經超出了父層的寬度,由于clear的原因,這兩個層才不會出現錯位的情況,這樣可以使我們布局的頁面不會因為內容太長(例如圖片)而導致錯位。

而之后添加的overflow:hidden則可以使內容太長(例如圖片)的部份自動被隱藏。

通常我們會看到一些網頁在載入時,由于圖片太大,導致布局被撐開,直到頁面下載完成才恢復正常,通過添加overflow:hidden就可以解決這個問題。

CSS中每一個屬性運用得當,就可以解決許多問題,或許它們與你在布局的頁并沒有太大的關系,但是你必須知道這些屬性的作用,在遇到難題的時候,可以嘗試使用這些屬性去解決問題。

版權聲明:本文由 忻寄松 整理編輯。

原標題:border,border on

轉載注明出處:http://www.dn9ww09s.icu/program/11523.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 三星連接電腦,三星手機連接電腦

    三星連接電腦,三星手機連接電腦 相關圖片臺式電腦怎么連wifi如果要將多媒體文件從手機導出到計算機,或將文件從計算機導入到手機。然后,將數據線與計算機連接,就可以實現這一功能但三星的用戶不知道如何連接現在,小...

  • 本地連接2受限制或無連接,本地連接受限制或無連接

    本地連接2受限制或無連接,本地連接受限制或無連接 相關圖片本地連接受限制或無連接 xp在網絡飛速發展的今天,使用電腦上網已是不足為奇的事情了,不過也有的用戶在使用電腦的時候經常會遇到電腦本地連接受限制或無連接,那么該如何解決...

  • 全屏背景圖,空間背景圖全屏

    全屏背景圖,空間背景圖全屏 相關圖片純色背景圖全屏幕的CSS正文背景圖像,無論分辨率如何在主體中嵌套一個img元素,并將img的Z索引控制為-1,代碼如下:img id=BG SRC=/圖像/BGJPG寬度背景圖可愛...

  • 小米pro筆記本換顯卡,小米筆記本怎么換顯卡

    小米pro筆記本換顯卡,小米筆記本怎么換顯卡 相關圖片戴爾筆記本可以換顯卡嗎眾所周知,顯卡是計算機的一部分顯卡分為集成顯卡和獨立顯卡臺式機一般采用集成顯卡,臺式機的運行速度一般比筆記本電腦快如果筆記本的用戶遇到視頻卡...

  • 表單的基本元素,表單元素都有哪些元素

    表單的基本元素,表單元素都有哪些元素 相關圖片表單元素都有什么類型HTML5的新表單元素:HTML5有幾個涉及表單的元素和屬性。本章介紹以下新的表單元素:datalistkeygenoutput瀏覽器支持輸入類型iefiref常見的表單元素有哪些...

  • 傳輸文件,怎樣用文件傳輸助手傳輸文件

    傳輸文件,怎樣用文件傳輸助手傳輸文件 相關圖片文件傳輸助手是什么當兩臺計算機在局域網中不可避免地需要傳輸文件時,在文件傳輸過程中會有很多限制。我們需要逐個設置這些限制,這樣就可以輕松地使用文件傳輸如何傳輸文件...

  • 能位匹配原理,能崗匹配原理

    能位匹配原理,能崗匹配原理 相關圖片檔位跟速度怎么匹配看看一個簡單的CSS:div?divbox P span紅色{顏色:紅色;}。根據我們對這個CSS的理解,瀏覽器首先查找ID為divbox的div元素,然后查找檔速度如何匹配...

  • 電腦打不開機怎么解決,電腦怎么打開機

    電腦打不開機怎么解決,電腦怎么打開機 相關圖片筆記本電腦打不開機怎么解決想必,用戶一定遇到過電腦無法開機的情況。很多人會在網上咨詢,“如果我不能打開電腦,我能做什么?”一些人會立即打電話給電腦維護人員進行維修...

  • dlink無線網卡怎么用,dlink無線網卡

    dlink無線網卡怎么用,dlink無線網卡 相關圖片無線網卡眾所周知,CPU以外的硬件設備是實現更多功能的工具,因此驅動程序在系統中起著重要的作用。因此,需要使用dlink無線網卡的用戶必須下載dlink無線網卡驅動程序無線網卡怎么...

  • 頁面加載,網頁加載不出來

    頁面加載,網頁加載不出來 相關圖片頁面訪問預加載是一種瀏覽器機制,它使用瀏覽器空閑時間來預下載/加載用戶下一步可能瀏覽的頁面/資源。當用戶訪問一個預先加載的鏈接時,如果他們從緩存中點擊,頁面可以快速顯...

熱評文章

  • 無線路由器怎么設置,怎么樣設置路由器

    無線路由器怎么設置,怎么樣設置路由器 相關圖片怎么設置路由器wifi現在WiFi無線路由器非常普遍,基本上家家戶戶都有寬帶,并且安裝了WiFi不過,對于了解網絡技術的人來說,無線路由器的設置是一件非常簡單的事情,對于新手來說...

  • webkit,webkit2

    webkit,webkit2 相關圖片nodewebkit上一篇文章介紹了HTML5的一些新特性和技巧現在我們將總結更多的HTML、CSS和JavaScript的WebKit特性。HTML,從HTML文檔的開始到結束:webkit是什么意思...

  • 電腦如何設置鬧鐘,電腦設置鬧鐘提醒

    電腦如何設置鬧鐘,電腦設置鬧鐘提醒 相關圖片電腦可以調鬧鐘嗎每個人都知道鬧鐘可以在手機上設定其實,電腦也有鬧鐘的功能它很新鮮,設置也很簡單我們只需要在指定的時間內設置并運行指定的播放軟件。考慮到很多用戶還沒...

  • 導航菜單是什么,electron導航菜單

    導航菜單是什么,electron導航菜單 相關圖片easyui導航菜單使用CSS練習一個簡單實用的水平導航菜單。為了便于您理解,我們在CSS的每個定義中都添加了注釋。我相信在今年的菜單制作教程中,你可以用CSS寫一個更漂亮的導航菜v...

  • 電腦一開機就藍屏,開機就藍屏怎么辦

    電腦一開機就藍屏,開機就藍屏怎么辦 相關圖片開機藍屏計算機藍屏也稱為藍屏崩潰。電腦藍屏死機有很多原因藍屏的出現是我們在愉快地使用計算機時遇到的一個常見故障我們的電腦壞了嗎所以當我們遇到電腦的藍屏時,我們應該...

  • 筆記本電腦怎么切換鍵盤,筆記本小鍵盤怎么切換

    筆記本電腦怎么切換鍵盤,筆記本小鍵盤怎么切換 相關圖片筆記本鍵盤解鎖作為一種輸入設備,使用鍵盤輸入數字是其最常用的功能之一一般筆記本鍵盤數字鍵盤一般布置在一行的上部。但對于屏幕尺寸為15.6英寸的筆記本電腦,制造商將為其配...

  • 布局居中,網頁div布局居中

    布局居中,網頁div布局居中 相關圖片div布局詳解CSS布局示例這個例子被認為是非常實際的讓圖像在div容器中上下左右居中,即水平和垂直居中。它很有用一般情況下,這種可能性相當高讓我們結合CSS和HTML來實現css flex布局...

  • 電腦老是自動重啟,電腦突然自動重啟

    電腦老是自動重啟,電腦突然自動重啟 相關圖片電腦開機一直重啟主機更換內存模塊后,開機后電腦會自動重啟只有切斷電源,它才能停止否則,計算機將自動重新啟動并成為一個死循環我該怎么辦別擔心。接下來,我將分享自動重...

  • 創造與魔法狼王屬性,創造與魔法寵物

    創造與魔法狼王屬性,創造與魔法寵物 相關圖片創造與魔法遺跡怎么進入原則上,相同顏色和不同顏色的兩個詞重疊在一起。通過分別添加clip屬性,將上下兩個單詞切割成不同的位置,從而產生兩種不同的顏色測試環境Firefox 1.5、I創...

  • win7顯示隱藏文件設置,如何顯示隱藏文件

    win7顯示隱藏文件設置,如何顯示隱藏文件 相關圖片電腦顯示隱藏文件有時有些人會使用自己的電腦,他們不想讓人們看到一些小東西這種方法雖然不是很保密,但是非常快捷方便,所以很多人會選擇這種方式來隱藏自己的小秘密。如何...

關注微信

变脸官网查询