2016年10月19日星期三

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <style>
        #container{
            /*宽度*/
            width:900px;
            /*高度*/
            height: 1200px;
            /*背景：图片横向复制*/
            background:url(./1.png) repeat-x;
            /*居中*/
            margin: 0 auto;
        }
        #yhdl{
            /*宽度*/
            width: 200px;
            /*高度*/
            height:60px;
            /*背景*/
            /*background-color: #888888;*/
            /*字体大小*/
            font-size:xx-large;
            /*字体颜色*/
            color: #FF0000;
            /*居中*/
            margin: 0 auto;
            /*文字水平居中*/
            text-align: center;
            /*文字垂直居中*/
            line-height: 60px;
        }
        #wrap{
            /*宽度*/
            width: 600px;
            /*高度*/
            height:200px;
            /*背景*/
            /*background-color: #00FFFF;*/
            /*居中*/
            margin: 0 auto;
        }
        #name{
            /*宽度*/
            width: 300px;
            /*高度*/
            height:50px;
            /*背景*/
            /*background-color: #FFFFFF;*/
            /*字体大小*/
            font-size:xx-large;
            /*居中*/
            margin: 0 auto;
            /*外边框*/
            margin-bottom: 30px;
        }
        #mail{
            /*宽度*/
            width: 280px;
            /*高度*/
            height:30px;
            /*背景*/
            /*background-color: #FFFFFF;*/
            /*字体大小*/
            font-size:small;
            /*居中*/
            margin: 0 auto;
            /*文字垂直居中*/
            line-height: 60px;
            /*外边框*/
            margin-bottom: 30px;
            /*绝对移动*/
            position: absolute;
            /*向左*/
            left: 240px;
        }
        #password{
            /*宽度*/
            width: 260px;
            /*高度*/
            height:20px;
            /*背景*/
            /*background-color: #FFFFFF;*/
            /*字体大小*/
            font-size:small;
            /*居中*/
            margin: 0 auto;
            line-height: 60px;
            /*上外边框*/
            margin-top: 35px;
            /*绝对移动*/
            position: absolute;
            /*向左*/
            left: 240px;
        }
        #tj{
            /*宽度*/
            width: 70px;
            /*高度*/
            height:30px;
            /*背景*/
            /*background-color: #000000;*/
            /*字体大小*/
            font-size:xx-large;
            /*居中*/
            margin: 0 auto;
            /*文字水平居中*/
            text-align: center;
            /*文字垂直居中*/
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="yhdl">
            用户登录
        </div>
        <div id="wrap">
            <div id="name">
                <form method="post" action="index.php">
                    <label for="name"></label><input id="name"type="text" name="name" value="" placeholder="请输入姓名">
                </form>
            </div>
            <div id="mail">
                <label for="mail"></label><input id="mail"type="text" name="mail" value="" placeholder="请输入邮箱">
            </div>
            <div id="password">
                <label for="password"></label><input id="password"type="text" name="password" value="" placeholder="请输入密码">
            </div>
        </div>
        <div id="tj">
            <label for="tj"></label><input type="submit" name="" value="提交">
        </div>
    </div>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!-- postition:relative
        相对于自身距离移动位置
     -->
     <!-- <div style="width: 200px;height: 200px;background:blue;position: relative;">
         
     </div> -->


     <!--  position: absolute
         绝对定位
        相对于具有
        position属性父级元素移动
        如果父级元素没有position属性就相对于body移动
     -->
     <div style="width: 700px;height: 700px;background:blue;position: absolute;top: 100px;left: 100px;">
         <div style="width: 500px;height: 500px;background:#FF0000;position: absolute;top: 100px;left: 100px;">
         <div style="width: 200px;height: 200px;background:#00FF00;">

         </div>
     </div>
     </div>
     
</body>
</html>





<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container{
            /*宽度*/
            width:600px;
            /*高度*/
            height: 1200px;
            /*背景：图片横向复制*/
            background:url(./2.jpg) repeat-x;
            /*居中*/
            margin: 0 auto;
            position: absolute;
        }
        #tpsm{
            /*宽度*/
            width: 600px;
            /*高度*/
            height: 100px;
            /*背景颜色*/
            background:blue;
            /*绝对移动*/
            position: absolute;
            /*向下*/
            top: 288px;
            /*向右*/
            left: 0px;
            /*透明度*/
            opacity: .4;
            /*字体大小*/
            font-size:xx-large;
            /*居中*/
            margin: 0 auto;
            /*文字水平居中*/
            text-align: center;
            /*文字垂直居中*/
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="tpsm">
            图片说明
        </div>
    </div>
</body>
</html>


                                                                                                  

                                                                                                                                     kitty