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

news2024/9/20 14:42:46

前言

使用经典前端三件套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添加链接描述

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

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

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

相关文章

UG/NX许可证使用效率提升新技术

UG/NX许可证使用效率提升新技术 UG&#xff08;Unigraphics NX&#xff09;是Siemens PLM Software公司出品的一个产品工程解决方案&#xff0c;它为用户的产品设计及加工过程提供了数字化造型和验证手段。近年来随着国家对知识产品保护的不断加强&#xff0c;以前使用盗版软件…

vue3+Ts+Hook的方式实现商城核心功能sku选择器

前言 Hooks是React等函数式编程框架中非常受欢迎的工具&#xff0c;随着VUE3 Composition API 函数式编程风格的推出&#xff0c;现在也受到越来越多VUE3开发者的青睐&#xff0c;它让开发者的代码具有更高的复用度且更加清晰、易于维护。 本文将通过CRMEB商城商品详情sku选择…

Bee的批量插入与事务使用

* Bee 在2.2之前,调用批量插入在每个批都会提交commit,但在2.2改为只调用一次且在事务中,在批量插入的方法内容不再提交,而由事务控制. * * 2.2之前,批量插入使用每一个批次提交一次事务; * 这样,当违反主键约束等就忽略的大批量插入效率是很高的; * 但当事务中有批量插…

Golang Leetcode19 删除链表的倒数第N个节点 递归 双指针法+迭代

删除链表的倒数第N个节点 leetcode19 递归 由于本体是倒数第几个节点&#xff0c;非常适合递归 从终到始 的运行方式 func removeNthFromEnd(head *ListNode, n int) *ListNode {// 创建一个虚拟头节点&#xff0c;简化边界条件处理dummy : &ListNode{Next: head}//检查…

【卫星科普】什么是农业一号卫星和农业二号卫星?

农业一号卫星和农业二号卫星是中国自主研发的两颗重要卫星&#xff0c;主要用于农业领域的监测和研究。 农业一号卫星是中国第一颗具备红边波段传感器的卫星&#xff0c;也是世界上第一颗具备红边波段的宽视场多光谱中高分辨率卫星。这对农业农村遥感监测非常重要&#xff0c;…

阿里云ECS服务器无法访问端口(防火墙在关闭状态也启作用)

问题&#xff1a;一直用得好好的端口&#xff0c;突然在某一时间不可以访问这个端口了 &#xff0c;在服务器录入外网地址访问如下图&#xff1a; 先按正常流程检测&#xff1a; 1 先云服务商的管理网站查看防火墙端口是否开放 看了正常开放了端口&#xff0c;如下图&#xff…

HTML5-简单文件操作

文件操作 简介 概念&#xff1a;可以通过file类型的input控件或者拖放的方式选择文件进行操作 语法格式&#xff1a; <input type"file" multiple>属性 multiple&#xff1a;表示是否选择多个文件 accept&#xff1a;用于设置文件的过滤类型&#xff08;MI…

Linux 如何 kill 指定的 python 进程

文章目录 写在前面一、显示python相关的进程二、找到自己想要 kill 的进程&#xff0c;执行下述指令 写在前面 自己的系统是 Ubuntu 20.04 一、显示python相关的进程 ps -ef | grep python显示结果如下 其中&#xff0c;第二列分别是各个进程的 PID 号。 二、找到自己想要…

【38 Pandas+Pyecharts | 奥迪汽车销量数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 数据处理 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 奥迪用户购车时间分布3.2 奥迪各系销量占比饼图3.3 奥迪各系销量…

使用Python和Pygame库创建简单的的彩球效果

简介 Pygame是一款强大的游戏开发库&#xff0c;可以用于创建各种有趣的图形效果。为了更好地了解Pygame的功能&#xff0c;今天我们将要做的是在屏幕上随机生成一些彩色的小球&#xff0c;并使它们以不同的速度和方向移动。当小球碰到屏幕边缘时&#xff0c;它们将反弹。 功能…

小型洗衣机哪个牌子质量好?五款最好用的迷你洗衣机品牌

