devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【html知识】用html写一个简单的个人网页

作者：AllinToyou | 2024-05-03 23:20:39

赞

踩

【html知识】用html写一个简单的个人网页

介绍：

这是一个HTML和CSS的代码段，它构建了一个基本的个人网页布局。以下是该代码的详细介绍：

HTML部分：

文档类型与基础结构：<!DOCTYPE html> 声明了文档类型为HTML5。<html lang="en"> 定义了整个HTML文档，并设置语言为英语。

头部信息：<head> 标签内包含了元数据，如字符集定义 (<meta charset="UTF-8">)，视口设置 (<meta name="viewport" content="width=device-width, initial-scale=1.0">)，以及页面标题 (<title>董*个人网页</title>)。此外，还链接了一个外部的CSS样式表 (<link rel="stylesheet" href="css/style.css">)。

主体内容：<body> 标签内包含了网页的可见内容。

头部区域 (<div class="header">)：包括一个包含网站标题的logo (<div class="logo">) 和一个导航栏 (<div class="nav">)。导航栏包含几个链接到不同页面的锚点 (<a> 标签)。
背景图片区域 (<div class="banner">)：使用了一个图像作为背景。
标题与分隔线 (<div class="bgcolor"> 和 <div class="title">)：提供了一个有背景色的区域，包含一个居中的标题 (<h3>) 和两个水平分隔线 (<div class="line">)。
关于我部分 (<div id="about">)：这个部分被预留出来，但代码段中没有给出具体内容。它预计会包含一些文本和/或图像，介绍网站的主人。
CSS部分：

CSS部分定义了HTML元素的样式。

