網頁前端設計-16邊框樣式

邊框可以是圖片img，也可以是div元素，也可以是table，也可以是span

一、邊框樣式的三要素：

1、邊框的寬度 border-width

2、邊框的外觀 border-style

3、邊框的顏色 border-color

二、邊框屬性

語法：

border-width：像素值；
border-style: 屬性值；none 無樣式、dashed虛線、solid實線
border-color:關鍵字或者RGB值。

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
	width=100px;
	height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;	
}
</style>
	</head> 
	<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>

	</body>
</html>

邊框三個屬性簡寫

語法：

border:1px solid red;
等價于
border-width:1px;
border-style: solid;
border-color:red;

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
	</head> 
	<body>
<div>你好，嘻嘻</div>
	</body>
</html>

三、局部樣式

一個框有四個邊，如果想單獨設置一個邊就需要單獨設定

1、上邊框border-top

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡寫為：
border-top: 1px solid red;

2、下邊框border-bottom

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡寫為：
border-bottom: 1px solid red;

3、左邊框border-left

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡寫為：
border-left: 1px solid red;

4、右邊框border-right

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡寫為
border-right: 1px solid red;

整體舉例

戰wxPython系列-039

wxPythontigo提供了一些高級控件。例如，樹形控件、HTML窗口、網格控件、列表控件、或具有高級樣式功能的編輯器等。

一、wx.ListBox列表框

wx.ListBox列表框控件從一個字符串列表中選擇一個或者多個字符串。所選字符串顯示在一個可以滾動的列表框中，所選中的字符串將特別標記。列表框可以是單選 (如果選擇了其中的一個項，則清除先前的選擇項)或者多重選擇(選擇一個項的時，不影響對其他項的選擇)。

列表框元素從0開始編號，雖然元素的最大數量是無限的，但通常最好使用虛擬控件，不需要一次性將所有項添加到其中。由于這個控件沒有做優化，比如在wx.dataview.DataViewCtrl或者使用LC_VIRTUAL樣式的wx.ListCtrl時，需要加載超過上百的項時，性能會有所影響。

注意，列表框不支持除制表符以外的控制字符。

wx.ListBox支持的窗口樣式：

wx.LB_SINGLE：單選列表。
wx.LB_MULTIPLE：多選列表。
wx.LB_EXTENDED：擴展選擇列表:用戶可以使用SHIFT或CTRL鍵以及光標移動鍵或鼠標來擴展選擇。
wx.LB_HSCROLL：如果內容太多，創建水平滾動條(僅限Windows)。
wx.LB_ALWAYS_SB：始終顯示垂直滾動條。
wx.LB_NEEDED_SB：只在需要時創建垂直滾動條。
wx.LB_NO_SB：不創建垂直滾動條(僅限于wxMSW和wxGTK)。
wx.LB_SORT：列表框內容按字母順序排序。

注意：LB_SINGLE, LB_MULTIPLE和LB_EXTENDED樣式是互斥的，最多可以指定其中一個樣式(單選是默認設置)。

wx.ListBox發出的事件：

EVT_LISTBOX：當列表中的項被選中或選擇發生變化時，處理wx.EVT_LISTBOX事件。
EVT_LISTBOX_DCLICK：當雙擊列表框時，處理wx.EVT_LISTBOX_DCLICK事件。

wx.ListBox常用方法：

Deselect(self, n)：取消選擇列表框中的項(只適用于多選擇列表框)。
EnsureVisible(self, n)：確保當前顯示具有給定索引的項。這個方法只在必要時滾動列表框，如果這個項已經顯示，它不會做任何事情。
FindString(self, string, caseSensitive=False)：查找與給定字符串匹配的項。
GetCount(self)：返回控件中的項數。
GetCountPerPage(self)：返回可以放入列表框垂直可見區域的項數量。如果無法確定每頁的條目數，則返回-1。
GetSelection(self)：返回所選項的索引，如果沒有選擇項，則返回NOT_FOUND。
GetSelections(self)：用當前選定項的位置填充整數數組
GetString(self, n)：返回具有給定索引的項的標簽。索引必須是有效的，即小于GetCount返回的值，否則會觸發斷言。值得注意的是，如果控件為空，則不能調用此函數。
GetTopItem(self)：返回最上面可見項的索引。如果該方法沒有為當前平臺實現，則返回NOT_FOUND。
HitTest (self, point)：返回位于point上的項，如果沒有項位于point上，則返回NOT_FOUND。
InsertItems(self, items, pos)：在指定位置之前插入給定數量的字符串。
IsSelected(self, n)：確定是否選擇某項。
IsSorted(self)：如果列表框為LB_SORT樣式，則返回True。此方法主要僅用于內部使用。
SetFirstItem (self, string)：將指定的項設置為第一個可見項。
SetItemBackgroundColour(self, item, c)：如果wx.LB_OWNERDRAW標志被設置,在列表框中設置一個項的背景顏色(僅對MSW有效)。
SetItemFont(self, item, f)：如果wx.LB_OWNERDRAW標志被設置，在列表框中設置一個項的前景顏色(僅對MSW有效)。
SetSelection(self, n)：將選定項設置為給定項n，如果n == NOT_FOUND則完全刪除選定項。注意，這不會觸發任何命令事件，也不會取消控件中支持多個選擇的任何其他項。
SetString(self, n, string)：為給定的項設置標簽。

