Дмитрий Сухоцкий提出的问题

Дмитрий Сухоцкий

Asked: 2020-01-10 21:59:39 +0800 CST

获取您来自的页面的 url

0

有 2 个页面 A.html 和 B.html 页面 A 有一个链接<a href="B.html>B</a>

我正在尝试记录 url console.log(document.referrer)，但我得到一个空字符串。console.log(document)返回#document。

当我做同样的事情但使用网络服务器时，它会显示正确的路径。console.log(document) -> [object HTMLDocument] 有什么问题？如何在没有 Web 服务器的情况下使用

Дмитрий Сухоцкий

Asked: 2020-10-07 23:43:38 +0800 CST

动态添加具有唯一 ID 的输入

0

我面临的任务是单击添加输入，并使用按钮删除此输入。输入的最大数量是 4。每个输入必须有自己的唯一 id (pick1,pick2,pick3 或 pick4)。删除和添加新的后我很困惑。我尝试将值添加到数组并从中拉出计数器，但它不起作用。提示算法。

let count = 0;
let mass = [];
        $('.addPick').click(function(){
            
            var input = document.createElement("input");
            var btn = document.createElement("span");
            var div = document.createElement("div");

            if (count < 4) {
                count++;

                input.setAttribute("type", "text");
                input.setAttribute("id", "pick" + count);
           

                btn.innerHTML = "&times;";
                btn.setAttribute("class", "delete-pick");
                div.append(input,btn);

                $('.new-input').append(div);


                $('.delete-pick').click(function(){
                count--;
  
                  $(this).parent().remove();
                })
            } else {
                alert("Можно выбрать максимум 4 точки");
            }
            

        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="+" class="addPick">
<div class="new-input"></div>

Дмитрий Сухоцкий

Asked: 2020-05-15 16:27:17 +0800 CST

从服务器获取 json 时出错

0

我尝试从服务器获取 json 以进行进一步操作并得到错误。

Access to XMLHttpRequest at 'http://www.mrsoft.by/data.json' from origin 'http://localhost:1234' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在谷歌上搜索到这是标题的问题，尝试以不同的方式传递它们，但没有成功。

  var requestURL = 'http://www.mrsoft.by/data.json';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var obj = request.response;
    console.log(obj);
  }

Дмитрий Сухоцкий

Asked: 2020-05-03 16:36:34 +0800 CST

删除/添加项目

1

删除复选框后如何正确实现块的删除？为什么删除只对最初创建的块起作用？

var el = document.querySelectorAll(".input__td");
let block = document.querySelector(".footer__blockPrice");
el.forEach(elem => {
  
  elem.addEventListener("click", () => {
    
    if (elem.checked) {
      
      var div = document.createElement('div');
      div.className = "footer__btn " + elem.id;
      
      div.innerHTML = elem.parentElement.nextElementSibling.innerHTML + "<button class='footer__shutdown'></button>";
      block.appendChild(div);
    } else {

      var divBtn = block.querySelector("." + elem.id);
      block.removeChild(divBtn);
    }
  })
})
    
    
    var delBtn = document.getElementsByClassName("footer__shutdown");
    for (let i = 0; i < delBtn.length; i++) {
      delBtn[i].addEventListener("click", () => {
        delBtn[i].parentElement.remove();
      })
    }

table {
  margin-bottom: 20px;
}

.footer__btn {
  display: inline-block;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 25px;
  border: 0.5px solid black 
}

.footer__shutdown {
  text-align: center;
  width: 30px;
  height: 20px;
  margin-left: 5px;
  cursor: pointer;
}

 <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="checkbox-id-all" /> <label for="checkbox-id"></label></th>
        <th>Номер заказа</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id1"  checked/>
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 888</td>
        <td data-label="Сумма" class="typeWork">19 332₽</td>
      </tr>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id1"  />
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 890</td>
        <td data-label="Сумма" class="typeWork">15 332₽</td>
      </tr>
    </tbody>
  </table>
  
  <div class="balance-footer footer">
    <span class="footer__total">Итого к оплате заказы:</span>
    <div class="footer__blockPrice" id="footer__blockPrice">
      <div class="footer__btn">#1 204 888 <button class="footer__shutdown">X</button></div> 
    </div>
    <div class="footer__price">
      на сумму: <span>____ ₽</span>
      <button class="footer__toPay">Оплатить</button>
    </div>


  </div>

Дмитрий Сухоцкий

Asked: 2020-01-21 03:36:20 +0800 CST

更新数组元素值

0

更新值时遇到错误。我传递了值，但状态没有更新。我正在寻找传递的ID。因此，NewArr 数组接收到不正确的数据。

state = {
mobile : [
  {"id": 0, "name": "Dima", "phone": 12345},
  {"id": 1, "name": "Ira", "phone": 67890},
]

 saveItem = (name,phone,id) => {
let NewArr = this.state.mobile;
NewArr = NewArr.map(el => {
  if (el.id === id) {
    el.name = name;
    el.phone = phone
  }
  return NewArr;
})
this.setState({
  mobile: NewArr,
  read:false
})

我正在尝试像这样更新，但我不知道如何找到 NewMobile[index] 索引。最有可能在过滤器中，但如何将其转移到外部不起作用

    const newItem = {
  id: id,
  name: text,
  phone: phone
}
let NewArray = this.state.mobile.filter(el => el.id === id);
const a = this.state.mobile.indexOf(NewArray);
NewArray = newItem;
const NewMobile = this.state.mobile;
NewMobile[a] = NewArray;
this.setState({
  mobile: NewMobile

})

Дмитрий Сухоцкий

Asked: 2020-12-21 14:37:56 +0800 CST

道具不显示

1

任务：option里面有个select，我通过map从object中推导出名字（name），改变当前状态。选择一个选项后，我想在屏幕上显示选择的选项(<p>{this.props.valueSelect}</p>)，但没有显示。

零件

import React, { Component } from 'react'
import Check from './conponent/Check'
import List from './conponent/List'
import './App.css';

class App extends Component {

constructor(){
  super();

  this.state = {
    monument: [{
      "id" : 1,
      "name": "Памятник №1",
      "color": ["Blue","Red", "White"],
      "width": 300,
      "heigth": 100,
      "price": 50,
      "country": "Russia",
      "url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
    },
    {
      "id" : 2,
      "name": "Памятник №2",
      "color": ["Blue","Red", "White"],
      "width": 300,
      "heigth": 100,
      "price": 50,
      "country": "Russia",
      "url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
     }],
    valueSelect: " "
  }
}

  render() {
    return (
      <>
      <List 
        monumentObj = {this.state.monument}
        valueSelect = {this.state.valueSelect}
      />
      </>
    );
  }
}

Select.js 组件

export default App;
import React, { Component } from 'react';
export default class Select extends Component {

handleChange = (e) => {
    this.setState({
        valueSelect: e.target.value
    }, () => console.log(this.state.valueSelect))
    this.forceUpdate();
}
render () {
    return (
        <select value = {this.props.valueSelect} onChange={this.handleChange} >
            {
                this.props.monumentObj.map(i => {
                    return(
                        <option key={i.id} value = {i.name}>{i.name}</option>
                    )
                })
            }
        </select>

    )
};
}

零件

import React, { Component } from 'react';
import Collage from './Collage'
import Select from './Select'

export default class List extends Component {


  render() {
      return (
        <div className="List">
          <Select 
            monumentObj = {this.props.monumentObj} 
          />
          <Collage 
           monumentObj = {this.props.monumentObj}
           valueSelect = {this.props.valueSelect}
          />
        </div>
      );

  }
}

零件

import React, { Component } from 'react';
export default class Collage extends Component {

    render () {
        return (
            <div>
            {
                this.props.monumentObj.map(i => {
                    return (
                        <>
                        <h3>{i.name}</h3>
                        <p>{this.props.valueSelect}</p>
                        </>
                    )
                })
            }
            </div>
        )
    };
}

Дмитрий Сухоцкий

Asked: 2020-07-09 18:05:17 +0800 CST

数据到ajax表

0

我正在实现一个用于添加/删除记录的表。数据是通过表单写入到表中，但是在窗口重载后才显示（我想实现不重载）。我阅读了有关 ajax 的信息，我尝试使用它，但添加到表中不起作用。

在表中，我从数据库中推断出价值。通过单击添加字段，将打开一个模式窗口并捕获数据

<table class="table" id="tableID">

  <thead class="thead-light">
  <tr>
      <th scope="col">id <span class="active sortid">↓</span><span>↑</span></th>
      <th scope="col">Name <span class="active sortname">↓</span><span>↑</span></th>
      <th scope="col">Price <span class="active sortprice">↓</span><span>↑</span></th>
      <th scope="col">Rating <span class="active sortrating">↓</span><span>↑</span></th>
    </tr>
    </thead>
  <tbody>
      <?php
      $result = mysqli_query($link,"SELECT id,name,price,rating FROM product");
      while($row = mysqli_fetch_array($result)) {
        echo '<tr>
        <th scope="row">'.$row['id'].'</th>
        <td>'.$row['name'].'</td>
        <td>'.$row['price'].'</td>
        <td>'.$row['rating'].'</td>
        <td><button type="button" id="'.$row['id'].'" class="btn btn-primary edit">edit field</button></td>
        <td><button type="button" data_id="'.$row['id'].'" class="btn btn-danger delete">delete field</button></td>
    </tr>';
      }
        ?>

  </tbody>

</table>

<button type="button" class="btn btn-primary bye">add field</button>

<div class="modal" id="window">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form class="b-popup" id="popup1"  method="post" id="ajax_form" action="">
        <div class="form-group">
          <label for="name">name</label>
          <input type="text" class="form-control" name="name" id="name"  placeholder="Enter name">
          <label for="price">price</label>
          <input type="text" class="form-control" name="price" id="price"  placeholder="Enter price">
          <label for="rating">rating</label>
          <input type="text" class="form-control" name="rating" id="rating"  placeholder="Enter rating">
        </div>
        <button type="submit" class="btn btn-primary btn2" data-dismiss="modal" >Submit</button>
      </form>
      </div>
    </div>
  </div>
</div>

在这里它实现了 ajax 并将其传递给addfield.php以写入数据库

 $(document).ready(function() {
    $('#ajax_form').submit(function(event){
        event.preventDefault(); //останавливаем стандартную отправку
        var name = $("#name").val();
        var price = $("#price").val();
        var rating = $("#rating").val();
        $.ajax({
            type: "POST",
            url: "add_field.php",
            data: {"name": name, "price": price,"rating": rating},
            cache: false,
            success: 
               $('#tableID').append('<tr><td>price</td></tr><tr><td>".$name."</td></tr>');

            }

        });
    });

 });

addfield.php

<?php 
include ("db.php");
    $name = $_POST['name'];
    $price = $_POST['price'];
    $rating = $_POST['rating'];
    $link = db_connect();
    $result = mysqli_query($link,"INSERT INTO product (id,
                                               name,
                                               price,
                                               rating) 
                                    VALUE      (null,
                                               '$name',
                                               '$price',
                                               '$rating')");


?>

Дмитрий Сухоцкий

Asked: 2020-06-01 16:13:40 +0800 CST

做hr的简单方法

0

.preim {
  background-color: #292929;
  position: relative; }
  .preim__caption {
    color: white;
    font-family: 'Proxima_Nova_Semibold', sans-serif;
    font-size: 30px;
    width: 488px;
    margin-left: 170px;
    padding-bottom: 50px; }
  .preim__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 70px; }
  .preim__item {
    width: 20%;
    text-align: left;
    padding: 0 30px; }
  .preim__title {
    color: white;
    font-family: "Proxima_Nova";
    font-size: 18px;
    padding: 15px 0 20px; }
  .preim__disc {
    color: #e8e7e7;
    font-family: "Proxima_Nova";
    font-size: 13px;
    font-weight: 300;
    line-height: 15px;
    width: 170px; }
  .preim__icon {
    width: 68px;
    height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: relative;
    z-index: 3; }
    .preim__icon img {
      border-radius: 50%;
      background-color: #27a4ff;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto; }
    .preim__icon-block {
      background: red;
      width: 100px;
      position: relative;
      z-index: 2; }
  .preim__lines {
    position: absolute;
    top: 144px;
    width: 90%;
    z-index: 1; }
  .preim__line {
    width: 85%;
    height: 0px;
    border-bottom: 3px dashed #27a4ff;
    position: relative;
    margin-top: 35px;
    margin-bottom: 20px;
    margin: 0; }
  .preim__line:after {
    content: "";
    border-left: 10px solid #27a4ff;
    border-right: 0px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: 100%;
    top: -5px; }
    @mixin line {
    width: 85%;
    height: 0px;
    border-bottom: 3px dashed #27a4ff;
    position: relative;
    margin-top: 35px;
    margin-bottom: 20px
}
@mixin lineAfter {
    content: "";
    border-left: 10px solid #27a4ff;
    border-right: 0px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: 100%;
    top: -5px;
}

<section class="preim">
  <div class="preim__lines">
    <div class="preim__line"></div>
  </div>
  <div class="container">
    <div class="preim__caption">Несколько преимуществ и причин, почему выбирают именно нас:</div>
    <div class="preim__items">
      <div class="preim__item">
        <div class="preim__icon"><img src="../img/preim/adv_icon_1.png" width="50px" height="50px" alt="img1"/></div>
        <div class="preim__title">Приемлемая цена</div>
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет. </p>
      </div>
      <div class="preim__item">
        <div class="preim__icon"><img src="../img/preim/adv_icon_2.png" width="50px" height="50px" alt="img2"/></div>
        <div class="preim__title">Скорость работы</div>
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет.</p>
      </div>
      <div class="preim__item">
        <div class="preim__icon-block">
          <div class="preim__icon"><img src="../img/preim/adv_icon_3.png" width="50px" height="50px" alt="img3"/></div>
        </div>
        <div class="preim__title">Свои грузчики</div>
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет. </p>
      </div>
    </div>
  </div>
</section>.

告诉我用什么简单的方法来制作如图所示的蓝色小时。我想到了伪元素，但这并不方便。

问题如何在hr上方制作红色背景？z-index 没有帮助

Дмитрий Сухоцкий

Asked: 2020-03-20 22:30:06 +0800 CST

香草js画廊

1

先生们，我正在尝试编写一个简单的画廊，将图像切换为 js。从平庸的例子中，我发现了这一点。我所理解的 - 评论。我寻求帮助以咀嚼代码或用更简单的代码替换它。

    var largeImg = document.getElementById('largeImg');// находим главную
    document.getElementById('thumbs').onclick = function(event) { //по нажатию ловим событие блока thumbs
        var target = event.target; //как понимаю элемент который нажали

        while (target != this) { //здесь теряюсь, если нажатый эл. не из thumbs тогда

            if (target.nodeName == 'A') { //если родитель не А? не понял, ссылка просто "а"
            showThumbnail(target.href, target.title);//запуск функции 
 и запись вытянутых параметров из нажатого элемента 
            return false; // ?
            }

            target = target.parentNode; //если иф не отработал - то?
        }
}

function showThumbnail(href, title) { // сама функция присвоения новых параментов 
  largeImg.src = href;
  largeImg.alt = title;
}

  #largeImg {
    border: solid 1px red;
    width: 550px;
    height: 400px;
    padding: 5px;
  }
  
  #thumbs a {
    border: solid 1px blue;
    width: 200px;
    height: 200px;
    padding: 3px;
    margin: 2px;
    float: left;
  }
  
  #thumbs a:hover {
    border-color: #FF9900;
  }

