我想在我的网页中的两个功能之间切换,但我不知道如何...
代码:
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css"/>
<title>My Project</title>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
</script>
</head>
<body>
<div id="main">
<div class="head">
<span class="openbtn" id="navbtn" onclick="openNav(); closeNav(); ">?</span>
<p> Do Re Mi Fa So Laa</p>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="openbtn" onclick="closeNav()">?xx</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</body> …Run Code Online (Sandbox Code Playgroud) 我目前正在处理"叠加弹出",当我点击某个按钮时会出现.
它运作得很好,但是我很努力 opacity
我的主要叠加层div出现在整个网站上,我给它一个opacity,这样你就可以看到它的页面background.
在叠加层上我放了一个内容div,显示了实际内容(在这种情况下是密码更改请求).
反正,我不希望内容框是透明的,但不管我什么(z-index:10,opacity:1,position:relative等),这是行不通的.
它仍然是透明的,因为我opacity在叠加div中设置了它.
这是代码:
CSS:
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#fafafa;
opacity: 0.9;
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left:40%;
margin-top:15%;
font-family:'source_sans_proregular';
font-size:15px;
position:relative;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
.
.
.
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我想要div像下面的图像样式.
我设计了一些但不完整width,它还在移动视图中显示了侧滚动.
请告诉我如何完整地完成它width.
我的HTML代码
#news_and_cv {
background: #e6e6e6;
}
#send_cv {
background: #e6e6e6;
padding: 25px 0px 20px 0px;
}
#news {
background: #02bed4;
padding: 25px 0px 20px 0px;
}
.submit {
padding: 13px 20%;
background: #02bed4;
color: #fff;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1.5px;
border: 1px solid #fff;
text-align: center;
margin-top: 30px;
}
.submit:hover {
background: #02bed4;
}
.form-style {
display: block;
width: 80%;
height: 37px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: …Run Code Online (Sandbox Code Playgroud)如果我想要所有div具有data-color相同属性的s red,我就能做到
div[data-color='red']
Run Code Online (Sandbox Code Playgroud)
但是,如果我想要任何元素,那data-color等于red什么呢?
我该怎么写呢?
有没有办法在不使用Flexbox. 我知道它是一个很棒的工具,但不幸的是它不适用于 IE 9 或 10。我希望链接内的文本显示在图像旁边。JSFiddle 显示了工作代码,但是使用 FlexBox,如何在不使用 Flexbox 的情况下实现这一点?
代码:
<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
<display:setProperty name="paging.banner.first" value='<span class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
<display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> …Run Code Online (Sandbox Code Playgroud) html css cross-browser internet-explorer-9 internet-explorer-10
我正在尝试调整一组表类的填充,但我正在应用的更改出现在所有其他表上。这是我的CSS:
.my_table th, td{
font-size: 14px;
padding-bottom: 2em;
}
Run Code Online (Sandbox Code Playgroud)
这是该表的相关 html:
<table border="1" class="dataframe table my_table">
<tbody>
<tr>
<th>somethingsomething</th>
<td>somethingsomething</td>
</tr>
<tr>
<th>somethingsomething</th>
<td>somethingsomething</td>
</tr>
Run Code Online (Sandbox Code Playgroud) 谁能告诉我什么是错我的CSS 这里
码:
#contact {
height: 50%;
length: 50%;
}Run Code Online (Sandbox Code Playgroud)
<div id="contact">
<a href="http://amazon.com/">`
<img src="http://i.imgur.com/GMldHhn.jpg" />
</a>
</div>Run Code Online (Sandbox Code Playgroud)
无论是我是盲人还是我完全忘记了CSS,但这必须是最简单的CSS,但它不起作用.图像尺寸完全没有减少.这不会影响身高.即使我改50%到10px仍然没有做任何事情.而我似乎无法弄明白.
我正在Bootstrap3中设计一个网页.
该页面有6个缩略图.
Bootstrap3中是否有一组简单的类来完成此任务.我不想为不同的设备隐藏/显示不同的块.我希望这是真正的响应,并希望列从3列折叠到2列到单个列,因为浏览器width减少.
这可能吗?
我想使用媒体查询控制我的徽标的大小.
width我的徽标原件是210px.
我希望它166px在屏幕width大于56.865em和小于此时相同时width,即移动网站.
我为此编写了以下代码:
@media only screen and (min-width: 56.875em){
.site-branding img{
max-width: 166px;
}
}
@media only screen and (max-width: 56.875em){
.site-branding img {
max-width: 166px !important;
}
}
Run Code Online (Sandbox Code Playgroud)
只有第一个代码块正在运行.为什么不是第二次工作?(当屏幕宽度减小时,width徽标210px再次变为).
有没有你不能同时使用任何规则min和max媒体查询,以控制相同的元素?
css ×9
html ×8
css3 ×3
html-table ×1
html5 ×1
javascript ×1
opacity ×1
overlay ×1
wordpress ×1