小编eir*_*ios的帖子

显示图标上的通知数量

我有一个通知图标(),显示通知的数量.

我在尝试将数字显示在正确的位置时遇到问题,如下图所示

在此输入图像描述

我需要将文本缩小并向右移动一点......这是代码

.header .bubble {
  border-radius: 100%;
  height: 14px;
  width: 14px;
  background-color: rgba(226, 32, 91, 0.77);
  color: #ffffff;
  text-align: top;
  position: relative;
  top: 0px;
  float: right;
  right: -3px;
}

 <a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"><span class="bubble">2</span>
Run Code Online (Sandbox Code Playgroud)

任何人都可以帮忙,我是新手.

html css css-position css3 font-awesome

14
推荐指数
1
解决办法
2万
查看次数

在Angular 6中使用锚链接#id

我正在使用Angular 6项目,我已禁用/删除了hash-location-strategy,它从URL中删除#.

由于此更改链接具有:

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>
Run Code Online (Sandbox Code Playgroud)

不再工作它只是跳过当前组件URL并将#contactTypes放在localhost之后.

我找到了这个应该解决问题的链接

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>
Run Code Online (Sandbox Code Playgroud)

它将#contactTypes放在URL的末尾,但它不会滚动到浏览器的顶部.

资料来源:https://github.com/angular/angular/issues/6595

html anchor routing angular hash-location-strategy

11
推荐指数
4
解决办法
3万
查看次数

bootstrap 3响应多个大型菜单

我使用bootstrap 3并设计大型菜单导航.

HTML:

<div class="container">
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">   <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>   <a class="navbar-brand" href="#">MegaMenu</a>

        </div>
        <div class="collapse navbar-collapse js-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

                    <ul class="dropdown-menu mega-dropdown-menu row">
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">New in Stores</li>
                                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">
                                        <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>

                                             <h4><small>Summer dress floral prints</small></h4> 
                                            <button class="btn …
Run Code Online (Sandbox Code Playgroud)

html css css3 megamenu twitter-bootstrap

9
推荐指数
1
解决办法
4万
查看次数

3D立方体中的css3变换原点问题

我创建了css-cube并将其旋转:hover.

但它的旋转是基于立方体的一面!

我想从它的中心旋转它,就像在这个例子中一样.我正在尝试属性但没有得到理想的结果.

我也尝试在一个立方体内放置一个中间飞机,但在那种情况下悬停不起作用!

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective: 500px;
    perspective: 500px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.main:hover{
    transform:rotateY(180deg);
}

.top, .right, .left, .bottom,.lid{
    position:absolute;
    width:100px;
    height:100px;
    z-indexd:999;
    transition:  all 1s ease;
}
.top {
    background:crimson;
    top:-100px;
    transform-origin : 50% 100%;
    transform:rotateX(-90deg); …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transforms css-animations

9
推荐指数
1
解决办法
2199
查看次数

分页符不适用于tbody问题

我生成使用打印报告table布局.

tbody内心有多个table;

虽然page-break-after每个都需要印刷tbody

所以我已经应用了

@media print {
    tbody{
        page-break-after: auto;
        page-break-inside: avoid;
        border: none !important;
        margin-bottom: 20px !important;
    }
}
Run Code Online (Sandbox Code Playgroud)

问题

  • 在应用样式page-break-aftertbody,分页功能无法正常工作,请参阅此处

  • 但是当应用display:blocktbody给我想要的结果,但表的布局正在发生变化后扭曲tbody display:table-row-group,以display:block 看到这里

我想在tbody使用后打破页面page-break-after: auto;.

情景如下

在此输入图像描述

html css html-table css3 print-css

8
推荐指数
1
解决办法
1万
查看次数

使用Bootstrap 3将图标放在提交按钮内

我正在尝试使用Bootstrap 3实现如下截图所示的效果.

在此输入图像描述

如您所见,搜索按钮是:

1)输入内部

2)用glyphicon设计,以便不像"按钮".

如何使用Bootstrap 3实现类似的效果?我想在文本输入的末尾放置一个带放大镜glyphicon的按钮,但按钮会一直显示在输入下方而不是内部.

html css css3 twitter-bootstrap-3 twitter-bootstrap-form

7
推荐指数
1
解决办法
2万
查看次数

隐藏默认选择IE9中的下拉箭头

REF DEMO

我试过css appearance: none;来隐藏选择下拉箭头.但在IE9箭头显示.供参考,请参阅图像.

知道如何使用css或jquery隐藏箭头吗?

这是我的代码:

    .fields-set select{
height:32px;
border:1px solid #ccc;
margin: 0 19px 0 1%;
padding:0 32px 0 1%;
width:55%;
float: left;
overflow: hidden;
background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF;
box-shadow: none;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
    -ms-appearance: none  \9;
     -o-appearance: none;
    }
Run Code Online (Sandbox Code Playgroud)

html css jquery css3 internet-explorer-9

7
推荐指数
1
解决办法
1万
查看次数

谷歌卡的"翻转和增长"效果

我一直在研究如何创建像Google卡一样的翻转和增长效果(点击任意卡片):

http://www.google.com/landing/now/#cards/restaurant-reservations

我发现的所有资源都是关于翻转相同尺寸的正面和背面的卡片,但这不是我想要的.

任何反馈都将非常感激.

html javascript css jquery animation

6
推荐指数
2
解决办法
9459
查看次数

如何使用css或jquery更改浏览器默认滚动条

如何使用默认浏览器的滚动条替换自定义样式滚动条(我可以使用Webkit更改chrome)

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: #CFCFCF
}
::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5
}
::-webkit-scrollbar-thumb {
    background-color: #2C3E50
}
Run Code Online (Sandbox Code Playgroud)

但是我也想在mozilla firefox中进行更改..帮助我

html css jquery scrollbar css3

6
推荐指数
1
解决办法
7576
查看次数

日期选择器html5标记不适用于Mozilla,IE浏览器.但它仅适用于Chrome

我想在我的网站上使用HTML 5 Date picker标签.但是这个标签不支持Mozilla和IE.你能否分享我在IE和Mozilla中使用此代码的任何黑客攻击.

我只想使用HTML5.我不想去寻找JavaScript.

forms html5 internet-explorer mozilla datepicker

5
推荐指数
1
解决办法
3万
查看次数