我有以下用于HTML的用例
I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div.
I have the option of "send to back" which sends the selected div to back of other div.
If I apply this to blue div and select blue div it should look like below image

基本上我想要的MINIC功能Arrange --> Order --> Send to back的Google Presentation
我确实尝试z-index过没有成功.我可以使用background-gradient重叠的部分,blue div transparent但这会侵犯我想要避免的一些计算.
如何在HTML中实现这一点? …
我一直在尝试创建一个径向背景,除了某些原因,我能得到的只是一条线.我不知道我做错了什么,有什么想法吗?
Jsfiddle:http://jsfiddle.net/3QSFj/1/
CSS:
background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Run Code Online (Sandbox Code Playgroud) 我希望在获得焦点时为文本输入添加蓝色阴影高亮显示:
input:focus {
box-shadow:0px 0px 5px #6192D1;
-webkit-box-shadow: 0px 0px 5px #6192D1;
-moz-box-shadow: 0px 0px 5px #6192D1;
outline: 0;
}
Run Code Online (Sandbox Code Playgroud)
在Firefox中它看起来很好,但Chome添加了一些内部3D外观边框.
Chrome添加了以下样式:
border-top-style: inset;
border-top-width: 2px;
border-bottom-style: inset;
border-bottom-width: 2px;
border-left-style: inset;
border-left-width: 2px;
border-right-style: inset;
border-right-width: 2px;
Run Code Online (Sandbox Code Playgroud)
如果我设置如下:
border-width: 2px;
border-color: transparent;
border-style: inset;
Run Code Online (Sandbox Code Playgroud)
边框在Chrome中已经消失,但在FF中,它会使焦点重新调整.
任何想法如何摆脱3D边界不会伤害FF的外观?
为什么我的css圈不顺畅?
如果我做一个HTML5 Canvas它真的很好.
<div id="circle"></div>
<style>
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:4px solid blue;
}
</style>
Run Code Online (Sandbox Code Playgroud)
使用Chrome和最新的IE浏览器
请注意,极右上角左下方的点显得平坦.
对于以下锚文本不居中。如果我将锚点的显示从 flex 更改为块,则文本居中。为什么是这样?
到目前为止,我只在 Chrome 上测试过。
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit- box-sizing: border-box; box-sizing: border-box;
}
ul {
display: flex;
flex-flow: row wrap;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
}
li {
list-style-type: none;
}
a {
background: grey;
width: 200px;
border: 1px solid red;
text-align: center;
display: flex;
}
Run Code Online (Sandbox Code Playgroud)
我试过了
var name = <?php echo json_encode($eventname); ?>;
Run Code Online (Sandbox Code Playgroud)
和
var name = new Array("<?php echo implode('","', $eventName);?>");
Run Code Online (Sandbox Code Playgroud)
将我的名字字符串数组从PHP解析为Javascript.它显示为
var name = ["lalalala","Lalala","test"];
Run Code Online (Sandbox Code Playgroud)
和
var name = new Array("lalalala","Lalala","test");
Run Code Online (Sandbox Code Playgroud)
在viewsource中,但是当我尝试使用name [i]来获取字符串时,它返回了字符,而不是字符串.数组名称的大小也不是3,而是20(这是字符总数加上3",").我怎样才能解决这个问题?
我已经护目镜但仍然不知道该怎么做
我有3个div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
我试图完成什么
到目前为止我尝试了什么
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
Run Code Online (Sandbox Code Playgroud)
如何使div id = center在另一个div(div id = right)的正确位置填充整个宽度
原谅我的英语
我如何并排设置两个 div 和下面的第三个像这样
.
我当前的代码如下,在名称 div 后放置注释 div
HTML:
<div id="info_div">
<div id="info_div_name">Name</div>
<div id="info_div_time">6:30 PM</div>
<div id="info_div_note">Note</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
#contact_table_data {
width:inherit;
height:inherit;
background-color:#99cc33;
max-width:400px;
}
#info_div_name {
width:auto;
height:auto;
padding: 5px 0px 5px 10px;
float:left;
}
#info_div_time {
width:auto;
height:auto;
padding: 5px 10px 5px 0px;
float:right;
}
#info_div_note {
width:inherit;
height:auto;
position:static;
padding: 0px 10px 5px 10px;
}
Run Code Online (Sandbox Code Playgroud) 为什么我的明星没有出现在黄色?怎么解决?
以下是上述问题的相关代码.
HTML
<div class="tpl" data-favorite="1">
<div>
<span class="favorite">?</span>
<span class="text">Italian Pizza: salmon, olives, onion, tomato, blue-cheese</span>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
[data-favorite=1] {
background: #AAA;
border-left: 3px solid green
}
.favorite {
font-size: 2em;
padding: 0 1 0 1em;
}
[data-favorite=1] .favorite {
color:yellow;
}
[data-favorite=0] .favorite {
color:#AAA;
}
Run Code Online (Sandbox Code Playgroud)