0

我正在为自己创建一个基本的电子邮件签名，但我需要在键入电子邮件时移动它。目前我的位置是固定的，但是 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>
4

2 回答 2

0

我想到了。我将所有固定更改为绝对，然后创建一个具有相对位置的 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>
于 2013-08-12T16:53:46.623 回答
-1

要在用户键入时实时操作 css，您需要使用 JavaScript。一个很好的简单的 javascript 库是 jQuery。这基本上是简化的 ajvascript。

你需要的是这个方法： http ://api.jquery.com/keypress/

祝你好运

于 2013-08-12T15:33:13.643 回答