index的导航栏+部分css样式

ab4615b9 · whk · 10f36216 · ab4615b9 · ab4615b9 · ab4615b9
隐藏空白更改
内联并排

Showing with 138 addition and 0 deletion

about.html about.html +9 -0

contact.html contact.html +9 -0

css/style.css css/style.css +78 -0

index.html index.html +42 -0

未找到文件。
--- a/about.html
+++ b/about.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+	</body>
+</html>
--- a/contact.html
+++ b/contact.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+	</body>
+</html>
--- a/css/style.css
+++ b/css/style.css
+/* 首先要清除样式，因为浏览器有默认样式，需要进行清除 */
+*{
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	/* 设置box-sizing为border-box的原因是防止之后给元素添加padding的时候不会影响到整体的布局 */
+}
+
+/* 设置主要内容的样式 */
+html,body{
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	/* 一个比较好的字体样式，可以根据自己的喜好选择 */
+}
+
+/* 设置a标签的样式 */
+a{
+	color: #333;
+	text-decoration: none;
+	/* 将a标签的下划线去除 */
+}
+
+/* 设置标题标签的样式 */
+h1,h2,h3{
+	padding-bottom: 20px;
+	/* 设置这些元素的下内边距为20px */
+}
+
+/* 容器样式，使用的页面可能会很多所以统一进行设置 */
+.container{
+	margin: 20px 0;
+	max-width: 1100px;
+	overflow: hidden;
+	/* 防止margin塌陷和清除浮动 */
+	padding: 0 20px;
+}
+
+/* 设置导航栏样式 */
+#navBar{
+	background: #333333;
+	color: white;
+	overflow: auto;
+	/* 如果元素中的内容超出了给定的宽度和高度属性
+	overflow 属性可以确定是否显示滚动条等行为。 */
+	/* auto为自动判断 */
+}
+
+/* 导航栏中的a标签之前设置的颜色#333和导航栏背景颜色冲突
+ 所以要重新给定导航栏中的a标签的颜色*/
+ #navBar a{
+	 color: white;
+ }
+ 
+ /* 导航栏中的whkgogo文字部分是h1，需要该部分左浮动*/
+ #navBar h1{
+	 float: left;
+	 padding-top: 20px;
+ }
+ 
+ /* 导航栏中的列表是ul标签，需要右浮动，并且需要清除默认的样式 */
+ #navBar ul{
+	 float: right;
+	 list-style: none;
+	 /* 清除默认样式 */
+ }
+ 
+ /* 导航栏标签列表中的li标签样式 */
+ #navBar ul li{
+	 float: left;
+ }
+ 
+ /* 导航栏li标签列表中的a标签样式 */
+ #navBar ul li a{
+	 display: block;
+	 /* 此元素将显示为块级元素，此元素前后会带有换行符。 */
+	 padding: 20px;
+	 text-align: center;
+ }
+ 
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!-- index.hetml -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<!-- meta标签：<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 -->
+		<!-- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据 -->
+		<meta charset="utf-8" />
+		<!-- 网页的描述 -->
+		<meta name="description" content="欢迎来到whkgogo的个人网空间"/>
+		<!-- 网页的关键词 -->
+		<meta name="keywords" content="whkgogo的个人博客"/>
+		<!-- 网页的作者 -->
+		<meta name="author" content="whk"/>
+		<link rel="stylesheet" type="text/css" href="css/style.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 href="contact.html">与我联系</a>
+						</li>
+					</ul>
+				</div>
+
+
+			</nav>
+		</header>
+
+	</body>
+</html>