javascript

java

python

c#

android

c++

node.js

php

html

jquery

ios

reactjs

css

.net

git

ruby-on-rails

sql

c

ruby

string

jQuery-在htm中的位置固定标头

我有一个固定位置的标头(动态高度)。

我需要将容器div放在标题下方。 由于页眉高度是动态的,因此无法将固定值用于顶部边距。

如何才能做到这一点?

这是我的CSS:

    #header-wrap {
    position: fixed;
    height: auto;
    width: 100%;
    z-index: 100
}
#container{ 
    /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/
}

...和HTML:

<div id="header-wrap">
  <div id="header">
    <div id="menu">
      <ul>
      <li><a href="#" class="active">test 0</a></li>
      <li><a href="#">Give Me <br />test</a></li>
      <li><a href="#">My <br />test 2</a></li>
      <li><a href="#">test 4</a></li> 
      </ul>
    </div>
    <div class="clear">
    </div>
  </div>
</div><!-- End of header -->

<div id="container">
</div>
trans by 2020-07-22T01:01:54Z

html-在CSS中是否有一个等同于background-image的前景?

我想给网页上的元素增光添彩。 如果我不必在页面上添加其他html,我会希望。 我希望图像显示在元素的前面而不是后面。 最好的方法是什么?

trans by 2020-07-21T20:51:15Z

仅在顶部,左侧和右侧的CSS3框阴影

问候,

我正在尝试将CSS3框阴影仅应用于DIV的顶部,右侧和左侧,其半径与以下CSS的结果相匹配(减去底部阴影)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

做到这一点的最佳方法是什么?

谢谢!

更新此阴影将应用于页面上的导航栏,该导航栏位于主容器DIV的顶部。 我要完成的工作是将主DIV的框阴影继续到位于其上方的导航栏上,但导航栏上没有底部阴影。 查看网站本身,以了解我在说什么,这比在此处添加所有HTML和CSS容易。

更新2由于我正在使用的DIV是单数的,所以我没有选择在每个导航栏上放置阴影,而是选择将其更改为以下内容:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

这使阴影的顶部非常引人注目,但这是我要完成的工作-如果有人知道一种使阴影与容器DIV外观相同的方法,请告诉我。 谢谢!

trans by 2020-07-19T15:14:39Z

html-如何使用C分割具有不同颜色的圆

我希望能够绘制一个带有另一种颜色的线段的圆,我希望覆盖的线段数量能够以10%的增量从0%增加到50%

Google上的所有示例都是部门而非部门。

Segments

到目前为止,这是我能想到的最好的方法:

0%
0%

0%50%100%我都可以做。

trans by 2020-07-19T13:20:31Z

css3-嵌套CSS类

我可以做以下事情吗?

.class1{some stuff}

.class2{class1;some more stuff}
trans by 2020-07-19T06:15:45Z

html-如何获得带有随机锯齿的撕纸效果?

我正在尝试制作如下图所示的撕纸效果:

enter image description here

底部有撕裂效果。 我看到了这一点,并能够制作出如下图所示的撕纸效果

.box {
  width: 300px;
  height: 150px;
  background: darkred;
  position: relative;
  display: inline-block;
}
.box:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  background: darkred;
  left: 0;
  bottom: 0;
  box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px -60px 0 0 darkred, 75px -75px 0 0 darkred, 90px -90px 0 0 darkred, 105px -105px 0 0 darkred, 120px -120px 0 0 darkred, 135px -135px 0 0 darkred, 150px -150px 0 0 darkred, 165px -165px 0 0 darkred, 180px -180px 0 0 darkred, 195px -195px 0 0 darkred;
}
<div class="box"></div>

但是问题在于,撕裂的边缘看起来很相似。 我希望它们的大小和形状不同。

trans by 2020-07-19T04:04:21Z

CSS-使用react-nati中的flex将项目粘贴到底部

假设这是布局:

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

我想使用页脚样式将视图放置在屏幕底部。 我尝试将alignSelf属性提供给页脚,但没有将其定位在底部,而是将其定位在屏幕的右侧。 如何使页脚项目坚持到底? 谢谢。

trans by 2020-07-19T03:49:40Z

CSS-过渡颜色在悬停时会褪色吗?

我正在尝试使这h3在悬停时褪色。 有人可以帮我吗?

的HTML

<h3 class="clicker">test</h3>

的CSS

.clicker {
    -moz-transition:color .2s ease-in;
    -o-transition:color .2s ease-in;
    -webkit-transition:color .2s ease-in;
    background:#f5f5f5;padding:20px;
}

.clicker:hover{
    background:#eee;
}
trans by 2020-07-18T11:48:32Z

javascript-带Respond.js的Modernizr

我正在仔细评估利用Modernizr和Respond.js进行响应式设计的最佳方法,并对社区提出了一些问题。

首先,据我了解,将Modernizr与Respond.js捆绑在一起时,不需要其他编码或测试即可支持IE8及以下版本中的媒体查询。 换句话说,当Respond.js与Modernizr捆绑在一起时,我只需要在源代码中加载Modernizr即可激活Respond.js。 正确?

