实例1_代码拼接body传参-CSDN博客

本文链接：https://blog.csdn.net/u010028980/article/details/8760329

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 & CSS3 Contact Form</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="contact">
    	<h1>Send an email</h1>
        <form action="#" method="post">
        		<fieldset>
            	<label for="name">Name:</label>
                <input type="text" id="name" placeholder="Enter your full name" />
                
                <label for="email">Email:</label>
                <input type="email" id="email" placeholder="Enter your email address" />
            	
                <label for="message">Message:</label>
                <textarea id="message" placeholder="What's on your mind?" ></textarea>
                </fieldset>
        </form>
    </div>
    
</body>

</html>

@charset "utf-8";
/* CSS Document */
body,div,h1,form,fieldset,input,textarea{
	margin:0;
	padding:0;
	border:0;
	outline:none;
}

html{
	height:100%;
}
body{
	background:#728eaa;
	background:-moz-linear-gradient(top,#25303C 0%,#728EAA 100%);
	background:-webkit-grandient(linear,left top,left bottom,color-stop(0%,#25303C),color-stop(100%,#728EAA ));
	font-family:sans-serif;
}

#contact{
	width:430px;
	margin:60px auto;
	padding:60px 30px;
	background:#c9d0de;
	border:1px solid #e1e1e1;
	-moz-box-shadow:0px 0px 8px #444;
	-webkit-box-shadow:0px 0px 8px #444;
}

h1{
	font-size:35px;
	color:#445668;
	text-transform:uppercase;
	text-align:center;
	margin:0 0 35px 0;
	text-shadow:0px 1px 0px #f2f2f2;
}

label{
	float:left;
	clear:left;
	margin:11px 20px 0 0;
	width:95px;
	text-align:right;
	font-size:16px;
	color:#445668;
	text-transform:uppercase;
	text-shadow:0px 1px 0px #f2f2f2;	
}

input{
	width:260px;
	height:35px;
	padding:5px 20px 0px 20px;
	margin:0 0 20px 0;
	background:#5E768D;
	background:-moz-liner-gradient(top,#546A7F 0%,#5E768D 20%);/* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
	font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; 
}
input:-moz-placeholder{
	color:#a1b2c3;
	text-shadow;
	0px-1px #38506b;
}

textarea{
	width:260px;
	height:170px;
	padding:12px 20px 0px 20px;
	margin:0 0 20px 0;
	background:#5E768D;
	background:-moz-liner-gradient(top,#546A7F 0%,#5E768D 20%);
	background:-webkit-gradient(linear,left top.left bottom,color-stop(0%,#546A7F),color-stop(20%,#5E768D));
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	-moz-box-shadow:0px 1px 0px #f2f2f2;
	-webkit-box-shadow:0px 1px 0px #f2f2f2;
	font-fanily:sans-serif;
	font-size:16px;
	color:#f2f2f2;
	text-transform:uppercase;
	text-shadow:0px -1px 0px #334f71;
}

textarea::-webkit-input-placeholder{
	color:#a1b2c3;
	text-shadow:0px -1px 0px #38506b;
}

textarea:-moz-placeholder{
	color:#a1b2c3;
	text-shadow:0px -1px 0px #38506b;		
}

textarea:-moz-placeholder{
	color:#a1b2c3;
	text-shadow;
	0px -1px 0px #38506b;
}

input:focus,textarea:focus{
	background:#728eaa;
	background:-moz-linear-gradient(top,#668099 0%,#728eaa 20%);
	background:-webkit-grandient(linear,left top,left bottom,color-stop(0%,#668099),color-stop(20%,#728eaa));
}

input[type=submit]{
	width:185px;
	height:52px;
	float:right;
	padding:10px 15px;
	margin:0 15px 0 0;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	border:1px solid #556f8c;
	background:-moz-linear-grandient(top,#718DA9 0%,#415D79 100%);
	background:-webkit-grandient(linear,left top,left bottom,color-stop(0%,#718DA9)color-stop(100%,#415D79));
	cursor:pointer;
}