HTML+CSS实现登录转跳（无后台）

最新推荐文章于 2024-07-30 13:53:39 发布

YuBingbai

最新推荐文章于 2024-07-30 13:53:39 发布

阅读量1.1w

点赞数 15

文章标签： HTML CSS 前端无后台页面跳转

本文链接：https://blog.csdn.net/wangwangshuibingbing/article/details/96353976

版权

HTML+CSS实现登录转跳（无后台）

块元素/内敛元素
横着放置div元素
选择符使用技巧：
伪类
鼠标悬停修改样式
文本竖直居中

基本知识点

块元素/内敛元素
两者区别:

1.块元素默认占全屏，内联元素只占文本内容大小
2.块元素可设置宽高，内联元素宽高无效
3.块元素强制下一个元素换行，内联元素显示在同一行直到放满自动换行
4.可以相互转换
    display: inline;---把块变成内敛元素
    display: block;----把内敛变成块
    display: inline-block;保持内联元素特性的情况下可以设置宽高
    （都是CSS属性）

横着放置div元素？

float: left; //左对齐 
float: right;//右对齐
.nav li a:hover{}  ---伪类(鼠标悬停修改样式)
line-height: 30px;文本竖直居中行间距属性值必须等于容器的高度值
box-shadow: 5px 5px 5px black;//元素阴影
text-shadow: 5px 5px 5px black;//文本阴影
text-decoration: none;//去下划线

选择符使用技巧：

id选择符:style中使用在大模块
         JS中，单一事件使用id
类选择器:style中推荐使用;可重用性

横着放置div元素在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航</title>
        <style>
            .nav li{
                list-style-type: none;
                /* 除去前面的点 */
                float: left;
                /*如果为 float:right;则为右对齐*/
                text-align: center;
                line-height:10px;
                /* 行间距 */
            }
            .nav li a{
                border: 1px solid white;
                width: 100px;
                height: 30; 
                display: block;
                color: cadetblue;
                /* 文字颜色 */
                background-color: aqua;
                border-radius: 8px;
                padding: 20px 20px;
                box-shadow: 5px 5px 5px black;
                text-decoration: none;
                /* 去下划线 */
            }
            .nav li a:hover{
                color: #000;//改变字体颜色
                background-color: antiquewhite;//改变背景颜色
                //伪类   改变元素在有有鼠标时候的状态
            }
        </style>
    </head>
    <body>
        <div>
            <ol class="nav">
                <li><a href="##">首页</a></li>
                <li><a href="##">活动</a></li>
                <li><a href="##">充值</a></li>
                <li><a href="##">会员</a></li>
                <li><a href="##">视频</a></li>
            </ol>
        </div>
    </body>
</html>

代码

注意这里的登录是

<button id="denglu"><a id="tiaozhuan" href="##">登录</a></button>

所以在点击登录时要点击“登录”这两个字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
        <style>
            body{
                
                background-image: url(img04.png);
                background-repeat: repeat-y;
                background-size:100% 100%;
                background-attachment: fixed;
            }
            .form{
                margin: 0 auto;
                margin-top: 100px;  
                text-align: center;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                background:rgba(255,255,255, 0.3);
               //背景透明
                
            }
            .form h4{
                border-bottom: 1px dotted black;
            }
            .form p{
                display: block;
                height: 50;
                padding: 5px;
                
            }
            .form span{
                display: block;
                color: #999;
                display: none;
            }
            .form button{
                width: 80%;
                height: 25px;
                border-radius: 50px;
                background-color: darkgreen;
                color: #ddd;
                cursor: pointer;
                /* 鼠标变成小手 */
            }
            .form a{
                color:#ddd;
                text-decoration: none;
            }
        </style>
    </head>
    <body> 
        <form class="form">
            <h4>登录</h4>
            <p>
                <label for="user">账户</label>
                <input type="text" id="username" placeholder="请输入账号" value="">
            </p>
            <p>
                <label for="pwd">密码</label>
                <input type="password" id="pwd" placeholder="密码" value="">
            </p>
            <p>
                <input type="checkbox" id="chk"/>记住密码
                <span id="spa">请确认是安全是PC</span>
            </p>
            <p>
                <button id="denglu"><a id="tiaozhuan" href="##">登录</a></button>
                <button id="quxiao">取消</button>
            </p>
        </form>
        <script>
            var chk=document.getElementById("chk");
            var spa=document.getElementById("spa");
            var btn1=document.getElementById("denglu");
            var btn2=document.getElementById("quxiao");
            var username=document.getElementById("username");
            var pwd=document.getElementById("pwd");
            var a=document.getElementById("tiaozhuan");
            chk.onmouseout=function(){
                spa.style.display="none";
            }
            chk.onmouseover=function(){
                spa.style.display="block";
            }
            btn1.onclick=function(){
                if(username.value=="" && pwd.value=="") {
                    alert("账号或密码不为空");
                }else{
                    if(username.value=="admin" && pwd.value=="888"){
                        alert("登录成功");
                        a.href="demo 10.html";
                        //转跳的HTML页面需要与当前HTML页面在一个文件夹中   各种图片也是
                    }else{
                        alert("账号或密码错误");
                    }
                }    
            }

        </script>
    </body>
