主页 / 问题

全部问题

Martin Hope
Рома Можаренко
Asked: 2025-01-10 01:32:58 +0000 UTC
  • 5

在此输入图像描述大家好，我需要布局包含产品及其图像的部分。该部分必须包含位于标题下方的图像（它是半透明的）我尝试使用绝对定位来弥补它，但显然我的知识还不够:(

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-weight: normal;
    font-display: swap;
}

/**
  Нормализация блочной модели
 */
*,
::before,
::after {
    box-sizing: border-box;
}

/**
    Убираем внутренние отступы слева тегам списков,
    у которых есть атрибут class
   */
:where(ul, ol):where([class]) {
    padding-left: 0;
}

/**
    Убираем внешние отступы body и двум другим тегам,
    у которых есть атрибут class
   */
body,
:where(blockquote, figure):where([class]) {
    margin: 0;
}

/**
    Убираем внешние отступы вертикали нужным тегам,
    у которых есть атрибут class
   */
:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl):where([class]) {
    margin-block: 0;
}

:where(dd[class]) {
    margin-left: 0;
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none;
}

/**
    Убираем стандартный маркер маркированному списку,
    у которого есть атрибут class
   */
:where(ul[class]) {
    list-style: none;
}

:where(address[class]) {
    font-style: normal;
}

/**
    Обнуляем вертикальные внешние отступы параграфа,
    объявляем локальную переменную для внешнего отступа вниз,
    чтобы избежать взаимодействие с более сложным селектором
   */
p {
    --paragraphMarginBottom: 24px;

    margin-block: 0;
}

/**
    Внешний отступ вниз для параграфа без атрибута class,
    который расположен не последним среди своих соседних элементов
   */
p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom);
}


/**
    Упрощаем работу с изображениями и видео
   */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/**
    Наследуем свойства шрифт для полей ввода
   */
input,
textarea,
select,
button {
    font: inherit;
}

html {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    height: 100%;
    /**
      Убираем скачок интерфейса по горизонтали
      при появлении / исчезновении скроллбара
     */
    scrollbar-gutter: stable;
}

/**
    Плавный скролл
   */
html,
:has(:target) {
    scroll-behavior: smooth;
}

body {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    /* min-height: 100%; */
    /**
      Унифицированный интерлиньяж
     */
    line-height: 1.5;
}

/**
    Нормализация высоты элемента ссылки при его инспектировании в DevTools
   */
a:where([class]) {
    display: inline-flex;
}

/**
    Курсор-рука при наведении на элемент
   */
button,
label {
    cursor: pointer;
}

/**
    Приводим к единому цвету svg-элементы
   */
[fill] {
    fill: currentColor
}

[stroke] {
    stroke: currentColor
}

/**
    Чиним баг задержки смены цвета при взаимодействии с svg-элементами
   */
svg * {
    transition-property: fill, stroke;
}

/**
    Приведение рамок таблиц в классический 'collapse' вид
   */
:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
}

/**
    Удаляем все анимации и переходы для людей,
    которые предпочитают их не использовать
   */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*Создание цветовой палитры*/
:root {
    --dark-bg-color: #2B2835;
    --dark-header-opacity-color: #191720;
    --light-color: #ffffff;
    --yellow-color: #FFC700;
    --light-bg-color: #FBFCFF;
    --product-pink-color: #DD5656;
    --black-color: #000000;
    --price-color: #9D8220;
    --base-font-color: "Montserrat";
}

body {
    background-color: var(--dark-bg-color);
    font-family: var(--base-font-color);
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

.header {
    background-color: rgba(25, 23, 32, 0.5);
    color: var(--light-color);
}

.header-container {
    padding-inline: 4.948vw;
    padding-block: 14px;

}

.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 47px;
}

.header-logo {}

.header-nav-list {
    display: flex;
    column-gap: 5.729vw;
}

.header-nav-list-item {
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px;
    position: relative;
    display: flex;
    justify-content: center;
}

.header-nav-list-item::after {
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    position: absolute;
    background-color: var(--light-color);
    bottom: 0;
    transition: width 0.2s;
}

.header-nav-list-item:hover::after,
.header-nav-list-item:focus::after {
    width: 100%;
    transition: width 0.2s;
}

.header-nav-actions-list {
    display: flex;
    column-gap: 47px;
}

