【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:

html 复制代码
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>董*个人网页</title>
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
		<div class="header">
			<div class="logo">
				<h1>董*的个人主页</h1>
			</div>
			<div class="nav">
				<a href="index.html">首页</a>
				<a href="#about">关于我</a>
				<a href="#work">我的作品</a>
				<a href="">个人爱好</a>
				<a href="">联系我</a>

			</div>
		</div>
		<div class="banner">
			<img src="./img/bk.jpeg" alt="">
		</div>
		<div class="bgcolor">

			<div class="title">
				<div class="line"></div>
				<h3>关于我</h3>
				<div class="line"></div>
			</div>
			<div id="about">
				<div class="about-img">
					<img src="./img/lqpic.jpg" alt="">
				</div>
				<div class="about-text">
					<!-- 自我介绍内容 -->
				</div>
			</div>

			<div id="work">
				<div class="title">
					<div class="line"></div>
					<h3>我的作品</h3>
					<div class="line"></div>
					<div>

					</div>
				</div>>
			</div>
		</div>
	</body>

</html>

css:

css 复制代码
* {

	margin: 0;
	padding: 0;

}

.header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	padding: 10px 10%;
	background: rgba(255, 255, 255, 0.35);

}

.logo h1 {

	color: #f00;
	letter-spacing: 5px;
	font-size: 30px;

}

.nav a {

	text-decoration: none;
	margin-left: 30px;
	color: #fff;

}

.nav a:hover {

	color: red;
	background-color: yellow;

}

.banner {

	width: 100%;
	height: 60vh;
}

.banner img {

	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
}

.title h3 {

	font-size: 35px;
	color: #555;
	letter-spacing: 5px;
	margin: 0 20px;
	font-weight: normal;
}

.title .line {
	width: 80px;
	height: 4px;
	background: #555;
	margin: 100px 0;
}

#about {
	display: flex;
	justify-content: space-between;
	width: 80%;

	margin: 30px auto;
}

.about-img {


	width: 30%;
	height: 440px;
}

.about-img img {

	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-text {

	width: 65%;
}

.about-text p {

	line-height: 2;
	text-indent: 2em;
	margin: 15px 0;
}

#work ul {
	display: flex;
	width: 1200px;
	margin: auto;
}

#work ul li {
	width: 25%;
}

.bgcolor {
	background-color: rgb(75, 141, 255);
}
相关推荐
qq_3901617715 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js