我试图建立多个边框,这些边框在用户图像周围逐渐消失。我正在这样编写CSS,但这无济于事:
width: 90px;
border-radius: 50%;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
Run Code Online (Sandbox Code Playgroud)
但是它没有提供预期的输出。我该如何实现?
我有两个可排序对象列表
1 1 (1A 1B)
2 (2A 2B) 2
3 3 (3A 3B)
4 (4A 4B) 4
5 5 (5A 5B)
Run Code Online (Sandbox Code Playgroud)
列表的代码如下所示:
1 1 (1A 1B)
2 (2A 2B) 2
3 3 (3A 3B)
4 (4A 4B) 4
5 5 (5A 5B)
Run Code Online (Sandbox Code Playgroud)
$( function() {
$( ".contain" ).sortable();
});Run Code Online (Sandbox Code Playgroud)
.contain{
list-style: none;
}
#right{
float: left;
}
#left{
float: left;
}Run Code Online (Sandbox Code Playgroud)
我想将相同的数字排序在一起。例如,如果我将列表5中的“左”移到顶部,那么列表5中的“右”也应移到顶部,反之亦然。从列表“ right”中的3移到顶部,然后列表“ left”中的3将执行相同的操作。
我制作了一个功能齐全的旋转木马,但问题是在旋转木马的右侧出现白色块.我想摆脱那个.请帮忙.

<div class="carousel-inner">
<div class="item active">
<img src="Jellyfish.jpg" alt="image">
<div class="carousel-caption">
<h2>This is the heading</h2>
<p>This is paragraph</p>
</div>
</div>
<div class="item">
<img src="Koala.jpg" alt="image">
<div class="carousel-caption">
<h2 style="color:orange">This is the heading</h2>
<p>This is paragraph</p>
</div>
</div>
<div class="item">
<img src="Penguins.jpg" alt="image">
<div class="carousel-caption">
<h2>This is the heading</h2>
<p>This is paragraph</p>
</div>
</div>
<a href="#caro" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#caro" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Run Code Online (Sandbox Code Playgroud)
<script src="~/angular/runtime*"></script>
<script src="~/angular/polyfills*"></script>
<script src="~/angular/vendor*"></script>
<script src="~/angular/main*"></script>
Run Code Online (Sandbox Code Playgroud)
我想在我的布局页面中添加这些脚本
我在用Chart JS version 2.x。我用chart JS准备了一个条形图。但我喜欢将legend图表的对齐right center。下面我分享一下图片。
还有我想要的传奇位置。
我已经从文档中尝试过。在我的代码中
options: {
legend: {
position: 'right'
}
}
Run Code Online (Sandbox Code Playgroud)
更新1:我正在使用chart js module in Angular5
更新2:我尝试过的是https://jsfiddle.net/v4ur38ao/1/
我目前有一个包含以下代码的表单,问题是当用户按下表单提交按钮时,即使没有检查必填字段,onclick呼叫仍然会被触发,我如何才能做到这一点,以便您必须完成必填字段在获得触发器之前?
<form method="post">
<div class="form-group">
<select id="inputState" class="form-control" style="width: 100%">
<option>10,000 credits</option>
<option>25,000 credits</option>
<option>50,000 credits</option>
<option>75,000 credits</option>
<option>100,000 credits</option>
</select>
</div>
<div class="text-center">
<div class="row justify-content-center mb-2">
<div class="col-12 col-md-8 text-center">
<p class="mb-0 small text-muted"><strong>Promotion Disclaimer</strong>
<br>You will be required to install a free mobile app from our sponsors to receive your Coins for free. This process only takes a minute or two and you can remove the app once you're finished.</p>
</div>
</div>
<div …Run Code Online (Sandbox Code Playgroud)我正在尝试在右侧添加一个眼睛图标。在我的原始代码中,它显示在右侧,但没有响应并且在屏幕尺寸改变时移动。
下面是一个松散的实现。我希望它应该在输入字段在两个密码字段中结束之前显示在右侧。目前它显示但不正确。全屏测试一下。
.login-form {
margin: 20px 0 0 0;
}
.login-form input[type=text] {
background: #fff;
border: none;
border-radius: 8px;
position: relative;
font-size: 15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 20px;
margin-bottom: 15px !important;
color: #666 !important;
border: 1px solid grey;
}
.login-left {
width: 44%;
margin: 0 0 0 5%;
display: inline-block;
float: left;
}
.login-right {
width: 44%;
margin: 0 5% 0 0;
display: inline-block;
float: right;
}
@media screen and …Run Code Online (Sandbox Code Playgroud)我的小型设备上的下拉菜单有问题.当我在这里尝试解决方案时,我无法使其滚动(即溢出:自动/溢出-y:滚动)即使我使用它也不起作用!重要.即使下拉菜单打开,我能够滚动的是我的主页面.

<nav class="navbar navbar-toggleable-sm ">
<button class="navbar-toggler navbar-toggler-right main-navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-collapse" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand animation" data-animation ="fadeInLeft" href="#"><img src="/093017/img/logo-tmi.png" alt="logo"/></a>
<div class="collapse navbar-collapse" id = "main-nav-collapse" >
<ul class="nav navbar-nav navbar-main mr-auto mt-2 mt-md-0 animation" data-animation = "fadeInRight">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class="dropdown-menu default-menu main-menu sm-main-menu animation" data-animation = "fadeIn">
<!-- Nav tabs -->
<div class="sm-main-nav" >
<a class="dropdown-item" href="#">Cars</a><hr> …Run Code Online (Sandbox Code Playgroud) 我正在将baguettebox用于图像查看器。问题是,除“下一个/上一个”按钮外,其他所有东西都起作用。所以我无法转到下一张图片。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.labrador');
</script>
Run Code Online (Sandbox Code Playgroud)
和html:
<div class="labrador">
<a href="img/portfolio/cabin.png"
data-at-450="img/portfolio/blog.jpg"
data-at-800="img/portfolio/cake.png"
data-at-1366="img/portfolio/circus.png"
data-at-1920="img/portfolio/blog.jpg">
<button type="button" class="btn btn-primary" href="#">Images</button>
</a>
</div>
Run Code Online (Sandbox Code Playgroud)
我的结果:https : //i.gyazo.com/3e9bad7f104794962a31b8ef13ce0891.png
如您所见,没有下一个/上一个按钮,只有X可以正常工作。
html ×6
css ×5
javascript ×5
css3 ×2
jquery ×2
android ×1
arrays ×1
asp.net-core ×1
attr ×1
baguettebox ×1
bar-chart ×1
bootstrap-4 ×1
border ×1
box-shadow ×1
chart.js ×1
charts ×1