css - 如何在 HTML 中的卡片内添加图片?
问题描述
请多多包涵,因为我是学习 PHP 的新手。我正在尝试制作一个如下图所示的注册表单:
到目前为止,我所做的是这样的:
我不知道如何在左侧添加该图片。这是我的代码:
<?php require_once 'indexheader.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Leafnote | Register</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black">
<h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
<a href="signup.php" class="alert-link">Login</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
您可以使用 Bootstrap 网格到您的卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-6 m-auto">
<div class="card bg-white mt-5 p-2">
<div class="row">
<div class="col-4 my-auto mx-auto"> <img src="https://www.w3schools.com/bootstrap/la.jpg" class="img-fluid"></div>
<div class="col-8 mx-auto my-auto">
<div class="card-title text-black">
<h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
<a href="signup.php" class="alert-link">Login</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- python - 尝试使用 Google Drive API 将本地文件上传到 Drive 时出错
- arrays - Angular/Firestore - 用于构建数组的嵌套集合查询
- r - 将颜色添加到聚类图 (R)
- algorithm - 复古代币分发
- python - Python:如何从给定文件中获取显示层次结构的名称?
- python - 如何使管道跳过该步骤(使用“passthrough”)以及应用于 param_grid 中该步骤的所有参数?
- java - 如何从字符串中的特定位置获取数字?
- javascript - Promise 返回字符串数组,稍后在代码中它为空
- javascript - 我已经在使用功能组件,但我不断收到错误:只能在功能组件的主体内调用挂钩
- python - dlib 形状检测器训练期间的 RAM 饱和