从零开始HTML+CSS精美简单界面，附教程代码(*^_^*)

先看结果：

点击后:

下面是详细过程：

制作页面有很多软件，我使用的是DW。
没有软件也可以，比如以下几个网站，进入可直接使用😂
https://wow.techbrood.com/
http://jsrun.pro/new

1、打开DW

只有一个元素，定义一个class=“box”，h1是用来定义标签，如图Login紧接着有两个输入框直接使用input，<inputtype=“text” placeholder=“Username” />中placeholder是输入框显示的名字。最后是一个按键，点击后可进入规定的网址。也可用button。

2、一下全部为样式定义style>

Margin定义外边框，上、右、下、左。

3、设计一个小黑框，之前定义的box

使用 transform:translate(-50%,-50%)的居中对齐

4、细化输入框 定义标题h1

text-transform: uppercase;调整字样字体为大写字母；

border-radius:25px;形成圆角，直接定义的input框是长方形，25px是圆角的大小。

5、定义LOGIN按钮

transition 具体解释

6、无聊的再加点工

background-repeat: no-repeat;背景不重复，以免图片小了，系统会自动填充

background-size: 130% auto;背景的大小

background: rgba(0,0,0,.8);背景rgb的颜色，加上a可控制透明度；还可以用backgro