.header-nav-actions-item {}

/*Стилизация первого блока*/
.main-container {}

.main-black-beats-sec {}

.main-product-image {
    position:absolute;
    top: 0;
    left: -15%;
    z-index: -100;
}

.main-black-info {
    display: inline-flex;
    justify-content: flex-end;
    
}

.main-black-info-name {}

.main-black-info-title {}

.main-black-pricing {}

.black-price {}

.black-buy-button {}

.main-black-subinfo {}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Beats Production</title>
</head>

<body>
    <header class="header">
        <div class="header-container">
            <nav class="header-navbar">
                <a href="#" class="header-logo-link"><img src="icons/Logo.svg" alt="Beats-Logo" class="header-logo"></a>
                <ul class="header-nav-list">
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Headphones</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Earphones</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Speakers</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Explore</a></li>
                </ul>
                <ul class="header-nav-actions-list">
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="24.996" height="24.997" viewBox="0 0 24.996 24.997" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Fill 1"
                                    d="M9.99016 16.661C13.6445 16.6623 16.6604 13.6854 16.6653 10.0722C16.6703 6.33627 13.7128 3.33007 10.0303 3.32766C6.32636 3.32525 3.3334 6.30044 3.33192 9.98618C3.33053 13.6685 6.31433 16.6597 9.99016 16.661M15.7954 18.1439C11.1628 21.3754 5.27368 20.1388 2.15923 16.1977C-0.962804 12.2468 -0.67336 6.65794 2.8596 2.99498C6.30044 -0.572524 11.9509 -1.00539 15.9729 1.97877C20.1506 5.0785 21.422 11.186 18.1575 15.791C18.2132 15.8494 18.2697 15.911 18.3288 15.9701C20.3799 18.0216 22.433 20.0712 24.4818 22.1251C25.3965 23.042 25.0389 24.546 23.8161 24.917C23.1569 25.117 22.5861 24.9365 22.1033 24.4534C20.5053 22.8544 18.9063 21.2563 17.3078 19.6578C16.8064 19.1562 16.3053 18.6542 15.7954 18.1439"
                                    fill="#FFFFFF" fill-rule="evenodd" transform="translate(-0 -0)" />
                            </svg>
                        </a>
                    </li>
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="27" viewBox="0 0 27 27" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Shape"
                                    d="M23.046 17.454C21.5756 15.9837 19.8254 14.8952 17.9159 14.2363C19.9611 12.8277 21.3047 10.4703 21.3047 7.80469C21.3047 3.50119 17.8035 0 13.5 0C9.19651 0 5.69531 3.50119 5.69531 7.80469C5.69531 10.4703 7.03893 12.8277 9.08413 14.2363C7.17462 14.8952 5.42447 15.9837 3.95408 17.454C1.40426 20.0039 0 23.394 0 27L2.10938 27C2.10938 20.7192 7.21918 15.6094 13.5 15.6094C19.7808 15.6094 24.8906 20.7192 24.8906 27L27 27C27 23.394 25.5957 20.0039 23.046 17.454ZM13.5 13.5C10.3596 13.5 7.80469 10.9451 7.80469 7.80469C7.80469 4.66425 10.3596 2.10938 13.5 2.10938C16.6404 2.10938 19.1953 4.66425 19.1953 7.80469C19.1953 10.9451 16.6404 13.5 13.5 13.5Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
                    </li>
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="25" viewBox="0 0 27 25" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Shape"
                                    d="M25.8906 4.55174L4.77996 4.55174L4.46616 1.02007C4.41483 0.442532 3.93571 0 3.36175 0L1.10884 0C0.496445 0 0 0.501529 0 1.1202C0 1.73887 0.496445 2.2404 1.10884 2.2404L2.348 2.2404C3.02519 9.86212 1.27501 -9.83721 3.62333 16.5944C3.71383 17.6289 4.26715 18.7515 5.22033 19.5143C3.50178 21.7314 5.07201 25 7.86751 25C10.1877 25 11.8242 22.6622 11.0286 20.448L17.0974 20.448C16.3027 22.6594 17.9357 25 20.2585 25C22.1121 25 23.6202 23.4765 23.6202 21.6038C23.6202 19.7312 22.1121 18.2077 20.2585 18.2077L7.875 18.2077C7.03271 18.2077 6.2987 17.6943 5.98189 16.9463L23.7027 15.8942C24.1865 15.8655 24.5958 15.5226 24.7134 15.0476L26.9664 5.94361C27.1411 5.23767 26.6121 4.55174 25.8906 4.55174ZM7.86751 22.7596C7.23673 22.7596 6.7235 22.2411 6.7235 21.6038C6.7235 20.9665 7.23673 20.448 7.86751 20.448C8.49833 20.448 9.01157 20.9665 9.01157 21.6038C9.01157 22.2411 8.49833 22.7596 7.86751 22.7596ZM20.2584 22.7596C19.6276 22.7596 19.1143 22.2411 19.1143 21.6038C19.1143 20.9665 19.6276 20.448 20.2584 20.448C20.8892 20.448 21.4025 20.9665 21.4025 21.6038C21.4025 22.2411 20.8892 22.7596 20.2584 22.7596ZM22.7594 13.7059L5.6834 14.7197L4.97902 6.79208L24.4705 6.79208L22.7594 13.7059Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="main">
        <div class="main-container">
            <section class="main-black-beats-section">
                <img class="main-product-image" src="images\Bitmap2.png" alt="bears-headphones">
                <div class="main-black-info">
                    <p class="main-black-info-name">Beats Studio3 Wireless</p>
                    <h1 class="main-black-info-title">Experience your
                        music like never before.</h1>
                    <div class="main-black-pricing">
                        <span class="black-price">
                            $299.95
                        </span>
                        <button type="button" class="black-buy-button">Buy Now</button>
                    </div>
                    <p class="main-black-subinfo">$60 Apple Music gift card with purchase of select Beats products.*</p>
                </div>
            </section>
        </div>
    </main>