<div class="section">
    <div class="container">
        <div class="row">
  <p><img id="largeImg" src="./img/bmwx6.jpg" alt="Large image"></p>
</div>
<div class="row">
  <div id="thumbs">
    <a href="./img/auto1.jpg" title="Image 3"><img src="./img/auto1.jpg" width="100%" height="100%"></a>
    <a href="./img/auto2.jpg" title="Image 4"><img src="./img/auto2.jpg" width="100%" height="100%"></a>
    <a href="./img/avtoservice.jpg" title="Image 5"><img src="./img/avtoservice.jpg" width="100%" height="100%"></a>
    <a href="./img/banner.jpg" title="Image 6"><img src="./img/banner.jpg" width="100%" height="100%"></a>
  </div>
</div>
</div>
</div>

Дмитрий Сухоцкий

Asked: 2020-02-20 23:00:58 +0800 CST

光滑的手风琴js

3

如何制作流畅的手风琴开启。我的意思是它是通过设置街区的高度和 St. Transition 来调节的。不给鱼，用文字自己做。

var btn_title = document.querySelectorAll('.test_title');
var disc = document.querySelectorAll('.test_disc');

for (var i = 0; i < btn_title.length; i++) {
  btn_title[i].addEventListener('click', fun_open);

  function fun_open(event) {
    for (var i = 0; i < btn_title.length; i++) {
      disc[i].classList.remove('test_disc_show');
      if (btn_title[i] == event.currentTarget) {
        disc[i].classList.toggle('test_disc_show');
      }
    }

  }

}

