<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
邊框可以是圖片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支持的窗口樣式:
注意:LB_SINGLE, LB_MULTIPLE和LB_EXTENDED樣式是互斥的,最多可以指定其中一個樣式(單選是默認設置)。
wx.ListBox發出的事件:
wx.ListBox常用方法:
圖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發出的事件:
wx.CkeckListBox常用方法:
圖3:wx.CheckListBox類繼承關系
將節二中的演示代碼:
self.listbox = wx.ListBox(panel)
修改成
self.listbox = wx.CheckListBox(panel)
運行,就可以演示使用wx.CheckListBox,效果如圖4:
圖4: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.邊框線
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例: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.項目符號
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
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;}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。