静态网页设计——个人简介网站

前言

使用经典前端三件套HTML+CSS+Javascript编写了一个关于个人简介的静态网页,可以根据自己的需要,十分简单的进行修改。

首页

首页由上方的菜单栏以及菜单栏下面的轮播图组成,再往下走,是关于自己的兴趣爱好的部分,可以将图片和文字修改成自己想要的即可。
在这里插入图片描述

在这里插入图片描述

部分代码如下:

<div class="cssmenu">
		<ul>
		   <li class="active"><a href="index.html">首页</a></li>
		   <li><a href="wdjj.html">我的简介</a></li>
		   <li><a href="sthd.html">我的爱好</a></li>
		   <li><a href="yjfx.html">我的生活</a></li>
		   <li><a href="wdxx.html">我的学校</a></li>
		   <li><a href="wdjx.html">我的家乡</a></li>
           <li class="last"><a href="sqrs.html">给我留言</a></li>
		 <div class="clear"></div>
	    </ul>
	</div>

我的简介

我的简介部分就是简单介绍自己的个人信息。
在这里插入图片描述

部分代码如下:

<tr>
    <td align="center" height="40" style="font-size:30px">姓名</td>
    <td align="center" height="40" style="font-size:30px">xxx</td>
  </tr>
  <tr>
    <td align="center" height="40" style="font-size:30px">外号</td>
    <td align="center" height="40" style="font-size:30px">xxxxx</td>
  </tr>

我的爱好

我的爱好部分介绍自己的个人爱海,把图片和文字一换,就可以改成自己的了,很方便!
在这里插入图片描述

部分代码如下:

<div class="blog_list">
				<h5>1、茶卡盐湖</h5>
				<h5>7 3rd, 2017 , <a>我和朋友</a></h5>
				<div class="blog_para">
					<p class="para"><a class="popup-with-zoom-anim"><img src="images/4.jpg" alt="" width="369" height="200"></a>茶卡盐湖也叫茶卡或达布逊淖尔,“茶卡”是藏语,意即盐池,也就是青海的盐;“达布逊淖尔”是蒙古语,也是盐湖之意。 茶卡盐湖位于青海省海西蒙古族藏族自治州乌兰县茶卡镇附近。地理坐标为东经99°02′~99°02′,北纬36°18′~36°45′。 在茶卡盆地的南面有鄂拉山,北面青海南山,与青海湖相隔;盆地东西长80km,宽30km,面积2400k㎡。茶卡盐湖位于茶卡盆地的西部,长15.8km,宽9.2km,面积154k㎡,湖面海拔3059m;盐湖的边缘呈放射状展布的茶卡河、莫河、小察汗乌苏河等河水入湖,在湖区东部泉水发育,以地下水的形式补给茶卡盐湖湖盆。</p>
					
					<div class="clear"></div>
				</div>
			 </div>

其他

其他页面也类似,我这里不一一列举了。
在这里插入图片描述

在这里插入图片描述

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1Gt4y1Z7Fx/?vd_source=5f425e0074a7f92921f53ab87712357b添加链接描述

具体的代码也在该链接下。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

为什么亚马逊卖家一定要有独立站?新手低成本快速搭建跨境电商独立站完整图文教程

目录 前言&#xff1a;为什么亚马逊卖家一定要有独立站&#xff1f; 为什么不选Shopify建站&#xff1f; 效果展示 一、购买域名 二、购买主机托管 三、搭建网站 前言&#xff1a;为什么亚马逊卖家一定要有独立站&#xff1f; 最近不少卖家朋友来问独立站建站方面的问题…

【Linux系统编程二十六】:线程控制与线程特性(Linux中线程库/线程创建/线程退出/线程等待)

【Linux系统编程二十六】&#xff1a;线程控制与线程特性 一.Linux线程库pthread1.线程控制块2.线程tid3.线程栈 二.线程控制1.线程创建2.线程退出3.线程等待 三.线程的特性1.独立栈2.局部存储3.线程可分离 一.Linux线程库pthread 在Linux中&#xff0c;是没有明确的线程概念的…

快速实现前后端表单交互(minui)

&#xff08;1&#xff09;使用minui快速生成表单 &#xff08;2&#xff09;修改样式&#xff0c;将生成的html文件发送给后端 &#xff08;3&#xff09;前后端交互&#xff08;后端如何处理不太清楚&#xff09; 表单初始化&#xff1a;新增修改&#xff08;包括查看&…

Vue中的计算属性与监听器

聚沙成塔每天进步一点点 ⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料,让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技…

第一次使用缓存,因为没预热,翻车了

△Hollis, 一个对Coding有着独特追求的人△ 这是Hollis的第 437 篇原创分享 作者 l Hollis 来源 l Hollis&#xff08;ID&#xff1a;hollischuang&#xff09; 预热一般指缓存预热&#xff0c;一般用在高并发系统中&#xff0c;为了提升系统在高并发情况下的稳定性的一种手段。…

Qt/C++编写视频监控系统82-自定义音柱显示

一、前言 通过音柱控件实时展示当前播放的声音产生的振幅的大小&#xff0c;得益于音频播放组件内置了音频振幅的计算&#xff0c;可以动态开启和关闭&#xff0c;开启后会对发送过来的要播放的声音数据&#xff0c;进行运算得到当前这个音频数据的振幅&#xff0c;类似于分贝…

