小编Gre*_*reg的帖子
边界没有显示
你知道为什么蓝色边框没有显示在我的场地的右侧吗？(字段宽度为100%)非常感谢http://jsfiddle.net/KtEdG/
CSS:
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 1000px;
overflow: hidden;
}
.block {
padding: 20px;
background-clip: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow-y: auto;
overflow-x: hidden;
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
/*************************************************************
* CONTACT …推荐指数
解决办法
查看次数
水平菜单:如何向右浮动但保持菜单项的顺序正确？
我正在使用float: right我的水平菜单(.drop_menu li),因为我希望菜单对齐到屏幕的右侧(和徽标在左侧).它工作正常,唯一的问题是我的菜单项现在的顺序错误(链接3然后链接3然后链接1而不是相反).有办法解决这个问题吗？非常感谢
<div class="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
.header {
width: 100%;
background: #fff;
color: #124191; …推荐指数
解决办法
查看次数
为什么在填写所有字段之前重新启用我的提交按钮？
我正在使用下面的代码验证(通过bootstrap-validator)我的联系表单中每个字段的内容(还有一个额外的检查通过谷歌recaptcha).您可以在此地址查看并测试表格.
默认情况下,提交按钮被禁用<button id="submit-btn" class="btn-upper btn-yellow btn" name="submit" type="submit" disabled><i class="fa fa-paper-plane-o" aria-hidden="true"></i> SEND</button>,并且一旦所有字段通过bootstrap-validator和google recaptcha完成验证,就应该重新启用.
问题:填写第一个字段后,会立即重新启用提交按钮,因此必须在某处重新激活它(您可以通过在第一个字段中键入您的名字然后将鼠标放在提交按钮上来进行测试,你会看到按钮是活动的而不是禁用的)
知道问题是什么以及如何解决这个问题？
非常感谢
JS:
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'aaVeuillez indiquer votre prénom'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'aaVeuillez indiquer votre nom'
}
}
},
email: { …推荐指数
解决办法
查看次数
用jquery ui fold效果替换JS动画
我目前正在使用下面的代码,效果很好.但是我遇到了一些问题/限制让我觉得使用jQuery UI折叠效果代替js animate函数会更合适.
由于我对JS不是很熟悉,你可以帮我调整下面的代码来使用jQuery UI折叠效果而不是动画功能吗？非常感谢
JS:
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
});
// clicking for the first time
};
if (active.attr("id") != page) {
$("#" + …推荐指数
解决办法
查看次数
单击其他DIV时更改DIV颜色
你可以在jsfiddle上看到http://jsfiddle.net/C8B8g/7/我有2个按钮(= 2个div)"区域"和"源".鼠标悬停时每个div都会突出显示(蓝色背景)(感谢stackoverflow贡献者,因为我在JS中仍然非常糟糕).
我注意到用户实际上并没有意识到这些是按钮所以我想做的是让第一个包含文本"我们的区域"的DIV默认用蓝色背景突出显示并且只回到白色单击包含文本"我们的源"的另一个div时的背景(在这种情况下,"我们的源"背景将变为蓝色).在CSS中使用"当前"进行了一些测试,但没有成功......
推荐指数
解决办法
查看次数
Facebook就像按钮框打开窗外区域
我的网站底部有一个像facebook一样的按钮.当我点击它时,我可以输入评论的"框"在我的网络浏览器窗口之外,我无法向下滚动或类似的东西(见下面的截图 - 图像的底部是窗口的底部).我怎样才能解决这个问题？(即,使框出现在按钮上方).TKS
HTML
<div id="social">
<div class="fb-like" data-href="http://mydomain.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
color: #333;
left: 0;
z-index: 999;
width: 96%;
text-align: right;
padding: 30px 2%;
vertical-align: bottom;
}
#social {
position: absolute;
vertical-align: middle;
left: 2%;
color: #333;
}
.fb_iframe_widget, iframe.twitter-share-button {
display: inline-block;
vertical-align: middle;
}
span.languageselector {
display: inline-block;
height: 20px; /* same height as #social div */
line-height: 20px; /* same …推荐指数
解决办法
查看次数
团队部分 - bootstrap对齐问题
我的网站遇到布局问题(使用bootstrap 3完成)由于某种原因,图片对齐很乱(见下图)任何想法有什么问题？
我想要的是什么:
是)我有的:
<section id="team">
<div class="row">
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/male-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Fondateur
<br>Directeur Général</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable diétéaires</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smithr</p>
<p class="position">Responsable dfsf, maux</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/male-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable stome</p>
</div> …推荐指数
解决办法
查看次数
基于浏览器语言重定向用户(不在PHP中)
我的网站将使用3种语言.法语(fr)是默认语言.该网站的结构如下:
根目录(注意:我不使用php文件,只是简单的html)
/fr/
Index.html
About-us.html
Contact.html
/en/
Index.html
About-us.html
Contact.html
/de/
Index.html
About-us.html
Contact.html
我有疑问:
- 根据用户的Web浏览器语言重定向用户的最佳做法是什么？通过htaccess？
- 我是否需要根级别的index.html页面(出于SEO原因或任何其他原因)？也许法国index.html？
推荐指数
解决办法
查看次数
Skrollr:如何在达到特定点时才开始动画？
我正在玩skrollr插件,但无法实现我想要的东西,所以寻求帮助.我已经能够实现简单的效果,例如<div id="intro-left" data-0="opacity: 0" data-180="opacity: 1">(意味着当用户向下滚动180时,我的DIV称为intro-left变为可见)
问题是我不喜欢使用滚动距离,因为如果有人拥有相同的屏幕分辨率,这只会有意义吗？
我想做的是告诉skrollr:"一旦DIV位置在屏幕上可见,将DIV从不透明度0改为不透明度1"(换句话说"一旦用户到达某一点,将DIV从不透明度0改为不透明度1"在页面上向下滚动)
这可以通过skrollr实现,以及如何实现？
非常感谢
推荐指数
解决办法
查看次数
为什么margin-top在这种情况下不起作用？
我想知道为什么我的班级.top不能用于我的第二个DIV wrapper top？我希望在右边的图片底部和红色DIV的顶部之间有200px,但它不起作用.请参阅JSFIddle
HTML
<div class="wrapper top">
<div class="block-1">
<p><span>ddfsfsdsfds</p>
<p>fdsfsdfs.</p>
<p>dfsdfdsfds.</p>
</div>
<div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div>
</div><!-- End wrapper -->
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>
CSS
body {
background: #F2F2F2;
}
.top {
margin-top: 200px;
}
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
}
.block-1 {
float: left;
box-sizing: border-box;
padding: 20px;
width: 60%;
text-align: justify;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, …推荐指数
解决办法
查看次数