javascript

java

python

c#

node.js

reactjs

android

c++

php

html

jquery

ruby-on-rails

css

git

ios

.net

sql

c

string

<img src="//i.stack.imgur.com/bk9VA.png" alt="" class="sponsor-tag-img" width="18" height="16"/>android

html - 倾斜的形状(响应)

我试图创建一个如下图所示的形状,仅在一侧(例如,底侧)具有倾斜边缘,而其他边缘保持笔直。

CSS div with a slanted side

我尝试使用border方法(代码如下),但我的形状的尺寸是动态的,因此我不能使用这种方法。

<div class="gradient"></div>
<div class="gradient"></div>


我也尝试使用渐变为背景(如下面的代码),但随着尺寸的变化,它会变得混乱。 你可以通过悬停在下面代码片段中的形状来看到我的意思。

<div class="gradient"></div>
<div class="gradient"></div>

如何创建具有倾斜侧面的形状并且还能够支持动态尺寸?

trans by 2019-09-17T22:13:44Z

css - Twitter Bootstrap中的响应表处理

当表的宽度超过跨度宽度时,如下页所示:[http://jsfiddle.net/rcHdC/]

您将看到该表的内容超出了span

迎合这种情况的最佳方法是什么?

trans by 2019-09-14T11:07:44Z

css3 - 使用CSS转换后模糊文本:scale(); 在Chrome中

好像最近谷歌Chrome的更新导致了transform: scale()后文本模糊。特别是我这样做:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

如果您在Chrome中访问[http://rourkery.com],则应在主文本区域看到问题。 它不习惯这样做,它似乎没有影响其他webkit浏览器(如Safari)。 还有其他一些关于人们遇到类似3d变换问题的帖子,但是找不到像这样的2d变换。

任何想法将不胜感激,谢谢!

trans by 2019-09-13T23:21:40Z

html5 - 使用CSS在悬停时在图像上创建缩放效果?

我正在尝试创建缩放效果,将鼠标悬停在我的四张图片之一上。 问题是大多数例子通常使用表或掩码div来应用某种效果。

这是一个实现我想要的例子。

到目前为止这是我的代码。

HTML

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

CSS

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

#menu img {
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
}

.blog {
    height: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
}

.music {
    height: 375px;
}

.projects {
    height: 375px;
}

.bio {
    height: 375px;
}
trans by 2019-09-11T12:02:38Z

html - 仅在一侧的Inset Box Shadow?

有可能以某种方式只在div的一侧插入盒子阴影吗? 请注意,我在这里讨论的是插入框阴影,而不是正常的外框阴影。

例如,在下面的JSFiddle中,您将看到插入阴影在不同程度上出现在所有4个边上。

如何才能将它显示在顶部? 或者至多只在顶部和底部?

JSFiddle:[http://jsfiddle.net/ahmadka/KFrun/]

HTML:

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS:

.box
{
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

.text
{
    padding:20px;   
}
trans by 2019-09-11T04:33:35Z

css3 - CSS显示:当width设置为100%时,table-row不会展开

我有一点问题。 我正在使用FireFox 3.6并具有以下DOM结构:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

以下CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

如果我取下display:table-row它将正确显示,view-row显示宽度为100%。 如果我把它放回去,它会缩小。 我把它放在JS Bin上:

[http://jsbin.com/ifiyo]

这是怎么回事?

trans by 2019-09-11T01:57:27Z

html - 了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)

我开始使用Bootstrap 3,我在理解如何使用网格类时遇到了一些麻烦。

这是我到目前为止所发现的:

看起来类col-sm-6col-lg-#与普通旧col-#的不同之处在于它们仅在屏幕高于特定尺寸(分别为768px和992px)时应用。 如果省略-sm-或-lg-,div将永远不会折叠成一列。

但是,当我在一行中创建两个div,它们都是col-sm-6时,当窗口在768px和992px之间时,它们似乎只是并排。 换句话说,如果我将窗口一直缩小然后慢慢加宽,则布局为单列,然后是两列,然后再次返回单列。

  1. 这是预期的行为吗?
  2. 如果我想要超过768px的两列,我应该同时应用这两个类吗?(col-6
  3. 还应包括col-6吗?<div class="col-6 col-sm-6 col-lg-6">
trans by 2019-09-10T23:18:38Z

css3 - Sass负变量值?

我有几个scss选择器,我使用相同数量的正面和负面,如:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

我更喜欢为所有15px数量使用变量,但这不起作用:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

保证金金额转换为正数。 我错过了什么吗?

trans by 2019-09-10T00:25:47Z

css3 - 如何使用纯CSS创建“工具提示尾部”?

我刚刚遇到了一个巧妙的CSS技巧。 看看小提琴......

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>
<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

这会产生一个小箭头/三角形效果,一个“工具提示尾巴”。 这让我大吃一惊! 我真的很想知道它是如何工作的?!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

enter image description here

这是一个有趣的问题。 这可以仅使用CSS来完成,暂时忽略阴影吗?


更新1

我想出了我最初问题的解决方案。 这是小提琴......

[http://jsfiddle.net/duZAx/7/]

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

现在,我如何使用纯CSS完全模仿上面的小图片,包括阴影并使其与浏览器兼容?


更新2

在下面的答案组合之后,这是我的解决方案。 我没有在多个浏览器中测试它,但它在Chrome中看起来很棒。

[http://jsfiddle.net/UnsungHero97/MZXCj/688/]

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

trans by 2019-09-09T23:13:18Z

css3 - 如何在CSS中选择具有特定类名的“最后一个孩子”?

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

如何选择具有类名称的“最后一个孩子”:list?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的例子不起作用,但是有什么类似的东西可以工作吗?

重要:

a)我不能使用ul li:nth-child(3),因为它可能发生在第四或第五位。

b)没有JavaScript。

任何帮助将不胜感激,谢谢!

trans by 2019-09-09T18:27:15Z

html - 将图标放入ci

如何将多个<img>元素放置在另一个周围的圆圈中,并将这些元素都设置为可点击链接? 我希望它看起来像下面的图片,但我不知道如何实现这种效果。

Desired Result

这甚至可能吗?

trans by 2019-09-08T16:02:51Z

css3 - CSS禁用文本选择

目前,我已将其放在body标签中以禁用文本选择:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

但是,我的inputtextarea盒子现在无法选择。 我怎样才能使这些输入元素可选择,其余部分不可选?

trans by 2019-09-04T01:02:05Z

html5 - 如何在bootstrap 3.0中使用glyphicons

我已经在bootstrap 2.3中使用了glyphicons,但现在我已升级到bootstrap 3.0。 现在,我无法使用icon属性。

在bootstrap 2.3中,下面的标签正在工作

<i class="icon-search"></i>

在bootstrap 3.0中,它不起作用。

trans by 2019-09-03T02:03:09Z

css3 - HTML5输入类型范围显示范围值

我正在建立一个网站,我想使用范围滑块(我知道它只支持webkit浏览器)。

我已经完全集成它并且工作正常。 但我想使用文本框来显示当前的幻灯片值。

我的意思是如果最初滑块的值是5,那么在文本框中它应该显示为5,当我滑动文本框中的值时应该更改。

我可以只使用CSS或HTML来做到这一点。 我想避免使用JQuery。 可能吗?

trans by 2019-08-28T19:54:39Z

css - 我可以有多个:在同一元素的伪元素之前吗?

是否可以为同一元素设置多个:before伪?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

我正在尝试使用jQuery将上述样式应用于同一元素,但只应用最新的样式,而不是两者都应用。

trans by 2019-08-28T18:37:54Z

CSS性能相对于translateZ(0)

一些博客表达了“欺骗”的表现。 GPU通过使用transform: translateZ(0)来加速动画和过渡来认为元素是3D。 我想知道是否有以下方式使用此转换的含义:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
trans by 2019-08-28T14:27:47Z

html - CSS表列autowidth

鉴于以下内容,我如何将我的上一列自动调整为其内容?(最后一列应该自动调整宽度到内容。假设我只有1个li元素它应该收缩而不是3个li元素等):

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

CSS:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}
trans by 2019-08-27T01:03:44Z

javascript - 如何在浏览器中规范化CSS3 Transition功能?

Webkit的转换结束事件称为webkitTransitionEnd,Firefox是transitionEnd,opera是oTransitionEnd。 在纯JS中处理所有这些问题的好方法是什么? 我应该做浏览器嗅探吗? 或分别实施每一个? 还有一些其他方式没有发生在我身上吗?

即:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

要么

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}
trans by 2019-08-24T04:20:13Z

html - 以引导程序为中心

我有这个代码的分页

<div class="pagination">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

但是我的margin: auto auto是左对齐的。 有没有办法集中margin :0 auto wrt div

我尝试了margin: auto automargin :0 auto但他们没有工作。

trans by 2019-08-20T20:18:59Z

html - CSS属性选择器不起作用

我需要在css中使用属性选择器来更改不同颜色和图像的链接,但它不起作用。

我有这个HTML:

<a href="/manual.pdf">A PDF File</a>

这个css:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

为什么背景不是红色的?

trans by 2019-08-19T18:13:48Z

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 下一页 共28页