是否可以仅使用CSS重现此图像?

我想将它应用到我的菜单中,因此棕色背景出现在hover实例上
我不知道怎么做,我只有;
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
Run Code Online (Sandbox Code Playgroud) 我的网站上有2个主题:红色和蓝色.这很好......
当用户改变主题时,我必须知道我是否可以做一些改变图标的东西......
我知道这段代码是用于实现favicon:
<link rel=”shortcut icon” href=”favicon.ico” />
<link rel=”icon” href=”favicon.ico” />
Run Code Online (Sandbox Code Playgroud)
那么......我需要做什么呢?使用jQuery?
我有这个脚本,我用于更改主题:
$("#painel_faccao li a").click(function() {
$("link#faccao").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
Run Code Online (Sandbox Code Playgroud)
我怎么能在这里实现这个?
(这个问题有一个更现代的方法来实现这个功能)
这是一个小提琴
我想获得href属性,我使用$(this).attr('href')但它不起作用!
HTML :
<div class="wrap_atletas_interno">
<ul>
<li class="atleta">
<a href="teste.html">
<div class="nome_86_atleta">Antônio</div>
<img src="atletas/antonio_86px.jpg" />
</a>
</li>
<li class="atleta">
<div class="nome_86_atleta">Cauê</div>
<img src="atletas/caue_86px.jpg" />
</li>
<li class="atleta">
<div class="nome_86_atleta">Dudu</div>
<img src="atletas/dudu_86px.jpg" />
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
JavaScript:
$('.atleta').click(function (e) {
e.preventDefault();
$('.atleta').removeClass('atleta_atual');
$(this).addClass('atleta_atual');
var h = $(this).attr('href');
alert(h);
$.get(h, function (data) {
//$(".detalhes_atleta").html(data).fadeIn("slow");
alert(h);
});
});
Run Code Online (Sandbox Code Playgroud) 这是我的页面的HTML:
<body>
<header></header>
<div class="conteudo_representantes"></div>
<div class="rodape"></div>
</body>
Run Code Online (Sandbox Code Playgroud)
我里面的内容.conteudo_representantes 股利即是要在.rodape(页脚)DIV.
这是我的页面的CSS:
.conteudo_representantes {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height:586px;
margin-top:40px;
position: relative;
}
.rodape {
position: relative;
width:960px;
height:50px;
margin:36px auto;
background:transparent url(../img/header_pattern.png) repeat top left;
}
Run Code Online (Sandbox Code Playgroud)
在此示例中可以找到整页源.(单击列表的第二行,其中显示:02 - 圣保罗 - 资本,以查看此问题的实际效果.)
我究竟做错了什么?
我是iphone主题开发的新手,我想知道如何在iphone上使用自定义TTF或OTF字体,比如一种字体类型的手机垫,其他用于消息等...
可以帮我?
使用这个简单的邮件规则:
$("#loginCliente").validate({
rules: {
loginNomEmail: { required: true, email: true },
}
});
Run Code Online (Sandbox Code Playgroud)
在这个输入字段中,如果我们输入"test @",我们得到了验证错误.但是如果我们输入"test @ teste"插件显示的是有效的电子邮件.
我如何只有在有效的电子邮件中验证此字段?
看到此链接...:为例
在这个网站上我有这个代码
<body>
<div id="geral">
<div id="animacao">
<ul id="banners">
<li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
<li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
</ul>
</div>
<div id="menu">
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
#geral 位于屏幕的中心 -
#animacao具有相同的大小#geral,在此具有淡入淡出效果的动画图像..
#menu有271px,需要保持在中心,#geral并#animacao在此我将把菜单与PNG bakcground ....
这是我的CSS,可能不起作用......
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background: url(../imagens/fundo.jpg) no-repeat;
}
#animacao{
position: relative;
width:990px;
height:530px;
}
#menu
{
position: absolute;
left: 50%;
width:271px;
height:530px;
margin-left:-135px;
background-color:yellow;
z-index: 10;
}
Run Code Online (Sandbox Code Playgroud)
我哪里错了?
我正在使用Bootstrap 4和这个CSS类垂直对齐我的项目:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
Run Code Online (Sandbox Code Playgroud)
有了这个,所有这些内容都与左边对齐.例如,如何将列表(ul> li)对齐到右边?我没有尝试过任何工作.
这是一个有效的演示:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-md-3" style="background-color: #f1f1f1;">
<div class="logo">
<img src="http://placehold.it/120x50" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6" style="background-color: #ffccff;">
<div class="catergorias">
<ul class="list-inline categorias_topo"> …Run Code Online (Sandbox Code Playgroud)又是我!!
现在......我不知道这个Switch Case我做错了什么...可以帮助我吗?
当我点击一些LINK时,警报不会发出声音......
这是我的HTML:
<div class="menu-site">
<ul class="topo-menu" id="topo-menu">
<li id="aabruzzo">a abruzzo</li>
<li id="catalogo">catálogo</li>
<li id="conceito">conceito inverno</li>
<li id="representantes">representantes</li>
<li id="clipping">clipping</li>
<li id="loja">loja</li>
<li id="contato" class="sem-right">contato</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的javascript:
jQuery(document).ready(function(){
var sections = $("#topo-menu li");
var loading = $("#loading");
var content = $("#content");
sections.click(function(){
switch(this.id){
case 'aabruzzo':
alert("teste");
break;
case "catalogo":
alert("teste");
break;
case "conceito":
alert("teste");
break;
case "representantes":
alert("teste"););
break;
case "clipping":
alert("teste");
break;
case "loja":
alert("teste");
break;
case "contato":
alert("teste");
break;
default:
hideLoading();
break;
}
});
Run Code Online (Sandbox Code Playgroud)
我有这个 …
css ×5
html ×4
jquery ×4
css-shapes ×1
css3 ×1
email ×1
flexbox ×1
iphone ×1
javascript ×1
validation ×1