主页 / user-405378

realHikkan's questions

Martin Hope
realHikkan
Asked: 2022-08-06 05:47:43 +0800 CST
  • 0

我正在尝试为某些字段未填写在表单中的事件设置button状态disabled，但由于某种原因脚本不起作用

let userName = document.getElementById("name");
let userEmail = document.getElementById("email");
let button = document.getElementById("send");

function checkForm() {
  if (userName === false || userEmail === false) {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

checkForm();
form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

input,
select {
  margin-bottom: 10px;
}
<form action="/">
  <input type="text" placeholder="Ваше имя" id="name">
  <input type="text" placeholder="Эл. почта" id="email">
  <select name="city">
    <option selected disabled>Выберите город</option>
    <option value="Москва">Москва</option>
    <option value="Санкт-Петербург">Санкт-Петербург</option>
    <option value="Екатеринбург">Екатеринбург</option>
    <option value="Новосибирск">Новосибирск</option>
  </select>
  <button id="send">Отправить</button>
</form>

javascript html
Martin Hope
realHikkan
Asked: 2022-05-23 19:54:51 +0800 CST
  • 0

我怎样才能让它tr以tbody相反的顺序显示？

我有一个从数据库加载数据的 html 表。但是显示数据，以便所有新添加到数据库的内容都显示在表格的最后

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>Имя</th>
      <th>Email</th>
      <th>Дата</th>
      <th>Сообщение</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($result as $res) { ?>
    <tr>
      <td>
        <?php echo $res->id; ?>
      </td>
      <td>
        <?php echo $res->name; ?>
      </td>
      <td>
        <?php echo $res->email; ?>
      </td>
      <td>
        <?php echo $res->date; ?>
      </td>
      <td>
        <?php echo $res->message; ?>
      </td>
    </tr>
    <?php } ?>
  </tbody>
</table>
php
Martin Hope
realHikkan
Asked: 2022-05-12 21:37:58 +0800 CST
  • 1

单击 时，我需要.card出现一个块.copied，但由于某种原因，没有任何效果。

let elem = document.getElementsByClassName('card');
let warn = document.getElementsByClassName('copied');

for (let i = 0; i < elem.length; i++) elem[i].onclick = function() {
  warn.style.display = 'block';

  setTimeout(function() {
    warn.style.display = 'none';
  }, 3000);
}
.copied {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 40px;

  padding: 10px 30px;
  border-radius: 8px;
  background-color: #8dffc0;
  font-size: 14px;
}

.cards {
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 150px;
  border: 1px solid #c4c4c4;
  margin-top: 5px;
  font-size: 28px;

  cursor: pointer;
}
<div class="copied">Скопировано</div>
<div class="cards">
  <div class="card" data-clipboard-text="¯\_(ツ)_/¯">
    ¯\_(ツ)_/¯
  </div>
  <div class="card" data-clipboard-text="☚(ﾟヮﾟ☚)">
    ☚(ﾟヮﾟ☚)
  </div>

  <div class="card" data-clipboard-text="٩(●ᴗ●)۶">
    ٩(●ᴗ●)۶
  </div>
</div>

javascript
Martin Hope
realHikkan
Asked: 2022-03-15 17:46:13 +0800 CST
  • 2

我需要select将multiples中的几个值传递到一个数组中，我需要从列表中选择并全部发送到邮件中。

现在它是这样工作的：

<form>
    <!-- Скрытие поля отправки -->
    <input type="hidden" name="project_name" value="Student Stage">
    <input type="hidden" name="admin_email" value="ss.studentstage@mail.ru">
    <input type="hidden" name="form_subject" value="Заявка с формы поступления">
    <!-- -->



    <select name="Экзамены[]" multiple>
      <option value="Русский язык">Русский язык</option>
      <option value="Математика">Математика</option>
      <option value="Физика">Физика</option>
      <option value="Химия">Химия</option>
      <option value="Биология">Биология</option>
      <option value="География">География</option>
      <option value="Литература">Литература</option>
      <option value="История">История</option>
      <option value="Обществознание">Обществознание</option>
      <option value="Информатика и ИКТ">Информатика и ИКТ</option>
      <option value="Иностранный язык">Иностранный язык</option>
    </select>

    <button>Отправить</button>
</form>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

这一切都得到验证：

$(document).ready(function() {

    //E-mail Ajax Send
    $("form").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function() {
            alert("Ваша заявка была отправлена!\nОжидайте ответа в ближайшее время.");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
    });

});

并通过脚本发送到邮箱：

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);

    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
} else if ( $method === 'GET' ) {

    $project_name = trim($_GET["project_name"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);

    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

不是所有的值select都是从那里转移过来的，而只是最后一个选择的。name我正在考虑通过将值添加到数组中[]并编写如下代码来传递值：

<?php
  foreach ($_GET['Экзамены'] as $selectedOption)          
?>

但是我仍然不明白如何将这个数组传输到 mail.php

告诉我如何做到这一点？

PS 除了字段外select，还有几个输入在表单中发送，这里我没有插入

javascript
Martin Hope
realHikkan
Asked: 2022-03-04 16:28:32 +0800 CST
  • 1

我需要messagaes使用function, 通过遍历数组来输出消息。结果，控制台应显示如下内容：

管理员 | 您收到了在论坛上发布广告的警告

彼得 | 我们周六 19:00 开会。你会来吗？

ETC

现在它输出这个：

在此处输入图像描述

名称来自from数组messagaes，消息文本来自text

let user = {
  name: "Иван Иванов",
  login: "killer504",
  reputation: 97,
  messages: [{
      from: "administrator",
      text: "Вы получили предупреждение за публикацию рекламы на форуме"
    },
    {
      from: "Петр",
      text: "Собираем встречу в субботу в 19:00. Придёшь?"
    },
    {
      from: "administrator",
      text: "Ваш рейтинг был повышен пользователем DonkeyKong"
    },
    {
      from: "administrator",
      text: "Ваш рейтинг был повышен пользователем Netologist"
    },
    {
      from: "Brian Kerninghan",
      text: "hello, world"
    }
  ]
};

console.log('Всего сообщений: ' + user.messages.length);

function msgs() {
  for (let i = 0; i < user.messages.length; i++) {
    console.log(user.messages);
  }
}

msgs(user.messages);

javascript
Martin Hope
realHikkan
Asked: 2022-01-23 08:58:46 +0800 CST
  • 0

大家好！

数据库中有一个表，users我需要从中将用户数据从列中提取到数组中role

我写了这个脚本，但由于某种原因它不起作用

$result = mysqli_query("SELECT `role` FROM `users`");
$user_info = array();
while($row=mysql_fetch_assoc($result)) {
    $user_info[] = array_values($row);
}
print_r($user_info);

来自数据库的表：

在此处输入图像描述

在此处输入图像描述

php
Martin Hope
realHikkan
Asked: 2022-01-20 15:58:18 +0800 CST
  • -2

我必须马上说我是 php 新手。

如何$_SESSION通过php从数据库中获取特定的登录，并通过该登录检查用户是否被授权，如果登录不同，则使页面上的一个块不可见。

这是一个粗略的例子（我的尝试）：

PHP


$login = $_GET['login'];

if (!$_SESSION[$login == 'realHikkan']); {
  <<<HTML
        <style>
            .admin {
                display: none;
            }
        </style>
  HTML;
}

HTML

 <div class="admin">
   <a href="../admin"><button class="green">Панель администратора</button></a> 
 </div>

数据库结构：

在此处输入图像描述

php
Martin Hope
realHikkan
Asked: 2021-12-29 14:37:56 +0800 CST
  • 1

我有这样的问题。在网站的主页上，有一个存根滑块。您需要确保特定幻灯片上的颜色.logo和按钮.menu变为黑色。

代码笔： https ://codepen.io/realHikkan/pen/LYRemqO

var swiper = new Swiper(".swiper-container", {
  direction: "vertical",
  slidesPerView: 1,
  spaceBetween: 30,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false
  },
  mousewheel: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
}

button {
  outline: none;
  border: none;
  cursor: pointer;
}

input {
  outline: none;
}

input::placeholder {
  opacity: 80%;
  color: #fff;
}

.swiper-container {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #000;
  color: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-pagination {
  position: absolute;
  left: 65.4px;
}

.swiper-pagination-bullet {
  background-color: #f5f5f5 !important;
  width: 12px;
  height: 12px;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #2b2b2b !important;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 16px 0;
  display: block;
}

.nav {
  position: fixed;
  width: 87.5%;
  height: 36px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.menu {
  width: 36px;
  height: 36px;
  margin-left: 65.4px;
  background-image: url(https://www.neir-studio.ru/img/menu_hamburger-white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
}

.logo {
  margin-left: 64px;
}

.search {
  margin-left: auto;
  background: transparent;
  padding-bottom: 8px;
  width: 400px;
  border: none;
  border-bottom: 1px solid #fff;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #fff;
}

.main-1 {
  position: relative;
  color: #ffffff;
  min-height: 100vh;
  background-image: url(../img/1.png);
  background-repeat: no-repeat;
  background-position: center 50%;
  background-color: #000;
  background-size: cover;
}

.main-4 {
  position: relative;
  color: #000;
  min-height: 100vh;
  background-color: #fff;
  background-size: auto;
}

.main-5 {
  position: relative;
  color: #ffffff;
  min-height: 100vh;
  background-image: url(../img/4.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #000;
  background-size: auto;
}

.cart-btn {
  position: fixed;
  right: 0;
  width: 120px;
  height: 100%;
  color: #fff;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  background: rgba(34, 34, 34, 0.92);
  backdrop-filter: blur(36px);
  z-index: 9999;
}
<nav>
  <div class="nav">
    <button type="button" class="menu"></button>
    <a href="#"><img src="https://www.neir-studio.ru/img/logo-white.svg" alt="Saint Patron" class="logo"></a>
    <input type="search" name="" value="" class="search" placeholder="Search">
  </div>
</nav>
<a href="#"><button type="button" class="cart-btn">Cart (0)</button></a>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide main-1">Слайд 1</div>
    <div class="swiper-slide main-4">Слайд 2</div>
    <div class="swiper-slide main-5">Слайд 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

javascript
Martin Hope
realHikkan
Asked: 2021-12-10 05:09:04 +0800 CST
  • 0

现在在左边的块nav-right应该嵌套在右边。我需要它position: fixed，但是当我尝试用它将此块移动到右边缘时，什么也没有发生。但同时，当我删除时position: fixed;，我不能放height: 100%;。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  font-family: 'Roboto', sans-serif;
  background-color: #F0F1F4;
  margin: 0;
  padding: 0;
}

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

li {
  padding-left: 20px;
}

a {
  text-decoration: none;
  color: #D1D4E4;
}

a:hover {
  color: #fff;
}

input {
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #323546;
  background-color: #D1D4E4;
  opacity: .7;
}

input:hover {
  opacity: .8;
  transition: .3s;
}

input:focus {
  outline: none;
  background-color: #fff;
  color: #000;
  transition: .3s;
  opacity: 1;
}

input::placeholder {
  color: #323546;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus {
  outline: none;
}


/* Header */

.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  left: 0px;
  top: 0px;
  background: #323546;
  box-shadow: 0px 4px 9px -2px rgba(0, 0, 0, 0.15);
}

.header-nav {
  display: flex;
  margin-left: auto;
  padding-right: 30px;
  font-size: 14px;
  font-weight: 400;
}

.logo {
  margin-left: 10px;
}

.search {
  width: 141px;
  height: 22px;
  margin-right: 10px;
  padding-left: 25px;
  background-image: url(../icons/search.svg);
  background-repeat: no-repeat;
  background-position: center left 5px;
}


/* Side Bar */

.nav-right {
  position: fixed;
  display: block;
  width: 50px;
  height: 100%;
  margin-left: auto;
  background-color: #323546;
}

.nav-item {
  width: 100%;
  height: 50px;
  background-color: #323546;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-item:hover {
  background-color: #41455C;
}

.nav-item-setting {
  background-image: url(../icons/cog.svg);
}

.nav-item-calendar {
  background-image: url(../icons/calendar.svg);
}

.nav-item-bell {
  background-image: url(../icons/bell.svg);
}

.nav-item-trash {
  background-image: url(../icons/trash.svg);
}
<header class="header">
  <div class="logo">
    <a href="#"><img src="img/logo.svg" alt="AirCargoSoft" width="142px" height="18px"></a>
  </div>
  <ul class="header-nav">
    <li><a href="#">Заказы</a></li>
    <li><a href="#">Контрагенты</a></li>
    <li><a href="#">Поставщики</a></li>
    <li><a href="#">Справочники</a></li>
  </ul>
  <input type="search" class="search" placeholder="Поиск">
</header>
<nav class="nav-right">
  <div class="nav-items">
    <a href="#"><button class="nav-item-setting nav-item"></button></a>
    <a href="#"><button class="nav-item-calendar nav-item"></button></a>
    <a href="#"><button class="nav-item-bell nav-item"></button></a>
    <a href="#"><button class="nav-item-trash nav-item"></button></a>
  </div>
</nav>

html
Martin Hope
realHikkan
Asked: 2021-12-04 18:37:07 +0800 CST
  • 0

为什么滚动条上不出现阴影？

$(window).scroll(function() {
  $('header').toggleClass('scroll', $(this).scrollTop() > 63);
});
body {
  height: 1200px;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 63px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
}

.scroll {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <header>
    <div class="header">
    </div>
  </header>
</body>

javascript
Martin Hope
realHikkan
Asked: 2021-11-30 14:27:02 +0800 CST
  • 0

我的模态窗口有一个问题，即它有一个非常奇怪的背景。虽然它（模式的深色背景）应该覆盖整个屏幕，但它显示为一个小条。

我请你帮忙，因为我不明白为什么会出现这样的问题。

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  margin: 0;
}

p {
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 400;
  font-size: 21px;
}

.fa-plus {
  margin-right: 11px;
}

#myBtn {
  font-size: 16px;
  font-weigth: 600;
  color: #fff;
  border: 0 solid;
  border-radius: 20px;
  padding: 12px 30px;
  background-color: #000;
  text-align: center;
  margin-left: 20px;
  margin-top: 20px;
}

button:focus {
  outline: none;
}

#myBtn:hover {
  background-color: #3C3C3C;
  transition: .2s;
}

button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
  box-shadow: 0 0 0 3px gray;
}

.modal {
  display: none;
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(90, 90, 114, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 50%;
  border-radius: 30px;
  text-align: center;
  font-weight: regular;
}

.modal-title {
  font-size: 21px;
}

.close {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-right: -20px;
  float: left;
  font-size: 21px;
  font-weight: 400;
  cursor: pointer;
  color: #000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFAAAA;
}
<button id="myBtn">Создать событие</button>

<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h1 class="modal-title">Создание события
      <h1/>
      <hr>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil consequuntur asperiores ut! Tempore excepturi voluptatibus perferendis vel, repellendus provident adipisci odio distinctio, pariatur unde hic odit magni, nam officia ipsa!</p>
  </div>
</div>

javascript
Martin Hope
realHikkan
Asked: 2021-11-19 17:16:00 +0800 CST
  • 1

我不能像布局中那样向 li 元素添加数字

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  padding-left: 0px;
  display: flex;
}

li {
  list-style-type: none;
}

hr {
  border: none;
  color: #eeeeee;
  background-color: #eeeeee;
  height: 1px;
}

.side-news-header-title {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.side-news-header-title::after {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 66px;
  height: 3px;
  background-color: #e1d9bd;
  margin-top: 12px;
  margin-bottom: 29px;
}

.side-themes {
  margin-top: 55px;
}

.theme {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
}

.themes {
  display: block;
}
<div class="side-themes">
  <div class="side-news-header">
    <h3 class="side-news-header-title">Темы</h3>
  </div>

  <ul class="themes">
    <li><a class="theme" href="#">Красота</a></li>
    <hr>
    <li><a class="theme" href="#">Здоровье</a></li>
    <hr>
    <li><a class="theme" href="#">Образ жизни</a></li>
    <hr>
    <li><a class="theme" href="#">Музыка</a></li>
    <hr>
    <li><a class="theme" href="#">Спорт</a></li>
    <hr>
    <li><a class="theme" href="#">Йога</a></li>
    <hr>
  </ul>
</div>

在此处输入图像描述

html
Martin Hope
realHikkan
Asked: 2021-11-18 21:14:04 +0800 CST
  • 0

我无法设置社交图标。块中心的网络footer。它们必须垂直和水平地站在中心。

我尝试使用margin-left: auto;andmargin-right: auto;将它们水平居中，但它不起作用。我也尝试过text-align: center;and vertical-align: center;，但它也不起作用。

.container {
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  width: 100%;
  height: 83px;
  background-color: #f4f7f6;
  margin-bottom: 64px;
}

.social {
  display: flex;
}

.icon {
  width: 25px;
  height: 21px;
  margin-right: 24px;
}
<footer>
  <div class="container">
    <div class="footer">
      <!-- Соц. сети -->
      <div class="social">
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/004-twitter.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/001-pinterest.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/003-tumblr.svg" alt=""></a>
        </div>
        <div class="icon">
          <a href="#"><img src="https://netology-code.github.io/html-2-diploma/sources/images/social/005-instagram.svg" alt=""></a>
        </div>
      </div>
    </div>
  </div>
</footer>

html
Martin Hope
realHikkan
Asked: 2021-11-18 18:47:08 +0800 CST
  • 0

我无法使网站标题中的图像变暗。无论我尝试什么，要么将所有内容（包括徽标、标题和导航菜单）变暗，要么将标题周围的一小块区域变暗，当我尝试扩大该区域时，暗区从图像中爬出。

（不，不幸的是你不能在 Photoshop 中变暗。我的要求是图像必须用代码变暗。）

这是链接： https ://codepen.io/realHikkan/pen/pobQVwO?editors=1100

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  padding-left: 0px;
  display: flex;
}

li {
  list-style-type: none;
  padding-left: 35px;
}

h1 {
  margin: 0;
}

p {
  margin: 0;
}

.menu {
  text-transform: uppercase;
  margin-left: auto;
  margin-top: 28px;
  font-size: 13px;
}

.header {
  display: flex;
}

.container {
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.logo {
  width: 179px;
  height: 41px;
  margin-top: 28px
}


/* Интро */

.intro {
  display: block;
  padding-bottom: 120px;
  background-image: url(https://netology-code.github.io/html-2-diploma/sources/images/banner-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 64px;
}

.title {
  color: #fff;
  text-align: center;
  font-size: 45px;
  padding-left: 200px;
  padding-right: 200px;
}
<div class="intro">
  <div class="container">
    <!-- Хэдер -->
    <header>
      <div class="header">
        <div class="logo">
          <a href="#">
            <img src="https://netology-code.github.io/html-2-diploma/sources/images/noemi-logo.svg">
          </a>
        </div>
        <nav class="menu">
          <ul>
            <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>
            <li>
              <a href="#">Контакты</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="title">
        <h3>Блог о творчестве, спорте, и образе жизни</h3>
      </div>
    </header>
  </div>
</div>

html
Martin Hope
realHikkan
Asked: 2021-11-18 17:57:52 +0800 CST
  • 0

我无法将文本放置在所有块中图像的右侧

试过float但不起作用

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

a {
    text-decoration: none;
    color: #fff;
}

ul {
    padding-left: 0px;
    display: flex;
}

li {
    list-style-type: none;
    padding-left: 35px;
}

.menu {
    text-transform: uppercase;
    margin-left: auto;
    margin-top: 28px;
  font-size: 13px;
}

.header {
    display: flex;
}

.container {
    
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
}

.logo {
    width: 179px;
    height: 41px;
    margin-top: 28px
}

/* Интро */

.intro {
    display: block;
  padding-bottom: 120px;
    background-image: url(https://netology-code.github.io/html-2-diploma/sources/images/banner-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  margin-bottom: 64px;
}

.title {
    color: #fff;
    text-align: center;
    font-size: 45px;
  padding-left: 200px;
  padding-right: 200px;
  
}

.date {
  opacity: 50%;
}

.author {
  font-weight: 700;
}

.img {
 display: block;
 width: 381px;
}

.tag {
  text-transform: uppercase;
  font-weight: 700;
  color: #b59f5b;
  font-size: 14px;
  margin-right: 19px;
}

.block {
  display: flex;
  margin-bottom: 59px;
  width: 778px;
  
}

.block-title {
  text-transform: uppercase;
}

.text {
    margin-left: 50px;
}
<!-- Контейнер --->
<div class="intro">
    <div class="container">
        <!-- Хэдер -->
        <header>
            <div class="header">
                <div class="logo">
                    <a href="#">
                        <img src="https://netology-code.github.io/html-2-diploma/sources/images/noemi-logo.svg">
                    </a>
                </div>
                <nav class="menu">
                    <ul>
                        <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>
                        <li>
                            <a href="#">Контакты</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="title">
                <h3>Блог о творчестве, спорте, и образе жизни</h3>
            </div>  
        </header>
    </div>
</div>
<main>
  <div class="container">
    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post1.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Health</span>
          <span class="tag">Travel</span>
        </div>
        <div class="block-title">
          <h1>10 мест, ради которых стоит проснуться на рассвете</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Итак, вы в Питере. Раннее утро. Лед с рек и каналов уже ушел, запущены фонтаны города… Музеи еще закрыты. Что посмотреть?</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post2.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Health</span>
          <span class="tag">Lifestyle</span>
        </div>
        <div class="block-title">
          <h1>ЙОга для начинающих в домашних условиях</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Расскажем, какие упражнения выбрать и как сделать коврик для занятий йогой из того, что можно найти в шкафу.</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post3.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Music</span>
        </div>
        <div class="block-title">
          <h1>Лучшие музыкальные фестивали этого лета</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Лето на носу, а с ним и музыкальные фестивали. На каком же из них вы разобьёте свою палатку?</p>
          <p>Мы составили список лучших летних фестивалей по всему миру.</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Lifestyle</span>
          <span class="tag">Food</span>
        </div>
        <div class="block-title">
          <h1>Наукоёмкий подход к кулинарии</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post5.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Lifestyle</span>
          <span class="tag">Interior</span>
          <span class="tag">Art</span>
        </div>
        <div class="block-title">
          <h1>Делаем модные принты на подушках для интерьера </h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Подушки для дивана целесообразнее заказать в съемных чехлах на молнии, если потребуется чистка подушек, проще снять чехлы, чем везти подушку в химчистку.</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post6.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Travel</span>
          <span class="tag">Lifestyle</span>
        </div>
        <div class="block-title">
          <h1>Как первый раз отправиться в горы?</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Для начала нужно определиться, в каком формате пройдёт ваше путешествие. Это зависит от многих факторов, не только от ваших желаний и интересов.</p>
        </div>
      </div>
    </article>

    <article class="block">
      <div class="img">
        <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="10 мест, ради которых стоит
  проснуться на рассвете">
      </div>
      <div class="text">
        <div class="tags">
          <span class="tag">Lifestyle</span>
          <span class="tag">Food</span>
        </div>
        <div class="block-title">
          <h1>Наукоёмкий подход к кулинарии</h1>
        </div>
        <div class="date">
          <span>10 июня 2019</span>
        </div>
        <div class="author">
          <span>Неизвестный автор</span>
        </div>
        <div class="text-d">
          <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
        </div>
      </div>
    </article>
  </div>
</main>

html