HTML:Boostarp设计登录页面

Hello,大家好,我是wangzirui32,今天我们来学习如何使用Boostarp设计登录页面,开始学习吧!
HTML代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
	<style>
    	.login {
        	text-align: center;
        	opacity: 0.8;     /* 设置透明度*/
    	}
    	body {
        	background-repeat: no-repeat;
        	/* 背景图来自百度 */
        	background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F59127f93d178d.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651550338&t=5f1a964803c792708bebc8de9502f409");
    	}
	style>
head>
<body>      
<div class="login">
    <h1>登录账户h1>   
    <div class="modal-dialog">
        <form method="POST" method="."> 
            <div class="modal-content">
                <div class="modal-header">
                	
                    <h3 class="modal-title text-center" id="myModalLabel">登录账户h3>
                div>
                <div class="modal-body" id="model-body">
                	
                    <p style="color: red;" class="error">p>
                    <div class="form-group">
                        <input type="text" id="username" class="form-control" placeholder="用户名" autocomplete="off">
                    div>
                    <div class="form-group">
                        <input type="password" id="password" class="form-control" placeholder="密码" autocomplete="off">
                    div>
                    <p>登录完成后,您就可以享受用户基本的权益了。p>
                div>
                <div class="modal-footer">
                	
                    <div class="form-group">
                        <button type="button" class="btn btn-primary">登录button>
                        <a class="btn btn-default" href="#">注册a>
                        <button type="button" class="btn btn-danger" onclick="window.location.href='/'; return false;">取消button>
                    div>
                div>
            div>
        form>
    div>
div>
body>
html>

效果如下:


好了,今天的课程就到这里,我是wangzirui32,喜欢的可以点个收藏和关注,我们下次再见!

你可能感兴趣的:(HTML,CSS学习笔记,前端,html5,css,bootstrap)