以下是一份盲盒交友网页的源码:
body {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
}
header {
background-color: #FFA07A;
color: white;
padding: 20px;
text-align: center;
font-size: 2em;
}
h1 {
margin-top: 0;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
input[type=text], input[type=number] {
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
width: 300px;
font-size: 1.2em;
}
input[type=submit] {
background-color: #FFA07A;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
cursor: pointer;
width: 100px;
font-size: 1.2em;
}
section {
width: 50%;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
padding: 20px;
margin: 10px;
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
让我们帮你找到属于你的那个人!
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("连接失败: " . mysqli_connect_error());
}
// 查询数据并显示
$sql = "SELECT name, gender, age, img_url FROM users";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo '
echo '';
echo '
echo '
' . $row['gender'] . ',' . $row['age'] . '岁
';echo '
}
} else {
echo "暂无数据";
}
mysqli_close($conn);
?>
该源码包含一个简单的表单和一个用于显示用户数据的卡片网格。在表单中,用户需要输入他们的姓名、性别和年龄,并将这些信息提交到"submit.php"页面进行处理。在"submit.php"页面中,可以将这些数据添加到数据库中。网页的主体部分是位于