CSS前端样式设计概述

CSS 介绍
CSS(Cascading Style Sheets)通常称为 CSS 样式或层叠样式表,是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)以及版面的布局等外观显示样式的计算机语言,CSS 文件扩展名为 .css。

样式:给 HTML 标签添加需要显示的效果。
层叠:使用不同的添加方式,给同一个 HTML 标签添加样式,最后所有的样式都叠加到一起,共同作用于该标签。
CSS 可以使 HTML 页面更好看,CSS 色系的搭配可以让用户更舒服,CSS + DIV 布局更佳灵活,更容易绘制出用户需要的结构。


CSS 样式规则
CSS 样式规则需要写在一个 **style(样式)**标签中

CSS 样式规则由两个主要的部分构成:选择器,以及一条或多条声明

选择器通常是需要改变样式的 HTML 元素

选择要添加 CSS 样式的 html 标签的方式:根据标签的名称,标签的 id 属性值,标签的 class 属性值等方式

每条声明由一个属性和一个值组成

属性(property)是希望给标签设置的样式属性(style attribute),例如大小,颜色等。

每个属性有一个值。属性和值被冒号分开。

  • 格式:
    <style type="text/css">
        选择器{
            属性名:属性值;
            ...
            属性名:属性值;
        }
    </style>
    

    CSS 声明总是以分号 ; 结束,声明总以大括号 {} 括起来

  • CSS注释:

CSS注释以 /* 开始, 以 */ 结束,实例如下:

