“Widget:欢迎”与“Widget:用户测试邀请信”：页面之间的差异

H萌娘，万物皆可H的百科全书！
（页面间差异）
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
 
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…”）
 
第1行： 第1行：
<noinclude><nowiki>QvQ</nowiki></noinclude><includeonly><!--{if !isset($wgwelcome) || !$wgwelcome}--><!--{assign var="wgwelcome" value=true scope="global"}--><style type="text/css">
<html lang="Zh-CN">
.welcome-headtitle,
<head>
.welcome-column>* {
<meta charset="utf-8">
   margin: .5em;
   <title>13-SendMessage</title>
   padding: .5em;
   <link rel="stylesheet" href="css/style.css">
   box-shadow: 1px 1px 1px 1px #ededde;
  </head>
  <body>
<div id="wrap">
<h1>SEND A MESSAGE</h1>
<br><br><br>
<div id="form-wrap">
<form>
<p>HELLO JOE,</p>
<label for="email">Your Message:</label>
<textarea name="message" id="message" value="Your Message"></textarea>
<p>BEST,</p>
<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>
</div>
</div>
  </body>
<style>
body, div, h1, h2, form, fieldset, input, textarea, footer, p{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
}
.welcome-headtitle:hover, .welcome-column>*:hover {
body{
   box-shadow: 1px 1px 6px 3px #ededde;
background: #F5F5F5;
   margin: .5em .4em;
color: gray;
font-family: tahoma;
}
}
.welcome-text-align-center {
p{
   text-align: center;
font-family: tahoma;
font-size: 24px;
color: #757575;
}
}
.welcome-headtitle {
#wrap{
   font-size: 1.8em;
width: 530px;
   text-align: center;
margin: 20px auto 0;
height: 1000px;
}
}
.welcome .welcome-counter-text{
h1{
   margin-top: 0;
margin-bottom: 20px;
   border-width: 0;
text-align: center;
   padding-left: .5em;
font-size: 35px;
   color: #8b8b22 !important;
font-family: tahoma;
   font-family: EasonPro, "黑体", serif !important;
color: black;
   font-size: 23px;
   line-height: 1.7 !important;
   font-size-adjust: .43 !important;
   font-weight: 400 !important;
   border-left: 1em #ededde solid;
}
}
.welcome .mw-headline-number {
#form-wrap{
   display: none;
overflow: hidden;
height: 447px;
position: relative;
top: 0px;
transition: all 1s ease-in-out .3s;
}
}
.welcome .welcome-column p {
#form-wrap:before{
   padding-left: .5em;
content: "";
position: absolute;
bottom: 128px;
left: 0px;
background: url('../img/before.png');
width: 530px;
height: 317px;
}
}
.welcome .welcome-column p {
#form-wrap:after{
   text-indent: 2em;
content: "";
position: absolute;
bottom: 0px;
left: 0;
background: url('../img/after.png');
width: 530px;
height: 259px;
}
}
.welcome-banner-page,
#form-wrap.hide:after,
.welcome-page {
#form-wrap.hide:before{
   position: relative;
display: none;
}
}
.welcome-banner-page .welcome-page-img {
#form-wrap:hover{
   height: 231px;
height: 777px;
   width: auto;
top: -200px;
}
}
.welcome-banner {
form{
   height: 250px;
background: url('../img/letter_bg.png');
   position: relative;
position: relative;
   overflow: hidden;
top: 200px;
overflow: hidden;
height: 200px;
width: 400px;
margin: 0px auto;
padding: 20px;
border: 1px solid white;
border-right: 3px;
transition: all 1s ease-in-out .3s;
}
}
.welcome-banner-control {
#form-wrap:hover form{
   position: absolute;
height: 530px;
   bottom: 1em;
   right: 1em;
   z-index: 7;
}
}
.welcome-banner-control-triggle {
lable{
   width: 18px;
margin: 11px 20px 0 0;
   height: 18px;
font-size: 15px;
   border-radius: 18px;
color: gray;
   background-color: white;
text-transform: uppercase;
   display: inline-block;
   cursor: pointer;
   border: 3px rgba(139, 139, 34, .5) solid;
   margin-left: 8px;
}
}
.welcome-banner-control-triggle.on {
input[type=text], textarea{
   border-color: white;
font: 14px normal uppercase, arial, serif;
   background-color: rgba(139, 139, 34, .5);
color: dimgray;
background: none;
width: 380px;
height: 37px;
padding: 0px 10px;
margin: 0 0 10px 0;
border: 1px solid #BDBDBD;
border-radius: 5px;
}
}
.welcome-banner-page {
textarea{
   text-align: center;
height: 80px;
   float: left;
padding-top: 14px;
}
}
@media screen and (min-width: 600px) {
textarea:focus,
/* 低像素设备隐藏 */
input[type=text]:focus{
.welcome,
background: url('../img/letter_bg.png');
.welcome * {
   box-sizing: border-box;
   transition: all .37s;
}
}
.welcome-column>*:hover {
#form-wrap input[type=submit]{
   background-color: #FFF;
position: relative;
}
font-family: tahoma;
.welcome-counter {
font-size: 24px;
   background: url(https://www.hmoegirl.com/images/thumb/7/7a/64304271.png/689px-64304271.png) top right;
color: gray;
   background-repeat: no-repeat;
width: 300px;
   background-size: 405px 360px;
text-align: center;
   min-height: 250px;
opacity: 0;
   padding: 0!important;
background: none;
   display: flex;
cursor: pointer;
}
border-radius: 3px;
.welcome-counter-container {
transition: opacity 0.7s ease-in-out 0s;
   background: rgba(255, 255, 255, .6);
   padding: .5em;
   flex: 1;
}
}
#form-wrap:hover input[type=submit]{
z-index: 1;
opacity: 1;
transition: opacity 0.5s ease-in-out 1.3s;
}
}
</style>
</style>
<!--{/if}--></includeonly>
</includeonly>
</html>

2021年8月13日 (五) 20:41的版本

<html lang="Zh-CN"> <head> <meta charset="utf-8"> 

   <title>13-SendMessage</title>
   <link rel="stylesheet" href="css/style.css">
 </head>
 <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> body, div, h1, h2, form, fieldset, input, textarea, footer, p{ margin: 0; padding: 0; border: 0; outline: none; } body{ background: #F5F5F5; color: gray; font-family: tahoma; } p{ font-family: tahoma; font-size: 24px; color: #757575; }

  1. wrap{

width: 530px; margin: 20px auto 0; height: 1000px; } h1{ margin-bottom: 20px; text-align: center; font-size: 35px; font-family: tahoma; color: black; }

  1. form-wrap{

overflow: hidden; 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('../img/before.png'); width: 530px; height: 317px; }

  1. form-wrap:after{

content: ""; position: absolute; bottom: 0px; left: 0; background: url('../img/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; } form{ background: url('../img/letter_bg.png'); position: relative; top: 200px; overflow: hidden; 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; } lable{ margin: 11px 20px 0 0; font-size: 15px; color: gray; text-transform: uppercase; } 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; } textarea{ height: 80px; padding-top: 14px; } textarea:focus, input[type=text]:focus{ background: url('../img/letter_bg.png'); }

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

position: relative; font-family: tahoma; font-size: 24px; color: gray; width: 300px; text-align: center; opacity: 0; background: none; 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> </includeonly> </html>

取自“https://hmoegirl.com/index.php?title=Widget:欢迎&oldid=59258”