2021.7.23开发了index中的部分功能和about页面

80e2aea6 · whk · ed57113e · 80e2aea6 · 80e2aea6 · 80e2aea6
6 changed file
--- a/about.html
+++ b/about.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" />
+		<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 class="current" href="about.html">关于我</a>
+						</li>
+						<li>
+							<a href="contact.html">与我联系</a>
+						</li>
+					</ul>
+				</div>
+			</nav>
+		</header>
+
+		<!-- 介绍的内容 -->
+		<div id="introduce">
+			<div class="introduce_text">
+				<h1><span>whkgogo</span>自我介绍</h1>
+				<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
+					做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
+			</div>
+			<div class="introduce_image">
+				<img src="./img/introduce.jpg" />
+			</div>
+		</div>
+
+		<!-- 清除浮动的Div -->
+		<div class="clr"></div>
+
+		<!-- 具体的介绍内容部分 -->
+		<div id="more_work">
+			<h1>我的作品</h1>
+			<div class="url_conten">
+				<div class="gitee_url">
+					<a href="https://gitee.com/whkwhk" target="_blank">
+						<h2><i class="fa fa-git-square mini_icon" aria-hidden="true"></i>码云仓库</h2>
+					</a>
+				</div>
+				<div class="csdn_url">
+					<a href="https://blog.csdn.net/qq_18326057?spm=1011.2124.3001.5343" target="_blank">
+						<h2><i class="fa fa-contao mini_icon" aria-hidden="true"></i>CSDN技术博客</h2>
+					</a>
+				</div>
+			</div>
+
+		</div>
+
+
+
+
+		<footer id="main_footer">
+			<p class="footer_p">whkgogo &copy; 2021 All Rights Reserved</p>
+		</footer>
+
 	</body>
 </html>
--- a/css/about.css
+++ b/css/about.css
+/* 关于我的页面CSS样式文件 */
+
+/* ，mini的icon */
+.mini_icon{
+	margin-right: 10px;
+}
+/* 上部介绍文字块样式 */
+#introduce{
+	height: 350px;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+/* 介绍部分的文字内容 */
+#introduce .introduce_text{
+	width: 50%;
+	height: 100%;
+	padding: 50px 50px;
+	background: #E7E7E7;
+	float: left;
+	overflow: auto;
+}
+#introduce .introduce_text h1{
+	font-size: 40px;
+}
+
+#introduce .introduce_text p{
+	font-size: 18px;
+}
+#introduce .introduce_text span{
+	color: #FF7F50;
+}
+
+/* 介绍部分的图片 */
+#introduce .introduce_image{
+	width: 50%;
+	height: 100%;
+	float: right;
+}
+#introduce .introduce_image img{
+	display: block;
+	width: 50%;
+	margin: 0 auto;
+	margin-top: 40px;
+	border-radius: 50%;
+}
+
+/* 我的作品内容样式 */
+#more_work{
+	height: 300px;
+	padding: 20px;
+	text-align: center;
+	box-sizing: border-box;
+	background: url(../img/mywork.jpg) no-repeat center center/cover;
+	color: white;
+}
+
+/* 我的作品标题 */
+#more_work h1{
+	font-size: 40px;
+}
+
+#more_work a{
+	color: #FFFFFF;
+}
+
+/* 地址仓库内容 */
+.url_conten{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	align-items: center;
+}
+
+.url_conten h2{
+	font-size: 30px;
+	margin-top: 10px;
+}
+/* 码云地址部分 */
+#more_work .gitee_url{
+	background: #FF7F50;
+	border-radius: 15px;
+	width: 50%;
+	height: 60px;
+	line-height: 60px;
+	margin: auto;
+	margin-bottom: 30px;
+	/* margin设置为auto可以让div在父元素下居中 */
+	/* float: left; */
+	/* 设置float浮动的时候要在子元素进行设置，在父元素中进行设置的话对子元素无效 */
+}
+
+/* CSDN部分 */
+#more_work .csdn_url{
+	background: #FF7F50;
+	border-radius: 15px;
+	width: 50%;
+	height: 60px;
+	line-height: 60px;
+	margin: auto;
+	/* float: left; */
+	/* 	opacity: 0.9将元素的透明度设置成为0.9 */
+}
\ No newline at end of file
--- a/css/style.css
+++ b/css/style.css
@@ -111,6 +111,7 @@ p {
 }

 /* 给导航栏的列表添加效果：鼠标移动到文字上面时底部颜色有变化，并且文字颜色也有相应的改变 */
+/* current是鼠标放置时候的状态 */
 #navBar ul li a:hover,
 #navBar ul li a.current {
 	transition: 0.5s;
@@ -188,7 +189,7 @@ p {
 	text-align: center;
 	height: 100%;
 	padding: 50px 80px;
-	overflow: hidden;
+	overflow: auto;
 	background: #333333;
 	color: #FFFFFF;
 }
@@ -202,7 +203,7 @@ p {
 .home_info_content p {
 	font-size: 20px;
 	margin-bottom: 40px;
-	overflow: hidden;
+	overflow: auto;
 }

 /* info中的a标签样式 */
@@ -227,6 +228,7 @@ p {
 .more_content {
 	height: 400px;
 	text-align: center;
+	margin: 0;
 }

 /* 每一块内容的样式设置 */
@@ -236,7 +238,7 @@ p {
 	height: 100%;
 	background: #e7e7e7;
 	padding: 50px;
-	overflow: hidden;
+	overflow: auto;
 	float: left;
 	margin-top: 5px;
 	border-right: #999 1px solid;
@@ -249,7 +251,7 @@ p {
 	height: 100%;
 	background: #333;
 	padding: 50px;
-	overflow: hidden;
+	overflow: auto;
 	float: left;
 	margin-top: 5px;
 	border-right: #999 1px solid;

--- a/img/introduce.jpg
+++ b/img/introduce.jpg
--- a/img/mywork.jpg
+++ b/img/mywork.jpg
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
 							<a class="current" href="index.html">首页</a>
 						</li>
 						<li>
-							<a href="about.html">关于我 ></a>
+							<a href="about.html">关于我</a>
 						</li>
 						<li>
 							<a href="contact.html">与我联系</a>