CSS 圆角技术

在CSS3以前,大部分都是用1/4的圆形图片来实现圆角。

这里找了几篇文章,详细讲解了在CSS 3.0以前如何实现圆角技术:

1.http://www.webjx.com/CSS/20080503/css_5375.html

2.http://www.21shipin.com/html/63772.shtml

3.http://article.yeeyan.org/view/seasun/40032?from_com (推荐)

CSS3出来以后,有属性可以支持圆角了—border-radius属性。

以下是介绍border-radius使用方法的文章:

1.http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html (推荐)

2.http://www.qianduan.net/compatible-all-browsers-css3-rounded-corners.html

尝试做的第一个主题GrayBox(未完工~~)

赶潮流,尝试着做了自己的第一个主题,不过还有一部分未完善,比如:

1.搜索框的美化

2.头部及尾部的美化

3.评论栏的美化及头像调用

还有一些暂时没想到。

之所以叫GrayBox,因为这款主题基本都是由灰色的小方块盒子组成,所以我就直接叫他GrayBox了。

当然,这是我第一次尝试着做,而自己学CSS,PHP这些也只有半个月多,javascript大概了解一点基础。所以我还是比较兴奋了,但是时间不允许自己过多深入了,准备暂时搁置一段时间,先得把自己可以混口饭的东西学好,当然,前端的这些学习我也会继续进行,争取以后把这当成我的一个副职业。

先放一张首页图,大家表喷我哈!

GrayBox
GrayBox Theme

Layout Classes

The Qt layout system provides a simple and powerful way of automatically arranging child widgets within a widget to ensure that they make good use of the available space.

 

Introduction

Qt includes a set of layout management classes that are used to describe how widgets are laid out in an application’s user interface. These layouts automatically position and resize widgets when the amount of space available for them changes, ensuring that they are consistently arranged and that the user interface as a whole remains usable.

All QWidget subclasses can use layouts to manage their children. The QWidget::setLayout() function applies a layout to a widget. When a layout is set on a widget in this way, it takes charge of the following tasks:

  • Positioning of child widgets.
  • Sensible default sizes for windows.
  • Sensible minimum sizes for windows.
  • Resize handling.
  • Automatic updates when contents change:
    • Font size, text or other contents of child widgets.
    • Hiding or showing a child widget.
    • Removal of child widgets.

Qt’s layout classes were designed for hand-written C++ code, allowing measurements to be specified in pixels for simplicity, so they are easy to understand and use. The code generated for forms created using Qt Designer also uses the layout classes. Qt Designer is useful to use when experimenting with the design of a form since it avoids the compile, link and run cycle usually involved in user interface development.

 

Horizontal, Vertical, Grid, and Form Layouts

The easiest way to give your widgets a good layout is to use the built-in layout managers: QHBoxLayout, QVBoxLayout, QGridLayout, and QFormLayout. These classes inherit from QLayout, which in turn derives from QObject (not QWidget). They take care of geometry(几何学) management for a set of widgets. To create more complex layouts, you can nest layout managers inside each other.

  • A QHBoxLayout lays out widgets in a horizontal row, from left to right (or right to left for right-to-left languages). qt1
  • A QVBoxLayout lays out widgets in a vertical column, from top to bottom. qt2
  • A QGridLayout lays out widgets in a two-dimensional(二维) grid. Widgets can occupy multiple cells. qt3
  • A QFormLayout lays out widgets in a 2-column descriptive label- field style.
  •  
     

    qt4

     

    Laying Out Widgets in Code

    The following code creates a QHBoxLayout that manages the geometry of five QPushButtons, as shown on the first screenshot above:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
         QWidget *window = new QWidget;
         QPushButton *button1 = new QPushButton("One");
         QPushButton *button2 = new QPushButton("Two");
         QPushButton *button3 = new QPushButton("Three");
         QPushButton *button4 = new QPushButton("Four");
         QPushButton *button5 = new QPushButton("Five");
     
         QHBoxLayout *layout = new QHBoxLayout;
         layout->addWidget(button1);
         layout->addWidget(button2);
         layout->addWidget(button3);
         layout->addWidget(button4);
         layout->addWidget(button5);
     
         window->setLayout(layout);
         window->show();

    The code for QVBoxLayout is identical, except the line where the layout is created. The code for QGridLayout is a bit different, because we need to specify the row and column position of the child widget:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
         QWidget *window = new QWidget;
         QPushButton *button1 = new QPushButton("One");
         QPushButton *button2 = new QPushButton("Two");
         QPushButton *button3 = new QPushButton("Three");
         QPushButton *button4 = new QPushButton("Four");
         QPushButton *button5 = new QPushButton("Five");
     
         QGridLayout *layout = new QGridLayout;
         layout->addWidget(button1, 0, 0);
         layout->addWidget(button2, 0, 1);
         layout->addWidget(button3, 1, 0, 1, 2);
         layout->addWidget(button4, 2, 0);
         layout->addWidget(button5, 2, 1);
     
         window->setLayout(layout);
         window->show();

    The third QPushButton spans 2 columns. This is possible by specifying 2 as the fifth argument to QGridLayout::addWidget().

    Finally, the code for QFormLayout is ..

     

    Tips for Using Layouts

    When you use a layout, you do not need to pass a parent when constructing the child widgets. The layout will automatically reparent the widgets (using QWidget::setParent()) so that they are children of the widget on which the layout is installed.

    Note: Widgets in a layout are children of the widget on which the layout is installed, not of the layout itself. Widgets can only have other widgets as parent, not layouts.

    You can nest layouts using addLayout() on a layout; the inner layout then becomes a child of the layout it is inserted into.

     

    Adding Widgets to a Layout

    When you add widgets to a layout, the layout process works as follows:

    1. All the widgets will initially be allocated an amount of space in accordance with their QWidget::sizePolicy() and QWidget::sizeHint().
    2. If any of the widgets have stretch factors set, with a value greater than zero, then they are allocated space in proportion to their stretch factor (explained below).
    3. If any of the widgets have stretch factors set to zero they will only get more space if no other widgets want the space. Of these, space is allocated to widgets with an Expanding size policy first.
    4. Any widgets that are allocated less space than their minimum size (or minimum size hint if no minimum size is specified) are allocated this minimum size they require. (Widgets don’t have to have a minimum size or minimum size hint in which case the strech factor is their determining factor.)
    5. Any widgets that are allocated more space than their maximum size are allocated the maximum size space they require. (Widgets do not have to have a maximum size in which case the strech factor is their determining factor.)

     

    Stretch Factors

     

    Widgets are normally created without any stretch factor set. When they are laid out in a layout the widgets are given a share of space in accordance with their QWidget::sizePolicy() or their minimum size hint whichever is the greater. Stretch factors are used to change how much space widgets are given in proportion to one another.

    If we have three widgets laid out using a QHBoxLayout with no stretch factors set we will get a layout like this:

    qt5

    If we apply stretch factors to each widget, they will be laid out in proportion (but never less than their minimum size hint), e.g.

    qt6

     

    暂时只记录自己需要的,更多: http://doc.trolltech.com/4.5/layout.html