小编San*_*mar的帖子
连接圆角正方形
如何创建div徽标,如下图所示:
主要问题是如何将两个盒子连接成如下图所示的形状,有人可以建议吗？
body,html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/ …17
推荐指数
推荐指数
2
解决办法
解决办法
1002
查看次数
查看次数
使用javascript添加到主屏幕功能
我想使用按钮单击“添加到主屏幕”功能javascript。我的第一个问题是。可以使用javascript或html/css吗？
我看了太多的帖子，但是找不到任何有效的代码。我发现用户要做的就是转到chrome菜单，然后在“添加到主屏幕”上选择标签，否则chrome将提示用户并要求他们“添加到主屏幕”
11
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
CSS边框动画 - 将实线转换为虚线
我创建了一个圆形动画,它工作正常,但我想从实线变为虚线,但我想知道如何完成它,有人可以建议吗？
以下是它现在的样子:
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.inner-shadow {
top: 1px;
left: 1px;
width: 48px;
height: 48px;
margin-left: 0;
margin-top: 0;
border-radius: 100%;
background-color: #ffffff;
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span {
background-color: #f00;
}
.fill {
position: absolute;
width: 100%;
height: 100%; …11
推荐指数
推荐指数
2
解决办法
解决办法
1631
查看次数
查看次数
在相同位置悬停时显示div
我试图在鼠标悬停时显示div,但它是闪烁的,我如何显示/隐藏没有任何混蛋并顺利过渡？
我也尝试使用jquery淡入/淡出但仍然闪烁.
这是代码
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.front:hover + .back {
opacity: 1;
visibility: visible;
}<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is …8
推荐指数
推荐指数
1
解决办法
解决办法
981
查看次数
查看次数
如果ul li类处于活动状态,则jQuery将一个类替换为另一个类
我正在制作一个表单构建器,我想改变外观,例如内容的颜色.当等于活动的类应该获得文本的白色但是当其余的不活动时,文本应该是黑色的.
如何用生成的2类做到这一点？
无论如何,我在这个论坛上找到了一些东西,但似乎对我不起作用:
$('.game-star').addClass('game-star2').removeClass('game-star');.game-star ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
.game-star2 ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
<div class="game-star" style="height: 198px; overflow: hidden;">
<ul>
<li class="Active">
<div class="game-star-icon"></div>
<!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> -->
<h3 class="winner-name">Major Millions<br>
RMB 1000.00</h3>
<!-- <p>RMB 625.78</p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah<br>
RMB 3,266.41</h3>
<!-- <p></p> -->
</li>
<li>
<div class="game-star-icon"></div>
<h3 class="winner-name">Major Moolah Isis<br>
RMB 4,982.78</h3>
<!-- <p></p> -->
</li> …7
推荐指数
推荐指数
1
解决办法
解决办法
306
查看次数
查看次数
设置段落中每个单词的第一个字母
我正在尝试CSS使用greensock来设置段落的第一个字母并想要添加一些动画,但实际上要求的是设置每个单词的第一个字母而不仅仅是第一个字母段落.
关于这个的建议/想法是什么？
p{
font-size:150%;
color:#000000;
}
p::first-letter {
font-size: 200%;
color: #ff0000;
}<p>Hello This Is The Title</p>更新我尝试处理以下方式(添加span标记并定位每个范围的第一个元素)但它不起作用:
p span:nth-child(1)::first-letter {
font-size: 200%;
color: #ff0000;
}
6
推荐指数
推荐指数
1
解决办法
解决办法
1769
查看次数
查看次数
在第二栏中移动li项-仅CSS
我UL和LI列表的最大项目数是10，我想，如果超过5个移动的项目的第二列，只想用CSS来处理，我试着用CSS3“列”，但其在第二列所有项目会，如何确保将超过5个的项目移至第二列
问题是，仅当li大于5且li小于或等于5时，LI才应出现在第二列中
.listItems {
list-style: none;
margin: 0;
padding: 0;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.listItems li {
color: #000;
text-decoration: none;
display: block;
padding: 4px 0;
}<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
<li><a href="javascript;;">List Item 5</a></li>
<li><a href="javascript;;">List Item 6</a></li>
<li><a href="javascript;;">List Item 7</a></li>
<li><a href="javascript;;">List Item 8</a></li>
<li><a href="javascript;;">List Item …6
推荐指数
推荐指数
2
解决办法
解决办法
407
查看次数
查看次数
使用jquery在div中包装内容
我试图在div中包装内容,但问题是html页面不可编辑所以我正在尝试其他方式,使用jQuery来包装以下所有内容div是html结构
$(document).ready(function() {
$("hr").before("<div class=wrapElement>");
$("#disqus_thread").before("</div>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>问题打开div位于正确的位置,但是关闭div不在正确的位置,它应该在上面div id="disqus_thread"但不在那里,我如何将它放在这个位置？
jQuery版本是1.12.4
提前致谢
5
推荐指数
推荐指数
1
解决办法
解决办法
1262
查看次数
查看次数
CSS的笛卡尔失真效果
我正在尝试重新创建纽约时报时装周页面中使用的笛卡尔扭曲效果.但是,他们使用D3版本3和D3js的fisheye插件,它不适用于D3版本4.
由于我们所做的整个项目都在D3 V4中,所以我无法降级到D3版本3.
是否有其他方法可以使用CSS和jquery实现此效果？
我试过这是我到目前为止的地方:预览
window.onload = run;
function run() {
if ($('.overlayDiv').css('display') != 'none') {
var container = d3.select('.overlayDiv');
container.empty();
var val = parseInt(5);
var overlayWidth = $(".overlayDiv").width();
var vwidth = (overlayWidth / (val));
console.log(vwidth);
for (i = 0; i < val; ++i) {
var div = container.append("div").style("width", vwidth + "px")
.style("height", "100%")
.style("background", "rgb(75, 123, 175)")
.style("float", "left")
var year = div.text(i)
.attr("class", "summary")
.style("text-align", "center")
.style("font-size", "32px")
.style("font-weight", "bold")
.style("line-height", "100px").style("color", "white")
.on('mouseover', function() …5
推荐指数
推荐指数
1
解决办法
解决办法
1125
查看次数
查看次数
垂直居中多行弹性项目
我试图垂直对齐包装的子DIV,但不幸的是没有.要求是屏幕包装的全宽和高度,其中两个子项DIV垂直和水平居中.(div的高度由jQuery处理以使窗口高度)
注意:我不想让孩子DIVwidth:100%
这是我尝试过的:
.wrapper {
width: 100%;
height:100%;
min-height:600px; /*just for example*/
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background:#e1e1e1;
}
.row1 {
background: #cdcdcd;
}
.row2 {
background: #404040; color:#fff;
}<div class="wrapper">
<div class="row1">This is row one</div>
<div class="row2">This is row two</div>
</div>5
推荐指数
推荐指数
1
解决办法
解决办法
5493
查看次数
查看次数