html .test {
  height: 1000px;
}

html .test_title {
  width: 180px;
  height: 30px;
  background: red;
  border: 1px solid black;
}

html .test_disc {
  width: 180px;
  height: 80px;
  background: blue;
  display: none;
  border: 1px solid black;
}

html .test_disc_show {
  display: block;
  transition: all 0.9s;
}

<div class="test">
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
</div>
<!-- /.test -->

Дмитрий Сухоцкий

Asked: 2020-02-09 20:54:55 +0800 CST

768px 的网格不会改变

1

请帮我解决问题。为自适应指定了必要的类。在 768 像素处它不会改变。在检查器中，@media (min-width: 768px) .col-md-6 { 以该分辨率写入，但块不太可能（如果 .col-md-6）。我哪里错了？大于和小于 768px 根据需要显示。

* {
  margin: 0;
  padding: 0;
  font-size: 10px;
  box-sizing: border-box;
}


/*-------------------------------------- header ---------------------------- */

.header-menu-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.header-section {
  background-color: #e9e9e9;
  position: relative;
  overflow: hidden;
}

.header-section .img-bg {
  background-repeat: no-repeat;
  opacity: .1;
  position: absolute;
  top: 0px;
  height: 100%;
}

.header-section .menu ul {
  display: flex;
  list-style-type: none;
}

.header-section .menu ul a {
  text-decoration: none;
  padding: 0 15px;
  color: #191919;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  text-transform: uppercase;
}

.header-section .menu ul a:hover {
  color: #10c9c3;
}

.header-section .menu ul a.active {
  color: #10c9c3;
  letter-spacing: 1.2px;
}

.caption-header {
  justify-content: flex-end;
}

.caption-header h1 {
  color: #1d1d1d;
  font-family: "Montserrat";
  font-size: 38px;
  font-weight: bold;
  line-height: 48px;
}

.caption-header p {
  color: #787878;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  padding: 25px 0;
}

.caption-header-row {
  justify-content: flex-end;
  margin-top: 150px;
}

.caption-header-row a {
  padding: 20px 40px;
  background-color: #10c9c3;
  color: #FFF;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 500;
  line-height: 84px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
}

.caption-header-row a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header-section .slider {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 0 30px;
}

.header-section .slider div {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 4px;
  opacity: .4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header-section .slider div.active {
  background-color: #10c9c3;
  opacity: .6;
}

.header-section .slider div:hover {
  background-color: #10c9c3;
  opacity: .6;
}

@media (max-width: 768px) {
  .menu {
    display: none;
  }
  .caption-header-row {
    margin-top: 50px;
  }
  .header-menu-col {
    justify-content: center;
  }
  .caption-header {
    text-align: center;
  }
}

@media (max-width: 568px) {
  .header-section .img-bg {
    overflow: hidden;
  }
}


/*-------------------------------------- /header ---------------------------- */


/*-------------------------------------- about ---------------------------- */

.about-section {
  padding: 50px 0;
  text-align: center;
}

.about-section h1 {
  color: #191919;
  font-family: Montserrat;
  font-size: 30px;
  font-weight: bold;
  line-height: 60px;
}

.about-section p {
  color: #787878;
  font-family: "Nunito Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 25px 0;
}

@media (max-width: 768px) {
  .about-section p {
    font-size: 14px;
  }
}


/*-------------------------------------- /about ---------------------------- */


/*-------------------------------------- professional-skills-section ---------------------------- */

.row-professional-skills {
  align-items: center;
}

.professional-skills-section .progress {
  height: 3px;
}

.caption-professional-skills h1 {
  color: #171717;
  font-family: Montserrat;
  font-size: 30px;
  font-weight: bold;
  line-height: 84px;
}

.caption-professional-skills p {
  color: #000000;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-transform: uppercase;
}

.professional-skills-section img {
  width: 100%;
}

.professional-skills-section .image-block {
  overflow: hidden;
}

.professional-skills-section .lock-design {
  width: 100%;
}

@media (max-width: 768px) {
  .row-professional-skills {
    flex-direction: column-reverse;
  }
  .header-section {
    background-color: red;
  }
}


/*-------------------------------------- /professional-skills-section ---------------------------- */

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style/style.css">

</head>

<body>
  <div id="header" class="header-section">
    <img src="https://preview.ibb.co/eG0rvc/header_bg.jpg" alt="header_bg" border="0" class="img-bg">
    <div class="container">
      <div class="row">
        <div class="col-xl-12 header-menu-col">
          <div class="logo">
            <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a>
          </div>
          <div class="menu">
            <ul>
              <li class="menu-item"><a class="active" href="#home">home</a></li>
              <li class="menu-item"><a href="#about">about</a></li>
              <li class="menu-item"><a href="#work">work</a></li>
              <li class="menu-item"><a href="#process">process</a></li>
              <li class="menu-item"><a href="#services">services</a></li>
              <li class="menu-item"><a href="#testcontact">testcontact</a></li>
              <li class="menu-item"><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <!-- /============================= /menu =========================== !-->
        </div>
        <!-- /============================= /col logo =========================== !-->
      </div>
      <div class="row caption-header-row">
        <div class="col-sm-12 col-md-6">
          <div class="caption-header">
            <h1>We Design and Develop</h1>
            <p>We are a new design studio based in USA. We have over 20 years of combined experience, and know a thing or two about designing websites and mobile apps.</p>
            <a href="#">contact us</a>
          </div>
        </div>
        <!-- /============================= /col menu =========================== !-->
      </div>
      <!-- /============================= /row =========================== !-->
      <div class="row">
        <div class="col">
          <div class="slider">
            <a href="#">
              <div class="active"></div>
            </a>
            <a href="#">
              <div></div>
            </a>
            <a href="#">
              <div></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /header-section =========================== !-->
  <div id="about" class="about-section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-sm-12 col-md-12">
          <div class="caption-about">
            <h1>Abous us</h1>
            <p>Divide have don't man wherein air fourth. Own itself make have night won't make.<br> A you under Seed appear which good give. Own give air without fowl moveth dry first<br> heaven fruit, dominion she'd won't very all.</p>
            <img src="image/signature.png" alt="about us">
          </div>
        </div>
        <!-- /============================= /col  =========================== !-->
      </div>
      <!-- /============================= /row =========================== !-->
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /about-section =========================== !-->
  <div id="professional-skills" class="professional-skills-section">
    <div class="container">
      <div class="row row-professional-skills">
        <div class="col-12 col-sm-12 col-md-6 professional-skills">
          <div class="caption-professional-skills">
            <h1>Professional Skills</h1>
            <div class="block-design">
              <p>UI/UX Design 75%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="block-design">
              <p>web development 90%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 90%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="block-design">
              <p>marketing 65%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- /============================= /col  =========================== !-->
        <div class="col-12 col-sm-12 col-md-6 ">
          <div class="image-block">
            <img src="image/mobile_top.png" alt="mobile_top">
          </div>
        </div>
      </div>
      <!-- /============================= /row =========================== !-->
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /about-section =========================== !-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>

</html>

Дмитрий Сухоцкий

Asked: 2020-02-09 18:13:58 +0800 CST

裁剪背景图像

1

告诉。将图片放在背景中。屏幕缩小时，图片要保持比例，高度等于“header-section”的高度，右边多余的部分要剪掉，不显示。你能解释一下吗。

*{
    margin: 0;
    padding: 0;
    font-size: 10px;
}

/*-------------------------------------- header ---------------------------- */
.header-menu-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.header-section {
    background-color: #e9e9e9;
    padding: 30px 0 90px ;  
}
.header-section .img-bg{
    background-repeat: no-repeat;
    opacity: .1;
    position: absolute;
    top: 0px;
}
.header-section .menu ul{
    display: flex;
    list-style-type: none;
}
.header-section .menu ul a{
    text-decoration: none;
    padding: 0 15px;
    color: #191919;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    text-transform: uppercase;
}
.header-section .menu ul a:hover {
    color: #10c9c3;  
}
.header-section .menu ul a.active{
    color: #10c9c3;
    letter-spacing: 1.2px;
}
.caption-header {
    justify-content: flex-end;
}
.caption-header h1{
    color: #1d1d1d;
    font-family: "Montserrat";
    font-size: 38px;
    font-weight: bold;
    line-height: 48px;
}
.caption-header p{
    color: #787878;
    font-family: "Nunito Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding: 25px 0;
}
.caption-header-row {
    justify-content: flex-end;
    margin-top: 150px;
}
.caption-header-row a{
    padding: 20px 40px;
    background-color: #10c9c3;
    color: #FFF;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 500;
    line-height: 84px;
    text-transform: uppercase;
    letter-spacing: 1.2px; 
    text-decoration: none;
}
.caption-header-row a:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }
    .caption-header-row {
        margin-top: 50px;
    }
    .header-menu-col {
        justify-content: center;
    }
    .caption-header {
        text-align: center;
    }
}
@media (max-width: 568px) {
    .header-section .img-bg{
        
        overflow: hidden;
    }
}
/*-------------------------------------- /header ---------------------------- */
/*-------------------------------------- about ---------------------------- */
.about-section {
    padding: 50px 0; 
    text-align: center;  
    
}
.about-section h1 {
    color: #191919;
    font-family: Montserrat;
    font-size: 30px;
    font-weight: bold;
    line-height: 60px;
}
.about-section p {
    color: #787878;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 25px 0;
}
@media (max-width: 768px) {
    .about-section p {
        font-size: 14px;
}
/*-------------------------------------- /about ---------------------------- */

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="initial-scale=1"  content="width=device-width"> 
         <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
         <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="style/style.css">
  
</head>
   <body>
        <div id="header" class="header-section">
          <img src="https://preview.ibb.co/eG0rvc/header_bg.jpg" alt="header_bg" border="0" class="img-bg">
          <div class="container">
            <div class="row">
              <div class="col-xl-12 header-menu-col">
                <div class="logo">
                  <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a>
                </div>
                <div class="menu">
                  <ul>
                      <li class="menu-item"><a  class="active" href="#home">home</a></li>
                      <li class="menu-item"><a  href="#about">about</a></li>
                      <li class="menu-item"><a  href="#work">work</a></li>
                      <li class="menu-item"><a  href="#process">process</a></li>
                      <li class="menu-item"><a  href="#services">services</a></li>
                      <li class="menu-item"><a  href="#testcontact">testcontact</a></li>
                      <li class="menu-item"><a  href="#contact">Contact</a></li>
                  </ul>
                </div><!-- /============================= /menu =========================== !-->
              </div><!-- /============================= /col logo =========================== !-->
            </div>
            <div class="row caption-header-row">
              <div class="col-sm-12 col-md-6">
                <div class="caption-header">
                  <h1>We Design and Develop</h1>
                  <p>We are a new design studio based in USA. We have over 
                      20 years of combined experience, and know a thing or two 
                      about designing websites and mobile apps.</p>
                  <a href="#">contact us</a>
                </div>
              </div><!-- /============================= /col menu =========================== !-->
            </div><!-- /============================= /row =========================== !-->
          </div><!-- /============================= /container =========================== !-->
        </div><!-- /============================= /header-section =========================== !-->
        <div id="about" class="about-section">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-sm-12 col-md-12">
                  <div class="caption-about">
                    <h1>Abous us</h1>
                    <p>Divide have don't man wherein air fourth. Own itself make have night won't make.<br> 
                        A you under Seed appear which good give. Own give air without fowl moveth dry first<br>
                        heaven fruit, dominion she'd won't very all.</p>
                    <img src="image/signature.png" alt="about us">
                  </div>
                </div><!-- /============================= /col  =========================== !-->
              </div><!-- /============================= /row =========================== !-->
            </div><!-- /============================= /container =========================== !-->
        </div><!-- /============================= /about-section =========================== !-->       
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </body>
</html>

Дмитрий Сухоцкий

Asked: 2020-02-09 14:31:47 +0800 CST

引导 768px 网格

0

解释为什么@media 不适用于 768 像素。我知道问题在网格≥768px，但是如何解决呢？

*{
    margin: 0;
    padding: 0;
    font-size: 10px;
}

/*-------------------------------------- header ---------------------------- */
.header-menu-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.header-section {
    background-color: #e9e9e9;
    padding: 30px 0 90px ;
}
.header-section .menu ul{
    display: flex;
    list-style-type: none;
}
.header-section .menu ul a{
    text-decoration: none;
    padding: 0 15px;
    color: #191919;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    text-transform: uppercase;
}
.header-section .menu ul a:hover {
    color: #10c9c3;  
}
.header-section .menu ul a.active{
    color: #10c9c3;
    letter-spacing: 1.2px;
}
.caption-header {
    justify-content: flex-end;
}
.caption-header h1{
    color: #1d1d1d;
    font-family: "Montserrat";
    font-size: 38px;
    font-weight: bold;
    line-height: 48px;
}
.caption-header p{
    color: #787878;
    font-family: "Nunito Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding: 25px 0;
}
.caption-header-row {
    justify-content: flex-end;
    margin-top: 150px;
}
.caption-header-row a{
    padding: 20px 40px;
    background-color: #10c9c3;
    color: #FFF;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 500;
    line-height: 84px;
    text-transform: uppercase;
    letter-spacing: 1.2px; 
    text-decoration: none;
}
.caption-header-row a:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }
    .caption-header-row {
        margin-top: 50px;
    }
    .header-menu-col {
        justify-content: center;
    }
    .caption-header {
        text-align: center;
    }
}
/*-------------------------------------- /header ---------------------------- */

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="initial-scale=1"  content="width=device-width"> 
         <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
         <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="style/style.css">
  