圖1：wx.ListBox類繼承關系

二、wx.ListBox演示

#列表框(wx.ListBox)

import wx

class SampleListBox(wx.Frame):

    def __init__(self, *args, **kw):
        super(SampleListBox, self).__init__(*args, **kw)

        self.InitUi()

    def InitUi(self):
        #設置標題
        self.SetTitle("實戰wxPython: ListBox演示")
        #設置窗口尺寸
        self.SetSize(400, 240)

        panel = wx.Panel(self)

        #水平布局
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        # 添加一個列表框
        self.listbox = wx.ListBox(panel)
        hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)

        # 按鈕面板
        btnPanel = wx.Panel(panel)
        vbox = wx.BoxSizer(wx.VERTICAL)
        newButon = wx.Button(btnPanel, wx.ID_ANY, "新建", size = (90, 30))
        renButton = wx.Button(btnPanel, wx.ID_ANY, "重命名", size = (90, 30))
        delButton = wx.Button(btnPanel, wx.ID_ANY, "刪除", size = (90, 30))
        clrButton = wx.Button(btnPanel, wx.ID_ANY, "清理", size = (90, 30))

        newButon.Bind(wx.EVT_BUTTON, self.NewItem)
        renButton.Bind(wx.EVT_BUTTON, self.OnRename)
        delButton.Bind(wx.EVT_BUTTON, self.OnDelete)
        clrButton.Bind(wx.EVT_BUTTON, self.OnClear)
        self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)

        vbox.Add((-1, 20)) #距離頂端20像素
        vbox.Add(newButon)
        vbox.Add(renButton, 0, wx.TOP, 5)
        vbox.Add(delButton, 0, wx.TOP, 5)
        vbox.Add(clrButton, 0, wx.TOP, 5)

        btnPanel.SetSizer(vbox)
        hbox.Add(btnPanel, 0.6, wx.EXPAND | wx.RIGHT, 20)
        panel.SetSizer(hbox)

        self.Centre()

    def NewItem(self, e):
        text = wx.GetTextFromUser("輸入一個新項", "插入對話框")
        if text != "":
            self.listbox.Append(text)

    def OnRename(self, e):
        sel = self.listbox.GetSelection()
        text = self.listbox.GetString(sel)
        renamed = wx.GetTextFromUser("項重命名", "重命名對話框", text)

        if renamed != "":
            self.listbox.Delete(sel)
            item_id = self.listbox.Insert(renamed, sel)
            self.listbox.SetSelection(item_id)

    def OnDelete(self, e):
        sel = self.listbox.GetSelection()
        if sel != -1:
            self.listbox.Delete(sel)

    def OnClear(self, e):
        self.listbox.Clear()

def main():
    app = wx.App()
    sample = SampleListBox(None)
    sample.Show()
    app.MainLoop()

if __name__ == "__main__":
    main()

這個例子展示了如何從wx.ListBox中添加、修改和刪除項。

self.listbox = wx.ListBox(panel)
 hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)

創建一個空的wx.ListBox。設置列表框邊框距離20px。

self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)

綁定wx. EVT_LISTBOX_DCLICK事件到方法OnRename(),這樣，如果雙擊列表框中的特定元素，就會顯示重命名對話框。

def NewItem(self, e):
        text = wx.GetTextFromUser("輸入一個新項", "插入對話框")
        if text != "":
            self.listbox.Append(text)

通過單擊新建按鈕調用NewItem()方法。在NuwItem方法中，使用包裝器wx.GetTextFromUser()方法顯示一個wx.TextEntryDialog。將對話框中輸入的文本返回給文本變量。如果文本不是空的，我們用append()方法將它添加到列表框中。

if renamed != "":
       self.listbox.Delete(sel)
       item_id = self.listbox.Insert(renamed, sel)
       self.listbox.SetSelection(item_id)

