我想在标题中添加一个按钮,但它没有显示;我认为这是在div下面。为什么?我试图改变绝对位置,但没有任何作用。
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo-1 .large-header {
background-image: url('../img/demo-1-bg.jpg');
}
.main-title {
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.homebtn {
position:absolute;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 41px;
background: #f0712c;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.homebtn:hover {
background: #f25e0e;
text-decoration: none;
}
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title"><?php echo $home_page['header_title']; ?></h1>
<form action="../html-link.htm">
<input style="homebtn" type="submit" value="This is a button link">
</form>
</div>
</div>
</div>
答案 0 :(得分:2)
您已经定义了一个样式,但它是一个类。
替换
<input style="homebtn" type="submit" value="This is a button link">
通过
<input class="homebtn" type="submit" value="This is a button link">
答案 1 :(得分:0)
您必须从输入中删除单词“style”并写入“class”。 “style”用于内联样式
检查这个
<input class="homebtn" type="submit" value="This is a button link">
希望这会对你有所帮助:)。
答案 2 :(得分:0)
在html而不是为您的按钮键入类,您有键入的样式。在这里更正代码:
<input class="homebtn" type="submit" value="This is a button link">
答案 3 :(得分:0)
style="homebtn"
更改为class="homebtn"
,因为您实际上是在为标记添加类而非样式。.homebtn
。例如,top: 0; left: 0;
将其放在左上角。
/* Header */
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo-1 .large-header {
background-image: url('../img/demo-1-bg.jpg');
}
.main-title {
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.homebtn {
position:absolute;
top: 0;
left :0;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 41px;
background: #f0712c;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.homebtn:hover {
background: #f25e0e;
text-decoration: none;
}
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title"><?php echo $home_page['header_title']; ?></h1>
<form action="../html-link.htm">
<input class="homebtn" type="submit" value="This is a button link">
</form>
</div>
</div>
</div>
答案 4 :(得分:0)
将样式更改为
中的类 <input class="homebtn" type="submit" value="This is a button link">
为按钮添加定位。例如:
.homebtn {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 41px;
background: #f0712c;
padding: 10px 20px 10px 20px;
text-decoration: none;
position: absolute;
top: 100px;
}
参见jsfiddle:https://jsfiddle.net/uwducdqq/