CreatorGod提出的问题

CreatorGod

Asked: 2022-07-11 17:31:37 +0800 CST

如何为电话号码制作正确的格式？

1

const changeFormatToRussian = (num: string): string =>
    num.replace(/^[0-9]/, '+7').replace(/[^+\d]/g, '');

我的函数格式化一个数字，但是在开头的 + 字符之后，您可以输入任何数字。那些。+3，+4不是+7代替，而是2,3,4代替。

CreatorGod

Asked: 2022-06-25 03:16:21 +0800 CST

你怎么能做出这样的事情？

4

body {
  margin: 0;
  padding: 0;
}

main.gallery {
  height: 100vh;
  overflow: hidden;
}

.gallery > .gallery__list {
  margin: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-template-rows: repeat(6, 140px);
}

.gallery > .gallery__list > li:nth-child(4n) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery > .gallery__list > li:nth-child(8n) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery > .gallery__list > li > figure {
  height: 100%;
  width: 100%;
  margin: 0;
  border: 10px solid transparent;
}

.gallery > .gallery__list > li > figure:hover {
  border: 10px solid green;
}

.gallery > .gallery__list > li > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <main class="gallery">
      <ul class="gallery__list">
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/1.jpg"
              alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="A first look at dunes" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/4.jpg"
              alt="K2-138 6 Planets Artwork (Artist's Illustration) "
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/3.jpg" alt="Small Prominences" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Ezinu Crater" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/3.jpg" alt="Polar Ice" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="Jupiter" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/3.jpg"
              alt="South Equatorial Belt Brown Barge Close-up"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="Jupiter" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="Jupiter" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/3.jpg"
              alt="South Equatorial Belt Brown Barge Close-up"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="Jupiter" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/1.jpg"
              alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/3.jpg"
              alt="South Equatorial Belt Brown Barge Close-up"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="Jupiter" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img
              src="./img/3.jpg"
              alt="South Equatorial Belt Brown Barge Close-up"
            />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/3.jpg" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/3.jpg" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/2.jpg" alt="A first look at dunes" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/3.jpg" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" />
          </figure>
        </li>
        <li>
          <figure>
            <img src="./img/1.jpg" alt="Another Cloudy Day" />
          </figure>
        </li>
      </ul>
    </main>
  </body>
</html>

你怎么能用网格做到这一点？

CreatorGod

Asked: 2022-04-12 13:31:40 +0800 CST

如何重新渲染 Reactjs 组件

0

如何在单击按钮时在不更改 url 的情况下完全重绘组件并同时传输数据。喜欢 -

function handler (content) {
    return <Component content={content}/>
}

CreatorGod

Asked: 2020-01-26 17:31:50 +0800 CST

如何在 Unity 中随机生成对象？

-2

我刚开始学习 Unity，并决定制作一个类似迷你游戏的东西。我希望对象出现在屏幕上的随机位置。如何实施？

CreatorGod

Asked: 2020-01-11 05:18:56 +0800 CST

为什么表单不提交？

0

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

    <title>Отправка формы на почту </title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
        form {
            background-color: #f9f9f9;
            padding: 20px;
            margin: 20px;
        }
    </style>
  </head>

  <body>
    <div class="container">

      <div class="row">
        <div class="col-sm-4">
            <form action="mail.php" method="POST">
                <legend>Заголовок формы</legend>

                <div class="form-group">
                    <label for="">Введите ваше имя</label>
                    <input type="text" class="form-control" id="" name="user_name" placeholder="Например, Иван">
                </div>

                <div class="form-group">
                    <label for="">Введите номер телефона</label>
                    <input type="text" class="form-control" id="" name="user_phone" placeholder="+7 (999) 99 99 999">
                </div>

                <div class="form-group">
                    <label for="">Введите email</label>
                    <input type="text" class="form-control" id="" name="user_email" placeholder="mail@mail.ru">
                </div>

                <button type="submit" class="btn btn-primary">Отправить форму</button>
            </form>
        </div><!-- .col-sm-4 -->
      </div> <!-- .row -->

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

<?php

require_once('phpmailer/PHPMailerAutoload.php');
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';

$name = $_POST['user_name'];
$phone = $_POST['user_phone'];
$email = $_POST['user_email'];

$mail->isSMTP();

$mail->Host = 'smtp.yandex.ru';
$mail->Port = 25;
$mail->Username = 'mrkrojlik@yandex.ru';
$mail->Password = '';

$mail->addAddress('mrkrojlik@yandex.ru');

$mail->isHTML(true);

$mail->SMTPSecure = 'ssl';

