小编Mr.*_*ien的帖子
有没有办法在Element中放置边框而不是Outside？
我正在使用jQuery和CSS.当我mouseenter为一个图像使用一个事件(在图像周围放置一个边框)时,由于外部边框,布局变得很复杂,这使得它非常难看.我只是想知道是否有办法将边框放在img中,以便img容器保持相同的大小并且不会影响布局.我唯一能想到的就是调整图像的大小mouseevent,这似乎是很多工作(计算尺寸,特别是考虑响应性),我可以看到很多问题都是由于这样做而产生的.
推荐指数
解决办法
查看次数
如何删除图像旁边的下划线？
鉴于以下页面(SSCCE,就像我们都喜欢它):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
body {
background:#BCD5E1;
font:.85em Verdana;
}
#flag_panel {
position:absolute;
right:15px;
top:20px;
}
#flag_panel img {
vertical-align:middle;
}
#flag_panel .selected_image {
border:solid 2px #444;
padding:5px;
}
</style>
</head>
<body>
<div id="flag_panel">
<a href="#">
<img src="ro.gif" />
</a>
<img class="selected_image" src="us.gif" />
</div>
</body>
</html>
这个HTML文件和2个图像可以在URL找到:image-problem.zip(1.6 KB)
预期的结果是:
但实际结果是:
如您所见,这两幅图像之间有一点下划线.我无法弄清楚原因.
我在Firefox v24和Chrome v31中尝试了这段代码.所以我很确定我是那个失踪的人.
我注意到这个问题在两种情况下消失了:
- 如果
<img class="selected_image"...之前到来<a href="#"...(也就是说他们被交换) - 如果第一个图像未包含在achor标记内(
<a>).
这段代码的目标是能够在我拥有的网站上切换英语和罗马尼亚语之间的语言.因此,其中一个图像必须始终具有该边框,而另一个图像必须始终可点击.但我希望能够在没有出现那种下划线的情况下做到这一点(看起来丑陋/越野车). …
推荐指数
解决办法
查看次数
使用每个html上方的标签显示彼此相邻的两个输入
我想做这样的事情
USER EMAIL
input input
但我无法想象如何以这种方式显示它.基本上我希望每组标签+输入字段都是div,但我希望div是并排的.也许我正在使用错误的标签,因为我是一个html noobie> <
推荐指数
解决办法
查看次数
CSS:nth-child()样式,每个第2个和第3个相同的颜色,依此类推
如何按此顺序设置链接样式:
第一个红色,第二个蓝色,第三个蓝色,第四个红色,第五个红色,第六个蓝色,第七个蓝色等等.有图像示例:
推荐指数
解决办法
查看次数
桌子周围的神秘边框
正如标题所说,我在整个桌子周围都有这个小边框.我刚从J2Ski复制它在我的网站上使用,所以这不是我自己的工作.
我知道这之前肯定已经得到了回答,但我无法弄清楚将风格放在哪里,而且我不太确定在那里放置什么.
<table style="border:none;">
<tbody>
<tr><td>
<iframe height="112" src="http://www.j2ski.com/snow_forecast/France/Tignes_mini.html"
width="340"></iframe>
</td></tr>
</tbody>
</table>
JSFiddle:http://jsfiddle.net/NGn9Y/
推荐指数
解决办法
查看次数
带有渐变+ bg图像的CSS3动画
我有一个背景的div,背景图像是透明的png和线性渐变.期望的效果是在渐变保持静止的同时使图像具有动画效果.在Chrome和Safari中,这就是动画的工作方式,但在Firefox和IE中,背景图像和渐变一起动画.
有没有办法在不添加其他div的情况下使用CSS在所有浏览器中获得所需效果？
@-webkit-keyframes bgscroll {
0% { background-position: 0 0 ; }
100% { background-position: 0 -230px; }
}
@keyframes bgscroll {
0% { background-position: 0 0 ; }
100% { background-position: 0 -230px; }
}
.hero {
display: block;
height: 20rem;
background-image: image-url("icons_grid.png"), -webkit-linear-gradient(to bottom, #646464, #323232);
background-image: image-url("icons_grid.png"), -moz-linear-gradient(to bottom, #646464, #323232);
background-image: image-url("icons_grid.png"), linear-gradient(to bottom, #646464, #323232);
margin-bottom: 3rem;
animation: bgscroll 30s infinite linear;
-webkit-animation: bgscroll 30s infinite linear;
border-bottom: .3rem solid #0b71b9;
}
推荐指数
解决办法
查看次数
防止CSS3闪烁背景颜色覆盖
我有一个以编程方式创建的具有n行的表,并且在每行上,我以编程方式将类添加到odd行中的不同even行.其中一些行有一个需要突出显示的"特殊"内容,为此,我在行上使用闪烁的背景:
HTML
<table>
<tr class='blink odd'>
<td>first row, very important</td>
</tr>
<tr>
<td>second row</td>
</tr>
<tr class='odd'>
<td>third row</td>
</tr>
<tr>
<td>fourth row</td>
</tr>
<tr class='odd'>
<td>fifth row</td>
</tr>
<tr class='blink'>
<td>sixth row, also important</td>
</tr>
</table>
CSS
@-webkit-keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: none }
100% { background: rgba(255,0,0,0.5); }
}
.blink {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
}
table tr.odd{
background: …推荐指数
解决办法
查看次数
如何使用 CSS 内容跨浏览器用图像替换 HTML 文本
所以我有一个由我的 CMS 生成的导航菜单：
菜单的 HTML 很简单（为了清晰起见进行了编辑）：
<ul>
<li><a href="...">Journal</a></li>
<li><a href="...">Art</a></li>
<li><a href="...">Work</a></li>
</ul>
我希望项目显示为手写文本，与网站的总体主题保持一致，为每个菜单项使用单独的 PNG 文件。
为此，我使用了 CSScontent属性，如下所示：
#headerNav .nav li a[href="/_site/en/journal/"]
{ content: url(/path/to/image.png); }
而且效果很好！每个项目的 HTML 文本被正确的图像替换：
但是，唉，后来我了解到并非每个浏览器都支持content除:before和之外的选择器上的 属性:after！Chrome 和 Safari 会这样做，但 Firefox 不会。但是，当我使用时 :before，不会替换 HTML 节点，但会添加图像：
我该如何解决这个问题？
什么不起作用：
- 制作
<a>元素也display: none删除了:before部分。 - 制作
<a>元素position: absolute并将其移动到其他地方也行不通。 - 使
<a>元素width: 0px搞砸了布局，因为通过添加的图像content不在文档流中。
我不想做的事情：
当然，我可以手动输出图像，但我想使用 CMS 给我的 HTML，其中
<li> …
推荐指数
解决办法
查看次数
使用变换旋转移出元素的文本
我把文字扭曲成270度角.我的问题是将它与另一个div对齐.
这是我扭曲文本之前的图像:
这是我的代码:
#infoside {
background-color: #00ff00;
float: right;
height: 100%;
width: 41%;
}
#tabbings {
float: left;
width: 15%;
height: 100%;
background-color: #ffff00;
}
#tab_panels {
float: right;
width: 85%;
height: 100%;
background-color: #00ffff;
}
#client_info {
height: 100px;
width: 100%;
}
<div id="infoside">
<div id="tabbings">
<div id="client_info" class="active_tabbing">
<div id="text_here" style="width: 100px; height: 25%; text-align: center">
CLIENT INFO
</div>
</div>
<div class="clear"></div>
</div>
<div id="tab_panels"></div>
<div class="clear"></div>
</div>
当我将这个类添加到id为text_here的div时,它会扭曲文本,下面的图像就是结果
.twist_text {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg) ; …推荐指数
解决办法
查看次数
如何在Flexbox中对齐两端的项目
我有一个tdwith Two div，我想要的是将它们div在两端对齐。
<td class="lefts">
<div>
<h4>VOUCHER </h4>
<h4>DATE TIME </h4>
<h4>SALESMAN</h4>
<h4>CUSTOMER : </h4>
<h4>CONTACT </h4>
<h4>VAT / : </h4>
<h4>ADDRESS </h4>
</div>
<div>
<p> HELLO WORLD </P>
</div>
</td>这是我希望如何对齐我的视觉表示div
推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×8
css3 ×3
border ×2
alignment ×1
css-content ×1
css-position ×1
flexbox ×1
html-table ×1
iframe ×1
image ×1
input ×1
jquery ×1
label ×1