Widget:用户测试邀请信:修订间差异

H萌娘,万物皆可H的百科全书!
跳到导航 跳到搜索
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行:
<html lang="Zh-CN">
<body>
<head>
<div id="wrap">
<meta charset="utf-8">
<h2>SEND A MESSAGE</h2>
   <title>13-SendMessage</title>
   <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
<div id="wrap">
<h1>SEND A MESSAGE</h1>
<br><br><br>
<br><br><br>
<div id="form-wrap">
<div id="form-wrap">
第26行: 第20行:
</div>
</div>
</div>
</div>
  </body>
</body>
<style>
<style>
body, div, h1, h2, form, fieldset, input, textarea, footer, p{
#wrap p{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
background: #F5F5F5;
color: gray;
font-family: tahoma;
}
p{
font-family: tahoma;
font-family: tahoma;
font-size: 24px;
font-size: 24px;
第49行: 第32行:
height: 1000px;
height: 1000px;
}
}
h1{
#wrap h2{
margin-bottom: 20px;
margin-bottom: 20px;
text-align: center;
text-align: center;
第57行: 第40行:
}
}
#form-wrap{
#form-wrap{
overflow: hidden;
height: 447px;
height: 447px;
position: relative;
position: relative;
第68行: 第50行:
bottom: 128px;
bottom: 128px;
left: 0px;
left: 0px;
background: url('../img/before.png');
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('../img/after.png');
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('../img/letter_bg.png');
background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png');
position: relative;
position: relative;
top: 200px;
top: 200px;
overflow: hidden;
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;
}
textarea:focus,
input[type=text]:focus{
background: url('../img/letter_bg.png');
}
}
#form-wrap input[type=submit]{
#form-wrap input[type=submit]{
第138行: 第115行:
text-align: center;
text-align: center;
opacity: 0;
opacity: 0;
background: none;
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>
</includeonly>
</html>

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>

  1. wrap p{

font-family: tahoma; font-size: 24px; color: #757575; }

  1. wrap{

width: 530px; margin: 20px auto 0; height: 1000px; }

  1. wrap h2{

margin-bottom: 20px; text-align: center; font-size: 35px; font-family: tahoma; color: black; }

  1. form-wrap{

height: 447px; position: relative; top: 0px; transition: all 1s ease-in-out .3s; }

  1. 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; }

  1. 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; }

  1. form-wrap.hide:after,
  2. form-wrap.hide:before{

display: none; }

  1. form-wrap:hover{

height: 777px; top: -200px; }

  1. 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; }

  1. form-wrap:hover form{

height: 530px; }

  1. wrap lable{

margin: 11px 20px 0 0; font-size: 15px; color: gray; text-transform: uppercase; }

  1. 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; }

  1. wrap textarea{

height: 80px; padding-top: 14px; }

  1. 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; }

  1. form-wrap:hover input[type=submit]{

z-index: 1; opacity: 1; transition: opacity 0.5s ease-in-out 1.3s; }

</style>