小编Sla*_* II的帖子

如何撰写这样的布局?

这里的第一张图片是由网页设计师创建的草稿.

这里的第二个图像是我为此创建正确的HTML/CSS布局的结果.

问题是:如何使用适当的HTML5和CSS在评级药片周围创建这个透明字段.解决方案必须是跨浏览器和超级兼容(包括IE7和更高版本).

评级药丸宽度不固定,取决于其内部的数量,因此透明区域必须反映这一点.

这是我目前的布局:

<div class="evo-module-c4b style="background-image: url('/i/oranges.jpg');">

    <div class="price">
        <span class="icon"></span>
        <span class="value">10,950</span>
    </div>

    <div class="die"></div>

    <div class="rating-wrapper">
        <div class="evo-rating">
            <span class="value">+100500</span>
        </div>
    </div>

    <div class="content">
        <h2>Lorem ipsum dolor</h2>
        <p class="author">Donec et</p>
        <p class="data">24.08.2012 10:53</p>
        <h3>Nunc pellentesque justo diam, sed dictum dolor.</h3>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

减:

div.evo-module-c4b {
    position: relative;
    width: @module-big-width;
    height: 250px;
    background-color: @color-gray-1;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;

    div.price {
        position: absolute;
        top: 18px;
        right: 24px;
        span.icon {
            display: block;
            float: left;
            width: 16px; …
Run Code Online (Sandbox Code Playgroud)

html css

7
推荐指数
1
解决办法
232
查看次数

如何为Angular 6应用程序启用CSS源图?

如何在Angular 6应用程序中为CSS文件启用源图?

我在SCSS文件中定义我的样式源代码,后来由Angular CLI编译为CSS.但是,在样式调试期间,我无法在浏览器中看到原始源代码.所有样式都指向<style>...</style>块.

我想在调试编译代码时能够看到对原始SCSS文件的引用.

我需要在angular.json文件中设置哪些选项?


我试图使用--source-mapCLI参数来ng serve命令,但看起来它并没有影响任何东西.根据webpack编译日志,在两种情况下都会发出源映射文件.

configuration source-maps angular

7
推荐指数
1
解决办法
4244
查看次数

在 JavaScript 中从头开始创建空 URL 对象

我想使用URL对象从部分手动构建 URL 。

然而,它的构造函数需要一个正确的 URL 字符串传递给它,这不允许从空对象开始并逐步构建它。

  1. 有没有办法以某种方式克服这个限制?
  2. 首先是什么导致了这样的设计决定?

javascript url

7
推荐指数
2
解决办法
839
查看次数

npm 中的“生产”标志有什么用?

某些命令(例如npm install)有一个--production标志,使用该标志时,npm 仅安装项目清单中列出的依赖项dependencies,而不是安装在devDependencies项目清单中的依赖项。

以下是文档中对该标志的描述:

使用--product标志(或者当NODE_ENV环境变量设置为production时),npm 将不会安装devDependency中列出的模块。

然而,这个标志的实际应用是什么?

npm install它只能在项目目录内部发布时使用,可能是通过克隆 Git 存储库获得的。否则,该软件包将通过安装npm install package-name,并且会在没有devDependencies.

node.js npm

7
推荐指数
1
解决办法
5749
查看次数

php会话中保存对象

我正在尝试保存一个对象$_SESSION,但以下内容:

<?php

$user = db->load( $username, $pass ) ;
$_SESSION[ 'user' ] = $user ;

# on subsequent page loads:
$user = $_SESSION[ 'user' ] ; #retrieve the user from session
Run Code Online (Sandbox Code Playgroud)

不幸的是,这不起作用.

该脚本尝试执行方法或访问不完整对象的属性.请确保加载了_before_ unserialize()被调用的对象的类定义"User",或者提供__autoload()函数来加载类定义

除非你使用serialize():

<?php

$user = db->load( $username, $pass ) ;
$_SESSION[ 'user' ] = serialize( $user ) ;

# on subsequent page loads:
$user = unserialize( $_SESSION[ 'user' ] ) ; #retrieve the user from session
Run Code Online (Sandbox Code Playgroud)

我假设需要序列化,因为会话信息已保存到磁盘.但PHP不应该足够智能自行序列化东西吗?

并且使用serialize/_ unserialize _,这现在可靠吗?或者__serialize()我的PHP类中是否需要一个方法?

php session serialization

6
推荐指数
1
解决办法
3811
查看次数

如何使用gulp构建JavaScript包?

我想使用gulp来构建JavaScript文件包.

例如,我的项目中有以下结构:

  1. /vendor/vendor1/vendor1.js
  2. /vendor/vendor2/vendor2.js
  3. /js/includes/include1.js
  4. /js/includes/include2.js
  5. /js/bundle1.js
  6. /js/bundle2.js

供应商包括(1-2),本地包括(3-4)和捆绑文件(5-6).

供应商包括只是与bowercomposer一起安装的第三方JavaScript库.它们可以是CommonJS,AMD或者只是一个普通的jQuery插件.

我想在bundle文件中指定依赖关系,如下所示:

/js/bundle1.js

(function() {

    // Vendor includes.
    include('vendor1');
    include('vendor2');

    // Local includes.
    include('includes/include1.js');
    include('includes/include2.js');

    // Some code here.

})();
Run Code Online (Sandbox Code Playgroud)

我希望gulp处理这个源文件并创建一个最终的分发文件(bundle),确保所有依赖项(包括)在一个文件中合并在一起.所以我可以从我的HTML中包含foo.js,所有依赖项都可以使用.

我希望有一个清晰而强大的系统来管理项目中的所有依赖项并构建分发文件.

  • 我怎样才能做到这一点?
  • 我应该为自己的脚本使用什么格式(AMD,CommonJS,其他)?
  • 如何在源包文件中指定依赖项?
  • 我如何建立分销?

javascript amd commonjs browserify gulp

6
推荐指数
1
解决办法
1万
查看次数

使用AngularJS将多行纯文本转换为HTML段落

我从我的后端获得了多行纯文本.

例如:

Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.

Nunc porta velit ut nunc pretium, quis auctor nunc placerat.
In quis porta neque.
Fusce dapibus faucibus mi ut egestas.

<p>Phasellus egestas magna posuere, bibendum dui quis, lacinia nisl.</p>
Run Code Online (Sandbox Code Playgroud)

我想用AngularJS作为HTML段落来渲染它.

所以这个例子将成为:

<p>Lorem ipsum dolor sit amet, &lt;strong&gt;consectetur&lt;/strong&gt; adipiscing elit.</p>

<p>Nunc porta velit ut nunc pretium, quis auctor nunc placerat.
In quis porta neque.
Fusce dapibus faucibus mi ut egestas.</p>

<p>&lt;p&gt;Phasellus egestas magna posuere, bibendum dui quis, lacinia nisl.&lt;/p&gt;</p>
Run Code Online (Sandbox Code Playgroud)

请注意,初始纯文本中存在的所有HTML代码必须安全地转义(包括现有<p> …

html javascript sanitization angularjs

6
推荐指数
1
解决办法
5510
查看次数

当只在GitHub上更改README时,是否必须更新项目版本?

我在GitHub上编辑我的一个开源项目,我想替换链接(指向一个演示)README.md.

每次我对README文件或文档进行一些小的更改(没有任何实际的代码更改)时,是否必须更新库版本?

社区接受的做法是什么?

如果这很重要,我正在使用Bower来分发我的软件包和SemVer作为版本控制系统.

versioning version github semantic-versioning bower

6
推荐指数
1
解决办法
1182
查看次数

如何处理具有垂直节奏的响应式图像?

我正在使用 Compass/SCSS 和垂直节奏方法开发 HTML 页面。我已经为段落和标题以 rem 单位设置了基线和指定高度。它效果很好,并且很好地放置在垂直节奏网格上。但是,我有一个中央图像,它占据了列的 100% 宽度(我希望它具有响应性并随浏览器窗口缩放)。

问题是这个图像打破了垂直节奏,因为它的高度是根据浏览器宽度和图像纵横比动态计算的,并且不尊重基线。

我该如何处理这种情况才能拥有完美的垂直节奏?


这是演示该想法的屏幕截图:


如您所见,图像下方的文本脱离了 VR 网格。

我尝试使用Respond.js jQuery 插件,但看起来它已经过时并且无法正常工作。

html css typography vertical-rhythm compass

6
推荐指数
1
解决办法
1393
查看次数

升级Angular项目后,"Uncaught TypeError:Object.setPrototypeOf在null或undefined上调用"

我有一个Angular应用程序,它完美地运行.但是,使用后升级依赖项后yarn upgrade,我得到了这个神秘的错误:

main.bundle.js:6779 Uncaught TypeError: Object.setPrototypeOf called on null or undefined
    at setPrototypeOf (<anonymous>)
    at webpackJsonp.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts.__extends (main.bundle.js:6779)
    at phone-number-input.component.ts:24
    at Object.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts (phone-number-input.component.ts:69)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.module.ts (phone-number-input.component.ts:24)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/ui-components/src/ui-components.module.ts (roman-numeral.pipe.ts:10)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:31)
webpackJsonp.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts.__extends @ main.bundle.js:6779
(anonymous) @ phone-number-input.component.ts:24
../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts @ phone-number-input.component.ts:69
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.module.ts @ phone-number-input.component.ts:24
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/ui-components/src/ui-components.module.ts @ roman-numeral.pipe.ts:10
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/app/app.module.ts @ app.component.ts:31
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/main.ts …
Run Code Online (Sandbox Code Playgroud)

typescript angular

6
推荐指数
1
解决办法
3779
查看次数