通配符选择器 (*)：重置所有元素的margin和padding为0，确保一致的基线样式。
头部样式 (.header)：固定位置的头部，包含logo和导航栏，宽度为80%，背景色为半透明的白色。
Logo样式 (.logo h1)：定义了logo中标题的样式，包括颜色、字母间距和字体大小。
导航链接样式 (.nav a)：定义了导航栏中链接的样式，包括无下划线 (text-decoration: none;)、边距和颜色。
导航链接悬停样式 (.nav a:hover)：定义了鼠标悬停在链接上时的样式，包括颜色和背景色的变化。
背景图片区域样式 (.banner)：定义了背景图片的容器样式，包括宽度和高度。
标题样式 (.title)：定义了标题区域的样式，包括标题文本的样式和分隔线的样式。
关于我部分样式 (#about)：定义了关于我部分的样式，包括宽度、边距和布局方式。
关于我部分的图像和文本样式 (.about-img 和 .about-text)：分别定义了关于我部分中的图像和文本的样式。
作品部分样式 (#work ul 和 #work ul li)：定义了作品部分的列表样式，包括列表项的宽度。
背景色样式 (.bgcolor)：定义了一个具有特定背景色的样式，用于标题和其他需要这种背景的元素。

整体而言，这个代码段创建了一个具有标准结构的个人网页，包括一个头部、一个背景图片区域、一个标题区域和一个关于我部分。导航栏允许用户浏览网页的不同部分。代码清晰、结构良好，并且易于阅读和维护。不过，需要注意的是，代码段似乎被截断了，特别是在“关于我”部分和作品部分，所以这些部分的完整实现并未在代码段中展示。

完整代码：

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 		<title>董*个人网页</title>
  8. 		<link rel="stylesheet" href="css/style.css">
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<div class="header">
  13. 			<div class="logo">
  14. 				<h1>董*的个人主页</h1>
  15. 			</div>
  16. 			<div class="nav">
  17. 				<a href="index.html">首页</a>
  18. 				<a href="#about">关于我</a>
  19. 				<a href="#work">我的作品</a>
  20. 				<a href="">个人爱好</a>
  21. 				<a href="">联系我</a>
  22.  
  23. 			</div>
  24. 		</div>
  25. 		<div class="banner">
  26. 			<img src="./img/bk.jpeg" alt="">
  27. 		</div>
  28. 		<div class="bgcolor">
  29.  
  30. 			<div class="title">
  31. 				<div class="line"></div>
  32. 				<h3>关于我</h3>
  33. 				<div class="line"></div>
  34. 			</div>
  35. 			<div id="about">
  36. 				<div class="about-img">
  37. 					<img src="./img/lqpic.jpg" alt="">
  38. 				</div>
  39. 				<div class="about-text">
  40. 					<!-- 自我介绍内容 -->
  41. 				</div>
  42. 			</div>
  43.  
  44. 			<div id="work">
  45. 				<div class="title">
  46. 					<div class="line"></div>
  47. 					<h3>我的作品</h3>
  48. 					<div class="line"></div>
  49. 					<div>
  50.  
  51. 					</div>
  52. 				</div>>
  53. 			</div>
  54. 		</div>
  55. 	</body>
  56.  
  57. </html>

css:

  1. * {
  2.  
  3. 	margin: 0;
  4. 	padding: 0;
  5.  
  6. }
  7.  
  8. .header {
  9. 	position: fixed;
  10. 	top: 0;
  11. 	left: 0;
  12. 	display: flex;
  13. 	align-items: center;
  14. 	justify-content: space-between;
  15. 	width: 80%;
  16. 	padding: 10px 10%;
  17. 	background: rgba(255, 255, 255, 0.35);
  18.  
  19. }
  20.  
  21. .logo h1 {
  22.  
  23. 	color: #f00;
  24. 	letter-spacing: 5px;
  25. 	font-size: 30px;
  26.  
  27. }
  28.  
  29. .nav a {
  30.  
  31. 	text-decoration: none;
  32. 	margin-left: 30px;
  33. 	color: #fff;
  34.  
  35. }
  36.  
  37. .nav a:hover {
  38.  
  39. 	color: red;
  40. 	background-color: yellow;
  41.  
  42. }
  43.  
  44. .banner {
  45.  
  46. 	width: 100%;
  47. 	height: 60vh;
  48. }
  49.  
  50. .banner img {
  51.  
  52. 	width: 100%;
  53. 	height: 100%;
  54. 	object-fit: cover;
  55. }
  56.  
  57. .title {
  58. 	display: flex;
  59. 	align-items: center;
  60. 	justify-content: center;
  61. 	margin-top: 30px;
  62. }
  63.  
  64. .title h3 {
  65.  
  66. 	font-size: 35px;
  67. 	color: #555;
  68. 	letter-spacing: 5px;
  69. 	margin: 0 20px;
  70. 	font-weight: normal;
  71. }
  72.  
  73. .title .line {
  74. 	width: 80px;
  75. 	height: 4px;
  76. 	background: #555;
  77. 	margin: 100px 0;
  78. }
  79.  
  80. #about {
  81. 	display: flex;
  82. 	justify-content: space-between;
  83. 	width: 80%;
  84.  
  85. 	margin: 30px auto;
  86. }
  87.  
  88. .about-img {
  89.  
  90.  
  91. 	width: 30%;
  92. 	height: 440px;
  93. }
  94.  
  95. .about-img img {
  96.  
  97. 	width: 100%;
  98. 	height: 100%;
  99. 	object-fit: cover;
  100. }
  101.  
  102. .about-text {
  103.  
  104. 	width: 65%;
  105. }
  106.  
  107. .about-text p {
  108.  
  109. 	line-height: 2;
  110. 	text-indent: 2em;
  111. 	margin: 15px 0;
  112. }
  113.  
  114. #work ul {
  115. 	display: flex;
  116. 	width: 1200px;
  117. 	margin: auto;
  118. }
  119.  
  120. #work ul li {
  121. 	width: 25%;
  122. }
  123.  
  124. .bgcolor {
  125. 	background-color: rgb(75, 141, 255);
  126. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/532048
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号