边框背景 | 易学教程

Day10

阅读更多关于 Day10

设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度字体属性文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right：右对齐 center：居中对齐 justify：两端对齐文字修饰 text-decoration 属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline：定义文本下的一条线，相当于下划线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线，相当于删除线 inherit：继承父元素的text-decoration属性的值注意：a标签默认自带下划线，如果要去掉就如以下代码 a{ text

css标签样式边框盒子模型定位溢出 z-index 透明度

阅读更多关于 css标签样式边框盒子模型定位溢出 z-index 透明度

目录一、CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色（3种表示方法） 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二、盒子模型三、浮动（ ************ ）三、溢出四、定位五、z-index 控制z轴六、位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七、透明度一、CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小） 2.字体的颜色（3种表示方法）颜色的英文 6aode 直接使用pycharm提供的取色器即可 rgb(1，2，3) 可利用截图软件获取三基色数字 rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度 <style> p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; font-size: 24px; font-weight: lighter; /*color: 'red';*/ /*color: #06a0de;*/ /*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/ color: rgba(0,128,128,0.9); } </style

1114课堂小结

阅读更多关于 1114课堂小结

目录设置标签样式给标签设置长宽字体属性字体粗细字体颜色文字对齐文字修饰首行缩进背景属性设置背景颜色设置背景图片设置背景位置边框边框属性边框样式 display属性盒子模型浮动 float的三种取值 clear 清除浮动 overflow溢出属性定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）是否脱离文档流脱离的不脱离的 z-index opacity 设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right

前端实习面试题整理（五）【CSS简单盒模型】

阅读更多关于前端实习面试题整理（五）【CSS简单盒模型】

希望通过记录博客来加深自己的理解和记忆 1、CSS盒模型　　刚刚接触前端一个多月，让我的态度转变最大的不是Js，而是CSS，开始觉得CSS好简单，甚至不像是一种语言，然而经历了怎么调也调不好的样式和膜拜了室友推荐的禅意花园后，对CSS真是怕得很。所以一上来就先对CSS的盒模型做一个整理。　　 ①首先说明什么是盒模型：　　盒模型可以理解为在页面中，每一个HTML元素都由一个矩形的盒子来表示，这些盒子都有四个框框：外边距（margin）、边框（border）、内边距（padding）、内容（content）。我们可以通过对盒子进行操作从而改变元素的颜色、背景、大小等。　　②盒子的大小：　　盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。对于任何一个元素设置width和height控制内容大小，也可以分别设置各自的边框（border）、间隙（padding）、间隔（margin）。灵活设置这些盒子的这些属性，可以实现各自排版效果。注意一点：我们设置的width和height是内容也就是content的宽度和高度，注意不要弄混。　　③盒子的构成：　　 a.margin：盒子的外边框，完全透明的（不能设置颜色），只可以设置它的边距。　　margin有top、bottom、left、right四种属性

GUI学习之三十四——QSS样式表

阅读更多关于 GUI学习之三十四——QSS样式表

今天是一个大课题：QSS样式表一.概念： QSS是Qt Style Sheet——Qt样式表，是用来自定义控件外观的一种机制;可以把他类比成CSS，但是不及其功能强大。二.使用：我们做一个模板，可以在后面来演示 from PyQt5.Qt import * import sys class Window(QWidget): def __init__(self): super().__init__() self.UI_test() self.resize(800,600) def UI_test(self): box1 = QWidget(self) box2 = QWidget(self) layout = QVBoxLayout() layout.addWidget(box1) layout.addWidget(box2) self.setLayout(layout) label1 = QLabel('标签1',box1) btn1 = QPushButton('click1',box1) btn1.move(150,50) label2 = QLabel('标签1', box2) btn2 = QPushButton('click1', box2) btn2.move(150, 50) pass if __name__ == '__main__': app =

前端之css

阅读更多关于前端之css

前端之css 1 | 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2 | 0 CSS语法 2 | 1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 | 2 CSS注释 /* 这是注释 */ 注释是代码之母。 3 | 0 CSS的几种引入方式 3 | 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 < p style ="color: red" > Hello world. </ p > 3 | 2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： < head > 　　 < meta charset ="UTF-8" > 　　 < title > Title </ title > 　　 < style > 　　　　 p { background-color : #2b99ff ; } 　　 </ style > </ head > 3 | 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 < link href

Tkinter 之Frame标签

阅读更多关于 Tkinter 之Frame标签

一、参数说明语法作用 width 设置 Frame 的宽度默认值是 0 height 设置 Frame 的高度默认值是 0 background（bg）设置 Frame 组件的背景颜色 borderwidth（bd）指定 Frame 的边框宽度 container 该选项如果为 True，意味着该窗口将被用作容器，一些其它应用程序将被嵌入默认值是 False cursor 指定当鼠标在 Frame 上飘过的时候的鼠标样式 highlightbackground 指定当 Frame 没有获得焦点的时候高亮边框的颜色 highlightcolor 指定当 Frame 获得焦点的时候高亮边框的颜色 highlightthickness 指定高亮边框的宽度, 默认值是 0（不带高亮边框） padx 水平方向上的边距 pady 垂直方向上的边距 relief 指定边框样式默认值是 "flat" 另外你还可以设置 "sunken"，"raised"，"groove" 或 "ridge" 注意，如果你要设置边框样式，记得设置 borderwidth 或 bd 选项不为 0，才能看到边框二、代码示例 import tkinter as tk window = tk.Tk() # 设置窗口大小 winWidth = 600 winHeight = 400 # 获取屏幕分辨率

圆角渐变边框实现

阅读更多关于圆角渐变边框实现

这里涉及到了圆角和渐变色两个属性。 1.圆角：border-radius border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 2.渐变：linear-gradient linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。所以通常情况下认为的最简便的方法是：直接在具有圆角边框的属性下使用border-image来控制渐变，但这样是错误的。有过经验的朋友会发现border-radius会出现属性失效的情况，因为两个属性看似是控制两个效果，但实际操作却都是操作了border边角。所以目前大众化且普遍的做法如下：采用遮罩显示的方式，渐变为底色背景，内层填充，未被遮挡的部分自然就显示为圆角边框。具体操作方式有多种如：（1）两个div控制，一个渐变背景板一个内层填充（2）一个div通过after伪类元素添加渐变背景板（3）利用div的盒模型属性content-box, padding-box使用渐变和填充以上三个方法均可实现圆角渐变边框，目前的普遍做法也是如此。但是以上方式有个致命的缺点

自定义QMenu样式

阅读更多关于自定义QMenu样式

自定义QMenu样式 QMenu QSS Qt 最近工作中需要实现一个自定义外观的菜单，但在网上搜索后发现很少有QMenu的样式自定义相关的深入解析。请教了公司的一位前辈，他提到QMenu自定义样式不方便，于是他一般是自己实现一个菜单控件。但这样未免太过于麻烦，因此经过一番摸索后基本实现了自己所需的样式。使用过QSS(Qt Style Sheet)自定义过比较复杂的控件，如QSlider等一般都知道Qt中的控件包含一到多个subcontrol(下文翻译为子控件)。Qt自带的控件所包含的子控件可以在 Qt stylesheet reference 上查阅。但文档上并没有给出子控件间的相对关系。经查阅文档中的QMenu一栏，我们可以知道QMenu包含 item indicator , separator , right-arrow , scroller , tearoff ,相对来说属于子控件比较多的控件了，其中 item indicator , separator , right-arrow 是较为为常见的子控件。为了确定子控件的相对位置关系，我们可以通过对子控件设置不同的背景色和边框来进行查看。效果如图所示。根据图片，我们可以得知，QMenu由若干行组成，每一行可能是一个 ::item 获 ::separator 。注意到 ::indicator 和 ::right

前端开发HTML&css入门――盒子模型以及部分CSS样式

阅读更多关于前端开发HTML&css入门――盒子模型以及部分CSS样式

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。盒子模型　　　　　　　　　　　　　　　　　　盒子和边框 width和height background-color 盒子设置的盒子内容区的大小设置背景颜色 border-width border-color border-style 盒子边框边框的宽度边框颜色边框的样式可选值： * none，默认值，没有边框 * solid 实线 * dotted 点状边框 * dashed 虚线 * double 双线 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /* * width和height只是设置的盒子内容区的大小，而不是盒子的整个大小， * 盒子可见框的大小由内容区，内边距和边框共同决定 */ width: 300px; height: 300px; background-color: #bfa; border-width:10px ; /* 使用border-width可以分别指定四个边框的宽度如果在border-width指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置的如果指定三个值，则三个值会分别设置给上左右下

订阅边框背景