主页 / user-183608

user3178479's questions

Martin Hope
user3178479
Asked: 2020-03-11 02:54:28 +0800 CST
  • 9

为块绘制这样的边框的选项和方法是什么？

此边框位于具有背景图像（非均匀背景）的块内。距离边缘 15 像素。内部透明。边界被打破。

在此处输入图像描述

.box {
  position: relative;
  margin-bottom: 20px;
  padding: 15px;
}

.box-inner {
  width: 100%;
  height: 100%;
    background-clip: padding-box; 
  border: solid 2px transparent;
}

.box:after {
  content: '';
  position: absolute;
  top: 15px;
  left:15px;
  right: 15px;
  bottom: 15px;
  background: linear-gradient(to right, red, orange);
}

.box-1 {
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/300);
}

.box-2 {
  width: 200px;
  height: 500px;
  background: url(https://picsum.photos/200/300);
}
<div class="box box-1">
  <div class="box-inner"></div>
</div>
  
  <div class="box box-2">
  <div class="box-inner"></div>
</div>

background-clip: padding-box; 不起作用。

html
Martin Hope
user3178479
Asked: 2020-03-01 02:25:04 +0800 CST
  • 0

在 bootsrap 下拉菜单中创建“后退”链接的选项有哪些？

$('.dropdown-menu .dropdown-toggle').on('click', function(e){
  e.preventDefault();

  $(this).dropdown('toggle');

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  
  <div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item dropdown-toggle" href="#"> <<< - Back</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

我在努力dropdown('toggle')。

现在它给出了一个错误：

“TypeError：无法在 Object.onLoad 读取属性‘setAttribute’的 null ( https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js:4:20970 )在https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js:4:14236 在 Array.forEach() ....

jquery
Martin Hope
user3178479
Asked: 2020-05-10 01:19:30 +0800 CST
  • 1

如何制作这样一个在单元格之间有虚线的表格，尽可能跨浏览器和自适应（没有 flex、grid、svg）？

在此处输入图像描述

我这样做了，但虚线没有到达末尾：

table {
	width: 100%;
	white-space: nowrap;
}

table td {
	width:100%;
}

table td+td {
	text-align: right;
	width: auto;
}

.table-label {
	overflow: hidden;
}

.table-label>span {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.table-label>span:after {
	content: '';
    position: absolute;
    bottom: 5px;
    right: -9999px;
    left: 100%;
    color: #cecece;
    margin-left: 5px;
    border-bottom: 1px dashed #cecece;
}
<table>
  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem ipsum.
        </span>
      </div>
    </td>
    <td>
      <span>
        111
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem.
        </span>
      </div>
    </td>
    <td>
      <span>
        2222222222
      </span>
    </td>
  </tr>

  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem ipsum dolor.
        </span>
      </div>
    </td>
    <td>
      <span>
        33
      </span>
    </td>
  </tr>
</table>

html
Martin Hope
user3178479
Asked: 2020-02-16 20:40:25 +0800 CST
  • 5

背景代码中有一个svg，它按预期延伸到整个页面，但path由于某种原因它没有填满其中的整个屏幕：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.bg {
  width: 100%;
  height: 100%;
}

.bg svg {
  width: 100%;
  height: 100%;
}
<div class="bg">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 330">
  <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/>
  </svg>
</div>

如何使屏幕的整个宽度和高度在path里面？svg

html
Martin Hope
user3178479
Asked: 2020-02-11 02:54:17 +0800 CST
  • 4

我想更改客户端页面上的语言。我遇到了一篇关于 Habré的文章，但那里不再有示例。

json 文件的内容与示例中的相同。

语言/eng.json

{
"hello_world":"Hello World",
"some_text":"Some Text"
}

语言/rus.json

{
"hello_world":"Привет Мир",
"some_text":"Некоторый текст"
}

示例中的功能代码：

var LANGUAGE;

$.redrawLanguage = function (lang) {
$.ajax({
url : 'languages/' + lang + '.json', //тянем файл с языком
dataType : 'json',
success : function (response) {
LANGUAGE = response; //записываем в глобальную переменную, а вдруг пригодиться
$('body').find("[lng]").each(function () //ищем все элементы с атрибутом
{
var lng = LANGUAGE[ $(this).attr('lng') ]; //берем нужное значение по атрибуту lng
var tag = $(this)[0].tagName.toLowerCase();
switch (tag) //узнаем название тега
{
case "input":
$(this).val(lng);
break;
default:
$(this).html(lng);
break;
}
});
}
});
}

在我的示例中，我想通过单击相应的 RU\EN 按钮来实现此翻译：

var LANGUAGE = false;
$.redrawLanguage = function (lang) {
  $.ajax({
    url : 'languages/' + lang + '.json', //тянем файл с языком
    dataType : 'json',
    success : function (response) {
      LANGUAGE = response; 
      $('body').find("[lng]").each(function () {
        var lng = LANGUAGE[ $(this).attr('lng') ]; 
        var tag = $(this)[0].tagName.toLowerCase();
        
        console.log(response + ' ' + lng);
        
        
        switch (tag) {
          case "input":
            $(this).val(lng);
            break;
            default:
            $(this).html(lng);
          break;
        }
      });
    }
  });
}

$.getLanguage = function (key) {
  if (typeof(LANGUAGE[key]) != 'undefined') {
    return LANGUAGE[key]; 
  }
  return key; 
}

$('#ru').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('eng');

});

$('#en').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('rus');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<menu>
  <a href="#" class="link" id="ru">RU</a>
  <a href="#" class="link" id="en">EN</a>
</menu>

<p lng="rus">
  Привет Мир
  Некоторый текст
</p>

但是什么也没有发生，没有错误和 json - 状态 200。

console.log(response + ' ' + lng);- 显示[object Object] undefined

如何通过单击按钮在页面上开始翻译，我做错了什么？与函数一样$.getLanguage，如何使用它，

将需要以便能够在任意位置使用 javascript 在当前语言中取出所需的行，

?

javascript
Martin Hope
user3178479
Asked: 2020-04-06 15:23:48 +0800 CST
  • 0

是否可以在某处观看专门针对 iphone5、iphone6、ipad def 的 css 属性的支持。版本之类的？

在caniuse 上我没有看到这样的选项：

在此处输入图像描述

或者在哪里可以找到哪个版本的 ios safari 在 iphone 5 上，哪个在 iphone6 上等等？

由于某种原因，在 iphone5 上，标准标记display: flex; flex-flow: row nowrap;被破坏了。好吧，其他一些属性不行，我想详细了解一下。

css3
Martin Hope
user3178479
Asked: 2020-11-25 15:46:20 +0800 CST
  • 1

使用和<meta name="viewport" content="width=1200">适应性 - 没有任何帮助。

布局是固定的。背景应该是屏幕的整个宽度（不是 .wrap）。但由于某种原因，当屏幕变窄时，背景被切断，甚至在包装纸上也没有。

请帮忙，我做错了什么，为什么会这样？

.wrap {
  width: 800px;
}

.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) no-repeat center center;
background-size: cover;
  -webkit-background-size: cover;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

html