通過刪除項并在同一位置插入新項來重命名項。將選擇設置回已修改的項。

def OnDelete(self, e):
        sel = self.listbox.GetSelection()
        if sel != -1:
            self.listbox.Delete(sel)

要刪除一個項，通過調用GetSelection()方法找到所選項的索引。然后使用delete()方法刪除該項。

def OnClear(self, e):
        self.listbox.Clear()

調用Clear()方法清除整個列表框。

圖2：wx.ListBox演示

三、wx.CheckListBox復選列表框

wx.CheckListBox是wx.ListBox的派生類，繼承了它的功能，它在每個選項上額外顯示一個復選框。

wx.CheckListBox發出的事件：

EVT_CHECKLISTBOX：當選中或取消選中復選框中的項時，處理wx.EVT_CHECKLISTBOX事件。

wx.CkeckListBox常用方法：

Check(self, item, check=True)：設置給定的項的選擇狀態。調用此方法不會導致觸發wx.EVT_CHECKLISTBOX事件。
GetCheckedItems(self)：根據IsChecked返回與控件中已選擇項對應的整數序列。
GetCheckedStrings(self)：根據GetChecked返回與控件的已選擇項對應的字符串元組。
GetSelections(self)：返回當前選定項的索引列表。
IsChecked(self, item)：如果選中給定項則返回True，否則返回False。
SetCheckedItems(self, indexes)：如果在索引序列中找到項的索引，則設置項的已選定狀態。
SetCheckedStrings(self, strings)：如果在字符串序列中找到項的字符串，則設置項的選定狀態。

圖3：wx.CheckListBox類繼承關系

將節二中的演示代碼：

self.listbox = wx.ListBox(panel)

修改成

self.listbox = wx.CheckListBox(panel)

運行，就可以演示使用wx.CheckListBox，效果如圖4：

圖4：wx.CheckListBox演示

四、本文知識點

了解和使用wx.ListBox。
了解和使用wx.CheckListBox。

前一篇：wxPython - 狀態欄StatusBar

歡迎關注，評論，收藏，點贊，和轉發。

景樣式

1.背景屬性縮寫

Background: 背景色背景圖片背景平鋪方式背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

縮寫后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸樣式

1.寬度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

邊框樣式

1.邊框線

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 設置上邊框線

border-bottom-style 設置下邊框線

border-left-style 設置左邊框線

border-right-style 設置右邊框線

2.邊框寬度

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

border-top-width 設置上邊框寬度

border-bottom-width 設置下邊框寬度

border-left-width 設置左邊框寬度

border-right-width 設置右邊框寬度

3.邊框顏色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

border-top-color 設置上邊框顏色

border-bottom-color 設置下邊框顏色

border-left-color 設置左邊框顏色

border-right-color 設置右邊框顏色

4.邊框樣式縮寫

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

縮寫后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外邊距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 設置上邊的外邊距

margin-bottom 設置下邊的外邊距

margin-left設置左邊的外邊距

margin-right設置右邊的外邊距

縮寫型式：

margin: 上邊距右邊距下邊距左邊距

margin: 上下邊距左右邊距

margin: 上邊距左右邊距下邊距

內邊距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 設置上邊的內邊距

padding-bottom 設置下邊的內邊距

padding-left設置左邊的內邊距

padding-right設置右邊的內邊距

縮寫型式：

padding: 上邊距右邊距下邊距左邊距

padding : 上下邊距左右邊距

padding : 上邊距左右邊距下邊距

列表樣式

1.項目符號

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*實心圓*/

ul { list-style-type:circle;}/*空心圓*/

ul { list-style-type:square;}/*實心方塊*/

ul { list-style-type:none;}/*不顯示項目符號*/

ol { list-style-type:decimal;}/*阿拉伯數字*/

ol { list-style-type:lower-roman;}/*小寫羅馬數字*/

ol { list-style-type:upper-alpha;}/*大寫英文字母*/

2.自定義項目符號

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

鏈接樣式

1.鏈接沒有被訪問時的樣式

a:link

例： a:link { color:#ff0000; }

2.鏈接被訪問后的樣式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠標懸停在鏈接上的樣式

a:hover

例： a:link { background-color:#ccc; }

4.鼠標點擊鏈接時的樣式

a:active

例：a:active { background-color:#ff0000;}

在線咨詢

上一篇：程序員都應該了解的一種數據格式之 JSON
下一篇：HTML基礎教程：框架(frame)屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁前端設計-16邊框樣式

您的項目需求