小编Jim*_*Jim的帖子

如何(以及为什么)使用display:table-cell(CSS)

我有一个非常活跃的网站背景(我说的是6个左右不同的z索引,其中2个带有动画).我想在前景中有一个内容,但想要一个"窗口"到它的背景.我遇到的一些问题:

  1. 你不能在背景中"打洞",所以......

    • 我构建了一个包含div,让我们称之为"srminfo"
    • 在里面,我有一个"顶部","左","窗口","右"和"底部"
    • 顶部,左侧,右侧,底部都有不透明的白色背景
    • 而srminfo和window divs有background:none;
  2. 无论我怎么努力,"正确"的div都不会填补"顶部"和"底部"div之间的空间,我尝试了很多不同的东西.它必须是动态的原因是"left"div中的文本是基于背景颜色动态的,背景颜色本身是用JavaScript随机生成的.

如何显示:表; 以及所有其他相关的CSS代码,如表格?它怎么用?

html css css-tables

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

剪切动画div

我正在尝试使用CSS中的动画创建一个漂亮的旧CRT"电视"效果,但是在显示上方和下方预期div的扫描线有一些问题.

我所拥有的是一个登陆页面,其中有4个div链接到该站点的其他区域.前2个div是"TV",每个都有一个背景,显示链接内容的"tv"(静态图像).

在桌面或其他更大的屏幕上,4个div显示为2x2,在较小的屏幕上显示为1x4格式.

我创建了一个单独的图像,用css动画来伪造移动的扫描线向下移动到前2个div.

发生的事情是"扫描线"出现在"电视"上方并移动到"电视"下方.

你可以看到JSFiddle上发生了什么:http: //jsfiddle.net/blyzz/ynekxcud/2/

这是一些清理过的HTML代码:

<a href="URL1" target="_blank">
    <div class="content" id="outside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanout">
            </div>
            <div class="aniscan" id="aniscanout2">
            </div>
        </div>
    </div>
</a>
<a href="URL2" target="_blank">
    <div class="content" id="inside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanin">
            </div>
            <div class="aniscan" id="aniscanin2">
            </div>
        </div>
    </div>
</a>
Run Code Online (Sandbox Code Playgroud)

以及随附的清洁CSS:

.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
}

.scanlines{
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    z-index: 100;
}

.aniscan{
    width: …
Run Code Online (Sandbox Code Playgroud)

html css animation z-index

5
推荐指数
1
解决办法
298
查看次数

标签 统计

css ×2

html ×2

animation ×1

css-tables ×1

z-index ×1