Tag: css3

在contenteditable内精确拖放: 安装程序所以，我有一个自信的div – 我正在编辑一个所见即所得的编辑器：粗体，斜体，格式化，最近和最近：插入花哨的图像（在一个漂亮的盒子里，带有标题）。 <a class="fancy" href="i.jpg" target="_blank"> <img alt="" src="i.jpg" /> Optional Caption goes Here! </a> 用户添加这些奇特的图像，我给他们一个对话框：他们填写的细节，上传图像，然后很像其他编辑器function，我使用document.execCommand('insertHTML',false,fancy_image_html); 根据用户的select将其插入。期望的function 所以，现在，我的用户可以在一个奇特的形象扑面而来 – 他们需要能够移动它。用户需要能够点击并拖动图像（花式框和全部）以将其放置在满意的任何地方。他们需要能够在段落之间，甚至段落之间移动 – 如果他们想要的话，可以在两个词之间移动。什么给我希望请记住 – 在一个可以理解的情况下，普通的旧的<img>标签已经被这个可爱的拖放function的用户代理所祝福了。默认情况下，您可以在任何地方拖放<img>标签。默认的拖放操作就像人们梦寐以求的那样。所以，考虑到这个默认行为已经对我们的<img>伙伴如此捣蛋 – 我只想将这个行为扩展一点，以包含更多的HTML – 这看起来应该是很容易实现的。我的努力到目前为止首先，我使用draggable属性设置了我喜欢的<a>标签，并禁用了contenteditable（不知道是否有必要，但似乎也可以closures）： <a class="fancy" […] draggable="true" contenteditable="false"> 然后，因为用户仍然可以将图像拖出花哨的<a>框，我不得不做一些CSS。我正在使用Chrome，所以我只向你展示-webkit-前缀，尽pipe我也使用了其他的。 .fancy { -webkit-user-select:none; -webkit-user-drag:element; } .fancy>img { -webkit-user-drag:none; […]

在Bootstrap 3的Twitter Typeahead上的CSS问题: 随着Bootstrap 3的发布，Typeahead已经被删除， https://github.com/twitter/typeahead.js 我已经成功地将它集成在远程数据读取上但我有自动完成问题正如你所看到的那样，文本框上出现了两个文本。我已经包含在文档中说的CSS（ https://github.com/jharding/typeahead.js-bootstrap.css ），但没有运气。任何帮助或build议，将不胜感激。显示问题的jsfiddle： http://jsfiddle.net/KrtB5/ HTML <body> <div class="container"> <label>State</label> <input type="text" class="typeahead form-control" /> </div> </body> Javascript ： $('.typeahead').typeahead({ name: 'Some name', local: ['test', 'abc', 'def'] })

重叠的CSS 1个div的圈子: 我正在寻找在CSS中创build这个重叠的圆形状：基本上，只是堆积圈。我环顾四周，我看到的所有解决scheme包括使用多个div元素的效果。但是，这不能用一个单独的div，使用CSS3？我看着它是如何轻松完成的，并且认为，如果所有的颜色都一样的话，你会得到这样的药丸形状： http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } <div id="circles"></div> 然后简单地画几个四分之一的卫星，你就完成了。但是，我无法弄清楚如何在我的胶囊形格中绘制这些月亮形状。

css3下另一个div下的阴影，z-index不起作用: 我试图使用阴影使它看起来像一个div（标题）是“上面”另一个。我的问题是“中间”div覆盖了阴影。我试图使用z-index把中间div的标题div，但它不工作（阴影仍然被覆盖）。当我在div之间rest时，我可以看到阴影，因此我知道代码的一部分工作正常。我有以下的HTML代码： <div id='portal_header_light'> <img src="Home.png" height="32px" \> <img src="Wrench.png" height="32px" \> </div> <div id='middle'></div> 和这个CSS： #portal_header_light { font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; padding: 0px 3px 0px 3px; background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, […]

如何使用-webkit-animation向外环创build脉冲效果: 我find了这篇文章： http://www.zurb.com/article/221/css3-animation-will-rock-your-world css3animation。我正试图创build一个类似的效果在上面的网站上看到，但在个人网站上：www.imfrom.me 我有缅因州的地方，有红色的提示框。我想通过指示位置的箭头创build一个脉冲环。用代码更新：我想出了下面这个（在这里试试吧： http : //jsfiddle.net/ftrJn/ ），你可以告诉它的密切关系，以及如何让它从中心发展的任何想法： .gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; } .gps_ring{ -webkit-animation-name: pulsate; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite } @-webkit-keyframes pulsate { 0% { width:1px;height: 1px; opacity: 0.0} 10% { width:3px;height: 3px; opacity: .20} 20% […]

select器是做什么的？: 我无法弄清楚这是什么： http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css的第33行 .row [class^="span"] { display: inline; float: left; margin-left: 20px; } 我了解风格，但我从来没有见过这种 [class^="span"]

所有的CSS3select器的问题，但首先select: 有了下面的标记，我想要一个CSSselect器来select除了每个选项div内的第一个select菜单 – 其中可能有很多： <div class="options"> <div class="opt1"> <select title="Please choose Warranty"> <option value="">Select Waranty</option> <option value="1">1 year guarantee</option> <option value="2">3 year guarantee</option> </select> </div> <div class="opt2"> <select title="Please choose Color"> <option value="">Select Color</option> <option value="1">Red</option> <option value="2">Blue</option> </select> </div> <div class="opt3"> <select title="Please choose Size"> <option value="">Select Size</option> <option value="1">Small</option> <option value="2">Big</option> </select> </div> </div> […]

如何从twitter-bootstrap中心.btn-group？: 我正在使用twitter-bootstrap ，并且发现很难将具有class .btn-group （ link ）的div .btn-group 。通常，我使用 margin: 0 auto; 要么 text-align: center; 以div为中心的内容，但是当内部元素具有属性float: left ，这种情况不起作用。 http://jsfiddle.net/EVmwe/1

：第一个孩子没有按预期工作: 我试图select一个名为detail_container类的div内的第一个h1 。如果h1是这个div的第一个元素，它会起作用，但是如果它在这个ul ，它将不起作用。 <style type="text/css"> .detail_container h1:first-child { color:blue; } </style> </head> <body> <div class="detail_container"> <ul> <li></li> <li></li> </ul> <h1>First H1</h1> <h1>Second H1</h1> </div> </body> </html> 我的印象是，我所拥有的CSS将会select第一个h1而不pipe这个div在哪里。我怎样才能使它工作？

花式媒体查询与一些LESS魔术: 这将是很好的包装使用较less的一些CSS类中的不同分辨率的CSS样式。我想要做一些事情： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最后，这样的结果应该是这样的： footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: 940px; } } .tablet可能看起来像这样： @media […]