蜜糖直播_西安是哪个省中国地图_宁波seo推荐_橙子建站

一，控件起名和设置整体样式

目录

一，控件起名和设置整体样式

二，设置局部控件样式

三，设置gif动态背景

四，设置账号密码框样式

五，头像图片设置

---

给控件起的名字：

      关闭按钮: btn_close

      缩小按钮：btn_reduce

      登录按钮：btn_login

      设置按钮：btn_set

      注册按钮:btn_register

      找回密码按钮:btn_findpwd

      二维码按钮：btn_erweima

      账号/用户名输入框: cb_username (类型为QComboBox)

     密码输入框：le_password（类型为QLineEdit）

    

以下代码写在最外层的窗口QWidget，起到全局样式设置的作用

QPushButton#btn_close:hover   //关闭按钮
{background-color: rgb(255,84,57);
}QPushButton#btn_reduce:hover   //缩小按钮
{background-color: rgb(190,190,190);
}QPushButton#btn_set:hover   //设置按钮
{background-color: rgb(190,190,190);
}QPushButton#btn_login         //登录按钮
{background-color: rgb(14,191,252);border-radius:5px;font: 75 12pt "Arial";color: rgb(255, 255, 255);
}QPushButton#btn_login:hover    //登录按钮悬停效果
{background-color: rgb(36, 162, 208);
}QComboBox,QLineEdit
{border:none;border-bottom:1px solid rgb(229,229,229);
}QComboBox:hover,QLineEdit:hover
{border-bottom:1px solid rgb(193,193,193);
}QComboBox:focus,QLineEdit:focus
{border-bottom:1px solid rgb(18,183,245);
}QComboBox::drop-down
{min-width:30px;border-image: url(:/QQ_login_image/menu.png);
}QPushButton#btn_register   //注册按钮
{border:none;color: rgb(191,191,191);
}
QPushButton#btn_register:hover
{color: rgb(106, 106, 106);
}QPushButton#btn_erweima:hover   //二维码按钮悬停效果
{border-image: url(:/QQ_login_image/erweima2.png);
}QPushButton#btn_findpwd   //找回密码按钮
{border:none;color: rgb(191,191,191);
}
QPushButton#btn_findpwd:hover
{color: rgb(106, 106, 106);
}

二，设置局部控件样式

//关闭按钮设置关闭图片border-image: url(:/QQ_Image_touming/close.png);//缩小按钮设置缩小图片
border-image: url(:/QQ_Image_touming/touming_min.png);//设置按钮设置设置图片
border-image: url(:/QQ_login_image/sheze.png);//二维码按钮设置二维码图片
border-image: url(:/QQ_login_image/erweima1.png);

如何设置的：

选中想要设置样式的控件：

点击鼠标右键->选择改变样式表，  就会弹出样式设置窗口：

将代码设置到此处即可

三，设置gif动态背景

我们发现这个登录界面是有动效的，那如何实现的呢？其实这个动效的控件是一个QLabel,在这个QLabel中我们设置了一个gif动图，让这个gif动图动起来以达到这个效果。

代码：

    //使gif图片铺满labelQPixmap *pixmap = new QPixmap(":/gf60.gif");pixmap->scaled(ui->label->size(), Qt::KeepAspectRatio);ui->label->setScaledContents(true);ui->label->setPixmap(*pixmap);//给label设置动画效果;QMovie * movie = new QMovie;movie->setFileName(":/gf60.gif");movie->start();//播放ui->label->setMovie(movie);

四，设置账号密码框样式

我们发现这个账号密码框，既有文字，也有图片，所以要写代码来实现：

 //账号提示ui->cb_username->lineEdit()->setPlaceholderText("QQ号码/手机/邮箱");//对lineEdit左侧嵌入图片QAction *action = new QAction(this);action->setIcon(QIcon(":/QQ_login_image/pwd.png"));ui->le_password->addAction(action,QLineEdit::LeadingPosition);//为comboBox的lineEdit嵌入图片QAction *action1 = new QAction(this);action1->setIcon(QIcon(":/QQ_login_image/zhanghao.png"));ui->cb_username->lineEdit()->addAction(action1,QLineEdit::LeadingPosition);//隐藏密码输入ui->le_password->setEchoMode(QLineEdit::Password);

五，头像图片设置

头像是怎么设置的呢，这里有一个很简单的方法，运用qss样式设置图片。

其实头像也是一个QLabel控件，所以我们可以设置样式来将图片设置上去。

为什么头像是圆形的？是因为设置图片的同时，设置了圆角样式

border-radius:43px;  //圆角
border-image: url(:/dadaguai.png);  //头像