下面是原图
先来写html中的样式
先打开Dreamweaver，新建和html和css文档各一个，保存到相同的文件夹中，在html中引用css，然后开始写样式，新建一个“div”给它一个类‘group’在它里面再给一个“div”类名‘dzd’然后用img标签放入一张图片，‘p’标签内容为注册账号，两个input标签，内容分别为“账号”、“密码”下面一个“div”类名‘header’input标签，两个“div”分别包裹‘label’和‘p’标签，内容分别为‘下次自动登录’和‘忘记密码’。
来看看写完后的内容
接下来写css的样式
先把内外边距设置为0，然后给“hhh”设置一个字体颜色“color：#398bf7”
然后给“group”设置样式宽1366像素，高832像素，把背景图片放入，设置居中，还有一个相对定位
接下来给“dzd”设置样式宽387像素，高318像素，背景颜色“#fff”，圆角八个像素，一个决对定位，left502像素，top214像素。
给“dzd”里面的img标签设置样式，左边的外边距48像素，上边的外边距35像素。
给“dzd”里面的p标签设置样式字体大小12像素，左边的外边距290像素，上边的外边距-20像素，字体颜色“#80aef9”，再设置一个鼠标移入，图形变换。
给“dzd”里面的第一第二个input标签设置样式宽277像素，高30像素，字体大小14像素，一个像素的实线颜色为“d9d9d9”的变框，三个像素的圆角左边的外边距48像素，上边的外边距15像素，上边的内边距15像素，最后设置一个点击没蓝框。
给“dzd”里面第三个‘input’标签·设置样式。宽14像素，高14像素，左边的外边距50像素，上边的外边距20像素，一个相对定位，最后设置一个点击没蓝框。
下面给“header”样式宽291像素，高37像素，背景颜色“#398bf7”，八个像素的圆角，左边的外边距48像素，上边的外边距30像素，上边的内边距15像素。
接下来给“header”里面的‘p’标签里面的‘a’标签写样式，先把下划线隐藏，左边的外边距130像素，字体大小18像素，字体颜色白色，鼠标移入，图形变换。
然后给“header_rg”里面的‘label’标签写样式字体大小12像素，绝对定位，left65像素，top270像素。
最后给“header_sm”里面的‘p’标签写样式，字体大小12像素，左边的外边距280像素，上边的外边距-20像素，鼠标移入，图形变换。
来看看写完后的效果