$mail->Subject = 'Заявка с тестового сайта';
$mail->Body    = '' .$name . ' оставил заявку, его телефон ' .$phone. '<br>Почта этого пользователя: ' .$email;
$mail->AltBody = '';

$mail->SMTPDebug = 2;

 $mail->setFrom('mrkrojlik@yandex.ru', 'Сайт site.ru');

if(!$mail->send()) {
    echo $mail->ErrorInfo;
} else {
    header('location: thank-you.html');
}
?>

错误：2020-01-11 00:45:05 SMTP 错误：无法连接到服务器：(0) 2020-01-11 00:45:05 SMTP connect() 失败。https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting SMTP connect() 失败。https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting

CreatorGod

Asked: 2020-01-11 03:28:11 +0800 CST

php表单不发送电子邮件

0

jQuery(document).ready(function($) {

$(".ajax-contact-form").submit(function() {
var str = $(this).serialize();

$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg) {
if(msg == 'OK') {
result = '<p>Ваш заказ принят</p>';
$(".fields").hide();
} else {
result = msg;
}
$('.note').html(result);
}
});
return false;
});
});

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Заголовок</title>
</head>

<body>
    <footer>
        <h2>Контактная форма</h2>
        <div class="form-container">
            <div class="note"></div>
            <div class="fields">
                <form class="ajax-contact-form" action="">
                    <p><input type="text" name="name" value="" placeholder="Имя"></p>
                    <div class="row">
                        <div class="col"><input type="tel" name="tel" value="" placeholder="Телефон"></div>
                        <div class="col"><input type="email" name="email" value="" placeholder="E-mail"></div>
                        </div>
                    <label>Текст</label>
                    <textarea name="message" cols="40" rows="3"></textarea>
                    <input type="submit" name="submit" class="form-container__btn" value="Отправить">
                </form>
            </div>
        </div>
    </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="contactform.js"></script>
</body>

</html>

<?php

$post = (!empty($_POST)) ? true : false;

if($post)
{
$email = trim($_POST['email']);
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$tel = htmlspecialchars($_POST["tel"]);
$error = '';

if(!$name)
{
$error .= 'Пожалуйста введите ваше имя<br />';
}

// Проверка телефона
function ValidateTel($valueTel)
{
$regexTel = "/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true : false;
}
if(!$email)
{
$error .= "Пожалуйста введите email<br />";
}
if($email && !ValidateTel($email))
{
$error .= "Введите корректный email<br />";
}
if(!$error)

// (length)
if(!$message || strlen($message) < 1)
{
$error .= "Введите ваше сообщение<br />";
}
if(!$error)
{


$name_tema = "=?utf-8?b?". base64_encode($name) ."?=";

$subject ="Новая заявка с сайта BeActive.ru";
$subject1 = "=?utf-8?b?". base64_encode($subject) ."?=";
/*
$message ="\n\nСообщение: ".$message."\n\nИмя: " .$name."\n\nТелефон: ".$tel."\n\n";
*/
$message1 ="\n\nИмя: ".$name."\n\nТелефон: " .$tel."\n\nE-mail: " .$email."\n\nСообщение: ".$message."\n\n";


$header = "Content-Type: text/plain; charset=utf-8\n";

$header .= "From: Новая заявка <berestovayamaria@gmail.com>\n\n";
$mail = mail("berestovayamaria@gmail.com", $subject1, iconv ('utf-8', 'windows-1251', $message1), iconv ('utf-8', 'windows-1251', $header));

if($mail)
{
echo 'OK';
}

}
else
{
echo '<div class="notification_error">'.$error.'</div>';
}

}
?>

CreatorGod

Asked: 2021-01-01 04:56:57 +0800 CST

如何更改按钮单击的背景？

1

如何在按钮单击时更改背景图像？我只设法改变了背景颜色。我是 js 和一般网络的新手。

var colorArray = ["#0DC2FF", "#007DE8", "#0E5DFF", "#0C28EB", "#1600FF"];
var i = 0;

function changeColor(){
    document.body.style.background = colorArray[i];
    i++;
    if( i >= colorArray.length) {
        i = 0;
    }
}

.page {
    width: 100%;
    height: 700px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    background: transparent;
    border: 1px solid #000;

    font-family: 'Montserrat', sans-serif;

    color: #000;
    font-weight: 900;

    text-transform: uppercase;

    padding: 1rem 3rem;
    margin: 0 auto;
}

.button:hover {
    background: #000;
    color: #fff;
}

