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

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

* {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);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/5757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-03 设计模式-依赖倒转原则案例分析

设计模式-03 设计模式-依赖倒转原则案例分析 目录 设计模式-02 设计模式-依赖倒转原则案例分析 1.定义 2.内涵 3.案例对比 4.注意事项 5.最佳实践 6.总结 1.定义 依赖倒转原则&#xff08;Dependency Inversion Principle&#xff0c;简称DIP&#xff09;高层级的模块…

ModuleNotFoundError: No module named ‘pyautogui‘

ModuleNotFoundError: No module named pyautogui 这个错误意味着你的Python环境中没有安装pyautogui这个模块。pyautogui是一个用于程序化地控制鼠标和键盘的Python模块&#xff0c;常常用于自动化任务、GUI测试等场景。 为了解决这个问题&#xff0c;你需要安装pyautogui模块…

Java实现以图识图功能模块(简单案例)

由于完整的以图识图系统代码较长且复杂&#xff0c;这里仅提供使用OpenCV进行特征提取和比较的简化版示例代码。 1. 引入OpenCV Java库 首先&#xff0c;你需要在项目中引入OpenCV的Java库。这通常涉及将OpenCV的jar包添加到项目的类路径中。 2. 提取图像特征 使用OpenCV的…

机器学习实战-聚类算法

聚类算法是一种无监督学习的算法&#xff0c;用于将数据集中的数据分成不同的聚类或组。聚类算法是数据挖掘和机器学习领域中常见的技术之一&#xff0c;具有广泛的应用。 以下是聚类算法的一些知识点&#xff1a; 聚类算法的目的是将数据集划分为不同的组&#xff0c;使得组内…

C++ 矩阵

目录 了解矩阵的数学原理&#xff08;大学线性代数&#xff09; 矩阵及转置矩阵 矩阵乘法 矩阵快速幂 相伴矩阵模板 [相伴矩阵,快速矩阵幂]CSES1722 Fibonacci Numbers 了解矩阵的数学原理&#xff08;大学线性代数&#xff09; 矩阵及转置矩阵 这里A就是一个矩阵&…

uniapp 桌面应用插件 Ba-Launcher

简介&#xff08;下载地址&#xff09; Ba-Launcher 可以让你的应用成为简单的桌面应用&#xff0c;如需扩展功能&#xff0c;请联系我。 截图展示 可关注博客&#xff0c;实时更新最新插件&#xff1a; uniapp 常用原生插件大全 使用方法 使用方法也很简单&#xff0c;在插…

PG数据库结构与oracle比较

1.数据库集簇逻辑结构 数据库集簇概念&#xff1a;一个大的数据库是由若干个小的数据库组成&#xff0c;实现数据的隔离存放&#xff0c;在概念上应该是与mysql一样的 在mysql中可以用show database列出数据库 PG中用\l 数据库对象存放在数据库中&#xff1a; PG中的所有数据…

题解:CF1951E(No Palindromes)

题解&#xff1a;CF1951E&#xff08;No Palindromes&#xff09; 题目翻译&#xff1a;给定一个长度为 n n n 的字符串 s s s&#xff0c;询问是否可以将其分成若干份&#xff0c;使得每一份都不是回文串。若可以&#xff0c;输出 YES 并给出任意一组方案&#xff1b;若不可…

【BASH 常用脚本系列3 -- shell实现查找目录并进入目录】

文章目录 shell实现查找目录并进入目录脚本实现shell实现查找目录并进入目录 在linux中终端下工作,如果要进入一个深度很深的目录的话需要 cd ./xx/xx./.. 执行很多次,用起来很麻烦,有些人就建议使用autojump来实现,但是autojump 的一个缺点是:如果本地有多套代码,只是它…

计算机英文论文常见错误写作习惯3

目录 第一部分 Numbers and Equations ‘such as’ and ‘etc.’ 第二部分 第一部分 Numbers and Equations 两个非常常见的错误是关于阿拉伯数字和方程式的表示。中国作家通常写阿拉伯数字&#xff0c;而不是拼出单词。然而&#xff0c;使用阿拉伯数字本身并不是一个错误…

