是否有一种简单的方法来显示灰度的彩色位图HTML/CSS？
它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了.
我知道我可以用SVGCanvas和Canvas 来做这件事,但现在看起来好像很多工作.
有一个真正懒惰的人这样做的方法吗？
是否有更多的flexbox-ish方式来正确对齐"联系"而不是使用position: absolute？
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>使用CSS,我如何申请多个transform？
示例:在下文中,仅应用平移,而不是旋转.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
我想将一个div添加到另一个div中.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
这是我目前使用的CSS.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小？
我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢？
想象一下包含一些<li>项目的简单未排序列表.现在,我已经将子弹定义为方形通过list-style:square;但是,如果我设置了<li>项目的颜色,color: #F00;那么一切都变成了红色!
虽然我只想设置方形子弹的颜色.是否有一种优雅的方式来定义CSS中子弹的颜色......
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
我似乎找不到具有多个属性的CSS转换速记的正确语法.这没有做任何事情:
.element {
-webkit-transition: height .5s, opacity .5s .5s;
-moz-transition: height .5s, opacity .5s .5s;
-ms-transition: height .5s, opacity .5s .5s;
transition: height .5s, opacity .5s .5s;
height: 0;
opacity: 0;
overflow: 0;
}
.element.show {
height: 200px;
opacity: 1;
}
我用javascript添加show类.元素变得更高且可见,它不会过渡.在最新的Chrome,FF和Safari中进行测试.
我究竟做错了什么？
编辑:为了清楚,我正在寻找速记版本来缩小我的CSS.所有供应商前缀都足够臃肿.还扩展了示例代码.
我有一个<div>元素,我想在它上面放一个边框.我知道我可以写style="border: 1px solid black",但这会增加2px到div的任何一侧,这不是我想要的.
我宁愿让这个边界距离div的边缘是-1px.div本身是100px x 100px,如果我添加一个边框,那么我必须做一些数学来使边框出现.
有什么方法可以让边框出现,并确保框仍然是100px(包括边框)？
媒体查询中"屏幕"和"仅屏幕"之间有什么区别？
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
为什么我们要求使用' Only '.难道screen不是本身提供足够的信息仅适用于屏幕呈现？
我见过很多响应式网站.一些使用
@media screen and (max-width:632px)
一些
@media (max-width:632px)
还有一些
@media only screen and (max-width:632px)
我一直在研究媒体查询,我仍然不太了解如何定位某些尺寸的设备.
我希望能够定位台式机,平板电脑和移动设备.我知道会有一些差异,但是有一个可用于定位这些设备的通用系统会很不错.
我找到的一些例子:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
要么:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
您认为这些"断点"对于每个设备应该是什么？