其次,您是否认为这是在IE8及以下版本中获得对媒体查询的支持的最有效方法? 本质上,我将包含比已经支持媒体查询的浏览器所需的更大的Modernizr脚本。 如果对媒体查询的测试失败,则将两个脚本分开并仅加载Respond.js效率更高吗?

第三,如果我想将两个脚本分开,那么您认为什么是最好的加载Respond.js的方法? 一种选择是使用IE特定的条件注释来加载响应。 另一个选择是使用yepnope和Modernizr来测试媒体查询支持并在需要时加载“响应”。 这样会更有效和更可靠。

最后,如果我选择分离这两个脚本,并在需要时使用Modernizr加载Respond,我会遇到以下两种技术:

<script>
        yepnope({
    test : Modernizr.mq('(only all)'),
    nope : ['js/libs/respond.min.js']
});
</script>

要么

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

我发现第二个使IE8崩溃,但只需要重写即可。 您会推荐哪种技术?

感谢您的所有帮助。

trans by 2020-07-17T22:22:19Z

javascript-在CSS3中重新启动动画:比删除元素还有什么更好的方法吗?

我有一个CSS3动画,需要单击才能重新启动。 这是一个显示剩余时间的条形图。 我正在使用scaleY(0)转换来创建效果。

现在,我需要通过将条恢复到scaleY(1)并重新将其转到scaleY(0)来重新启动动画。我第一次尝试设置scaleY(1)失败,因为要花费相同的15秒才能将其恢复到全长。 即使我将持续时间更改为0.1秒,我也需要延迟或链接scaleY(0)的分配,以使补充条完成。对于这么简单的任务,感觉太复杂了。

我还发现了一个有趣的技巧,可以通过从文档中删除元素,然后重新插入其克隆来重新启动动画:[http://css-tricks.com/restart-css-animation/]

它可以工作,但是有更好的方法重新启动CSS动画吗?我正在使用Prototype和Move.js,但我不仅限于它们。

trans by 2020-07-17T16:53:42Z

HTML-有没有办法通过CSS缓慢地向文字中添加字母?

我想显示一个单词(假设为Slow),有没有一种方法可以先显示“ slow”,然后通过CSS动画在中间添加几个O,从慢速到Sloooooow。

我正在使用最新的Chrome,因此欢迎使用任何CSS3 / HTML5功能。

trans by 2020-07-17T13:22:30Z

html-如何在Flexbox中禁用等高列?

我想在布局中对齐三个元素。

首先,我有一个div来提供反馈,然后是一个搜索输入,然后是一个div元素来提供建议。

我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%。 使用Flexbox可以实现我想要的。

但是有一个功能可以将所有div增长到最高元素。 这意味着当搜索结果弹出时,反馈和建议元素的高度会随着搜索div的增加而增加,从而导致布局混乱。

有没有技巧可以不增加具有最高元素的div? 只是使div(<div id='container_add_movies'> <div id='feedback'> Feedback </div> <div id='search'> Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search <br> </div> <div id='suggestions'> Suggestions </div> </div>#suggestions)具有其中内容的高度?

<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>
<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>

[HTTP://code喷.IO/阿鲁擦热毒/喷/PP Jr ZY]

trans by 2020-07-17T12:27:42Z

iPad-更快些吗? CSS3过渡还是jQuery动画?

我正在使用iPad HTML5应用程序,并且已经实现了ontouch支持以更快地触发事件,并且我正在使用jQuery来更轻松地定位元素,但是对于动画,我正在使用CSS3过渡

您认为更快吗? 使用jQuery动画,因为我已经导入了库或在使用jQuery定位元素时使用CSS3过渡?

trans by 2020-07-14T14:21:20Z

CSS-在伪元素内嵌套伪元素

我有一个:before开头的'quote'和一个:after结束的quote。

现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。

有人知道这是否可能吗?

到目前为止,我的代码:

blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent:60px;
}
blockquote:before {
  font-size: 170px;
  margin-left: -136px;
  margin-top: 50px;
  opacity: 0.2;
  position: absolute;
  overflow:visible;
  float:left;
  width:135px;
}
blockquote:after {
  float: right;
  font-size: 170px;
  margin-right: 35px;
  margin-top: 33px;
  opacity: 0.2;
  overflow:visible;
  width:135px;
}
blockquote[cite]:after:after {
    display: block;
    text-align: right;
    content: "\2014\ " attr(cite);
    font-style: normal;
    font-size: 0.8em;
    }
trans by 2020-07-14T13:49:47Z

webkit-无法在一个循环结束时停止动画

这个问题已经在这里有了答案:

  • 在最后一帧停止CSS3动画 8个答案

我现在正在制作CSS动画,在其中我正在移动内容并希望它停留在最终位置,直到用户将鼠标移开为止。

body {
    background: url('osx.jpg');
    padding: 0;
    margin: 0;
    line-height: 60px;
}

@-webkit-keyframes item1 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}

@-webkit-keyframes item3 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
    position: relative;
    }
#folder {
    width: 120px;
    margin: 0px auto;
}