</body>

</html>

html
Martin Hope
maindenis
Asked: 2025-01-10 01:22:17 +0000 UTC
  • 7

这是布局 在此输入图像描述

这就是我的方式 在此输入图像描述

这是 HTML

.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  display: flex;
  width: 50%;
  background: #E4E7F6;
}

.thumb:nth-child(odd) {
  background: #fff;
}
<div class="thumbnails">
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
</div>

您需要按照布局分配颜色。如何做到这一点？

javascript
Martin Hope
HTO HOT
Asked: 2025-01-10 00:58:33 +0000 UTC
  • 6

我决定尝试使用 javascript 中的生成器，并发现了奇怪的（对我来说）行为。我个人并不完全清楚yield的执行顺序。

让我们看一下这段代码：

function* gen() {
   return yield yield 5;
}
const iter = gen();
console.log(iter.next()); // value = 5
console.log(iter.next(2)); // value = 2
console.log(iter.next(3)); // value = 3

原则上，最右边的yield首先执行是合乎逻辑的，并且它们的顺序与堆栈的顺序相同。

但我们以下面的代码为例：

function* gen() {
  return (yield) + (yield) - (yield);
}
const iter = gen();
console.log(iter.next()); // value = undefined
console.log(iter.next(2)); // value = undefined
console.log(iter.next(4)); // value = undefined
console.log(iter.next(7)); // value = -1
// Вот как получилось -1: 2 + 4 - 7 = -1

由于某种原因，添加括号和运算符可以使顺序保持一致。

这是下一个例子：

function* gen() {
  return yield (yield) - (yield);
}
const iter = gen();
console.log(iter.next()); // value = undefined,
console.log(iter.next(3)); // value = undefined,
console.log(iter.next(6)); // value = -3,
console.log(iter.next(7)); // value = 7,
// Вот как получилось -3: 3 - 6 = -3
// А 7 просто подставилось

但在这个例子中，yield 触发顺序是 2,3,1。

为什么顺序是这样的，文档或标准中是否有描述？如果没有描述，那么阅读您对触发什么原则收益率的看法会很有趣

javascript
Martin Hope
feelingreat
Asked: 2025-01-09 21:59:49 +0000 UTC
  • 5

