html-01-优快云博客

本文链接：https://blog.youkuaiyun.com/u011960171/article/details/102392230


<html style="font-size:16px">
    <head>
        <meta charset="utf-8">
        <title>登陆</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style type="text/css">
                *{
                    padding: 0;
                    margin: 0
                }
              .login{
                  /**
                    margin :auto ; 让元素水平居中
                    margin属性为给定元素设置所有四个（上下左右）方向的外边距属性

                    position: relative; 相对定位

                    rem  相对长度单位，相对于根元素(即html元素)font-size计算值的倍数
                    vh 相对于视口的高度。视口被均分为100单位的vh

                    login盒子的布局设置margin: auto水平方向居中，然后设置盒子的高度是30vh，距离上面top是35vh,那么距离下面也是35Vh,那么盒子也就在高度上面居中了。



                  **/
                margin: auto;
                width: 15rem;
                height: 30vh;
                 position: relative;
                 top: 35vh;
                 background-color: steelblue;
              }
              .user{
                    margin-top: 15px;
                     width:  15rem;
                     height: 50px;
                     /* border:1px; */
                     background:rgba(0, 0, 0, 0)
              }
              .pasw{
                     margin-top: 15px;
                     width: 15rem;
                     height: 50px;
                     background:none;
              }
              .loginbtn{
                  margin-top: 15px;
                  width: 15rem;
                  height: 50;
                  background-color: tomato;

              }
        </style>

        <script>
          function login(){
            // alert("跳转到图书列表");
            //在原页面上跳转
            //  window.location.href = "index.html";
            //新打开窗口跳转
             window.open("index.html");
          }
        </script>
    </head>
    <body background="1213.jpg">
        <!-- <table class="login" >
            <tr> -->
                <div class="login">
                        <input type="user" placeholder="请输入账号" class="user"><br>
                        <input type="password" placeholder="请输入密码" class="pasw"><br>
                        <button class="loginbtn" onclick="login()">登陆</button>
                </div>
         
        <!-- </tr>
        </table> -->
    </body>

    </html>

手机端布局需要添加：

<html>
<head>
<style type="text/css">
    h1{
        font-style: italic;
        text-align: left;
        font-size: 50px;
        margin-top:20px;
    }
    h3{
        font-family: "宋体"
    }

    h2{
        text-align: center;
        font-size: 30px  
    }
    .d11{
        align-content: center
    }
    

</style>
   
<script>

 function fun(){
        var imgObj = document.getElementById("imagew");
        // imgObj.src = "1213.jpg";
        var flag = (imgObj.getAttribute("src")=="1212.jpg");
        imgObj.src = flag?"1213.jpg":"1212.jpg";
        
        // location.href = "login.html";

        // if (imgObj.getAttribute("src")== "1213.jpg"){
        //     imgObj.src = "1212.jpg";
        // }else if(imgObj.getAttribute("src")=="1212.jpg") {
        //     imgObj.src = "1213.jpg"; 
        // }
    }
</script>
<meta charset="utf-8">
<title>好消息！ 高峰会快速通道还有最后一波机会!</title>
</head>
<body>
<a href="login.html">登陆</a>

<h1 class="h11">好消息！ 高峰会快速通道还有最后一波机会!</h1>
<h3>2018-11-24 17.21.19      作者：国联人寿</h3>
<h2>九十联动只剩下十多天时间了</h2>
<h2> 你是否开始全力冲刺目标了？</h2> 
<h2>这里有个好消息</h2>
<h2>快来看一看吧</h2>
<div align="center">
        <img src="1212.jpg" onclick="fun()" id="imagew">
</div>
<h2>最后十多天时间</h2>
<h2>抓紧时间踏上高峰会快速通道!</h2>
<h2>相约"三亚寻龙之旅"!</h2>






</body>




</html>