【Shell】part1-Shell-基础入门篇

part1-基础入门 HelloWorld 创建,编写,运行 Shell 脚本 vim test.sh#!/bin/bash echo "Hello World !"# 1.作为可执行程序运行 chmod ax ./test.sh #使脚本具有执行权限 ./test.sh #执行脚本# 2.作为解释器参数运行 /bin/sh test.sh /bin/php test.php变量 变…

【Python】 逻辑回归:从训练到预测的完整案例

我把我唱给你听 把你纯真无邪的笑容给我吧 我们应该有快乐的 幸福的晴朗的时光 我把我唱给你听 用我炙热的感情感动你好吗 岁月是值得怀念的留恋的 害羞的红色脸庞 谁能够代替你呀 趁年轻尽情的爱吧 最最亲爱的人啊 路途遥远我们在一起吧 &#x1f3b5; 叶…

如何利用STM32F103实现太阳板的光线追踪

如何利用STM32F103实现太阳板的光线追踪 太阳能发电效率的提升一直是绿色能源领域的研究热点。通过太阳板的光线追踪技术&#xff0c;我们可以确保太阳板始终面向太阳&#xff0c;从而最大化其接收阳光的面积&#xff0c;提高能源转换效率。本文将介绍如何利用STM32F103微控制…

Redis第15讲——RedLock、Zookeeper及数据库实现分布式锁

由于篇幅原因&#xff0c;在上篇文章我们只介绍了redis实现分布式锁的两种方式——setnx和Redission&#xff0c;并对Reidssion加锁和看门狗机制的源码进行了分析&#xff0c;但这两种方案在极端情况下都会出现或多或少的问题。那么针对上述问题&#xff0c;比较主流的解决方案…

Linux服务器基本操作

Linux下服务器基本操作指令 Vim 文件名 进入 i编辑 esc退出编辑 &#xff1a;wq 保存退出 Cp -r文件夹 path 完整或…/ Cp 文件 path pwd 查看当前目录 rm -rf 2005 删除文件夹 Mkdir 创建文件夹 squeue查看提交队列 tail -f rsl.out.0000 在运行当前目录下查看进度 Scancel j…

用Scrapy 从数据挖掘到监控和自动化测试

Scrapy 是一个 BSD 许可的快速高级网络爬虫和网络抓取框架&#xff0c;用于抓取网站并从其页面中提取结构化数据。它可以用于广泛的用途&#xff0c;从数据挖掘到监控和自动化测试。 安装scrapy pip install scrapy 爬虫示例 示例代码写入文件 import scrapyclass QuotesSp…

Kylin Linux V10 SP1 aarch64部署k8s集群严重bug

目录 1.部署方式 2.遇到问题 3.问题解决 1.部署方式 通过sealos方式部署 2.遇到问题 适配Kylin Linux V10 SP1 aarch64部署pod 不少出现CrashLoopBackOff 通过命令: kubectl describe pod xxx -n default 查看,发现报错如下: Error response from daemon: OCI …

简约大气的全屏背景壁纸导航网源码(免费)

简约大气的全屏背景壁纸导航网模板 效果图部分代码领取源码下期更新预报 效果图 部分代码 <!DOCTYPE html> <html lang"zh-CN"> <!--版权归孤独 --> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible…

工厂模式和策略模式区别

工厂模式和策略模式都是面向对象设计模式&#xff0c;但它们的目的和应用场景有所不同。 工厂模式是一种创建型设计模式&#xff0c;旨在通过使用一个工厂类来创建对象&#xff0c;而不是直接使用new关键字来创建对象。这样做可以使系统更容易扩展和维护&#xff0c;因为新的对…

图论之最短路算法模板总结

来个大致的分类&#xff1a; 朴素的迪杰斯特拉&#xff1a; 实现&#xff1a; 我们让s表示当前已经确定的最短距离的点&#xff0c;我们找到一个不在s中的距离最近的点t&#xff0c;并用t来更新其他的点。 下面是AC代码&#xff1a; #include<bits/stdc.h> using nam…