小编Ivo*_*Ivo的帖子

我知道你可以选择最后的寒意:last-child.现在我需要选择最后3个孩子唯一的问题是孩子的数量不知道所以我不能使用:nth-child,我知道有一些被称为:nth-last-child 但我真的不明白这是如何工作的

<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- More elements here -->
    <!-- ..... -->
    <!-- I need to select these: -->
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>

</div> 

所以现在我需要这样的东西:

#something a:last-child{
   /* only now it selects the last <a> and the 2 <a>'s that come before*/ 
}

HTML:

#backgroundproduct {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  z-index: 12;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: top;
}

<div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">

我使用图像作为背景图像,只有图像的下半部分比顶部更重要.

如何让背景变得有点？

<script type="text/javascript">
window.onload = setupRefresh;

function setupRefresh() {
  setTimeout("refreshPage();", 1000);
}
function refreshPage() {
   window.location = location.href;
}

该页面现在每秒重新加载它闪烁的唯一问题如何解决这个问题

我想知道是否可以使用像这样的nth-child悬停

#gallery a img:hover {
    display: block;
    height:300px;
    width:450px;
    position:absolute;
    z-index:99;
    margin-left:-112.5px;
    margin-top:-75px;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}

从这里到这里的一些东西,只有它不起作用

 #gallery a img:hover:nth-child(1n+4) {
        display: block;
        height:300px;
        width:450px;
        position:absolute;
        z-index:99;
        margin-left:-112.5px;
        margin-top:-75px;
        -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 15px 1px rgba(0, 0, 0, …

我正在使用flexbox在页面中间对齐我的内容块,现在我愿意将标题与外部内容块对齐

在图像中,您可以看到需要发生的事情

这是我目前的结果:

这就是它需要的样子

因此,当缩放浏览器时,如果有空间,内容将转到第一行,那么标题需要在此时增长.

这是一个带有flexbox的codepen

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

http://codepen.io/Dirkandries/pen/XmpGzw

如果不使用媒体查询并保持内容框大小相同,这是否可行？

*可以删除填充和边距

我正在登录屏幕上工作,我需要让它全屏运行.

我正在尝试将表单放在用户名之上,而且只是我没有得到正确的位置

这是一个例子:http: //jsfiddle.net/TSbRY/

   #loginbackground{
        width:100%;
        height:100%;
        position:fixed;
        top:0px;
        left:0px;
        background: url(http://ivojonkers.com/loginscreentemp.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

    #loginbackground form{
        width:18.667%;
        height:7.466%;
        position:absolute;
        top:51.4%;
        left:50%;
        margin-left:-8.867%;
 }

    #loginbackground input{
        width:100%;
        height:31.25%;
        background-color:#F00;
        border:none;
        font:Georgia, "Times New Roman", Times, serif;
        font-size:18px;
        position: absolute;
 }

​

我的问题是我希望将表单放在用户名和pas上,并在每个屏幕分辨率下都存在,所以当你缩放浏览器时,你需要将表单放在你认为可以输入img的部分的顶部.

你可以在全屏幕上看到灰烬http://fiddle.jshell.net/TSbRY/show/它适合某些屏幕分辨率但不适用于所有屏幕分辨率

我用帆布画画倒计时了

工作代码:http://jsfiddle.net/ajFsx/

window.onload = function() {
    canvas  = document.getElementById('timer'),
    seconds = document.getElementById('counter'),
    ctx     = canvas.getContext('2d'), 
    sec     = 180,
    countdown = sec;
    ctx.lineWidth = 8;
    ctx.strokeStyle = "#528f20";
    var 
    startAngle = 0, 
    time       = 0,
    intv       = setInterval(function(){
        var endAngle = (Math.PI * time * 2 / sec);
        ctx.arc(65, 35, 30, startAngle , endAngle, false);   
        startAngle = endAngle;
        ctx.stroke();

        countdown--;
        if ( countdown > 60){
            seconds.innerHTML = Math.floor(countdown/60);
            seconds.innerHTML += ":" + countdown%60;
        }
        else{
            seconds.innerHTML = countdown; …

我有以下css代码

.imgf{
    background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这应该工作,因为它现在我需要用PHP更改img所以我正在尝试使用内联css

 <div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center" 
    style="background-size: cover"
    style="-webkit-background-size: cover" 
    style="-moz-background-size: cover" 
    style="-o-background-size: cover" 
    class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>

只是现在是背景大小的封面不起作用而且没有出现在萤火虫中

我使用内联css错了吗？

我刚刚发现了一个很好的脚本,你可以在这里看到它

http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

我看到下拉有点^顶部.在CSS上我可以找到这个:

#colorNav li ul li:first-child:before{ 
    content:none;
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

只有我无法理解这是如何运作的; 它与边界有关吗？

熙!

目前我正在尝试制作以下导航

但最终得到以下

如何降低我在底部添加但保持全宽的箭头高度？

nav {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 100%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}
nav:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-30deg) skewX(30deg);
  -ms-transform: rotate(-30deg) skewX(30deg);
  transform: rotate(-30deg) skewX(30deg);
}

<nav>nav</nav>

http://jsfiddle.net/v50wwuw6/