</head>
   <body>
        <div id="header" class="header-section">
          <div class="container">
            <div class="row">
              <div class="col-xl-12 header-menu-col">
                <div class="logo">
                  <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a>
                </div>
                <div class="menu">
                  <ul>
                      <li class="menu-item"><a  class="active" href="#home">home</a></li>
                      <li class="menu-item"><a  href="#about">about</a></li>
                      <li class="menu-item"><a  href="#work">work</a></li>
                      <li class="menu-item"><a  href="#process">process</a></li>
                      <li class="menu-item"><a  href="#services">services</a></li>
                      <li class="menu-item"><a  href="#testcontact">testcontact</a></li>
                      <li class="menu-item"><a  href="#contact">Contact</a></li>
                  </ul>
                </div><!-- /============================= /menu =========================== !-->
              </div><!-- /============================= /col logo =========================== !-->
            </div>
            <div class="row caption-header-row">
              <div class="col-md-6 col-sm-12">
                <div class="caption-header">
                  <h1>We Design and Develop</h1>
                  <p>We are a new design studio based in USA. We have over 
                      20 years of combined experience, and know a thing or two 
                      about designing websites and mobile apps.</p>
                  <a href="#">contact us</a>
                </div>
              </div><!-- /============================= /col menu =========================== !-->
            </div><!-- /============================= /row =========================== !-->
          </div><!-- /============================= /container =========================== !-->
        </div><!-- /============================= /section =========================== !-->
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </body>
</html>

