小编Rve*_*urt的帖子

我最近发现Flexbox当我在寻找一个解决方案来使div成为同样的高度时,取决于最高的一个.

我在CSS-tricks.com上阅读了以下页面,它让我相信这flexbox是一个非常强大的学习和使用模块.然而,它也让我想到Twitter Bootstrap(和类似的框架)与他们的网格系统提供相同的功能(当然还有很多额外的功能).

现在,问题是:有哪些优点和缺点flexbox？有没有人可以用Flexbox做的事情,可以用像Bootstrap这样的框架(当然纯粹是在谈论网格系统)？在网站上实施哪一个更快？

我猜测什么时候只用于网格系统,纯粹使用它更聪明flexbox,但如果你已经在使用框架,那么有什么东西flexbox可以添加吗？

有没有理由flexbox在框架上选择"网格系统"？

我必须导入Klavika字体,我收到了多种形状和大小:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

现在我想知道是否有可能只用一个@font-face-query 将它们导入到CSS中,我weight在查询中定义了它.我想避免复制/粘贴查询8次.

所以类似于:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

我正在研究表单元素的默认功能以及它们在浏览器之间的不同状态.我觉得很奇怪.这已在不同的浏览器中测试过,结果相似.以下屏幕截图来自Chrome v44.0.2403.155m(64位Windows).

好吧,问题在于按钮的焦点状态.您将在下面看到没有css样式的默认表单.我单击第一个输入,然后使用Tab键选择表单元素.在chrome中,您可以选择一个浅蓝色轮廓应用于您选中的每个元素.

请注意,当我用鼠标点击按钮时,没有浅蓝色的"焦点"状态,只有在我选中它时才会发生.

我假设这只是使用:焦点,如果我设置了按钮:焦点,那么我将能够复制此默认行为.选中它突出显示的按钮,点击它没有的按钮.看看这个风格版的表格......

当我点击第一个输入并按下它时它会做同样的事情,我的自定义轮廓显示(这很好).但是,请注意当我单击按钮时,它正在应用:焦点状态.这与默认行为不同.在未设置样式的版本中,单击不应用焦点状态.

我在按钮上使用的唯一CSS是......

input:focus, button:focus {
    outline: 2px solid green;
}

这是一个演示:http://jsfiddle.net/oy83s4up

单击按钮时,如何确保没有轮廓,只有当它有标签时？.此外,默认情况下,当按钮使用Tab键聚焦时,即使单击该按钮,轮廓仍然保留,这也是我想要复制的功能.

注意:我不是在寻找JS工作,第一个动画是浏览器中的默认行为.当然它只能用css复制？如果没有,那就是一个bug.

我在我的机器上安装了Gulp的项目.运行Gulp Watch时,如果我向文件夹添加新图像,我的gulp-imagemin会崩溃.我已在该文件夹上正确设置了所有权限(多次检查),并且该图像也具有正确的权限.

该过程抛出以下错误:

错误:命令失败:/ Users/robbert/Sites/wordpress_cyklo/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin/vendor/optipng -strip all -clobber -force -fix -o 2 -out/var/folders/kj/wydtr_t92hqgymv2d2v43pjw0000gr/T/9ab534f4-267f-46cb-b99f-372028e6ed5b/var/folders/kj/wydtr_t92hqgymv2d2v43pjw0000gr/T/eabb0414-f9db-4b6f-8242-4c8d25004e1d/Users/robbert/Sites/wordpress_cyklo/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin/vendor/optipng:/ Users/robbert/Sites/wordpress_cyklo/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin -optipng/node_modules/optipng-bin/vendor/optipng:无法执行二进制文件

每当我在文件夹上运行Gulp时,我都会得到同样的错误,除非我通过我的Vagrant VM运行它.我该如何解决？我的VM速度慢很多,所以我真的希望能够在我的主操作系统上运行Gulp.

编辑:这是图像的吞咽:

// ### Images
// `gulp images` - Run lossless compression on all the images.
gulp.task('images', function() {
  return gulp.src(globs.images)
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(path.dist + 'images'))
    .pipe(browserSync.stream());
});

我正在为学校开展一个小项目,我们必须在其中加入html5和css3.它现在刚刚开始阶段,因为我正在尝试为移动和桌面版本创建两个单独的css文件.

对于移动版本,我试图将菜单显示为列表,但使用更大的字体.我绝不能让这个工作.

这是菜单的CSS:

nav ul {
    list-style: none;
    background-color: green;
    padding: 0;
}

nav li {
    border-bottom: 1px solid black;
    padding: 5px;
}

