/* 通用样式 */
body {
	background-color: #4F6D93;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	background-image: linear-gradient(to bottom, #FFFFFF, #4F6D93);
	background-repeat: no-repeat;
}

#wrapper {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: #90C7E3;
	min-width: 960px;
	max-width: 2048px;
	box-shadow: 3px 3px 3px #333333;
}

header {
	background-color: #000033;
	color: #FFFFFF;
	background-image: url(sunset.jpg);
	background-position: right;
	background-repeat: no-repeat;
	text-align: center;
	height: 60px;
	padding-top: 15px;
}

h1 {
	margin-bottom: 0;
	margin-top: 0;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 5px;
}

nav {
	float: left;
	width: 160px;
	font-weight: bold;
	padding: 20px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	font-size: 1.2em;
}

nav a {
	text-decoration: none;
}

nav a:link {
	color: #000033;
}

nav a:visited {
	color: #000033;
}

nav a:hover {
	color: #FFFFFF;
}

main {
	padding: 1px 20px 20px 30px;
	display: block;
	background-color: #FFFFFF;
	margin-left: 190px;
}

h2 {
	color: #3399CC;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #ccc;
}

h3 {
	color: #000033;
	font-family: Georgia, "Times New Roman", serif;
}

dt {
	color: #000033;
}

.resort {
	color: #5C7FA3;
	font-weight: bold;
}

main ul {
	list-style-image: url(marker.gif);
}

#contact {
	font-size: 90%;
}

footer {
	font-size: 75%;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	text-align: center;
	margin-left: 190px;
	background-color: #FFFFFF;
	padding: 20px;
}

#homehero {
	background-image: url(coasthero.jpg);
	height: 300px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-left: 190px;
}

#yurthero {
	background-image: url(yurthero.jpg);
	height: 300px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-left: 190px;
}

#trailhero {
	background-image: url(trailhero.jpg);
	height: 300px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-left: 190px;
}

#mobile {
	display: none;
}

#desktop {
	display: inline;
}

table {
	border: 2px solid #3399CC;
	width: 80%;
	border-collapse: collapse;
}

td, th {
	padding: 0.5em;
	border: 2px solid #3399CC;
}

td {
	text-align: center;
}

.text {
	text-align: left;
}

tr:nth-of-type(odd) {
	background-color: #F5FAFC;
}

/* 表单元素样式 */
label {
	display: block;         /* 块级显示 */
	float: left;            /* 左浮动 */
	width: 120px;           /* 宽度120px */
	text-align: right;      /* 右对齐 */
	padding-right: 10px;    /* 右侧适当填充 */
}

input, textarea {
	display: block;         /* 块级显示 */
	margin-bottom: 20px;    /* 20px 底部边距 */
}

input[type="submit"] {
	margin-left: 130px;     /* 提交按钮左边距 130px */
}

/* 媒体查询：最大宽度为64em的屏幕优化 */
@media only screen and (max-width: 64em) {
	body {
		margin: 0;
		background-color: #FFFFFF;
	}

	#wrapper {
		min-width: 0;
		width: auto;
		box-shadow: none;
	}

	#homehero, #yurthero, #trailhero {
		margin-left: 0;
		height: 200px;
	}

	main {
		margin-left: 0;
	}

	nav {
		float: none;
		width: auto;
		padding: .5em;
		text-align: center;
	}

	nav li {
		display: inline;
		padding: 0.25em 0.75em;
	}

	footer {
		margin-left: 0;
	}
}

