整个项目已经开发完成，接下来的工作是整理代码

9c061079 · whk · 80e2aea6 · 9c061079 · 9c061079
隐藏空白更改
内联并排

Showing with 191 addition and 2 deletion

contact.html contact.html +96 -2

css/contact.css css/contact.css +95 -0

未找到文件。
--- a/contact.html
+++ b/contact.html
+<!-- index.hetml -->
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="utf-8">
-		<title></title>
+		<!-- meta标签：<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 -->
+		<!-- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据 -->
+		<meta charset="utf-8" />
+		<!-- 网页的描述 -->
+		<meta name="description" content="欢迎来到whkgogo的个人网空间" />
+		<!-- 网页的关键词 -->
+		<meta name="keywords" content="whkgogo的个人博客" />
+		<!-- 网页的作者 -->
+		<meta name="author" content="whk" />
+		<!-- 引入自己编写的CSS文件 -->
+		<link rel="stylesheet" type="text/css" href="./css/style.css" />
+		<link rel="stylesheet" type="text/css" href="css/about.css" />
+		<!-- 引入图标CSS文件 -->
+		<!-- 网址：http://www.fontawesome.com.cn -->
+		<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
+		<link rel="stylesheet" type="text/css" href="css/contact.css"/>
+		<title>联系whkgogo</title>
 	</head>
 	<body>
+		<!-- 顶部导航栏 + 主页大图 -->
+		<header class="index_header">
+			<nav id="navBar">
+				<div class="container">
+					<h1>
+						<a href="index.html">whkgogo</a>
+					</h1>
+					<ul>
+						<li>
+							<a href="index.html">首页</a>
+						</li>
+						<li>
+							<a  href="about.html">关于我</a>
+						</li>
+						<li>
+							<a class="current" href="contact.html">与我联系</a>
+						</li>
+					</ul>
+				</div>
+			</nav>
+		</header>
+		
+		<!-- 提交信息的表单部分 -->
+		<div class="contact_content">
+			<div class="contact_title">
+				<h1>联系<span class="text_primary">whkgogo</span></h1>
+				<h3>有任何的问题或者意见都可通过邮箱与我取得联系！</h3>
+			</div>
+			<div class="contact_form">
+				<form class="mui-input-group">
+					<div class="mui-input-row small_input">
+						<label>姓名</label>
+						<br />
+						<input type="text" name="name" class="mui-input-clear" >
+					</div>
+					<div class="mui-input-row small_input">
+						<label>邮箱</label>
+						<br />
+						<input type="text" name="email" class="mui-input-clear" >
+					</div>
+					<div class="mui-input-row big_input">
+						<label>反馈内容</label>
+						<br />
+						<textarea type="text" name="message" class="mui-input-clear" ></textarea>
+					</div>
+					<button type="submit" class="form_btn">提交</button>
+				</form>
+			</div>
+		</div>
+		
+		<!-- 联系方式部分 -->
+		<div class="contact_way">
+			<!-- 方式1 -->
+			<div class="way">
+				<i class="fa fa-weixin fa-2x" aria-hidden="true"></i>
+				<h1>微信</h1>
+				<h3>wu290820</h3>
+			</div>
+			<!-- 方式2 -->
+			<div class="way">
+				<i class="fa fa-contao fa-2x" aria-hidden="true"></i>
+				<h1>CSDN社区</h1>
+				<h3>用户名：whkgogo</h3>
+			</div>
+			<!-- 方式3 -->
+			<div class="way">
+				<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
+				<h1>邮箱</h1>
+				<h3>2908206765@qq.com</h3>
+			</div>
+		</div>
+
+
+
+		<footer id="main_footer">
+			<p class="footer_p">whkgogo &copy; 2021 All Rights Reserved</p>
+		</footer>
+
 	</body>
 </html>
--- a/css/contact.css
+++ b/css/contact.css
+/* 联系我页面的CSS样式文件 */
+
+/* 联系方式部分 */
+.contact_way{
+	height: 160px;
+	width: 100%;
+	background: #333333;
+	color: #FFFFFF;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.way{
+	display: inline-block;
+	width: 20%;
+	height: 100%;
+	padding: 30px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+/* way下的p标签 */
+.way p{
+	font-size: 15px;
+}
+
+/* 表单提交部分 */
+.contact_content{
+	padding: 30px;
+	width: 100%;
+	height: 550px;
+	
+}
+
+/* 表单的标题 */
+.contact_content .contact_title{
+	width: 30%;
+	margin: 0 auto;
+}
+
+/* 表单提交内容 */
+.contact_content .contact_form{
+	width: 30%;
+	margin: 0 auto;
+}
+
+.contact_content .contact_form .mui-input-group div{
+	padding: 10px;
+}
+
+.contact_content .contact_form .mui-input-group label{
+	font-size: 15px;
+	font-weight: 700;
+}
+
+
+/* 名字、邮箱输入框 */
+.small_input input{
+	width: 100%;
+	height: 30px;
+	margin-top: 5px;
+	padding: 10px;
+	border: 1px solid #ddd;
+}
+
+/* 反馈内容输入框 */
+.big_input textarea{
+	width: 100%;
+	height: 150px;
+	margin-top: 5px;
+	padding: 10px;
+	border: 1px solid #ddd;
+}
+
+/* 设置输入框聚焦的时候边框颜色 */
+.small_input input:focus,
+.big_input textarea:focus{
+	outline: none;
+	border-color: #FF7F50;
+}
+
+/* 提交按钮样式 */
+.form_btn{
+	width: 100px;
+	height: 50px;
+	background: #333333;
+	color: #FF7F50;
+	float: right;
+}
+
+/* 设置按钮的移入效果 */
+.form_btn:hover{
+	background: #FF7F50;
+	color: #333333;
+}
\ No newline at end of file