不得不说洗衣机的发明解放了我们的双手&#xff0c;而我们从小到大就有这个意识&#xff0c;贴身衣物不可以和普通的衣服一起丢进去洗衣机一起&#xff0c;而内衣裤上不仅有肉眼看见的污渍还有手上根本无法消灭的细菌&#xff0c;但是有一款专门可以将衣物上的细菌杀除的内衣小…

仓库出入库登记系统的推荐

在信息时代&#xff0c;仓库管理已成为企业不可缺少的一项工作。我们如何高效、准确地管理仓库的进货、出货以及库存&#xff0c;是每个企业或仓管都需要面对的问题。而一个优秀的仓库出入库登记系统&#xff0c;则能够大大提升仓库管理的效率和准确性。本文将为您推荐一款实用…

NFC物联网开发在智慧校园中的应用

近年来&#xff0c;校园信息化建设速度加快&#xff0c;以物联网为基础、以各种应用服务系统为载体的智慧校园将教学、管理和校园生活充分融合&#xff0c;形成了工作、学习和生活的一体化环境。沉寂已久的NEC 技术&#xff0c;得益于智能手机的普及、无线网络数据速率提高&…

『开发工具篇』- 配置 gradle 等相关依赖镜像源

『开发工具篇』- 配置 gradle 等相关依赖镜像源 1.更换gradle下载源2. 配置setting.gradlekts文件gradle文件 1.更换gradle下载源 使用腾讯云的镜像库https://mirrors.cloud.tencent.com/gradle/ gradle-x.x-all.zip&#xff1a;编译后的二进制发布版以及源码和文档gradle-x.…

FreeRTOS——优先级翻转

1.优先级翻转概念 优先级翻转&#xff1a;高优先级的任务反而慢执行&#xff0c;低优先级的任务反而优先执行 注意&#xff1a;在实时操作系统中不允许出现&#xff0c;在二值信号量中经常出现 2.优先级翻转实战 2.1freertos_demo.c #include "freertos_demo.h" #i…

1.69寸SPI接口240*280TFT液晶显示模块使用中碰到的问题

1.69寸SPI接口240280TFT液晶显示模块使用中碰到的问题说明并记录一下&#xff0c; 在网上买了1.69寸液晶显示模块&#xff0c;使用spi接口&#xff0c;分辨率240280&#xff0c;给的参考程序是GPIO模拟的SPI接口&#xff0c;打算先移植到FreeRtos测试&#xff0c;再慢慢使用硬件…

Algorithm-Left Edge算法

算法输入&#xff1a; 多个段&#xff0c;每个段由两个值表示&#xff0c;例如&#xff08;1&#xff0c;3&#xff09; 算法原理&#xff1a; 将多个段按照左边的值排序放到列表中遍历列表&#xff0c;不断选择没有重叠的段&#xff0c;直到列表遍历结束&#xff0c;将选择…

rk3588中编译带有ffmpeg的opencv

有朋友有工程需要&#xff0c;将视频写成mp4&#xff0c;当然最简单的方法当然是使用opencv的命令 cv::VideoWriter writer;bool bRet writer.open("./out.mp4", cv::VideoWriter::fourcc(m, p, 4, v), 15, cv::Size(640, 512), 1); 但是奈何很难编译成功&#xff…

【python入门】day12:bug及其处理思路

bug的常见类型 粗心 / 没有好习惯 思路不清 lst[{rating:[9.7,2062397],id:1292052,type:[犯罪,剧情],title:肖申克的救赎,actors:[蒂姆罗宾斯,摩根弗里曼]},{rating:[9.6,1528760],id:1291546,type:[剧情,爱情,同性],title:霸王别姬,actors:[张国荣 ,张丰毅 , 巩俐 ,葛优]},{r…

redis的使用、打开、关闭的详细介绍

redis的使用、打开、关闭的详细介绍 1.安装redis cd / cd opt/ wget https://download.redis.io/releases/redis-5.0.5.tar.gz 2.解压redis tar xzf redis-5.0.5.tar.gz 3.执行make cd redis-5.0.5/ make 如果出现找不到make的情况就yum install -y make 如果没有gcc就…