大家好！我遇到了以下 websocket 代理问题ws/**：

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

我已在最底部附加了我的配置和软件包版本。

最初，webpack从版本4迁移到版本5。在版本4中，没有观察到这个问题。即使现在，切换到旧版本的项目，/ws/**使用套接字时也不会发生这样的错误。

数据通常通过 websocket 本身到达，但每次与 websocket 交互时，IDE 控制台中都会显示此错误。尝试过：

  • 添加字段webSocketTransport，webSocketURL以及webSocketServer
  • 将 webpack 包更新到最新版本
  • 直接安装ws最新版本包

封装版本：

        "webpack": "^5.89.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "html-webpack-plugin": "^5.6.0",

网络包配置：

"use strict";

const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { DefinePlugin } = require('webpack');

const Xliff2Json = require("./Xliff2Json");

const ip = require("ip");
const DEV_IP_ADDR = ip.address();
const DEV_PORT = 5002;
const ASSET_PATH = process.env.ASSET_PATH || "/";
const API_DOMAIN = "";
const API_PORT = "";

const isDevelopment = process.argv[process.argv.indexOf('--mode') + 1] === 'development';

const webpackConfig = {
    entry: ["@babel/polyfill", "./src/index.jsx"],
    output: {
        filename: isDevelopment ? "[name].bundle.js" : "[contenthash].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        library: "app",
    },
    devServer: {
        port: DEV_PORT,
        host: DEV_IP_ADDR,
        historyApiFallback: true,
        devMiddleware: {
            publicPath: ASSET_PATH,
            stats: "minimal",
        },
        client: {
            logging: "info",
            overlay: {
                errors: true,
                warnings: false,
                runtimeErrors: true,
            },
            webSocketTransport: 'ws',
            webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws`,
        },
        webSocketServer: 'ws',
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true,
        hot: true,
        liveReload: true,
        proxy: [
            {
                context: [
                    "/api/**",
                    "/stream/sse/**",
                    "/download/**"
                ],
                target: "https://my-instance.com",
                secure: false,
                changeOrigin: true,
            },
            {
                context: [
                    "/ws/**",
                    "/stream/ws/**"
                ],
                target: "wss://my-instance.com",
                ws: true,
                secure: false,
                changeOrigin: true,
            },
        ],
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            }
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: isDevelopment ? "[id].css" : "[contenthash].css",
            ignoreOrder: true
        }),
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            favicon: "./src/static/images/favicon.png",
            template: "./src/index.html",
            filename: "index.html",
        }),
        new DefinePlugin({
            API_DOMAIN: `"${API_DOMAIN}"`,
            API_PORT: `"${API_PORT}"`,
        }),
        new CspHtmlWebpackPlugin(
            {
                "default-src": ["'self'", "my-sentry-backend.com", "wss:", "ws:"],
                "base-uri": "'self'",
                "object-src": "'none'",
                "frame-src": "'none'",
                "worker-src": "blob:",
                "img-src": ["'self'", "data:"],
                "script-src": ["'self'", "'unsafe-eval'"],
                "style-src": ["'unsafe-inline'", "'self'"],
            },
            {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": false,
                },
            }
        )
    ],
};

if (isDevelopment) {
    webpackConfig.devtool = 'inline-cheap-module-source-map';
}

module.exports = webpackConfig;
javascript
Martin Hope
Лена
Asked: 2025-01-09 15:56:42 +0000 UTC
  • 5

我有 2 个站点，每个站点都有自己的配置文件。

可以这样做，以便如果 URL 是通过 http:// 或通过 www，则无论是哪个站点，都可以执行重定向。但仅此而已，如果请求是个体企业家提出的，请忽略此块

server {
    if ($host = www.site.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = site.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name site.ru www.site.ru;
    listen 80;
    return 404; # managed by Certbot
}


server {
    server_name site.ru www.site.ru;
    listen 80 default_server;
    listen [::]:80 default_server;
    return 301 https://site.ru$request_uri;
}

也就是说，将2个块合并为1个，使其通用。仅当请求是通过个体企业家提出时，才忽略该阻止。我希望将 phpmyadmin 控制面板托管在个人企业家上。

server {
        server_name _;
        listen 80 default_server;
        listen [::]:80 default_server;

        if($host = "site.ru" || $host = "www.site.ru") {
            return 301 https://site.ru$request_uri;
        }

        if($host = "site1.ru" || $host = "www.site1.ru") {
            return 301 https://site1.ru$request_uri;
        }

    }
    
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;

不包括，从块所在的配置文件中删除它们。

阅读时，他对我理解的语法发誓

if($host

我试着不带跑步

server_name _;

一切都一样，他在同一条线上发誓，对着主持人

nginx
上一页
下一页