标签: frontend

我正在开发一个项目，需要在 CSS 的帮助下实现这种效果：

这是我想要实现的目标的描述：

父元素 (the title) 在底部有一些内边距和 2px 边框。它还有一个子元素 ( title-inner)，它也有一些填充和 2px 边框，但颜色不同，并且与其父元素（即title.

我正在使用这个标记结构：

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

我知道通过对这两个元素的 padding 和 margin 属性进行一些调整是可行的，但是到目前为止我编写的 CSS 在移动设备上或在调整浏览器大小时会有些中断（看看 this fiddle）。

有没有更好的方法在CSS中实现这种效果？有任何想法吗？

我将与一个小团队开始一个新的 .Net MVC 项目。它有五名成员，两名后端开发人员和三名前端开发人员。

前端成员将单独工作，使用 gulp/grunt、less/saas、jade 和其他框架等工具构建该项目的 html 版本。他们更喜欢使用像 Sublime 这样的编辑器，并且会在许多不同的设备上实时运行界面测试。

他们无法使用 MVC，特别是 Razor 视图引擎，因此我们需要两个存储库，一个在前面，另一个在后面。在此过程中，后端开发人员需要捕获构建的 html 并将其适合于 Razor MVC。

有什么想法如何改进这个过程吗？如何缩小后台开发人员和前台开发人员之间的技术差距？

我需要元素集中点击，这将触发特殊的 css，让它们交换背景颜色和颜色（例如第一个元素）。 我通过从 chrome 开发工具手动将 :focus 赋予该元素来实现当前结果。

.btns>span:focus {
  color: #2DB46A;
  background-color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  color: #fff;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns {
  list-style-type: none;
  color: #fff;
  background-color: #2DB46A;
  font-family: Facile;
  font-size: 18px;
  margin-bottom: 50px;
}

<ul id="list-container">
  <li class="btns"><span>pcb design</span></li>
  <li class="btns"><span>analog design</span></li>
  <li class="btns"><span>power design</span></li>
  <li class="btns"><span>wireless design</span></li>
  <li class="btns"><span>fpga design</span></li>
  <li class="btns"><span>embedded software</span></li>
</ul>

如何获得像单击每个元素时的第一个元素一样的结果。

如何将 hr 分隔线居中？由于某种原因，尽管有文本中心引导类，它还是左对齐的。居中前后的文本！\n您可以在此处查看： http: //www.mokado.pl/index.html#about

<section class="about page-section bg-primary" id="about">\n      <div class="container">\n        <div class="row justify-content-left">\n          <div class="text col-lg-4 text-center">\n            <h2 class="text-white mt-0">Mokado</h2>\n            <hr class="divider light my-4 text-center" />\n            <p class="text-white mb-4">\n              Ide\xc4\x85 marki Mokado jest po\xc5\x82\xc4\x85czenie estetyki i komfortu... \n            </p>\n            <!-- <a class="btn btn-light btn-xl js-scroll-trigger" href="#services"\n              >Get Started!</a\n            > -->\n          </div>\n        </div>\n      </div>\n    </section>\n

我想将 div 放在组件内居中，而不影响该组件内 div 的样式。我怎么能这样做呢？

我正在使用角度 8 。文本对齐方法会影响该 div 内文本的对齐方式。我想将元素居中，同时防止这种情况发生。

我正在考虑将用 python 编写的后端代码链接到移动应用程序，我想在 flutter 上构建其前端；我尝试了 starflut 包并下载了示例代码，但它不起作用，不幸的是我不明白有关该库的 flutter 文档中写的内容。有人可以帮助我处理这个软件包，或者推荐更简单的方法来链接它们吗？

我在我的网站上实现了第三方小部件以获得丰富的摘要星星。问题是 Google-bot 和 Google 结构化数据测试工具无法识别 ld+json 标记，因为它位于html标记之外。我已经使用 React Helmet 将脚本强制放在head标签内，但徒劳无功！

这是我的应用程序的代码：

return (
        <div className="cleanslate widget-box">
            {comp}
            <Helmet>
                <script type="application/ld+json">
                {`
                    {
                        "@context": "https://schema.org/",
                        "@type": "CreativeWorkSeries",
                        "name": "${this.state.name}",
                        "aggregateRating": {
                            "@type": "AggregateRating",
                            "ratingValue": "${this.state.rating}",
                            "bestRating": "10",
                            "ratingCount": "${this.state.voters}"
                        }
                    }
                `}
                </script>
            </Helmet>
        </div>
    )

我是 React 初学者，无法调试错误

这是我在 React 中使用组件的代码。

我正在尝试使用图像、标题和链接模拟 google 搜索图像结果，但在浏览器上我看到的只是一个空屏幕。

错误语句是：

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.I.render (react-dom.production.min.js:238)
    at <anonymous>:99:10
    at n (babel.min.js:12)
    at r (babel.min.js:12)
    at o (babel.min.js:12)
    at u (babel.min.js:12)
    at E (babel.min.js:1)

该错误未指定哪一行或任何内容。链接说

你刚才遇到的错误全文是：
目标容器不是DOM元素。

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and …

喜欢

fetch('state_wise_data.csv')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(err => console.log(err))

尝试这样做，但没有奏效。

在这种情况下，我尝试执行级别菜单，但是 this.innerText 不起作用

function levelJump() {
    console.log(this);// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
    level_index = this.innerHTML; 
    console.log(this.innerText); // undefined
    goToLevel(level_index);
}

const levelJumperButtons = document.querySelectorAll('.level-jumper');
console.log(levelJumperButtons[10].innerText); // 11
levelJumperButtons.forEach((item) => {
    item.addEventListener('click', () => levelJump());
});