nav {
    margin-top: -36px;
    width: 100%
}

nav h1{
    margin: 0;
}

这会在我的桌面上创建以下内容 在我的iPhone上

font-size在文件顶部的HTML中设置为1em.但是1em对于移动设备来说还不够大,所以我希望它更大,这似乎是不可能的.

即使我给出nav h110em的字体大小,它也不会比这更大:

在我的桌面上它确实没有问题,它看起来像这样:

当试图使"博客帖子"更大时,会发生同样的问题,他们只是不会这样做.

我通常在使用CSS时没有问题,但这次我无法弄明白.希望有人可以帮忙!我觉得这是非常明显的.

这是完整的CSS:http://snipt.org/zLic5

这是html:http://snipt.org/zLid2

当设备上没有互联网连接时,我正试图弹出一个弹出窗口.

我得到了以下示例工作,但现在我希望仅在结果为"无网络连接"时显示警报.

我试过这个:

if (states[Connection.NONE]){
       alert('Geen internet :(');
       };

但这只会使警报框弹出,无论是否有连接.谁能帮我？:)

我正在尝试创建一个垂直进度条,实线上有8个点(末端是第8个),其中每个点代表该过程中的一个步骤.请参阅附件截图(在底部以防止此问题将被分解).

当然我已经尝试用HTML和CSS制作一些东西,你可以在这个小提琴中看到(下面的代码).问题是,我找不到在浅绿线上创建7个点的方法,而不添加8个div(8因为第一个也必须在那里).

功能的角度来看,我想JS检查value中的progressNow-div,100多重,并补充说,作为一个CSS-高度的progressNow-class.问题在于点会移动,而不是条形填充.(这有意义吗？)

这让我想到了在屏幕截图中可以看到的形状创建SVG元素,该元素具有基于过程中第n步改变位置的渐变.我知道这会起作用,我知道我可以让它工作,但我想知道是否有另一种,也许更容易的方式来实现我想要实现的目标.

HTML

<div id="progress">
    <div class="progressBar"></div>
    <div class="progressNow" value="1"></div>
    <div class="progressTotal"></div>
</div>

CSS

#progress {
    position: relative;
}

#progress .progressBar {
    height: 800px;
    width: 6px;
    background: #8fe4bf;
    position: absolute;
}

#progress .progressNow {
    height: 100px;
    width: 6px;
    background: #00b164;
    position: absolute;
}

#progress .progressNow::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00b164;
    display: block;
    margin-left: -5px;
    position: absolute;
    top: 90px;
}

期望的结果(在此情况下,value的progressNow …

我有一个别名，它为我打开一个文件并跳转到该文件中的特定行。

我做的第一件事是 ctrl+E 跳到行尾，但我想知道我是否也可以自动化它？

这是当前的别名：

别名changeCust='ssh -t root@192.168.56.101“nano +33 /etc/apache2/sites-enabled/25-av_portal.conf && 服务apache2重新加载”'

我正在使用 SVG，想看看是否可以将 SVG 存储在外部文件中并使用 调用它url(link)，因为 FireFox 在 CSS 中声明形状时不支持剪辑路径。

但是，当链接到外部文件时，剪辑根本不起作用。

这是在同一文档中包含和引用的 SVG 的小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(#svgPath); -webkit-clip-path: url(#svgPath)" />

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path  stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

但是当我将它托管在我的服务器上时包含它时，它不起作用。看看这个小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(rvervuurt.com/svg.html#svgPath); -webkit-clip-path: url(rvervuurt.com/svg.html/#svgPath)" />

url(#svgPath)在这种情况下，我不明白和之间有什么区别url(external.com/#svgPath)。应该以不同的方式包含它吗？

更新：我尝试将其添加为.svg文件，但似乎不起作用。小提琴。有人可以检查 .svg 吗？形状看起来与 Illustrator 中应有的形状相同。

我正在通过Phonegap编写Android应用程序,我正在安装Splashscreen.

我设法使用这个问题安装了一个风景防溅屏幕,但正如我所料,它不会将其识别为横向或纵向启动画面,因此它只显示图像,无论设备的方向如何.如何判断设备处于横向时应显示宽图像,设备处于纵向模式时应显示高图像？

我正在使用:
- Eclipse
- Phonegap 1.5.0

编辑:问题已更新!见下文. 感谢ghostCoder,我更近了一步,但它仍然无效.

我是否必须在以下代码中添加内容才能绘制肖像图像？(无论设备的方向如何,它仍然显示景观)

@Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

这就是我的文件夹现在的样子: