小编Kyr*_*rbi的帖子

我想创建一个button在按下时改变其风格的东西.这是我的CSS代码:

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

<button>Button</button>

仅当我点击并按住它时才会更改.我想在按下之后改变它的样式.例如,正常状态为白色,点击状态为绿色,点击释放后为红色.

设置背景图片时遇到了一些问题<button>.

这是我在网站上的html:

 <button id="rock" onClick="choose(1)">Rock</button>

这是CSS:

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

我不知道为什么按钮的背景仍然是白色的.

我这里有棘手的问题.我想在一个按钮内垂直对齐我的文字

<button id="rock" onClick="choose(1)">Rock</button>

这是我的CSS

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

你可以在这里查看http://jsfiddle.net/kA8pp/.我希望文本在底部.非常感谢你!

编辑:我无法解释它,所以这是它的图片http://i.imgur.com/WGKltUa.png :)

我有这个HTML代码:

<div id="choice" onHover="npcRoll()">
    <p>Choose your weapon!</p>
    <button id="rock" onClick="choose(1)">Rock</button>
    <button id="paper" onClick="choose(2)">Paper</button>
    <button id="scissors" onClick="choose(3)">Scissors</button>
    <p>You chose <span id="userChoice"></span>!</p>
</div>

这是我的JavaScript代码:

// Random
var random = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};  

// NPC
var npc;
function npcRoll(){
    npc = random(1, 3);
}

这是CSS代码:

#choice {
    margin: 0 auto;
    border: 2px solid gray;
    width: 350px;
}

这个想法是每次用户盘旋时制作滚动NPC编号,<div>但它不起作用.你能帮帮我吗？

我正在学习JavaScript，因此决定创建简单的Rock，Paper和Scissors游戏。我想通过按钮来控制它。所以我用html制作了这个：

<div id="game">
    <button onClick="user(rock)">Rock</button>
    <button onClick="user(paper)">Paper</button>
    <button onClick="user(scissors)">Scissors</button>
    <div id="result"></div>
    <br>
    <br>
    <button onClick="test()">DEBUG</button>
</div>

并在.js文件中

var user = "none";
function user(choice){
    var user = choice;
}

function test(click){
    alert("You chose " + user);
}

因此，我认为单击“ Rock”按钮后，它将把var user更改为rock，但是没有。单击岩石，然后单击“调试”按钮后，出现“您没有选择”的信息。

我找到了Cloud9.io,我将用它来教人们用html,css,javascript和php编写代码,但是有一个问题.我们都是捷克人,如果我们想创造{,我们按Right-Alt+ B和},我们按Right-Alt+ N.但是,这是Cloud9.io中的一个问题,每当我们按下时},它都会认为我们要创建新文件,因为我们按Rigth-Alt+ N.那么有没有办法禁用这些键绑定,或编辑他们的JS,所以它不会使用任何键绑定？

或者,如果不可能,您是否知道Cloud9.io的任何替代方案,我可以用它来教别人编码,这样他们就可以看到我的编码,它有聊天,他们也可以编辑他们可以看到的文件.

谢谢.

我有一个小问题，这是我的代码。

img {
  image-rendering: pixelated;
}

div.fight {
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
}

div.fight img.player {
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px;
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

您可以在http://jsfiddle.net/ctwgkodp/11/ 中查看代码。（请原谅我丑陋的像素艺术）

正如您在 中看到的img，我将应用程序中的所有图像设置为像素化。问题是当我设置 时background，我不能强制它被像素化。

有没有办法强制像素化渲染到backgroundof div.fight？

谢谢你，祝你有美好的一天。:)

嘿，我需要帮助li的。我创建了这个 html 代码：

<div id="menu">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dorem</li>
    <li>Lerum</li>
  </ul>
</div>

这个CSS：

#menu ul {
    display: inline;
    list-style-type:none;
}

我不知道为什么，但它不会彼此堆叠。#menu 中没有 CSS，但在 Chrome 中，我注意到它会自动将其添加到 CSS 中display: block;。可能有问题吗？

这是我的HTML代码:

<div id="menu">
 <ul>
  <li>Home</li>
  <li>My blah</li>
  <li>Lorem ipsum</li>
  <li>Dolor amet</li>
  <li>photogallery</li>
 </ul>
</div>

这是我的CSS:

#menu li {
 display: inline;
 list-style-type: none;
}

#menu是在#header-wrap它是800像素宽.我希望将UL内部的文本扩展为与#menu相同的大小,即800px.我不能这样做margin-left,margin-right因为它留下了空格,或者它移动li到我不想要的另一条线上.

那么我可以添加到CSS中的任何元素,它会将文本扩展到800px吗？

我无法使用,word-spacing因为lis中的某些内容有多个单词.

有没有办法将用CSS创建的三角形和框合并到一个<div>.现在我有这个HTML:

<div id="triangle-left"></div>
<div id="box"><!-- Something --></div>

这在CSS中:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #602F4F;
    border-bottom: 30px solid transparent;
    float:left;
}
#box {
    background-color: #602F4F;
    height: 50px;
    width: 200px;
    float:left;
    text-align: right;
    padding: 5px;
    margin-bottom: 4px;
    color: white;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

这是结果http://jsfiddle.net/9AyYS/.

有没有办法将它简化为一个<div>？谢谢.