RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-405378

realHikkan's questions

Martin Hope
realHikkan
Asked: 2022-08-06 05:47:43 +0000 UTC

设置禁用状态按钮的脚本不起作用

  • 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
  • 1 个回答
  • 48 Views
Martin Hope
realHikkan
Asked: 2022-08-22 12:37:31 +0000 UTC

js复选框不起作用

  • 0

最简单的复选框检查不起作用。alert总是输出No。我不知道有什么问题

let check = document.getElementById('valueName');

if (check.checked) {
  alert('Yes');
} else {
  alert('No')
}
<input type="checkbox" id="valueName">
<label for="valueName">Чекбокс</label>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-05-23 19:54:51 +0000 UTC

如何以相反的顺序显示html表格中的行

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-05-12 21:37:58 +0000 UTC

getElementByClassName 不起作用

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-03-15 17:46:13 +0000 UTC

如何从选择多个传递值数组

  • 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
  • 2 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-03-04 16:28:32 +0000 UTC

遍历数组并通过js函数输出

  • 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
  • 3 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-01-23 08:58:46 +0000 UTC

如何从数据库中获取数据并将其插入关联数组

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2022-01-20 15:58:18 +0000 UTC

如何使该块仅对某些用户可见

  • -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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-12-29 14:37:56 +0000 UTC

根据背景颜色更改 svg 图像的颜色

  • 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
  • 2 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-12-10 05:09:04 +0000 UTC

如何将固定块推到右边缘?

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-12-04 18:37:07 +0000 UTC

滚动页面时不出现块阴影

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-12-02 19:16:54 +0000 UTC

如何在所有轴上的块内居中文本

  • -1

在此处输入图像描述

文本不会以post__name任何方式以块为中心。我text-aling: center;通过 flex 尝试了同样的尝试,但没有任何变化

这是代码: https ://codepen.io/realHikkan/pen/KKgdmKR?editors=1100

html
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-30 14:27:02 +0000 UTC

在 javascript 上移出模态窗口的背景

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-27 17:38:13 +0000 UTC

如何将块拉伸到父块的全宽

  • 0

有必要将块拉伸.card到父块的整个宽度,.container同时它们也必须是每行 2 个块。

https://codepen.io/realHikkan/pen/qBaBjwz?editors=1100

html
  • 2 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-19 17:16:00 +0000 UTC

如何在 li 元素上制作数字“计数器”

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-19 03:48:18 +0000 UTC

侧栏向下滑动

  • 0

side-bar应该与新闻一起位于主块的右侧,但据我了解,由于主块右侧的缩进,它会向下滑动。

如何去除这个缩进,让它side-bar像它应该的那样站起来?(高度应该等于主新闻块)

https://codepen.io/realHikkan/pen/pobQVwO?editors=1100

html
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-18 21:14:04 +0000 UTC

如何将图标放置在块的中心

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-18 18:47:08 +0000 UTC

如何使文本下方的图像变暗

  • 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
  • 3 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-18 17:57:52 +0000 UTC

如何在图片右侧放置文字

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
realHikkan
Asked: 2021-11-04 03:49:51 +0000 UTC

如何使用 nth-child 缩进块

  • 0

锻炼:

30px为具有 class 的元素设置左右填充.card,从第 2 个元素开始,然后每 3 个元素(即,对于第 2 个、第 5 个等)

我尝试使用nth-childand缩进nth-of-type,但它不起作用。

https://codepen.io/realHikkan/pen/ZEORrGa?editors=1100

css
  • 2 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

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

    • 3 个回答
  • Marko Smith

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

    • 5 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5