最简单的方法创建电子邮件注册表单，保持在屏幕的右上角

simplest way to create email signup form that stays on top right of screen?

本文关键字：屏幕 右上角 注册表 创建 方法 电子邮件 注册 最简单 表单      更新时间：2023-09-26

在浏览器顶部创建一个细长的电子邮件注册栏的最简单的方法是什么?当用户向下滚动并导航到不同的页面时，它会保持在那里。我正在使用wordpress，我已经有jquery加载，但还没有使用jquery或wordpress编程任何东西。到目前为止，我主要是一个用户，知道html, CSS和一些PHP和javascript。谢谢B

只需为注册按钮创建一个容器div，并将其添加到您希望按钮出现的任何地方(您的page.php, single.php, index.php)或header.php将其作为另一张海报建议的无处不在。下面是一个基本的演示和一些可以使用的代码:

<div class="signup">
    <a class="signupbtn" href="#" title="Sign up">Sign Up</a>
</div>
CSS

.signup {
    position:fixed;
    left:0;
    top:160px;
}
a.signupbtn {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-right: 10px;
}
a.signupbtn:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.signupbtn:active {
    color: #000;
    border-color: #444;
}

下面是这个按钮的基本示例:

http://jsfiddle.net/andresilich/FAVK9/1/

基本上，当您希望某些即使在浏览器滚动时也能粘附在特定位置时，您应该使用固定定位。

我强烈建议你阅读这篇文章(来自A List Apart)，以掌握CSS定位的含义。

你可以把div在每个页面的HTML代码的例子(我不知道它看起来如何在Wordpress，但必须有一些头php文件加载在每个页面)。

CSS:

div#signup{
    position:fixed;
    top:0;
    right:0;
    width:100px;
    min-height:30px;
    background-color:red;
    text-align:center;
}
HTML:

<div id="signup">
   Sign up
</div>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>

Edit:我在注释后更改了代码+添加了实时演示(它干扰了JSFiddle，因为它们的对象也是右上角对齐的)。

相关文章：