#folder > div {
    position: absolute; 
}

#folder:hover > div:nth-of-type(1) {
    -webkit-animation-name: item1;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
    -webkit-animation-name: item2;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
    -webkit-animation-name: item3;
    -webkit-animation-duration: 10s;
}

但是,无论何时动画结束,它都会重复自身。 我只希望它发生一次,并保持原状直到用户离开。 我尝试使用规范中已暂停的内容,但此功能无法正常运行。 任何帮助表示赞赏。 谢谢。 :)

trans by 2020-07-14T12:23:48Z

html-如何删除选择输入的默认镶边样式?

如何删除“选定的输入”的默认黄色框边框,并选择Chrome或Safari浏览器等浏览器中的字段?我想使用自定义框阴影CSS自定义输入。 如何删除默认的浏览器选择边框?

trans by 2020-07-14T00:05:01Z

javascript-如何获取具有CSS3转换的元素的MouseEvent坐标?

我想检测相对于单击的元素的坐标transform发生在哪里。 为什么? 因为我想在单击的位置添加一个绝对定位的子元素。

我知道当不存在CSS3转换时如何检测到它(请参阅下面的描述)。 但是,当我添加CSS3转换时,算法将中断,并且我不知道如何解决它。

我没有使用任何JavaScript库,而是想了解它们在纯JavaScript中是如何工作的。 因此,请不要回答“仅使用jQuery”。

顺便说一句,我想要一个适用于所有MouseEvent的解决方案,而不仅仅是“单击”。 没关系,因为我相信所有鼠标事件都共享相同的属性,因此相同的解决方案应该对所有它们都适用。


背景资料

根据DOM Level 2规范,transform具有与获取事件坐标有关的少量属性:

  • transformclientY返回屏幕坐标(原点是用户监视器的左上角)
  • transformclientY返回相对于文档视口的坐标。

因此,为了找到transform相对于单击的元素内容的位置,我必须执行以下数学运算:

ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft
  • transform是相对于文档视口的坐标
  • transform是元素相对于文档视口的位置
  • transform是元素边界和内部坐标之间的边界(和滚动条)数量
  • transform是元素内的滚动量

在CSSOM视图模块中指定了transformtransformtransform

在没有CSS转换的情况下进行实验(有效)

令人困惑? 尝试以下JavaScript和HTML。 单击后,应该在单击发生的确切位置出现一个红点。 此版本“非常简单”,并且可以正常工作。

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
    var top = ev.clientY - rect.top - this.clientTop + this.scrollTop;

    var dot = document.createElement('div');
    dot.setAttribute('style', 'position:absolute; width: 2px; height: 2px; top: '+top+'px; left: '+left+'px; background: red;');
    this.appendChild(dot);
}

document.getElementById("experiment").addEventListener('click', click_handler, false);

<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;">
    <div style="width: 900px; height: 2px;"></div> 
    <div style="height: 900px; width: 2px;"></div>
</div>

实验添加CSS转换(失败)

现在,尝试添加CSS transform

#experiment {
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    /* Note that this is a very simple transformation. */
    /* Remember to also think about more complex ones, as described below. */
}

该算法不了解转换,因此计算出错误的位置。 此外,Firefox 3.6和Chrome 12的结果有所不同。Opera 11.50的行为与Chrome相同。

在此示例中,唯一的变换是缩放,因此我可以将缩放因子乘以计算正确的坐标。 但是,如果考虑任意转换(缩放,旋转,倾斜,平移,矩阵),甚至嵌套转换(另一个转换元素内的转换元素),那么我们确实需要一种更好的方法来计算坐标。

trans by 2020-07-13T07:31:34Z

CSS-属性选择器,其中值等于A或B?

我想知道是否可以在CSS中指定属性等于两个值之一的元素,如下所示:

input[type=text][type=password]

但是,此选择器似乎不起作用(我假设是因为两次指定相同的属性无效),有人知道如何做到这一点吗?

trans by 2020-07-12T19:51:44Z

html-pag顶部的空白

我的页面顶部有大约20像素的空白。 我检查了每个元素,在此区域中没有填充或空白。 当我检查身体元素时,它不包含该空间。 当我检查html元素时是否包含此空间。 另外,如果我删除

<!DOCTYPE html>

白色空间消失了。

这是我的主要布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>
trans by 2020-07-12T00:12:00Z

CSS-为什么“左:50%,变换:translateX(-50%)”将元素水平居中?

我最近重构了一些CSS,并惊喜地发现了一种更简单的方法来水平对齐绝对定位的元素:

.prompt-panel {
    left: 50%;
    transform: translateX(-50%);
}

这很棒! 即使我的元素的宽度是自动的。 但是,我不知道如何使它真正起作用。 我的假设是,translateX只是一种移动元素的现代且性能更高的方式,但事实并非如此。

这两个值不应该互相抵消吗? 此外,为什么

.prompt-panel {
    left: -50%;
    transform: translateX(50%);
}

没有显示与第一个代码段相同的结果?

trans by 2020-07-10T18:18:10Z

上一页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 下一页 共39页