点击进入：一个不得了的网站

废话不多说，直接看图！

效果2

第一步（可以先把背景图搞出来，当然你也可以先画主体，最后在搞背景，看自己心情嘛）

<style>
html body {margin: 0;padding: 0;}       
body { 
        /*no-repeat 是背景图片，且只显示一次*/
        background: url(img/img.jpg) no-repeat;         
        /*背景图片完全覆盖背景区域*/
        background-size: cover; 
        }
</style>

上面代码写完，就会出现这个效果了

背景图片

现在呢，画主体，（先画一个框，并且在屏幕中间）

主体

视觉上的效果？用到了什么技术呢？

（1）背景颜色（透明）
（2）四个角都有弧度
（3）有阴影效果（鼠标放在这个盒子上面，出现阴影）
（4）居中显示，

那么好，知道了这些，开始写代码

//页面
<body>
        <div class="head">

        </div>
</body>
//css部分
<style>
.head {
            margin: 50px auto;/*高度50px,居中*/
            width: 400px;/*盒子长*/
            height: 350px;/*盒子宽*/           
            border: 1px solid #999999;/*颜色为灰色的1px宽度的实线边框（显示盒子）*/
            background-color: #333333;/*盒子的背景颜色*/
            opacity: 0.5;/*透明度0为完全透明，1是不透明，*/
            border-radius: 10%;/*设置圆形(4个角的弧度)*/
        }
/*hover 鼠标移动到div上时*/
div:hover {
            -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
            /*鼠标移动是过渡*/
            box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影，效果发光*/
        }
//强制转换字体颜色
        ::-webkit-input-placeholder {
            color: #fff;
        }
        
        :-moz-placeholder {
            color: #fff;
        }
        
        ::-moz-placeholder {
            color: #fff;
        }
        
        :-ms-input-placeholder {
            color: #fff;
        }
</style>

然后呢！里面有3个输入框和一个按钮

//页面
    <body>
        <div class="head">
            //required必须填写的字段，placeholder 默认提示信息
            <input placeholder="请输入你的用户名" required/>
            <input placeholder="请输入你的密码呦" required/>
            <input placeholder="请输入你的手机号" required/>
            <button>登录</button>
        </div>
    </body>

效果

上面的问题

（1）不是一个标签占一行
（2）主要问题不美观（贼难看）
（3）怎么让它变的美观一些呢，看下面代码

<style>
    input {
            width: 300px;
            display: block;/*设置成块级元素，独占一行*/
            margin: 30px auto;/*外边距30px，输入框居中*/
            padding: 10px;/*设置内边距*/
            text-align: center;/*文字居中*/
            border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
            border-radius: 10px;/*让长方形的4个小弯一点，*/            
            font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
            font-size: 18px;/*字体大小*/
            //你点击输入框，会出现一个边框，下面代码是去掉原来边框            
            outline: none;
            background-color: #5E5E5E;/*输入框的背景颜色*/
        }
      button {
            width: 100px;/*设置按钮的长度*/
            margin: 10px;/*外边距*/
            padding: 10px;/*内边距*/
            border-radius: 10px;/*设置圆形*/            
            text-align: center;/*文字居中*/         
            font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
            font-size: 18px;/*字体大小*/
            float: right;/*向右浮动*/
            border: 1px solid #269ABC;/*把输入框包起来，变成长方形*/
            outline: none;/*和上面一样*/
            color: #fff;/*字体的颜色*/
            background-color: #269ABC;/*背景颜色*/
        }
</style>

效果

下面还是写特效的代码

hover 鼠标移动到目标上触发
focus 鼠标点击，获取焦点时触发

input:focus {
            border: 2px solid #269ABC;/*4边更换颜色*/
            box-shadow: 0px 0px 10px #ADADAD;/*4边出现阴影*/
            background-color: #333333;/*更换背景颜色，看出效果*/
        }
button:hover{
            border-left: 20px solid  #E8E8E8 ;/*目标左侧变宽*/
            border-right: 20px solid  #E8E8E8 ;/*目标右侧变宽，*/
            background-color: #5E5E5E;/*更换颜色*/
        }