我一直在尝试为链接按钮实现margin-top,但它根本不起作用.我还尝试了'p'和'a'标签的内联样式.
有3个li元素,我没有在这里发布整个代码,因为它与first li元素相同.
HTML
<div id="services">
<ul>
<li>
<img src="images/service.png" alt=""/>
<p class="service-heading">Service 1</p>
<p>Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst</p>
<p><a href="#">Read More</a></p>
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
这是上面的html的css代码.css代码:
#services{
background-color: #afc1ff;
height: 490px;
padding: 5%;
border-top: 5px solid #4972ff;
border-bottom: 5px solid #4972ff;
}
#services ul{
/* background-color: red; */
margin: 0;
padding-left: 10px;
padding: 0 0 0 50px;
}
#services ul li{
display: inline-block;
width: …Run Code Online (Sandbox Code Playgroud) 问题是在IE10中,行内列的宽度计算错误,它似乎是在列边距的宽度上增加(总共80px),但在Firefox和Chrome中它完美地计算它并适合一切在1260px内.主要的问题是,我已经以我认为正确的方式对所有内容进行了前缀,但我仍然遇到了问题.
你可以在jsFiddle上看到它 - http://jsfiddle.net/andyjh07/ue2zfga6/
CSS:
.row {
width: 100%;
position: relative;
background: red;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
margin-bottom: 40px; }
.row:after {
content: "";
display: table;
clear: both; }
.row *[class^="col-"] {
position: relative;
display: block;
height: auto; }
.row *[class^="col-"]:first-child {
margin-left: 0; }
@media (min-width: 64em) {
.row {
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row; } }
@media …Run Code Online (Sandbox Code Playgroud) 我正在玩Chartist.js,只是想知道你是否可以给我一些手工将一些样式应用到SVG.这是我的代码如下:
jQuery的:
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="ct-chart ct-perfect-fourth"></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; }
.ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; }
.ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; }
body { background: #203135; }
Run Code Online (Sandbox Code Playgroud)
我只是试图模拟他们在运球时发现的这个令人敬畏的设计所拥有的东西,其中每个数据点都有一个深色阴影/类似背景阴影的轮廓.我已经尝试在CSS中使用轮廓,但它在数据点周围产生一个黑色方块(或我选择的任何颜色),我无法弄清楚如何将它四舍五入
最后,这里是我已经在jsFiddle中的内容 - http://jsfiddle.net/andyjh07/gLnkwLj0/
我正在学习laravel并创建我的第一个表单.在我的刀片文件中使用{{old('')}}帮助器进行单选按钮之前,一切都很棒.我不确定如何正确地做到这一点,我似乎也无法在这里找到关于它的更多信息.
我的代码如下:
<div class="form-group">
<label for="geckoHatchling">Gecko Hatchling?</label>
<div class="radio">
<label>
<input type="radio" name="geckoHatchling" id="geckoHatchlingYes" value="1">
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="geckoHatchling" id="geckoHatchlingNo" value="0" checked>
No
</label>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我有以下代码.除了我想要将最终的tinstotal变量四舍五入到最接近的1(2.04被舍入到3等)之外,它的工作非常精美
$(document).ready(function(){
// Animate logo
$('#Logo').hide().fadeIn(800);
// Calculation Scripts
// Square Metres
var output = $('#SquareMetres'),
tinoutput = $('#Tins'),
priceoutput = $('#Price');
$('input[type="text"]').keyup(function() {
var width = parseFloat( $('#width').val()),
height = parseFloat( $('#height').val()),
result = height * width / 10000,
finalresult = result.toFixed(2);
if (isNaN(result)) return;
output.text(finalresult);
// Tins
var tinmetres = 32.5,
tinprice = 18.23,
tinsresult = finalresult / tinmetres;
tinstotal = tinsresult.toFixed(2);
tinoutput.text(tinstotal);
var price = tinstotal * tinprice,
totalprice = price.toFixed(2);
priceoutput.text('£'+totalprice)
});
});
Run Code Online (Sandbox Code Playgroud)
该脚本在http://andyholmes.me/sitewizard/index.html底部附近的红色框中处于活动状态.希望你们能帮忙,谢谢!
我有以下代码块.我要做的就是在幻灯片放映中获取当前图像的src.它没有工作,尽管它改变了幻灯片,但控制台中根本没有出现任何内容.
HTML:
<div id="banner" class="owl-carousel">
<img src="template/banner-1.jpg" alt="">
<img src="template/banner-2.jpg" alt="">
<img src="template/banner-1.jpg" alt="">
<img src="template/banner-2.jpg" alt="">
</div>
Run Code Online (Sandbox Code Playgroud)
jQuery的:
var owl = $(".owl-carousel");
owl.owlCarousel({
loop: true,
autoplay: true,
items: 1,
animateOut: 'fadeOut',
onChange: function (elem) {
var current = this.currentItem;
var src = elem.find(".owl-item").eq(current).find("img").attr('src');
console.log('Image current is ' + src);
}
});
Run Code Online (Sandbox Code Playgroud) 我在Laravel应用程序中试验中间件.我目前已将其设置为在经过身份验证的用户的每个路由上运行,但是,我希望它忽略以setupURI 开头的任何请求.
这是我的CheckOnboarding中间件方法的样子:
public function handle($request, Closure $next)
{
/**
* Check to see if the user has completed the onboarding, if not redirect.
* Also checks that the requested URI isn't the setup route to ensure there isn't a redirect loop.
*/
if ($request->user()->onboarding_complete == false && $request->path() != 'setup') {
return redirect('setup');
} else {
return $next($request);
}
}
Run Code Online (Sandbox Code Playgroud)
这在我的路线中使用如下:
Route::group(['middleware' => ['auth','checkOnboarding']], function () {
Route::get('/home', 'HomeController@index');
Route::get('/account', 'AccountController@index');
Route::group(['prefix' => 'setup'], function …Run Code Online (Sandbox Code Playgroud) 我正在使用这个jquery上传器(http://blueimp.github.io/jQuery-File-Upload/basic.html),当文件输入放在网站的原始代码中时,它工作正常,但我动态追加使用jquery的字段,它不起作用.这是触发上传的jquery:
$('.fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
alert(file.name);
//$('<p/>').text(file.name).appendTo(document.body);
});
}
});
Run Code Online (Sandbox Code Playgroud)
这就是应该触发上传的内容:
<input class="fileupload" type="file" name="files[]" data-url="uploads/">
Run Code Online (Sandbox Code Playgroud)
这是jquery附加的代码:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item" data-url="uploads/">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
<div class="col-md-2">\ …Run Code Online (Sandbox Code Playgroud) 我有一个完全工作的项目Laravel 5.3,昨天我升级到Laravel 5.4本地检查所有工作,并非常高兴所以制定一个计划,以实现移动.
我现在在forge.laravel.com托管服务器上部署了该站点,大多数路由工作正常,但在尝试注销时出现以下错误:
我不太确定问题究竟是什么.这个网站在当地工作得很好.谁能指出我正确的方向?
我有一个非常简单的按钮和模式组合在 Tailwind 和 Alpine 中工作 - https://jsfiddle.net/0pso5cxh/
我的问题是,在离开过渡(取消按钮或关闭图标)时,没有任何淡入淡出动画发生,它只是捕捉到 0 不透明度。这是我第一次同时使用 Tailwind 和 Alpine,因此我们将不胜感激!
<div x-data="{ addDonationOpen: false }">
<button @click="addDonationOpen = !addDonationOpen" class="bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6"><i class="fas fa-plus-square pr-1"></i> Add Donation</button>
<div x-show="addDonationOpen" :class="{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" class="w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center" style="background: rgba(0,0,0,.7);">
<div class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto …Run Code Online (Sandbox Code Playgroud) css ×4
jquery ×4
laravel ×3
php ×3
html ×2
javascript ×2
laravel-5 ×2
laravel-5.4 ×2
alpine.js ×1
blade ×1
blueimp ×1
chartist.js ×1
file-upload ×1
flexbox ×1
laravel-5.1 ×1
margin ×1
math ×1
rounding ×1
svg ×1
tailwind-css ×1