css实现漂亮的用户登录界面 CSS3 用户界面

css实现漂亮的用户登录界面

CSS是一种用于定义网页外观的样式表语言，它可以帮助我们创建漂亮的用户登录界面。在创建用户登录界面时，CSS可以帮助我们控制文本、字体、背景图片、边框、边距和其他元素的外观。

要创建一个漂亮的用户登录界面，首先要考虑使用合适的字体。字体大小和样式都会影响界面的外观，因此应该选择一个合适的字体来使界面看上去更加整洁。此外，还可以使用CSS来定义文本的对齐方式（左对齐、右对齐、居中对齐等），这样可以使文本看上去更加整洁。

其次，要考虑使用合适的背景图片来装扮界面。背景图片不仅可以使界面看上去很好看，而且还可以帮助人们理解所显示内容的意义。例如：如果是一个注册界面，可以使用一张注冊相关的背景图片来装扮界面。

此外，还可以使用CSS来定义表单元素的样式。例如：可以使用CSS来定义表单中文本字段、单选/多选/下拉列表字段、复选/单选/重置/submit 控制框等元素的大小、位置、背景图片、边框样式和其它样式信息。

input[type="text"] { 
    width: 200px; 
    height: 25px; 
    border: 1px solid #ccc; 
    padding: 5px; 
}  

最后要考虑是如何将所有元素布局在一起。这釰就要考虑如何将表单中各个元素之间进行布局了。例如：可以使用CSS中margin 和 padding 属性来定义表单中各个元素之间的间隔大小。

.form-group { 
    margin-bottom: 10px; 
} 

总之：CSS是一门很重要的语言；它不仅能够帮助我们创建出优雅耐看的用户界面；而且还能够帮助我们将所有元素布局地得当并保证数据准确性。

CSS3 用户界面

为创作者提供了将元素设置为图标等价物的能力。CSS3 用户界面

---

CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

在本章中，您将了解以下的用户界面属性：

• resize
• box-sizing
• outline-offset

---

浏览器支持

属性	浏览器支持
resize
box-sizing
outline-offset

Firefox、Chrome 以及 Safari 支持 resize 属性。

Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。

所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

---

CSS3 调整尺寸(Resizing)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

CSS代码如下：

实例

由用户指定一个div元素尺寸大小：

div
{
resize:both;
overflow:auto;
}

---

CSS3 方框大小调整(Box Sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

实例

规定两个并排的带边框方框：

div
{
box-sizing:border-box;
-moz-box-sizing:border-box;
width:50%;
float:left;
}

---

CSS3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

• 轮廓不占用空间
• 轮廓可能是非矩形

这个 div 在边框之外 15 像素处有一个轮廓。

The CSS code is as follows:

实例

规定边框边缘之外 15 像素处的轮廓：

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

---

新的用户界面特性

属性	说明	CSS
appearance	允许您使一个元素的外观像一个标准的用户界面元素	3
box-sizing	允许你以适应区域而用某种方式定义某些元素	3
icon	为创作者提供了将元素设置为图标等价物的能力	3
nav-down	指定在何处使用箭头向下导航键时进行导航	3
nav-index	指定一个元素的Tab的顺序	3
nav-left	指定在何处使用左侧的箭头导航键进行导航	3
nav-right	指定在何处使用右侧的箭头导航键进行导航	3
nav-up	指定在何处使用箭头向上导航键时进行导航	3
outline-offset	外轮廓修饰并绘制超出边框的边缘	3
resize	指定一个元素是否是由用户调整大小	3