.button, 
.button:active, 
.button:focus {
    outline: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<title>JavaScript</title>
</head>
<body>
	<div class="page">
		<button class="button" onclick="changeColor();">Click</button>
	</div>

	<script src="app.js"></script>
</body>
</html>

CreatorGod

Asked: 2020-12-28 22:19:46 +0800 CST

如何对齐块？

0

如何对齐按钮，使其像第二张图片中一样？

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
	font-size: 2rem;
  	color: #fff;
  	background: #222 url("../Images/bg.png") center no-repeat;
  	-webkit-font-smoothing: antialiased;
}

.btn {
	margin-left: 1.33rem;
	
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	background: transparent;
	font-size: 1.06rem;
	
	padding: 1rem 4rem;
	
	border: 1px solid #F80759;
	border-radius: 5px;
}

.container {
	width: 100%;
  	max-width: 1200px;
  	margin: 0 auto;
  	padding: 0 15px;
}

/* Price */

.price__item:hover {
	border: 1px solid #12C2E9;
}

.price__item:hover .price__count {
	background: linear-gradient(to right, #E100FF, #F80759);
}

.price__item:hover .btn--price {
	background: linear-gradient(to right, #E100FF, #F80759);
}

.price__inner {
	text-align: center;
}

.price__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #12C2E9;
	
	margin-bottom: 0.73rem;
}

.price__suptitle {
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
}

.price__suptitle:after {
	content: "";
    display: block;
    width: 4rem;
    height: 0.3rem;
    margin: 3.33rem auto;

    background: linear-gradient(to right, #E100FF, #F80759);
}

.price__price {
	display: flex;
	
	justify-content: center;
}

.price__item {
	margin: 2rem;
	border: 2px solid #222;
}

.price__money {
	margin: 1.5rem 6.66rem;
	font-size: 1.6rem;
}

.price__span {
	font-weight: 700;
	font-size: 3.2rem;
}

.price__count {
	font-size: 1.2rem;
	background-color: #222;
	padding: 15px 0;
	width: 100%;
}

.price__text {
	font-size: 0.93rem;
	margin: 2rem 0 0 0;
}

.price__more {
	color: #F80759;
}

.btn--price {
	margin: 2rem;
	border: 1px solid #222;
}

.btn--price:hover {
	background: none;
}

<div class="price">
	<div class="container">
		<div class="price__inner">
			<h2 class="price__title">ВЫБИРАЙТЕ</h2>
			<h1 class="price__suptitle">НАШИ УСЛУГИ</h1>
			<div class="price__price">
			
				<div class="price__item">
					<div class="price__money">от<span class="price__span">1000</span>₽</div>
						<div class="price__count">Создание игр</div>
						<div class="price__text">
							<p>Создание 2D игр на движке</p>
							<p>Unity и языке</p>
							<p>программирования  JavaScript</p>
							<p>под любые платформы и</p>
							<p>даже браузер</p>
						</div>
						
						<button class="btn btn--price">Заказать игру</button>
				</div>
				
				<div class="price__item">
					<div class="price__money">от<span class="price__span">500</span>₽</div>
						<div class="price__count">Разработка и доработка сайтов</div>
						<div class="price__text">
							<p>Сайты услуг</p>
							<p>Лендинги</p>
							<p>Визитки</p>
							<p>Информационные сайты</p>
							<p>Тематические сайты</p>
							<p>Блоги</p>
							<div class="price__more">И многое другое</div>
						</div>
						
						<button class="btn btn--price">Заказать сайт</button>
				</div>
				
				<div class="price__item">
					<div class="price__money">от<span class="price__span">100</span>₽</div>
						<div class="price__count">Дизайн</div>
						<div class="price__text">
							<p>Логотипы</p>
							<p>Дизайн сайта</p>
							<p>Работа с фото</p>
							<p>Персонажи игр</p>
							<p>Дизайн интерфейса игр</p>
							<div class="price__more">И многое другое</div>
						</div>
						
						<button class="btn btn--price">Заказать дизайн</button>
				</div>
				
			</div> <!-- ./price__price -->
		</div> <!-- ./price__inner -->
	</div> <!-- ./container -->
</div> <!-- ./price -->

CreatorGod

Asked: 2020-12-23 03:51:31 +0800 CST

添加文本时如何使块水平扩展？

0

/* Reviews */

.reviews {
	padding: 4.66rem 0;
	background: #222 url("images/Reviews/reviews-bg.jpg") center no-repeat;
}

.reviews__inner {
	text-align: center;
}

.reviews__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #12C2E9;
	
	margin-bottom: 0.73rem;
}

.reviews__suptitle {
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
}

.reviews__suptitle:after {
	content: "";
    display: block;
    width: 4rem;
    height: 0.3rem;
    margin: 3.33rem auto;

    background: linear-gradient(to right, #E100FF, #F80759);
}

.reviews__reviews {
	display: flex;
}

.reviews__item {
	display: flex;
	
	background-color: #222;
	
	margin: 0 2rem;
}

.reviews__content {
	text-align: left;
	
	margin: 0 1.5rem;
}

.reviews__name {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: capitalize;
	color: #12C2E9;
	
	margin-bottom: 0.46rem;
	margin-top: 2.13rem;
}

.reviews__prof {
	font-size: 0.8rem;
	
	margin-bottom: 2.33rem;
}

<div class="reviews">
	<div class="container">
		<div class="reviews__inner">
			<h2 class="reviews__title">Reviews</h2>
			<h1 class="reviews__suptitle">WHAT OUR CLIENTS SAY</h1>
			
			<div class="reviews__reviews">
			
				<div class="reviews__item">
					<div class="reviews__photo">
						<img src="images/Reviews/2.png" alt="">
					</div>
					<div class="reviews__content">
						<div class="reviews__name">Rebecca Morrison</div>
						<div class="reviews__prof">Social Worker</div>
						<div class="reviews__text">
						<p>Curabitur interdum nulla ligula, ac iaculis est venon. 
						Quisque auctor, ex id posuere aliquam, lorem mauris venenatis sem, eu facilisis magna nibh. Praesent laoreet leo diam, ut suscipit purus malesuada laoreet. Aliquam erat volutpat.</p>
						</div>
						<div class="reviews__rating">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
					</div>
					
				</div>

				<div class="reviews__item">
				
					<div class="reviews__photo">
						<img src="images/Reviews/1.png" alt="">
					</div>
					
					<div class="reviews__content">
						<div class="reviews__name">Daniel Bllomberg</div>
						<div class="reviews__prof">Salesman</div>
						<div class="reviews__text">
						<p>Donec nec interdum turpis. Donec faucibus facilisis enim, ut fringilla urna elementum non. Mauris vel mauris ac tellus feugiat maximus. Sed augue enim, lacinia non dui ut, mollis vulputate felis. Vivamus consequat bibendum ullamcorper.</p>
						</div>
						<div class="reviews__rating">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
					</div>
					
				</div>
				
			</div> <!-- ./reviews__reviews -->
		</div> <!-- ./reviews__inner -->
	</div> <!-- ./container -->
</div> <!-- ./reviews -->

评论块向下扩展，但我希望它们的长度增加。

CreatorGod

Asked: 2020-12-22 06:07:53 +0800 CST

为什么块会从容器中取出？如何在悬停时使背景变暗？

0

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* Team */

.team {
	margin-bottom: 100px;
}

.team__inner {
	text-align: center;
}

.team__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #12C2E9;
	
	margin-bottom: 11.2px;
}

.team__suptitle {
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
}

.team__suptitle:after {
	content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 50px auto;

    background: linear-gradient(to right, #E100FF, #F80759);
}

.team__team {
	display: flex;
	justify-content: center;
}

.team__item {
	position: relative;
	
	margin-left: 20px;
}

.team__item:hover .team__photo-about {
	display: block;
}

.team__item:first-child {
	margin-left: 0;
}

.team__photo {
	max-width: 100%;
}

.team__photo-about {
	display: none;
	
	margin-bottom: 22px;
	
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}

.team__name {
	font-size: 1.2rem;
	font-weight: 600;
	color: #fff;
}

.team__prof {
	font-size: 0.8rem;
	color: #12C2E9;
}

<div class="team">
	<div class="container">
		<div class="team__inner">
			<h2 class="team__title">Meet</h2>
			<h1 class="team__suptitle">OUR TRAINERS</h1>
			
			<div class="team__team">
			
				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%201.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%202.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%203.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%204.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%205.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>
			</div> <!-- ./team__team -->
			
		</div> <!-- ./team__inner -->
	</div> <!-- ./container -->
</div> <!-- ./team -->

块爬出容器，如何修复？在“了解更多”字样之后，团队块移出容器。

如何为电话号码制作正确的格式？

你怎么能做出这样的事情？

如何重新渲染 Reactjs 组件

如何在 Unity 中随机生成对象？

为什么表单不提交？

php表单不发送电子邮件

如何更改按钮单击的背景？

如何对齐块？

添加文本时如何使块水平扩展？

为什么块会从容器中取出？如何在悬停时使背景变暗？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

CreatorGod's questions