Дмитрий Сухоцкий

Asked: 2020-02-08 22:05:51 +0800 CST

删除右侧的填充（白条）

0

1.告诉我如何去除条带 2.因为它出现了什么？（小于 768Px）

*{
    margin: 0;
    padding: 0;
    font-size: 10px;
}
.header-menu-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.header-section {
    background-color: #e9e9e9;
    padding: 30px 0 90px ;
}
.header-section .menu ul{
    display: flex;
    list-style-type: none;
}
.header-section .menu ul a{
    text-decoration: none;
    padding: 0 15px;
    color: #191919;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    text-transform: uppercase;
}
.header-section .menu ul a:hover {
    color: #10c9c3;  
}
.header-section .menu ul a.active{
    color: #10c9c3;
    letter-spacing: 1.2px;
}
.caption-header {
    justify-content: flex-end;
}
.caption-header h1{
    color: #1d1d1d;
    font-family: "Montserrat";
    font-size: 38px;
    font-weight: bold;
    line-height: 48px;
}
.caption-header p{
    color: #787878;
    font-family: "Nunito Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding: 25px 0;
}
.caption-header-row {
    justify-content: flex-end;
    margin-top: 150px;
}
.caption-header-row a{
    padding: 20px 40px;
    background-color: #10c9c3;
    color: #FFF;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 500;
    line-height: 84px;
    text-transform: uppercase;
    letter-spacing: 1.2px; 
    text-decoration: none;
}
.caption-header-row a:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .menu {
        visibility: hidden;
    }
}

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="initial-scale=1"  content="width=device-width"> 
         <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
         <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="style/style.css">
  