/*这是个注释*/

 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式规则</title>
    <style type="text/css">
        /*使用标签选择器:根据标签名称选择到对应的标签*/
        h1{
            /*给h1标签添加一个字体颜色*/
            color: red;
        }
        h2,div{
            /*字体颜色*/
            color: blue;
            /*字体大小*/
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>我是一个h1标题标签</h1>
    <h1>我是一个h1标题标签</h1>
    <h1>我是一个h1标题标签</h1>
    <h2>我是一个h2标题标签</h2>
    <div>我是div标签</div>
</body>
</html>

引入 css 样式的方式
方式1:行内样式:在标签上直接写 style 属性,属性值就是要设置的样式

格式:

<标签 style="属性名:属性值;属性名:属性值;属性名:属性值;..属性名:属性值;"></标签>


作用域:只针对当前的标签有效

方式2:内部(内嵌)样式:在页面中创建一个 style 标签,在标签中写 css 的样式规则

格式:

<style type="text/css">
    选择器{
        属性名:属性值;
        ...
        属性名:属性值;
    }
</style>


作用域:在当前页面中,针对选择器选择到的所有标签都有效

方式3:外部(外联)样式:把 css 的样式规则,写在一个以 .css 结尾的文件中

需要在 html 中使用 link 标签引入外部的 css 文件使用

格式:

<link href="外部css文件的路径" type="text/css" rel="stylesheet" />


href=“外部css文件的路径” :css 文件一般都放在当前项目的 css 文件夹中,所以一般使用相对路径
type=“text/css” :说明引入的文件是文本类型的 css 文件(固定写法),可省略
rel=“stylesheet” :stylesheet:样式表,说明引入的 css 文件,是 html 文件的一个样式表(固定写法)
作用域:css 文件可以被多个页面同时引用,哪个页面引用的,对哪个页面中的标签有效

样式的优先级:行内样式 > 内部样式|外部样式(内部和外部写在后边的样式会覆盖前边的样式)

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入css样式的方式</title>
</head>
<!--内部(内嵌)样式-->
<style>
    /*选择所有的h1标签*/
    h1{
        color: pink;
    }
</style>
<!--外部(外联)样式-->
<link href="css/1.css"  rel="stylesheet"/>
<body>
    <!--1.行内样式-->
    <div style="color: red;font-size: 20px">我是一个div</div>
    <div style="color: green">我是一个div</div>
    <div style="color:yellow;">我是一个div</div>
    <!--2.内部(内嵌)样式-->
    <h1 style="color: gold">我是h1标题标签</h1>
    <h1>我是h1标题标签</h1>
</body>
</html>

CSS 的选择器

使用何种方式选择要添加样式的 html 标签

基本选择器(元素、id、class 选择器)

元素(标签,标记)选择器:根据元素(标签,标记)的名称,选择对应的元素

格式:元素(标签,标记)的名称{属性名:属性值;...}

示例:

<h1></h1>   	选择器: h1{属性名:属性值;...}
<div></div>   	选择器: div{属性名:属性值;...}

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

需要给元素添加一个 id 属性,通过 id 的属性值选择到元素

格式:#元素id的属性值{属性名:属性值;...}

示例:

<h1 id="d001"></h1>
<div id="d002"></div>

选择器:#d001{属性名:属性值;...}

注:

html 标签的 id 属性不要以数字开头,数字开头的 id 在 Mozilla/Firefox 浏览器中不起作用

不可以给多个 html 元素添加相同的 id 属性值,id 在页面中具有唯一性

如果多个元素的 id 属性值是相同的,JavaScript 可能会出错

class(类)选择器

class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用

需要给元素添加一个 class 属性,通过 class 的属性值选择到元素

格式:.元素的class属性值{属性名:属性值;...}

示例:

<h1 class="cpdd"></h1>
<div class="cpdd"></div>

选择器: .cpdd{属性名:属性值;...}

注:

**类名的第一个字符不能使用数字!**它无法在 Mozilla 或 Firefox 中起作用。

多个 class 选择器可以使用空格分开

可以指定特定的 HTML 元素使用 class

例如:所有的 p 元素使用 class=“center” 让该元素的文本居中

p.center {text-align:center;}

扩展选择器(属性、包含、伪类选择器)
属性选择器:在一个标签选择器后面使用中括号标记,是对一组标签进一步过滤

语法格式:标签选择器[标签属性=’标签属性值’]{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

包含选择器:两个标签之间使用空格,给指定父标签的后代标签设置样式,是对一个标签内部所有后代标签进一步过滤

格式:父标签选择器 后代标签选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的扩展选择器</title>
    <style>
        /*input{
            !*背景色*!
            background-color: green;
        }*/
        /*给type="text"标签添加样式*/
        input[type='text']{
            background-color: green;
        }
        /*给type="password"标签添加样式*/
        input[type='password']{
            background-color: pink;
        }

        /*2.包含选择器(子父类选择器)*/
        /*给div中的div添加样式*/
        div div{
            color: yellow;
        }
        #d001 h3{
            color: aqua;
        }
    </style>
</head>
<body>
    <!--1.属性选择器-->
    <input type="text" name="username"/>
    <input type="password" name="password"/>

    <!--2.包含选择器(子父类选择器)-->
    <div>我是div</div>
    <div id="d001">
        <div>我是div中的div</div>
        <h3>我是div中的h3</h3>
    </div>
</body>
</html>

伪类选择器
伪类选择器:描述一个元素的特殊状态

由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类。

常用的伪类选择器:

动态伪类选择器

:link :元素被定义了超链接但并未被访问过
:visited :元素被定义了超链接并已被访问过
:active :元素被激活
:hover :鼠标悬停
:focus :元素获取焦点
注:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后;a:active 必须被置于 a:hover 之后。所以,a 标签的这四种伪类选择器的顺序为:a:link ,a:visited,a:hover ,a:active。必须严格按照此规则来设置属性,否则无效。

UI 元素状态伪类选择器

:checked :选中的复选按钮或者单选按钮表单元素
:enabled :所有启用的表单元素
:disabled :所有禁用的表单元素
注:UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作,最常见的使用方式如设置 "type=“text” 有 enable 和 disabled 两种状态,enable 为可写状态,disabled 为不可状态。

结构伪类选择器

:fisrt-child :父元素的第一个子元素
:last-child :父元素的最后一个子元素的元素
:root :元素所在文档的根元素。在 HTML 文档中,根元素始终是 html,此时该选择器与 html 类型选择器匹配的内容相同
:nth-child(n) :父元素的第 n 个子元素。其中 n 可以是整数(1,2,3)、关键字(even,odd)、也可以是公式(2n+1),而且 n 值起始值为 1,而不是 0。
:nth-last-child(n) :父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反,但使用方法都是一样的,其中 :nth-last-child(1) 始终匹配最后一个元素,与 last-child 等同。
:nth-of-type(n) :父元素内具有指定类型的第 n 个元素
:nth-last-of-type(n) :父元素内具有指定类型的倒数第 n 个元素
:first-of-type :父元素内具有指定类型的第一个元素,与 nth-of-type(1) 等同
:last-of-tye :父元素内具有指定类型的最后一个元素,与 :nth-last-of-type(1) 等同
:only-child :父元素只包含一个子元素,且该子元素匹配元素
:only-of-type :选择父元素只包含一个同类型子元素,且该子元素匹配选择元素
:empty :选择没有子元素的元素,而且该元素也不包含任何文本节点
注:使用结构伪类选择器的好处是可以根据元素在文档中所处的位置,来动态地选择元素,从而减少 HTML 文档对 id 或类的依赖,有助于保持代码干净整洁。另外需要注意的是,在结构伪类选择器中,子元素的序号是从 1 开始的。

否定伪类选择器

E:not(F) :选择所有除元素 F 外的 E 元素
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的扩展选择器</title>
    <style>
        /*伪类选择器*/  
        a:link {color: #FF0000}	/* 未访问的链接 */
        a:visited {color: #00FF00}	/* 已访问的链接 */
        a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
        a:active {color: #0000FF}	/* 选定的链接 */
    </style>
</head>
<body>
    <a href="http://www.itcast.cn" target="_blank">点击我到传智</a>
</body>
</html>

CSS 常用样式

颜色属性

常见样式的颜色属性:

  • color:定义文本的颜色
  • border-color:定义边框的颜色
  • background-color:设置背景色

颜色属性值设置方式:

  • 十六进制值 - 如:#FF0000
  • 一个RGB值 - 如:RGB(255,0,0)
  • 颜色的名称 - 如:red

边框和尺寸

边框:定义元素的边框

常用属性:

border-style:定义边框的样式

属性值:

none:默认,无边框
dotted:定义一个点线边框
dashed:定义一个虚线边框
solid:定义实线边框
double:定义两个边框。 两个边框的宽度和 border-width 的值相同
groove:定义3D沟槽边框。效果取决于边框的颜色值
ridge:定义3D脊(山脊)边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset:定义一个3D突出边框。 效果取决于边框的颜色值

border-style 属性可以有 1-4 个值:

4 个值:上 下 左 右

示例:border-style:dotted solid double dashed;

上边框是 dotted,右边框是 solid,底边框是 double,左边框是 dashed

3 个值: 上 左右 下

示例:border-style:dotted solid double;

上边框是 dotted,左、右边框是 solid,底边框是 double

2 个值:上下 左右

示例:border-style:dotted solid;

上、底边框是 dotted,右、左边框是 solid

1 个值:上下左右

示例:border-style:dotted;

四面边框是 dotted

border-color:定义边框的颜色。属性值详见颜色属性

注意: border-color 单独使用是不起作用的,必须得先使用 border-style 来设置边框样式

border-width:定义边框的宽度

为边框指定宽度的方式:

方法1:可以指定长度值,比如 2px 或 0.1em(单位为 px,pt,cm,em 等)
方法2:使用 3 个关键字之一,分别是 thick 、medium(默认值) 和 thin
**注意:**CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

border:同时设置元素的 4 个边框(上下左右)的颜色,尺寸(像素),格式。不区分先后顺序

单独设置各边

border-top:设置上边框
border-right:设置右边框
border-bottom:设置下边框
border-left:设置左边框
border-radius:设置四个角(左上,右上,右下,左下)边框从多少像素开始圆滑

border-collapse:设置表格的边框是否被折叠成一个单一的边框或隔开。一般设置一个值全部应用

尺寸:设置元素的高度和宽度

width:设置元素的宽度,单位可以是像素(px)、百分比(%)或其他可用单位

像素(px):固定值

注:

屏幕(显示器)实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
所以同样的 200px 在不同的设备下显示效果不一样
百分比(%):相对于父元素的大小。这种方式可以实现响应式布局。

自适应长度:使用 auto 属性值来让元素自适应父元素的大小

比如将图片的 width 属性设置为 80%,然后 height 属性将其高度设置为 auto,让其自适应父元素的大小,这样可以保持图片的宽高比例,并且不会出现变形。

em:相对于元素的字体大小来计算

1em = 1font-size

em 会根据字体大小的改变而改变

rem:相对于根元素 <html> 的字体大小来计算

height:设置元素的高度,单位可以是像素(px)、百分比(%)或其他可用单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框和尺寸</title>
    <style>
        div{
            /*给div添加边框*/
            border: 1px red solid;
            border-bottom: 10px green double;
            border-left: 5px ridge;
            /*给div设置尺寸*/
            width: 300px;
            height: 100px;
        }
        span{
            /*给span标签添加边框*/
            border: red solid 2px;
            /*给span添加边框圆角*/
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <span>我是一个span</span>
</body>
</html>

行内|行间 转换属性
display:可以把行间元素和行内元素相互转换,还可以隐藏元素

行间元素:占用 html 中的一行

例如:h1-h6,ul,ol,div …

行内元素:占用一行中的一部分

例如:span,img,a …

display 的属性值:

inline:设置元素为行内元素(行内元素默认 display 的属性值)
block:设置元素为行间元素(行间元素默认 display 的属性值)
none:设置隐藏元素(不在 html 页面中显示,也不会占用空间)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换属性</title>
    <style>
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div>我是一个div,我会占用一行</div>
    <!--使用display属性inline把div转换为行内元素-->
    <div style="display: inline">我是一个div,我只占用一行的一部分</div>
    <span>我是一个span,我只占用一行的一部分</span>
    <!--使用display属性block把span转换为行间元素-->
    <span style="display: block">我是一个span,我会占用一行</span>
    <!--使用display属性none隐藏标签-->
    <span style="display: none">我是隐藏起来的标签,你看不到我</span>
    <img style="display: none" src="img/2.jpg" height="100px" width="80px">
</body>
</html>

文本格式
color:设置字体颜色。属性值详见颜色属性

text-align:文本的对齐方式

属性值:

center:居中
left:对齐到左
right:对齐到右
justify:两端对齐
text-indent:指定文本的第一行的缩进,单位为像素 px

text-align:对齐元素中的文本

text-shadow:设置文本阴影

text-decoreation:设置或删除文本的装饰。主要是用来删除链接的下划线

none:取消文字的下划线
text-transform:文本转换。指定在一个文本中的字母变成大写或小写字母,或每个单词的首字母大写

uppercase:大写字母
owercase:小写字母
capitalize:单词首字母大写
line-height:设置行高

letter-spacing:设置字符间距

word-spacing:设置字间距

vertical-align:设置元素的垂直对齐

white-space:设置元素中空白的处理方式

unicode-bidi:设置或返回文本是否被重写

direction:设置文本方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
</head>
<body>
    <a href="http://www.itheima.com" target="_blank" style="color: red">我是红色的超链接</a><br/>
    <a href="http://www.itheima.com" target="_blank" style="text-decoration: none">我是没有下划线的超链接</a>
</body>
</html>

字体样式
font-family:设置文本的字体系列(幼圆,宋体,楷体)

注意:

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,则将尝试下一种字体

多个字体系列是用一个逗号分隔指明

如果字体系列的名称超过一个字,它必须用引号,如 Font Family:“宋体”

font-size:设置字体大小

能否管理文字的大小,在网页设计中是非常重要的。但是,不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。务必使用正确的 HTML 标签,就 <h1> - <h6> 表示标题和 <p>表示段落

如果不指定一个字体的大小,默认大小和普通文本段落一样,是 16 像素(16px=1em)

字体大小的值可以设置为绝对或相对的大小:

绝对大小:

设置一个指定大小的文本,单位为像素 px
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小:

  • 相对于周围的元素来设置大小,单位为 em

    1em的默认大小是16px

  • 允许用户在浏览器中改变文字大小

使用百分比和 em 组合可以在所有浏览器中显示相同的文本大小,并允许所有浏览器缩放文本的大小:

设置 <body>元素的默认字体大小的是百分比

示例:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
</head>
<body>
    <a href="http://www.itheima.com" target="_blank" style="font-size: 50px">我是50px大小的超链接</a><br/>
    <a href="http://www.itheima.com" target="_blank" style="font-weight: bold">我是粗体的超链接</a><br/>
    <a href="http://www.itheima.com" target="_blank" style="font-style: italic">我是斜体的超链接</a><br/>
    <a href="http://www.itheima.com" target="_blank" style="font-style: italic;font-weight: bold;color: green">我是粗体斜体绿色的超链接</a><br/>
    <a href="http://www.itheima.com" target="_blank" style="font-family: 楷体">我是楷体的超链接</a><br/>
</body>
</html>

背景色和背景图片
background-color:设置背景色。属性值详见颜色属性
background-image:url(图片的地址)设置背景图片
background-repeat:no-repeat(背景图片不平铺)
background-position:top 0px right 0px(背景图片位置 右上角)
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景色和背景图片</title>
</head>
<!--给整个body添加一个背景图片-->
<body style="background-image: url(img/bg.jpg);background-repeat:no-repeat;background-position: top 30px right 100px">
    <!--给div添加一个背景色-->
    <div style="border: 1px red solid;background-color: pink;width: 300px; height: 500px">我是一个div</div>
    <!--给提交按钮添加背景色-->
    <input type="submit" value="用户注册" style="background-color: gold;color: white">
</body>
</html>

链接样式
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示。链接的样式,可以用任何 CSS 属性(如颜色,字体,背景等)。

四个链接状态:

a:link:正常,未访问过的链接
a:visited:用户已访问过的链接
a:hover:当用户鼠标放在链接上时
a:active:链接被点击的那一刻

注意:当设置为若干链路状态的样式时,也有一些顺序规则:

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

案例:

<style>
    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */
</style>
<a href="http:\\www.itcast.cn" target="_blank">点击我到传智</a>

CSS 的盒子模型
CSS 的盒子模型:可以把 html 中的任意元素,都可以看成是被一个盒子包裹起来

盒子的外边距:设置这个盒子到其他盒子之间的距离,或者设置盒子到 body 框的距离

使用 css 的属性(margin)设置外边距:

margin:同时设置4个外边距
margin-top:设置上外边距
margin-right:设置右外边距
margin-bottom:设置下外边距
margin-left:设置左外边距
盒子的内边距:设置盒子边框到盒子中内容的距离

使用 css 的属性(padding)设置内边距(填充):

padding:同时设置4个内边距
padding-top:设置上内边距
padding-right:设置右内边距
padding-bottom:设置下内边距
padding-left:设置左内边距

★总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

★总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的盒子模型</title>
    <style>
        div{
            /*设置div的边框和尺寸*/
            border: 1px solid red;
            width: 300px;
            height: 200px;
            /*设置div的外边距*/
            margin: 50px;	/*同时设置4个外边距为50px*/
            margin-left: 100px;		/*设置左外边距100px*/
            margin: 50px 100px;		/*上下50px 左右100px*/
            margin: 50px 100px 150px;	/*顺时针上50px 右100px 下150px 左100px*/
            margin: 50px 100px 150px 200px;	/*顺时针上50px 右100px 下150px 左200px*/
            margin: 50px auto;	/*上下50px 左右auto会自动居中*/
            /*设置div的内边距*/
            padding: 50px;	/*同时设置4个内边距为50px*/
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>
</html>

案例--邮箱申请页面渲染:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邮箱申请</title>
  <style>
    @charset "utf-8";

    /* CSS Document */
    /***初始化样式***/
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    li,
    ol,
    p,
    dl,
    dt,
    dd,
    span,
    strong,
    i,
    em,
    a,
    img {
      margin: 0;
      padding: 0;
      border: 0;
    }

    body {
      font: 12px/22px "Microsoft YaHei", "SimSun", "arial";
      color: #666666;
      background-size: 45%;
      margin: 0;
    }

    li,
    ol {
      list-style: none;
    }

    a {
      text-decoration: none;
      font: 14px/22px "Microsoft YaHei", "SimSun";
      color: #666666;
    }

    a:hover {
      color: #cd0200;
      text-decoration: underline
    }

    input,
    button,
    select,
    textarea {
      outline: none
    }

    body a {
      outline: none;
    }

    /*去除低版本浏览器 a焦点虚框*/
    .center {
      width: 1000px;
      margin: 0 auto;
    }

    .center1 {
      width: 600px;
      margin: 50px auto;
    }

    .clear {
      clear: both;
    }

    input {
      background: #e7f3fd;
    }

    .form-text input:focus {
      background: #fff;
      border: 1px solid #0b90e5;
    }

    .form-text input.er {
      background: #fff6b7;
      border: 1px solid #f00;
    }

    b {
      color: red;
      margin-left: 20px;
    }

    .body {
      background: #efefef;
    }

    .warp {
      width: 700px;
      margin: 50px auto;
      border: 1px solid #ddd;
      background: #fff;
      padding: 40px;
    }


    .form {
      width: 650px;
      margin: 0 auto;
    }

    .form-title {
      margin: 10px 0;
      border-bottom: 1px solid #ddd;
    }

    .form-title span {
      font-size: 18px;
      color: #616161;
      height: 25px;
      line-height: 25px;
      border-left: 3px solid #59AfE4;
      padding: 0 0 0 10px;
      display: inline-block;
      margin: 5px 0;
    }

    .form-main {
      overflow: hidden;
    }

    .form-list {
      margin: 0px auto;
      position: relative;
    }

    .form-list span {
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      font-size: 14px;
      color: #333;
      width: 90px;
      text-align: right;
      line-height: 46px;
    }

    .form-text {
      margin: 0 0 0 100px;
      width: 340px;
      line-height: 46px;
      display: inline-block;
    }

    .form-text input,
    .code input {
      width: 100%;
      border-radius: 3px;
      border: 1px solid #ccc;
      line-height: 30px;
      text-indent: 6px;
      color: #333;
      box-shadow: 1px 1px 3px #ddd inset;
    }

    .ortherinput {
      margin: 0 0 0 100px;
      width: 340px;
      line-height: 46px;
      display: inline-block;
    }

    .pwsbox {
      display: none;
      width: 1760px;
      overflow: hidden;
      height: 40px;
      margin: -10px 0 0 0;
    }

    .pwsbox h6 {
      width: 150px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      color: #666;
      font-size: 12px;
      margin: 0;
      padding: 0;
    }

    .form-list .pwsbox h6 span {
      display: inline-block;
      width: 70px;
      height: 10px;
      margin: 4px;
      background: url(../images/pwd_sprite.png) no-repeat 0 0;
      background-position: 0 -102px;
      position: static
    }

    .form-list .pwsbox h6.bg1,
    .form-list .pwsbox h6.bg2 {
      color: #61d01c;
    }

    .form-list .pwsbox h6.bg1 span {
      background-position: 0 -144px;
    }

    .form-list .pwsbox h6.bg2 span {
      background-position: 0 -190px;
    }

    .pwsbox p {
      font-size: 12px;
      line-height: 16px;
      margin: 0 4px;
    }

    #belong i {
      background: none;
      display: inline-block;
      font-style: normal;
      width: auto;
      padding: 0 10px 0 0;
      line-height: 20px;
    }

    #code {
      display: none;
    }

    .form-text div {
      float: left;
      margin: 0 10px 0 0;
      position: relative;
    }

    .gender,
    .gender .form-text,
    .gender span {
      height: 26px;
      line-height: 26px;
    }

    .gender label input {
      width: 13px;
      height: 13px;
      float: left;
      margin: 6px;
    }

    .gender label {
      display: inline-block;
      margin-right: 10px;
    }

    .form-text div ul {
      display: none;
    }

    .prompt {
      padding: 5px 0 5px 100px;
    }

    .prompt p {
      line-height: 20px;
      color: #666;
    }

    .prompt p a {
      line-height: 20px;
      color: #4099d6;
      font-size: 12px;
      margiN: 0 10px;
    }


    .code {
      padding: 5px 0 5px 100px;
      width: 340px;
      line-height: 46px;
      overflow: hidden;
      height: 46px;
      display: none;
    }

    .code input {
      width: 170px;
      float: left;
    }

    .code span {
      width: 150px;
      text-align: center;
      display: inline-block;
      line-height: 34px;
      border-radius: 3px;
      background: #fff;
      color: #444;
      font-size: 15px;
      border: 1px solid #d0dae3;
      padding: 0;
      cursor: pointer;
    }

    .submit {
      text-align: center;
      width: 340px;
      margin: 0 0 0 100px;
    }

    .submit input {
      float: left;
      margin-right: 10%;
      color: #fff;
      background: #69b946;
      border: 1px solid #69b946;
      border-radius: 3px;
      line-height: 40px;
      width: 40%;
      height: 40px;
      font-size: 18px;
      font-family: "微软雅黑";
    }

    .submit input.no {
      cursor: pointer;
      background: #f4f9fd;
      color: #888;
      cursor: default;
      border: 1px solid #d0dae3;
    }

    #reset {
      background-color: #888;
      border: 1px solid #888;
    }

    .deal {
      width: 340px;
      margin: 20px 0 0 100px;
      position: relative;
    }

    .deal p {
      line-height: 25px;
      color: #666;
      font-size: 12px;
    }

    .deal p input {
      width: 15px;
      height: 15px;
      float: left;
    }
  </style>
</head>

<body>
  <div class="warp">
    <form>
      <div class="form" id="form" name="myform" action="#" method="get">
        <div class="form-title">
          <span>邮箱申请</span>
        </div>
        <div class="form-main">
          <div class="form-list">
            <span>邮箱</span>
            <div class="form-text">
              <input type="text" id="email">
            </div><b id="email_msg"></b>
          </div>
          <div class="form-list">
            <span>用户名</span>
            <div class="form-text">
              <input type="text" id="user" />
            </div>
            <b id="user_msg"></b>
          </div>
          <div class="form-list">
            <span>密码</span>
            <div class="form-text">
              <input type="password" id="password" />
            </div><b id="password_msg"></b>
          </div>
          <div class="form-list">
            <span>确认密码</span>
            <div class="form-text">
              <input type="password" id="password1" />
            </div><b id="password1_msg"></b>
          </div>
          <div class="form-list">
            <span>手机号</span>
            <div class="form-text">
              <input type="text" id="mobile">
            </div>
            <b id="mobile_msg"></b>
          </div>
          <div class="submit">
            <input type="submit" id="submit" value="提交" />
            <input type="reset" id="reset" value="重置" />
          </div>
        </div>
    </form>
  </div>
  </div>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值