</html>

转跳页面代码（模拟微信）

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>微信</title>
        <style>
            #all{
                margin: 0px;
                padding: 0px;
            }
            #box{
                margin: 0 auto;
                margin-top: 200px;
                border: 1px solid red;
                width: 300px;
                height: 450px;
                background-image: url(loadingbg.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                border-radius: 20px;
            }
            .head{
                border: 1px solid black;
                background-color: black;
                color: #ddd;
                text-align: center;
                line-height: -8px;
                width: 100%;
                height: 30px;
                border-radius: 20px 20px 0px 0px;
            }
            .output{
                border: 1px solid black;
                width: 100%;
                height: 390px;
            }
            .output p{
                display: block;
                padding-top: 25px;
                padding-left: 5px;          
               
                
            }
            .output span{
                background: rgba(255, 255,255, 0.5);
                padding:20px 20px;
                margin-top: 5p
            }
            .input{
                border: 1px solid black;
                background-color: teal;
                width: 100%;
                height: 30px;
                display: block;
                border-radius: 0px 0px 20px 20px;
            }
            .input input{
                width: 70%;
                height: 26px;
                border-radius: 0px 0px 0px 20px;
            }
            .input button{
                padding-left: 5px;
                width: 80px;
                height: 28px;
                border-radius: 0px 0px 20px 0px;
            }
            .p1{
                float: right;
            }

        </style>
    </head>
    <body>
        <div id="box">
            <div class="head">
                狗子
            </div>
            <div class="output">
                <p>
                    <img src="touxing1.png"/>
                    <span>你知道吗？我喜欢你呀</span>
                </p>
                <div id="jieshuo">

                </div>
            </div>
            <div class="input">
                <input type="text" id="input" value="">
                <button id="send">发送</button>
            </div>
        </div>
    </body>
    <script>
        var txt=document.getElementById("input");
        var btn=document.getElementById("send");
        var div=document.getElementById("jieshuo");
        btn.onclick=function(){
            // div.innerHTML +="<p class='p1'><img src='touxing2.jpg'/><span>"+txt.value+"</span></p>";
            div.innerHTML +="<p class='p1'> <span>"+txt.value+"</span> <img src='touxing2.png'/>";
            txt.value="";
        }
    </script>
</html>

YuBingbai

关注

15
点赞
踩
128

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS实现登录转跳（无后台）

HTML+CSS实现登录转跳（无后台）块元素/内敛元素横着放置div元素选择符使用技巧：伪类鼠标悬停修改样式文本竖直居中基本知识点块元素/内敛元素两者区别:1.块元素默认占全屏，内联元素只占文本内容大小2.块元素可设置宽高，内联元素宽高无效3.块元素强制下一个元素换行，内联元素显示在同一行直到放满自动换行4.可以相互转换 display: inline;---把块...
复制链接

扫一扫