我有一个通知图标(font-awesome),显示通知的数量.
我在尝试将数字显示在正确的位置时遇到问题,如下图所示
我需要将文本缩小并向右移动一点......这是代码
.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)
任何人都可以帮忙,我是新手.
我正在使用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的末尾,但它不会滚动到浏览器的顶部.
我使用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) 我创建了css-cube并将其旋转:hover
.
但它的旋转是基于立方体的一面!
我想从它的中心旋转它,就像在这个例子中一样.我正在尝试transform-origin属性但没有得到理想的结果.
我也尝试在一个立方体内放置一个中间飞机,但在那种情况下悬停不起作用!
.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)我生成使用打印报告table
在Twitter的引导布局.
我tbody
内心有多个table
;
虽然page-break-after
每个都需要印刷tbody
所以我已经应用了print-css
@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-after
时tbody
,分页功能无法正常工作,请参阅此处
但是当应用display:block
到tbody
给我想要的结果,但表的布局正在发生变化后扭曲tbody
display:table-row-group
,以display:block
看到这里
page-break-after: auto;
.我正在尝试使用Bootstrap 3实现如下截图所示的效果.
如您所见,搜索按钮是:
1)输入内部
2)用glyphicon设计,以便不像"按钮".
如何使用Bootstrap 3实现类似的效果?我想在文本输入的末尾放置一个带放大镜glyphicon的按钮,但按钮会一直显示在输入下方而不是内部.
我试过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) 我一直在研究如何创建像Google卡一样的翻转和增长效果(点击任意卡片):
http://www.google.com/landing/now/#cards/restaurant-reservations
我发现的所有资源都是关于翻转相同尺寸的正面和背面的卡片,但这不是我想要的.
任何反馈都将非常感激.
如何使用默认浏览器的滚动条替换自定义样式滚动条(我可以使用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 5 Date picker标签.但是这个标签不支持Mozilla和IE.你能否分享我在IE和Mozilla中使用此代码的任何黑客攻击.
我只想使用HTML5.我不想去寻找JavaScript.
html ×9
css ×8
css3 ×7
jquery ×3
anchor ×1
angular ×1
animation ×1
css-position ×1
datepicker ×1
font-awesome ×1
forms ×1
html-table ×1
html5 ×1
javascript ×1
megamenu ×1
mozilla ×1
print-css ×1
routing ×1
scrollbar ×1