- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为自己创建一个基本的电子邮件签名,但我需要它在我键入电子邮件时移动。目前我的位置是固定的,但是 div 标签的内容保持不变,因此电子邮件的内容重叠。我怎样才能使签名移动但保持其位置?
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title></title>
</head>
<body>
<span style="color: rgb(86, 106, 17);">My Name<br>
Technical Support and Sales</span></br>
<span style="color: rgb(86, 106, 17);">A Phone Number
x 22</span>
<span style="color: rgb(86, 106, 17);"><br>
<a href="http://website.com">
Website.com</a> - Phrase<br>
</span></i></span>
<div style="position: relative; left: 7px; top: 140px;">
<div style="position: fixed; left: 7px; top: 140px;"><a href="https://www.facebook.com" target="_blank"><img
src="data:image/gif;base64,R0lGODlhGAAYAPcAAAAAAP///5Ot3nya1P7+//39/vb3/Pb3++js9/P1+zFTpEJrzkNry0FoxThZqEVsyjlZpkJnvzxcqUluxlV50VN2zFFzxWmL3GeI12aG0mmJ1k9lmk5jlXCN0193sV52r3WS1151rV1zqVlsmoWZyZqw5aCv0ylKmCtNnTBSojRZrjNYqjthuTdaq0Fqxz9nwTlerzldrjFQl0JqyD9lvj1iuTlcrDhbqjVVoD9lvT5kuj5juj5juTlcqzdYpTZXojRUnENrx0FnwT1itT1htTxfsTterzhZpURrx0NqxENpw0JowUFnv0Bluz1hsjterUFmvUFmu0BluT9ktz9jtj5isz1hsTtdqjpbpz9jtD5hsj5hsT1grzxfrDtdqTlZozdWnUpz0jpapDlZoUZrv0VpvEdswURouENmtTxco0VotklruUhptUZnsElqt0hqs0hps0FeokZlrUVlq05xv01vvERip2CH4F+F3l6D2lFvsmqO4V5+x2eJ2Fx5vVp3uVt5ulp2tll1tFVvq1l0sVhzr2F/wF98vE5lmWqIz05kl2mHyVVto0xikmeDw0xhkEpfjGyIymB5tF94skxgj2qGxU1ij2qFw2mDwGiCvl10qlpwpFRpmWiBvGaAuWZ/uFxypmmCvXaT0mR8smZ/tXWPynqTyZWt5VppiV5sipys0F9ofc/Y7NPb7ejt+ElqsExts1R4vlBwsVN0t1+Bw1d1s2KDxGGBwGWGxmWFxGeHx2eHxWmJyGmJx22MynCQznGQzHaV0nGPyXiW1HCMxnSSzICc0oOd0Wl+qJSx6Yym3Yaf0G+ErY2m14uj0qC56brJ5uLo9Ofs9ubr9fDz+fb4/GSHyGWGxGSFwmaGw2mKx2iIxW2PzWqKx22Oy2yMyG+Py3WV0nOTz3WV0XSUz3yb1HqY0YKe04Gd0YWh1m6FsIum13aMtmyApZey5JSu3pKs246n1X2TvKC665Gp1Z2036S75qS646C23qW64Km8373M6L/N59/m8/n7/f///yH5BAEAAP8ALAAAAAAYABgAAAj/AP8JHEiwoEGDyp69E8CwocOGz9ypI5jsXroBGDNiLDdgWLBw4wbUm9dOIDt75sSRW8lypThu6/Dly7fuV71lAuXB8wasp0+f4PYRCEAUmjVjzQQyS6ftm9OnTnHpI0oVmq1i8ZSeu7ata6+vvXjh6kc1Gj96toQ5E4gMHbZs2XJd26ULFy1f1Ygm6BaL1i5hOP9Z8iQL0K1cuBL7OhbPH1Fqy44Rm1WLlEBIg2SASTPnFaw3pqiKDqDqRJxRAikVAjLmy5cjEBSEGk3VBAo7lv89IoRDDBYJV7q0OMSqVQGi/lixIpFizieBjQT9wOKlSxcuW4qoUHOA6DQjK3pc/5HjSSCHQD4kXN9SJQsVInW6B5CGpoiVJ206mf/j4LqWKlRIIUUNdBhAFAJnEFFFEXBkIpAigNyAXRZTSBEFFDlYkFcACJQxBRVOsIHJg37YsAWFUkDBxBIvaHggGTpIMYQblwiEiB8xAJhiBEso0UAFGyJgRg5NTLFGjf9sYAgMAUaxYhJIuAAkUa5MwAQUPNThiECMlOLEEE1AsQSUDzBAAVUJTCAEEyws8odAqERSiRQ70PBCAzMwsEAYp5RQgjJBvMAEH8MwMhAni4iSSAYZYHDBBXvscQceeeTRhwYgdKBHQauMsAkoImgSwgceSCLJJB58EIIIm6Ry0KuwDgIUEAA7"
alt=""></a></div>
<div style="position: fixed; left: 35px; top: 142px;">Add Us on Facebook </div><br>
<div style="position: fixed; left: 7px; top: 170px;"><a href="https://twitter.com/" target="_blank"><img
src="data:image/gif;base64,R0lGODlhGAAYAPcAAAAAAP///1Sfum/L64bW8o7h/ofU74fT7pHb9pfa8u75/VbD5VzG6FvF5l3G513F5l/G51/F5mHH52PH6GPI6GPI52TH6GXJ6GbI6GnK6mjJ6WjK6WzL6m/M63HN6nPN6nTN63fR7XnR7XTI5FeVqnnN537T7n7R7H/T7X3O6Y3f+4jV73m903/E2oDE2pTf+ZPc9JTa8Zfa8aDd8LDj9MXr9+z5/er3+/r9/imy1yyx1S202S2z1zK43TW63jW32zS22Ta53Te73za32zq84Dm53Du73j2/4j2+4T283z273kHB5D++4EHA4kG/4UPA40K/4UTB5EbD5UbB40rJ7EjD5ErG6EnE5knE5Ua720rE5kvG507J607I6U3G50/K60u+3U2/4U7A4k2/3lLI6E/A31XN7lHC4VnP8FfL61PD4lXD5FXF41vR8VfG5VO92lrJ51a+21i/21/O7F7L6VnB3VzE4mHN6l/H5V3D30+lvWDH41/E4GDF4WLH42rL6GvP6l+2znLZ9W7Q62C1zGO50HXZ9HTY83ba9XXX8mW70nLO6nHN6We803rd+HXV73zf+mm91HXS62vA12GpvWavw2ixxVmWp2qxxYDW7X3Q52yzxm+2yW60x4HS6HC2yXG3ynzD2I7a75Xb7pvh9F+HkqTg8ajg76ff7qri8bPo97fm9Ljm9MXw/Mfw/NDz/dDx+tbx+dz0++H1++f5/uv5/Six1S+22jG01zK12EXD5E/M7U7H50yvyWPY91zJ5WjZ92za927b+HHY82G4z3Xd+FurwHXa9Xfc93ne+F+rv37h+2u/1YDi/H7c9YHh+YLh+YXi+mqyxWuzxork+ovj+o3l+3K4ypXn+12PnJrm+qXp+63j8cLx/M/0/ef4/Jfp+57q+6Xt/Kjv/avv/a3v/a7w/bPw/bzz/uP6/+z7/vP9/7fz/r30/sD0/sX1/sn2/tT4/9L2/d/6/+X7/+b7/+r8/+v7/sz3/tr5/ub8/+39//v///3///7//////yH5BAEAAP8ALAAAAAAYABgAAAj/AP8JHEiwoMGCAgggOGCg4YqHEB8aOPCCAEESKmR84MABg0cOHUKGHDCAA4gEBQaOiIHBwgQOpmrQEEEhg80NGnJewACDhcAUJyBMwBArgL8ACkxc2MBUg8cLEEy0+PkhQoMZAerNmxegBoMLFChcAFsBQggXAkswerBgVYB8+eLtu7GorgcKDipIcBBi6r8SHtiyCoAPH7x6AXAoxjELRYO9IUIJlGMnjBi37zLHo2fPXj19/hT8WRMGDzGBb7LosIUqADp07WC7c9eOHbwAmnjwGBNIYBwwuHK0NleOOLnj5MaxC+BpR64zp//JGQNkx6kA4rKXO8ede7oAe378/1BTSGCdMkNunfIXLhw4eQH6yU88KoiSImzK/8tzpkiPVP1gg4013gRgYGKmEMEEE0a4oYhAeahhhA/c8FMNNdF0s4466tyzTgCrOAFFEnA0IhAfbCQhhCkBVPMMNDDC+GI3AUiCBBNwRCJQH24wgUQmAWwjTDJEFllMNAGIcoQTdDAjkB9uODGFFLHwo00wwGSZpS/bBJDJEk80+eQvTVQhxR2zBECLK6202c0rAchCxhVR3DGJb5I0gYUXVqRBCiy1BFqLDd+oMocVW+jyCCEC6ZEIIFps0cUXVOyCRhuYomEGFVx0wcsghlwyUC/DOHPIMcg4AskyzbS6DCSOICSDiDOCGFNQNspUYgkmm3TCCSjXgPJJJ9NIYwklpRyk7LIDBQQAOw=="
alt=""></a></div>
<div style="position: fixed; left: 35px; top: 154px;"><p>Follow Us on Twitter</p></div>
<div style="position: fixed; left: 7px; top: 185px;"><i><p>P.S. Bogged down with routine tasks?
Book a FREE workshop to see how we can help streamline your day-to-day activities and save time.
Click here to schedule your one-on-one workshop at a time that's convenient for you. </p> </i></div></div>
</body>
</html>
最佳答案
我想通了。我将所有固定更改为绝对,然后创建一个具有相对位置的 div 以包含所有内容。现在,当用户键入时,签名会随之移动,但会保留我创建的样式。
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="Content-Type">
<title></title>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<div style="position: absolute; left: 7px; top: 5px;">
<span style="color: rgb(86, 106, 17);">Your name<br>
Technical Support and Sales</span></br>
<span style="color: rgb(86, 106, 17);">A Phone number
x 22</span>
<span style="color: rgb(86, 106, 17);"><br>
<a href="http://website.com">
website.com</a> - phrase
</span></i></span></div>
<div style="position: absolute; left: 7px; top: 105px;"><a href="https://www.facebook.com" target="_blank"><img
src="data:image/gif;base64,R0lGODlhGAAYAPcAAAAAAP///5Ot3nya1P7+//39/vb3/Pb3++js9/P1+zFTpEJrzkNry0FoxThZqEVsyjlZpkJnvzxcqUluxlV50VN2zFFzxWmL3GeI12aG0mmJ1k9lmk5jlXCN0193sV52r3WS1151rV1zqVlsmoWZyZqw5aCv0ylKmCtNnTBSojRZrjNYqjthuTdaq0Fqxz9nwTlerzldrjFQl0JqyD9lvj1iuTlcrDhbqjVVoD9lvT5kuj5juj5juTlcqzdYpTZXojRUnENrx0FnwT1itT1htTxfsTterzhZpURrx0NqxENpw0JowUFnv0Bluz1hsjterUFmvUFmu0BluT9ktz9jtj5isz1hsTtdqjpbpz9jtD5hsj5hsT1grzxfrDtdqTlZozdWnUpz0jpapDlZoUZrv0VpvEdswURouENmtTxco0VotklruUhptUZnsElqt0hqs0hps0FeokZlrUVlq05xv01vvERip2CH4F+F3l6D2lFvsmqO4V5+x2eJ2Fx5vVp3uVt5ulp2tll1tFVvq1l0sVhzr2F/wF98vE5lmWqIz05kl2mHyVVto0xikmeDw0xhkEpfjGyIymB5tF94skxgj2qGxU1ij2qFw2mDwGiCvl10qlpwpFRpmWiBvGaAuWZ/uFxypmmCvXaT0mR8smZ/tXWPynqTyZWt5VppiV5sipys0F9ofc/Y7NPb7ejt+ElqsExts1R4vlBwsVN0t1+Bw1d1s2KDxGGBwGWGxmWFxGeHx2eHxWmJyGmJx22MynCQznGQzHaV0nGPyXiW1HCMxnSSzICc0oOd0Wl+qJSx6Yym3Yaf0G+ErY2m14uj0qC56brJ5uLo9Ofs9ubr9fDz+fb4/GSHyGWGxGSFwmaGw2mKx2iIxW2PzWqKx22Oy2yMyG+Py3WV0nOTz3WV0XSUz3yb1HqY0YKe04Gd0YWh1m6FsIum13aMtmyApZey5JSu3pKs246n1X2TvKC665Gp1Z2036S75qS646C23qW64Km8373M6L/N59/m8/n7/f///yH5BAEAAP8ALAAAAAAYABgAAAj/AP8JHEiwoEGDyp69E8CwocOGz9ypI5jsXroBGDNiLDdgWLBw4wbUm9dOIDt75sSRW8lypThu6/Dly7fuV71lAuXB8wasp0+f4PYRCEAUmjVjzQQyS6ftm9OnTnHpI0oVmq1i8ZSeu7ata6+vvXjh6kc1Gj96toQ5E4gMHbZs2XJd26ULFy1f1Ygm6BaL1i5hOP9Z8iQL0K1cuBL7OhbPH1Fqy44Rm1WLlEBIg2SASTPnFaw3pqiKDqDqRJxRAikVAjLmy5cjEBSEGk3VBAo7lv89IoRDDBYJV7q0OMSqVQGi/lixIpFizieBjQT9wOKlSxcuW4qoUHOA6DQjK3pc/5HjSSCHQD4kXN9SJQsVInW6B5CGpoiVJ206mf/j4LqWKlRIIUUNdBhAFAJnEFFFEXBkIpAigNyAXRZTSBEFFDlYkFcACJQxBRVOsIHJg37YsAWFUkDBxBIvaHggGTpIMYQblwiEiB8xAJhiBEso0UAFGyJgRg5NTLFGjf9sYAgMAUaxYhJIuAAkUa5MwAQUPNThiECMlOLEEE1AsQSUDzBAAVUJTCAEEyws8odAqERSiRQ70PBCAzMwsEAYp5RQgjJBvMAEH8MwMhAni4iSSAYZYHDBBXvscQceeeTRhwYgdKBHQauMsAkoImgSwgceSCLJJB58EIIIm6Ry0KuwDgIUEAA7"
alt=""></a></div>
<div style="position: absolute; left: 35px; top: 106px;">Add Us on Facebook </div><br>
<div style="position: absolute; left: 7px; top: 135px;"><a href="https://twitter.com/" target="_blank"><img
src="data:image/gif;base64,R0lGODlhGAAYAPcAAAAAAP///1Sfum/L64bW8o7h/ofU74fT7pHb9pfa8u75/VbD5VzG6FvF5l3G513F5l/G51/F5mHH52PH6GPI6GPI52TH6GXJ6GbI6GnK6mjJ6WjK6WzL6m/M63HN6nPN6nTN63fR7XnR7XTI5FeVqnnN537T7n7R7H/T7X3O6Y3f+4jV73m903/E2oDE2pTf+ZPc9JTa8Zfa8aDd8LDj9MXr9+z5/er3+/r9/imy1yyx1S202S2z1zK43TW63jW32zS22Ta53Te73za32zq84Dm53Du73j2/4j2+4T283z273kHB5D++4EHA4kG/4UPA40K/4UTB5EbD5UbB40rJ7EjD5ErG6EnE5knE5Ua720rE5kvG507J607I6U3G50/K60u+3U2/4U7A4k2/3lLI6E/A31XN7lHC4VnP8FfL61PD4lXD5FXF41vR8VfG5VO92lrJ51a+21i/21/O7F7L6VnB3VzE4mHN6l/H5V3D30+lvWDH41/E4GDF4WLH42rL6GvP6l+2znLZ9W7Q62C1zGO50HXZ9HTY83ba9XXX8mW70nLO6nHN6We803rd+HXV73zf+mm91HXS62vA12GpvWavw2ixxVmWp2qxxYDW7X3Q52yzxm+2yW60x4HS6HC2yXG3ynzD2I7a75Xb7pvh9F+HkqTg8ajg76ff7qri8bPo97fm9Ljm9MXw/Mfw/NDz/dDx+tbx+dz0++H1++f5/uv5/Six1S+22jG01zK12EXD5E/M7U7H50yvyWPY91zJ5WjZ92za927b+HHY82G4z3Xd+FurwHXa9Xfc93ne+F+rv37h+2u/1YDi/H7c9YHh+YLh+YXi+mqyxWuzxork+ovj+o3l+3K4ypXn+12PnJrm+qXp+63j8cLx/M/0/ef4/Jfp+57q+6Xt/Kjv/avv/a3v/a7w/bPw/bzz/uP6/+z7/vP9/7fz/r30/sD0/sX1/sn2/tT4/9L2/d/6/+X7/+b7/+r8/+v7/sz3/tr5/ub8/+39//v///3///7//////yH5BAEAAP8ALAAAAAAYABgAAAj/AP8JHEiwoMGCAgggOGCg4YqHEB8aOPCCAEESKmR84MABg0cOHUKGHDCAA4gEBQaOiIHBwgQOpmrQEEEhg80NGnJewACDhcAUJyBMwBArgL8ACkxc2MBUg8cLEEy0+PkhQoMZAerNmxegBoMLFChcAFsBQggXAkswerBgVYB8+eLtu7GorgcKDipIcBBi6r8SHtiyCoAPH7x6AXAoxjELRYO9IUIJlGMnjBi37zLHo2fPXj19/hT8WRMGDzGBb7LosIUqADp07WC7c9eOHbwAmnjwGBNIYBwwuHK0NleOOLnj5MaxC+BpR64zp//JGQNkx6kA4rKXO8ede7oAe378/1BTSGCdMkNunfIXLhw4eQH6yU88KoiSImzK/8tzpkiPVP1gg4013gRgYGKmEMEEE0a4oYhAeahhhA/c8FMNNdF0s4466tyzTgCrOAFFEnA0IhAfbCQhhCkBVPMMNDDC+GI3AUiCBBNwRCJQH24wgUQmAWwjTDJEFllMNAGIcoQTdDAjkB9uODGFFLHwo00wwGSZpS/bBJDJEk80+eQvTVQhxR2zBECLK6202c0rAchCxhVR3DGJb5I0gYUXVqRBCiy1BFqLDd+oMocVW+jyCCEC6ZEIIFps0cUXVOyCRhuYomEGFVx0wcsghlwyUC/DOHPIMcg4AskyzbS6DCSOICSDiDOCGFNQNspUYgkmm3TCCSjXgPJJJ9NIYwklpRyk7LIDBQQAOw=="
alt=""></a></div>
<div style="position: absolute; left: 35px; top: 119px;"><p>Follow Us on Twitter</p></div>
<div style="position: absolute; left: 7px; top: 151px;"><i><p>P.S. Bogged down with routine tasks?
Book a FREE workshop to see how we can help streamline your day-to-day activities and save time.
Click here to schedule your one-on-one workshop at a time that's convenient for you. </p></i></div>
</div>
</body>
</html>
关于html - 如何让我的 CSS 在用户输入时移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18190954/
在为 Web 应用程序用例图建模时,为用户可以拥有的每个角色创建一个角色是否更好?或拥有一个角色、用户和一个具有特权的矩阵? guest < 用户 < 版主 < 管理员 1: guest 、用户、版主
我无法使用 Elixir 连接到 Postgres: ** (Mix) The database for PhoenixChat.Repo couldn't be created: FATAL 28P
这个问题已经有答案了: Group by field name in Java (7 个回答) 已关闭 7 年前。 我必须编写一个需要 List 的方法并返回 Map> . User包含 Person
感谢您的帮助,首先我将显示代码: $dotaz = "Select * from customers JOIN contracts where customers.user_id ='".$_SESS
我只想向所有用户中的一个用户显示一个按钮。我尝试了 orderByKey() 但没有成功! 用户模型有 id 成员,我尝试使用 orderByChild("id") 但结果相同! 我什至尝试了以下技巧
我们在工作中从 MongoDB 切换到 Postgres,我正在建立一个 BDR 组。 在这一步,我正在考虑安全性并尽可能锁定。因此,我希望设置一个 replication 用户(角色)并让 BDR
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
在 LinkedIn 中创建新应用程序时,我得到 4 个单独的代码: API key 秘钥 OAuth 用户 token OAuth 用户密码 我在 OAuth 流程中使用前两个。 的目的是什么?最后
所以..我几乎解决了所有问题。但现在我要处理另一个问题。我使用了这个连接字符串: SqlConnection con = new SqlConnection(@"Data Source=.\SQLEX
我有一组“用户”和一组“订单”。我想列出每个 user_id 的所有 order_id。 var users = { 0: { user_id: 111, us
我已经为我的Django应用创建了一个用户模型 class User(Model): """ The Authentication model. This contains the u
我被这个问题困住了,找不到解决方案。寻找一些方向。我正在用 laravel 开发一个新的项目,目前正致力于用户认证。我正在使用 Laravels 5.8 身份验证模块。 对密码恢复 View 做了一些
安装后我正在使用ansible配置几台计算机。 为此,我在机器上本地运行 ansible。安装中的“主要”用户通常具有不同的名称。我想将该用户用于诸如 become_user 之类的变量. “主要”用
我正在尝试制作一个运行 syncdb 的批处理文件来创建一个数据库文件,然后使用用户名“admin”和密码“admin”创建一个 super 用户。 到目前为止我的代码: python manage.
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
我已在 Azure 数据库服务器上设置异地复制。 服务器上运行的数据库之一具有我通过 SSMS 创建的登录名和用户: https://learn.microsoft.com/en-us/azure/s
我有一个 ionic 2 应用程序,正在使用 native FB Login 来检索名称/图片并将其保存到 NativeStorage。流程是我打开WelcomePage、登录并保存数据。从那里,na
这是我的用户身份验证方法: def user_login(request): if request.method == 'POST': username = request.P
我试图获取来自特定用户的所有推文,但是当我迭代在模板中抛出推文时,我得到“User”对象不可迭代 观看次数 tweets = User.objects.get(username__iexact='us
我是一名优秀的程序员,十分优秀!