「Widget:用户测试邀请信」:修訂間差異
imported>=海豚= (创建页面,内容为“<html lang="Zh-CN"> <head> <meta charset="utf-8"> <title>13-SendMessage</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wr…”) |
imported>=海豚= 無編輯摘要 |
||
(未顯示同一使用者於中間所作的 23 次修訂) | |||
第1行: | 第1行: | ||
<body> | |||
<div id="wrap"> | |||
<h2>SEND A MESSAGE</h2> | |||
< | |||
<br><br><br> | <br><br><br> | ||
<div id="form-wrap"> | <div id="form-wrap"> | ||
第26行: | 第20行: | ||
</div> | </div> | ||
</div> | </div> | ||
</body> | |||
<style> | <style> | ||
#wrap p{ | |||
p{ | |||
font-family: tahoma; | font-family: tahoma; | ||
font-size: 24px; | font-size: 24px; | ||
第49行: | 第32行: | ||
height: 1000px; | height: 1000px; | ||
} | } | ||
#wrap h2{ | |||
margin-bottom: 20px; | margin-bottom: 20px; | ||
text-align: center; | text-align: center; | ||
第57行: | 第40行: | ||
} | } | ||
#form-wrap{ | #form-wrap{ | ||
height: 447px; | height: 447px; | ||
position: relative; | position: relative; | ||
第68行: | 第50行: | ||
bottom: 128px; | bottom: 128px; | ||
left: 0px; | left: 0px; | ||
background: url('../ | background: url('https://www.hmoegirl.com/images/a/a9/Before.png'); | ||
width: 530px; | width: 530px; | ||
height: 317px; | height: 317px; | ||
第77行: | 第59行: | ||
bottom: 0px; | bottom: 0px; | ||
left: 0; | left: 0; | ||
background: url('../ | background: url('https://www.hmoegirl.com/images/c/c6/After.png'); | ||
width: 530px; | width: 530px; | ||
height: 259px; | height: 259px; | ||
第89行: | 第71行: | ||
top: -200px; | top: -200px; | ||
} | } | ||
form{ | #wrap form{ | ||
background: url('../ | background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png'); | ||
position: relative; | position: relative; | ||
top: 200px; | top: 200px; | ||
height: 200px; | height: 200px; | ||
width: 400px; | width: 400px; | ||
第105行: | 第86行: | ||
height: 530px; | height: 530px; | ||
} | } | ||
lable{ | #wrap lable{ | ||
margin: 11px 20px 0 0; | margin: 11px 20px 0 0; | ||
font-size: 15px; | font-size: 15px; | ||
第111行: | 第92行: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
input[type=text], textarea{ | #wrap input[type=text], textarea{ | ||
font: 14px normal uppercase, arial, serif; | font: 14px normal uppercase, arial, serif; | ||
color: dimgray; | color: dimgray; | ||
第122行: | 第103行: | ||
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
textarea{ | #wrap textarea{ | ||
height: 80px; | height: 80px; | ||
padding-top: 14px; | padding-top: 14px; | ||
} | } | ||
#form-wrap input[type=submit]{ | #form-wrap input[type=submit]{ | ||
第138行: | 第115行: | ||
text-align: center; | text-align: center; | ||
opacity: 0; | opacity: 0; | ||
cursor: pointer; | cursor: pointer; | ||
border-radius: 3px; | border-radius: 3px; | ||
第148行: | 第124行: | ||
transition: opacity 0.5s ease-in-out 1.3s; | transition: opacity 0.5s ease-in-out 1.3s; | ||
} | } | ||
</style> | </style> | ||
於 2021年8月13日 (五) 21:23 的修訂
<body>
SEND A MESSAGE
<form>
HELLO JOE,
<label for="email">Your Message:</label> <textarea name="message" id="message" value="Your Message"></textarea>
BEST,
<label for="name">Name:</label> <input type="text" name="name" value="" id="name" />
<label for="email">Email:</label> <input type="text" name="email" value="" id="email" />
<input type="submit" name="submit" value="NOW, I SEND THANKS!" /> </form>
</body> <style>
- wrap p{
font-family: tahoma; font-size: 24px; color: #757575; }
- wrap{
width: 530px; margin: 20px auto 0; height: 1000px; }
- wrap h2{
margin-bottom: 20px; text-align: center; font-size: 35px; font-family: tahoma; color: black; }
- form-wrap{
height: 447px; position: relative; top: 0px; transition: all 1s ease-in-out .3s; }
- form-wrap:before{
content: ""; position: absolute; bottom: 128px; left: 0px; background: url('https://www.hmoegirl.com/images/a/a9/Before.png'); width: 530px; height: 317px; }
- form-wrap:after{
content: ""; position: absolute; bottom: 0px; left: 0; background: url('https://www.hmoegirl.com/images/c/c6/After.png'); width: 530px; height: 259px; }
- form-wrap.hide:after,
- form-wrap.hide:before{
display: none; }
- form-wrap:hover{
height: 777px; top: -200px; }
- wrap form{
background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png'); position: relative; top: 200px; height: 200px; width: 400px; margin: 0px auto; padding: 20px; border: 1px solid white; border-right: 3px; transition: all 1s ease-in-out .3s; }
- form-wrap:hover form{
height: 530px; }
- wrap lable{
margin: 11px 20px 0 0; font-size: 15px; color: gray; text-transform: uppercase; }
- wrap input[type=text], textarea{
font: 14px normal uppercase, arial, serif; color: dimgray; background: none; width: 380px; height: 37px; padding: 0px 10px; margin: 0 0 10px 0; border: 1px solid #BDBDBD; border-radius: 5px; }
- wrap textarea{
height: 80px; padding-top: 14px; }
- form-wrap input[type=submit]{
position: relative; font-family: tahoma; font-size: 24px; color: gray; width: 300px; text-align: center; opacity: 0; cursor: pointer; border-radius: 3px; transition: opacity 0.7s ease-in-out 0s; }
- form-wrap:hover input[type=submit]{
z-index: 1; opacity: 1; transition: opacity 0.5s ease-in-out 1.3s; }
</style>