明信片

最新推荐文章于 2024-06-15 06:21:07 发布

空凌168

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量135

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/qq_44376244/article/details/117588052

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
		@font-face {
		    font-family: 'handwriting';
		    src: url('fonts/journal-webfont.woff2') format('woff2'),
		         url('fonts/journal-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;
		}
		
		@font-face {
		    font-family: 'typewriter';
		    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
		         url('fonts/veteran_typewriter-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;
		}
		
		body {
		  font  : 21px sans-serif;
		
		  padding : 2em;
		  margin  : 0;
		
		  background : #222;
		}
		
		form {
		  position: relative;
		
		  width  : 740px;
		  height : 498px;
		  margin : 0 auto;
		
		  background: #FFF url(background.jpg);
		}
		h1 {
		  position : absolute;
		  left : 415px;
		  top  : 185px;
		 
		  font : 1em "typewriter", sans-serif;
		}
		
		#from {
		  position: absolute;
		  left : 398px;
		  top  : 235px;
		}
		
		#reply {
		  position: absolute;
		  left : 390px;
		  top  : 285px;
		}
		
		#message {
		  position: absolute;
		  left : 20px;
		  top  : 70px;
		}
		label {
		  font : .8em "typewriter", sans-serif;
		}
		input, textarea {
		  font    : .9em/1.5em "handwriting", sans-serif;
		
		  border  : none;
		  padding : 0 10px;
		  margin  : 0;
		  width   : 240px;
		
		  background: none;
		}
		input:focus, textarea:focus {
		  background   : rgba(0,0,0,.1);
		  border-radius: 5px;
		  outline      : none;
		}
		input {
		    height: 2.5em; /* for IE */
		    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
		}
		textarea {
		  display : block;
		
		  padding : 10px;
		  margin  : 10px 0 0 -10px;
		  width   : 340px;
		  height  : 360px;
		
		  resize  : none;
		  overflow: auto;
		}
		button {
		  position     : absolute;
		  left         : 440px;
		  top          : 360px;
		
		  padding      : 5px;
		
		  font         : bold .6em sans-serif;
		  border       : 2px solid #333;
		  border-radius: 5px;
		  background   : none;
		
		  cursor       : pointer;
		
		-webkit-transform: rotate(-1.5deg);
		   -moz-transform: rotate(-1.5deg);
		    -ms-transform: rotate(-1.5deg);
		     -o-transform: rotate(-1.5deg);
		        transform: rotate(-1.5deg);
		}
		
		button:after {
		  content: " >>>";
		}
		
		button:hover,
		button:focus {
		  outline   : none;
		  background: #000;
		  color   : #FFF;
		}
	</style>
	</head>
	<body>
		<form>
			  <h1>to: Mozilla</h1>
			
			  <div id="from">
			    <label for="name">from:</label>
			    <input type="text" id="name" name="user_name">
			  </div>
			
			  <div id="reply">
			    <label for="mail">reply:</label>
			    <input type="email" id="mail" name="user_email">
			  </div>
			
			  <div id="message">
			    <label for="msg">Your message:</label>
			    <textarea id="msg" name="user_message"></textarea>
			  </div>
			 
			  <div class="button">
			    <button type="submit">Send your message</button>
			  </div>
			</form>
	</body>
</html>

效果图：

空凌168

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
明信片

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> @font-face { font-family: 'handwriting'; src: url('fonts/journal-webfont.woff2') format('woff2'), url(...
复制链接

扫一扫