东网站建设,wordpress多个页面主题,浏览器怎么打开网站服务器,WordPress在线调试一些复杂控件#xff0c;是有子控件的#xff0c;每个子控件#xff0c;都可以通过qss的双冒号选择器来选中#xff0c;进行独特的样式定义。很多控件都有子控件#xff0c;太多了#xff0c;后面单独写一篇文章来介绍各个控件的子控件。这里就随便来几个例子
例如下拉列…一些复杂控件是有子控件的每个子控件都可以通过qss的双冒号选择器来选中进行独特的样式定义。很多控件都有子控件太多了后面单独写一篇文章来介绍各个控件的子控件。这里就随便来几个例子
例如下拉列表控件右边有个下拉按钮QComboBox::drop-down就是子控件这个下拉按钮里面还有一个箭头QComboBox::down-arrow也是子控件。
展开的下拉列表每个条目QAbstractItemView::item也都是子控件。
又比如spinbox有个上下箭头可以调整数值大小这个上下箭头也是子控件。 下面通过样式表来调整这个spinbox的上下按钮的位置
QSpinBox
{border: 1px solid black;padding-left:5px;}QSpinBox::up-button
{/*上按钮*/subcontrol-origin: border;/*以盒子模型的border区域为坐标系*/subcontrol-position: top right;/*位于border的右上角*/width: 16px;border: 3px solid green;/*绿边框*/background-color: red;/*红背景*/
}
QSpinBox::up-arrow
{/*上按钮中的箭头 最好是用贴图*/background-color: white;/*这里图简便就用白色方块代替了*/width: 5px;height: 5px;
}QSpinBox::down-button
{/*下按钮*/subcontrol-origin: border;subcontrol-position: left;/*border坐标系的左边*/width: 16px;border-image: url(:/images/spindown.png) 1;border: 3px solid blue;/*绿边框*/background-color: green;
} 以上代码效果如下 如果想让上下按钮的高度自适应QSpinBox的高度怎么办
答需要一些简单的基础知识定义位置需要知道坐标系和坐标而坐标又分为绝对和相对默认。坐标值的定义比较直观形如left: 5px; right:1em; top:10pt; bottom:20%; 上下左右都可以指定但是注意不要写出矛盾的语句。
下面我们看一下在相对坐标系和绝对坐标系下设置同样的坐标效果有何区别 QSpinBox::up-button
{/*上按钮*/subcontrol-origin: border;/*以盒子模型的border区域为坐标系*/subcontrol-position: top right;/*位于border的右上角*/ border: 3px solid green;/*绿边框*/background-color: red;/*红背景*/width:20px;position:absolute;/*绝对坐标*/bottom:5px;/*距离坐标系底部5px*/
} 以上左图是基于原先位置上移了5px而右图是让按钮距离border底部5px以为我们已经设置了以border为参考系。
理解了坐标系*参考系的概念把红绿两个子控件的高度自适应QSpinBox的高度就简单了
QSpinBox::down-button
{/*下按钮*/subcontrol-origin: border;subcontrol-position: left;/*border坐标系的左边*/border-image: url(:/images/spindown.png) 1;border: 3px solid blue;/*绿边框*/background-color: green;width:20px;position:absolute;/*绝对参考系*/bottom:0px;/*距离坐标系底5px*/
}
QSpinBox::down-arrow
{/*下按钮中的箭头*/background-color: white;width: 13px;/*用白色直线来绘制减号*/height: 3px;
}