</head>
   <body>
        <div id="header" class="header-section">
          <div class="container">
            <div class="row">
              <div class="col-xl-12 header-menu-col">
                <div class="logo">
                  <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a>
                </div>
                <div class="menu">
                  <ul>
                      <li class="menu-item"><a  class="active" href="#home">home</a></li>
                      <li class="menu-item"><a  href="#about">about</a></li>
                      <li class="menu-item"><a  href="#work">work</a></li>
                      <li class="menu-item"><a  href="#process">process</a></li>
                      <li class="menu-item"><a  href="#services">services</a></li>
                      <li class="menu-item"><a  href="#testcontact">testcontact</a></li>
                      <li class="menu-item"><a  href="#contact">Contact</a></li>
                  </ul>
                </div><!-- /============================= /menu =========================== !-->
              </div><!-- /============================= /col logo =========================== !-->
            </div>
            <div class="row caption-header-row">
              <div class="col-xl-6 col-sm-12">
                <div class="caption-header">
                  <h1>We Design and Develop</h1>
                  <p>We are a new design studio based in USA. We have over 
                      20 years of combined experience, and know a thing or two 
                      about designing websites and mobile apps.</p>
                  <a href="#">contact us</a>
                </div>
              </div><!-- /============================= /col menu =========================== !-->
            </div><!-- /============================= /row =========================== !-->
          </div><!-- /============================= /container =========================== !-->
        </div><!-- /============================= /section =========================== !-->
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </body>
</html>

获取您来自的页面的 url

动态添加具有唯一 ID 的输入

从服务器获取 json 时出错

删除/添加项目

更新数组元素值

道具不显示

数据到ajax表

做hr的简单方法

香草js画廊

光滑的手风琴js

768px 的网格不会改变

裁剪背景图像

引导 768px 网格

删除右侧的填充（白条）

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

Дмитрий Сухоцкий's questions