小编web*_*.ic的帖子

我正在尝试以http.get()角度2 加载一个本地json .我尝试了一些东西,我在堆栈中找到了.它看起来像这样:

这是我的app.module.ts,我import的HttpModule和JsonModule来自@angular/http:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { NavCompComponent } from './nav-comp/nav-comp.component';
import { NavItemCompComponent } from './nav-comp/nav-item-comp/nav-item-comp.component';


@NgModule({
    declarations: [
        AppComponent,
        NavCompComponent,
        NavItemCompComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(appRoutes) …

我使用VS Code作为编辑器.我们有一个.editorconfig格式配置的文件.我们在编辑器中使用extenion EditorConfig来格式化我们的HTML和CSS一般.我从这里安装了VS Code的扩展EditorConfig:https://github.com/editorconfig/editorconfig-vscode

我们的.editorconfig文件如下所示:

# This is the top-most .editorconfig file (do not search in parent directories)
root = true

### All files
[*]
# Force charset utf-8
charset = utf-8
# Indentation
indent_style = tab
indent_size = 4
# line breaks and whitespace
insert_final_newline = true
trim_trailing_whitespace = true
# end_of_line = lf

### Frontend files
[*.{css,scss,less,js,json,ts,sass,php,html,hbs,mustache,phtml,html.twig}]

### Markdown
[*.md]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false

### YAML
[*.yml]
indent_style …

我们正在开发一个Web应用程序,它可以在桌面和平板电脑(iPad,Android或表面)上启动.现在我们正在为数字输入构建自己的键盘.使用mousclick将焦点设置在输入字段上时,costum键盘打开正确.但是当您通过触摸的点击(平板电脑)将焦点设置为输入时,默认键盘也会打开.我们的想法是,检测是否有鼠标点击或触摸点击.如果是触摸的点击,我们可以将readonly ="true"属性设置为输入,因此tabled上的默认键盘不会滑入.

有没有办法检测或检查点击的"类型"(触摸或鼠标).

我有一个div，它是一个包装器，里面有一些孩子div。我正在使用flexbox将它们放置在彼此下方。现在，子 div 有一个文本。文本与 垂直对齐align-items: center;。子 div 的宽度取决于它的文本。当文本与包装器一样长时，div 应该停止增长并且里面的文本应该被剪掉。为此，我尝试使用text-overflow: ellipsis;. 它没有按预期工作。我知道我可以display: inline-block;在 的情况下使用flexbox，但我想使用flexbox来对齐文本，text-overflow: ellipsis;但它似乎不适用于我的示例。目前，长文本项与包装器重叠，也没有省略号。该项目具有固定高度。

我为这个主题找到的唯一答案是这个，但答案对我没有帮助：Ellipsis in flexbox container

希望它足够清楚。

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: …

media queries使用SCSSand 变量时可以计算吗？

我想为断点变量分配一个值，并在某些情况下+ 1直接在媒体查询SCSS文件中计算，如下所示：

$bp-xl: 1024px;

@media (min-width: $bp-xl + 1) { ... } /* MIN-WIDTH = 1025px */

所以我的新最小宽度是1025px.

我有一个包装纸和里面的一些物品。我想在每一行中将两个项目并排放置。我曾经flexbox解决过这个问题。

我的包装器具有属性flex-wrap: wrap;，我的物品具有属性：flex: 0 0 45%;。所以我的每个项目都使用了行的 50%（包括边距）。我margin过去常常在项目之间在右侧和底部留出一个间隙。这几乎按我的预期工作。

现在我的问题是：有没有办法忽略margin-right每行中的第二个项目（它包裹的地方），所以第二个项目也与左侧项目相同的包装器右侧对齐。目前，由于margin-right. 我想消除这个差距。这可以用 pureCSS吗？last-child只是删除margin-right最后一项上的 ，但这很清楚原因。有没有办法在行的末尾将其删除，物品包装在哪里？希望这已经足够清楚了。

在我的片段下面：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
}

.wrapper__item {
  flex: 0 0 45%;
  width: 330px;
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}

<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

这也是我想删除边距的屏幕截图（见箭头）：

我有一个HTML string例如'<p><span class="text">Hello World!</span></p>'

我将其解析HTML string为DOMusing DOMParser().parseFromString()，因为我想更改innerHTML某些特定elements. 这就是为什么我parse在HTML string来DOM与getElementByClassName我通过他们让我的所有元素，并循环改变它innerHTML。到目前为止，这有效。

更改后innerHTML，我尝试将新的转换DOM回string. 我无法弄清楚如何。我尝试的是将innerHTML或outerHTML（都尝试过）分配给这样的变量：

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Hello World!</p>", "text/html");
console.log(doc.innerHTML) // undefined
console.log(doc.outerHTML) // undefined

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Hello World!</p>", "text/html");
console.log(doc.innerHTML) // undefined
console.log(doc.outerHTML) // undefined

我总是得到undefined。我怎样才能将它解析回 …

您好，我正在设计一个跨浏览器选择，以便在 chrome、IE、ff 和 safari 浏览器中具有与我的下拉菜单相同的设计。这很好用！我使用了以下代码：

label {
  font-family: Arial;
}

select {
  transition: border-color ease-in-out 0.15s;
  background: transparent;
  border: 1px solid $BORDER_COLOR;
  outline: 0;
  padding: 5px;

  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;

  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
}
		

<body>
  <label>City</label>
  <select>
    <option>Zurich</option>
    <option>Vienna</option>
    <option>Berlin</option>
  </select>
</body>

我现在想念的是一个箭头图标，它表明这是一个下拉菜单（像往常一样）。我还想添加我的服装图标 (svg)。我用这个CSS尝试过：

background: url("arrow_down_grey.svg") no-repeat center right;

箭头位于正确的位置（右中心）并且具有正确的大小，但前提是选择的宽度足够大。当选择不够长时，图标位于文本内，如下所示：

我现在的想法是将其添加到我选择的伪“之后”中。我在互联网上找到的每个教程都没有真正起作用。有人能帮我吗？

谢谢！

我有一些 SVG 图标，我在我的网络应用程序中使用它们。它们都有特定的颜色。不管是什么颜色，所有 SVG 图标都有一种颜色，而不是一种，它有两种颜色（灰色和红色）。

我有一个角度组件可以在我的 Web 应用程序中设置我的图标。我的组件的指令如下所示：

import {constants} from '../../../index.constants';

export class MyIcon{
    public icon: string;
    public iconsPath: string = constants.PATH_TO_ICONS;
    public fileExtension: string = '.svg';

    static options: ng.IComponentOptions = {
        template: '<div ng-include="ctrl.iconsPath + ctrl.icon + ctrl.fileExtension"></div>',
        controllerAs: 'ctrl',
        controller: MyIcon,
        bindings: {
            icon: '@'
        }
    };
}

我可以在我的代码中使用我的组件，并通过一个名为 icon 的绑定，我可以设置我想要使用的图标的名称：

<my-icon icon="pencil"></my-icon>

在附件中，您可以找到带有两种颜色的图标。当我在我的组件中使用它时，所有其他图标的颜色都会变成红色并且它们的形状会发生变化。

当我删除有问题的图标时，所有其他图标都有其特定的颜色，并且看起来像是必须的。我不知道为什么会发生这种情况，也许是因为错误的图标有两种颜色？

我注意到，当它们改变颜色时，故障图标的红色与所有其他图标的红色相同。

示例：我的导航中带有特定颜色且代码中没有错误图标的图标：

错误示例：当我在代码中使用错误图标时，导航中的图标和网络应用程序中的所有其他图标看起来像这样（红色和丑陋的形状）：

错误的 SVG 图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#e30613;stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#8b8c8d;}.cls-4{stroke:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" …

我尝试了很多。但不能做perfect圆形背景。如果这里有人请这样做并向我解释。这是我的html代码：

这是我的片段：

.customization_text img {
  background: #383838;
  padding: 30px;
  border-radius: 35px;
}

<div class="col-md-4 customization_text text-center">
  <img src="images/icon_1.png" alt="icon_1">
  <h4>responsive &amp; multipurpose</h4>
  <p>Proin in magna a ipsum viverra scelerisq enec turp, Nunc vestibulum fringilla accumsan ornare quis.</p>
  <button type="button" class="btn btn-light">Light</button>
</div>