/* 媒体查询：最大宽度为37.5em的屏幕优化 */
@media only screen and (max-width: 37.5em) {
	main {
		padding: 0.1em 1em;
		font-size: 90%;
	}

	header {
		padding-top: 1em;
	}

	h1 {
		font-size: 1.5em;
	}

	nav {
		padding: 0;
	}

	nav li {
		display: block;
		margin: 0;
		border-bottom: 2px solid #330000;
	}

	nav a {
		display: block;
	}

	#homehero, #yurthero, #trailhero {
		background-image: none;
		height: 0;
	}

	#mobile {
		display: inline;
	}

	#desktop {
		display: none;
	}

	/* 在移动设备上重新配置表单元素 */
	label {
		float: none;            /* 取消浮动 */
		text-align: left;       /* 左对齐 */
	}

	input[type="submit"] {
		margin-left: 0;         /* 提交按钮左边距设为0 */
	}

	/* 确保表单控件之间有合适的间距 */
	input, textarea {
		margin-bottom: 10px;    /* 底部间距减小 */
	}

	/* 设置header, main, nav, footer, figure和figcaption为块级元素 */
	header, main, nav, footer, figure, figcaption {
		display: block;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pacific Trails Resort :: Reservations</title>
  <meta charset="utf-8">
  <link href="pacific.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 表单居左对齐 */
    form {
      width: 100%; /* 表单宽度占满可用空间 */
      max-width: 600px; /* 最大宽度为600px */
      margin: 0; /* 移除居中样式 */
    }

    /* 使表单内的每一对 label 和输入框保持在同一行 */
    .form-row {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      margin-bottom: 15px;
    }

    label {
      flex: 1 0 200px; /* 每个label至少占200px宽度 */
      margin-bottom: 5px; /* 标签和输入框之间的间距 */
      font-weight: bold;
    }

    /* 在标签前添加红色星号 */
    label.required:before {
      content: "*"; /* 添加星号 */
      color: red; /* 设置星号为红色 */
      margin-right: 5px; /* 星号与文本之间留出一些空间 */
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    textarea {
      flex: 2 0 300px; /* 输入框占更多的宽度 */
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    textarea {
      resize: vertical; /* 允许垂直调整 */
    }

    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <header><h1>Pacific Trails Resort</h1></header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="yurts.html">Yurts</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="reservations.html">Reservations</a></li>
    </ul>
  </nav>

  <main>
    <h2>Reservations at Pacific Trails</h2>

    <h3>Contact Us Today!</h3>

    <!-- 添加提示段落 -->
    <p><strong>Required fields are marked with an asterisk *</strong></p>

    <!-- 表单 -->
    <form action="http://webdevbasics.net/scripts/pacific.php" method="POST">

      <!-- First Name 输入控件 -->
      <div class="form-row">
        <label for="myFName" class="required">First Name:</label>
        <input type="text" id="myFName" name="myFName" required>
      </div>

      <!-- Last Name 输入控件 -->
      <div class="form-row">
        <label for="myLName" class="required">Last Name:</label>
        <input type="text" id="myLName" name="myLName" required>
      </div>

      <!-- Email 输入控件 -->
      <div class="form-row">
        <label for="myEmail" class="required">E-mail Address:</label>
        <input type="email" id="myEmail" name="myEmail" size="35" required>
      </div>

      <!-- Phone Number 输入控件 -->
      <div class="form-row">
        <label for="myPhone">Phone Number:</label>
        <input type="tel" id="myPhone" name="myPhone" maxlength="12">
      </div>

      <!-- Arrival Date (入住日期) 输入控件 -->
      <div class="form-row">
        <label for="myArrivalDate" class="required">Arrival Date:</label>
        <input type="date" id="myArrivalDate" name="myArrivalDate" required>
      </div>

      <!-- Nights (入住晚数) 输入控件 -->
      <div class="form-row">
        <label for="myNights" class="required">Nights:</label>
        <input type="number" id="myNights" name="myNights" min="1" max="14" required>
      </div>

      <!-- Comments 输入控件 -->
      <div class="form-row">
        <label for="myComments" class="required">Comments:</label>
        <textarea id="myComments" name="myComments" rows="2" cols="30" required></textarea>
      </div>

      <!-- 提交按钮 -->
      <input type="submit" value="Submit">
    </form>
  </main>

  <footer>
    Copyright &copy; 2016 Pacific Trails Resort<br>
    <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a>
  </footer>
</div>
</body>
</html>
介绍网页元素、对应的片段代码、网页运行截图、学习体会