网页前端设计-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边框样式

您的项目需求