西电期末1017.有序序列插值

一.题目 二.分析与思路 简单题。主要考察简单的排序&#xff0c;最后的插入数据同样不用具体实现&#xff0c;只需在输出时多输出一下即可&#xff0c;注意顺序&#xff01;&#xff01; 三.代码实现 #include<bits/stdc.h>//万能头 int main() {int n;scanf("%d…

深入理解 BEM:前端开发中的命名约定革命

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【excel密码】excel保护工作表和保护工作簿的区别

Excel不能编辑大家都知道时设置了工作表保护&#xff0c;在我们平时设置或取消工作表保护的时候也能够看到旁边的工作簿保护&#xff0c;那它的作用是什么呢&#xff1f;今天我们来看一下&#xff0c;工作表保护和工作簿保护的区别是什么吧&#xff01; 先统一讲一下如何设置保…

C# 验证文件共享模式下的多线程文件写入

目录 写在前面 代码实现 调用示例 加锁的情况 不加锁的情况 总结 写在前面 原以为设置了文件共享模式为允许随后写入(FileShare.Write)&#xff0c;就可以实现多线程下的正常写入操作&#xff0c;实际情况是使用该模式后不会报线程独占问题&#xff0c;但是写入的内容是…

AWS(三):如何在AwsManagedAd目录和windowsAD实例之间建立双向信任。

前提&#xff1a; 1.创建好了一个AWS managed AD目录&#xff0c;我的目录域名为:aws.managed.com 2.创建好了一个windows AD实例并提升了为域控服务器,实例域名为:aws2.com 看过我AWS 一和二的应该都会创建windows实例了&#xff0c;切记不能将其无缝加入到aws managed AD的…

计算机组成原理 指令

文章目录 指令指令格式和分类指令格式了解指令 按地址码分类按操作码分类按长度分类按操作类型分类 寻址方式指令寻址数据寻址总结 指令集 指令 指令格式和分类 指令格式 #mermaid-svg-STmkVLDKfpWQue8K {font-family:"trebuchet ms",verdana,arial,sans-serif;fon…

捕捉“五彩斑斓的黑”:锗基短波红外相机的多种成像应用

红外处于人眼可观察范围以外&#xff0c;为我们了解未知领域提供了新的途径。红外又可以根据波段范围&#xff0c;分为短波红外、中波红外与长波红外。较短的SWIR波长——大约900nm-1700nm——与可见光范围内的光子表现相似。虽然在SWIR中目标的光谱含量不同&#xff0c;但所产…

AI模型在专用加速器上的性能分析指标

背景&#xff1a;本文是《AI 编译器开发指南》一书的学习笔记。 AI模型在专用加速卡上性能分析大概流程&#xff1a; 1&#xff09;先计算模型本身的计算访存比&#xff0c;得到模型理论算力带宽需求。 2&#xff09;根据处理器本身支持的操作字节比&#xff08;算力&#xf…

次梯度算法介绍

系列文章目录 最优化笔记&#xff0c;主要参考资料为《最优化&#xff1a;建模、算法与理论》 文章目录 系列文章目录一、次梯度1 定义2 存在性 二、次梯度的计算1 按定义计算2 常用计算规则 三、最优性条件1 无约束优化问题2 约束优化问题 四、次梯度算法1 迭代格式2 收敛性 参…

OpenHarmony从入门到放弃(一)

OpenHarmony从入门到放弃&#xff08;二&#xff09; 一、OpenHarmony的基本概念和特性 OpenHarmony是由开放原子开源基金会孵化及运营的开源项目&#xff0c;其目标是构建一个面向全场景、全连接、全智能的时代的智能终端设备操作系统。 分布式架构 OpenHarmony采用分布式…

Elasticsearch基本操作之索引操作

本文说下Elasticsearch基本操作之索引操作 文章目录 概述创建索引创建索引示例重复创建索引示例 查看索引查看所有索引查看单个索引 概述 由于是使用命令来操作Elasticsearch&#xff0c;可以使用kibana&#xff0c;postman和apifox等工具 我使用了apifox来执行命令&#xff0c…

macbook电脑2024免费好用的系统清理优化软件CleanMyMac X4.14.7

CleanMyMac X2024来帮助你找到和删除不需要的文件。CleanMyMac X是一款专业的mac清理软件&#xff0c;它可以智能地扫描你的磁盘空间&#xff0c;找出并删除大型和旧文件&#xff0c;系统垃圾&#xff0c;iTunes垃圾&#xff0c;邮件附件&#xff0c;照片库垃圾等&#xff0c;让…

【InnoDB数据存储结构】第2章节:InnoDB行格式

目录结构 之前整篇文章太长&#xff0c;阅读体验不好&#xff0c;将其拆分为几个子篇章。 本篇章讲解 InnoDB 行格式。 InnoDB 行格式 InnoDB 一行记录是如何存储的&#xff1f; 这个问题是本文的重点&#xff0c;也是面试中经常问到的问题&#xff0c;所以就引出了下文的 …

力扣 验证二叉搜索树 递归

&#x1f468;‍&#x1f3eb; 题目地址 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left,…