【完整代码】用HTML/CSS制作一个美观的个人简介网页

最新推荐文章于 2024-04-09 15:54:41 发布
最新推荐文章于 2024-04-09 15:54:41 发布
阅读量3.1w 收藏 248
点赞数 50
分类专栏： HTML 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54919878/article/details/129620862
版权

【完整代码】用HTML/CSS制作一个美观的个人简介网页


用HTML/CSS制作一个美观的个人简介网页——学习周记1

HELLO！大家好，由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注，于是特意去找了之前写的完整代码，久等啦~

整体结构

这个页面是在自己刚接触前端代码时使用HBuilder所作，以下是建立的项目及文件↓↓↓
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
		<style>
		body 
		{
			background-image: url(img/背景2.jpg);
			background-size: cover;
		}
		div.transbox
		{
		  width: 1050px;
		  height: 420px;
		  margin: 90px 90px;
		  background-color: #ffffff;
		  border: 1px solid #FFFFFF;
		  opacity:0.8;
		}
		
		h1 {text-align: center;}
		h2.ex1 {margin-left:5cm;}
		h3.ex1 {margin-left:5cm;}
		img.ex1{margin-left:5cm;}
		p{text-align: right;}
		p.ex1{margin-right: 2cm;}
		p{color:mediumpurple}
		
		/*cc:change color*/
		a.cc:visited {color:#0000ff;}
		a.cc:hover {color:#ffcc00;}
		</style>
	</head>
	<body>
		<div class="background">
		<div class="transbox">
			
			<h1>个人简介</h1>
			<img src="img/头像.jpg" height="50px" width="50px" class="ex1" />
			<h2 class="ex1">咸盐月饼</h2>
			<h3 class="ex1">学号：**********</h3>
			<h3 class="ex1">班级：**********</h3>
			<h3 class="ex1">学院：电商与物流</h3>
			<h3 class="ex1">学校：<a class="cc" href="http://www.btbu.edu.cn/">北京工商大学</a></h3>
			<p class="ex1">这个人很懒，什么都没有留下......</p>
		</div>
		</div>
		<embed height="50" width="100" src="bgm/Sunburst.mp3">
	</body>
</html>

时隔两年，我终于又想起了这里，完善了两年前自己所做的第一篇笔记~前路漫漫亦灿灿，大家都要加油呀！
在这里插入图片描述

咸盐月饼
关注
  • 50
    点赞
  • 踩
  • 248
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
专栏目录
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
个人介绍网页示例
01-23
一份自己制作的个人网页介绍，html,css,javascript总结网页，代码简单，有兴趣的初学者可以看看，大佬也可以指教一下
博主推荐HTML制作一个美观的个人简介网页（附源码）
05-13
HTML制作一个美观的个人简介网页，利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web；
html制作好看的个人简历(源码)
03-29
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。 效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/129833983
自我介绍的HTML 页面（入门）
最新发布
omit250的博客
04-09 1655
姓名：、性别：、来自：、爱好：
制作一个简单HTML宠物猫网页（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
QQ_____365392777的博客
12-15 1430
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
BASK2312的博客
05-19 1万+
动态的朦胧天空背景图，可以配置个人职业技能，大图标，姓名，年龄，性别，手机号，邮箱，qq号，居住地，户籍，学历，学校，专业等信息，也可以扩展新的。动态的朦胧天空背景图，可以配置自己的图标，个人名言，名字，职称，邮箱，手机号，工作地址等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人工作过的公司，工作的时间，负责的项目，开发工具等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人教育的学校，时间，几学到的东西等信息，也可以扩展新的。出来，个人的掌握的工具，及熟练度等信息，也可以扩展新的。
html制作好看的个人简历(附源码)
热门推荐
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
2021年大一下网页期末作业（纯html+css实现）
008
07-20 2万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 这是我大一下学期的期末作业。发上来给大家参考参考，布局写得比较乱，望大家多给建议。这个网页作业做了首页、相册、视频、文字、关于五个子页面，每个子页面都单独写了一个css。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Css源代码 【首页】 .content { width:100%; }
做人做事的艺术html,低姿态做人做事的艺术
weixin_42429956的博客
06-23 363
低姿态为人处世，高水平传道授业人生路上，时时刻刻表现出高姿态往往会碰壁撞头，“高处不胜寒”，站得越高，受伤的可能性也就越大，所以低姿态为人处世，高水平传道授业，人生之路才能更加平坦。在现实生活中，很多人认为那些低姿态处世的人过于软弱，不可能成就什么大事，事实上，低姿态只是一种表象，只是为了让别人从心理上得到满足，使他们愿意与自己合作。学会在适当的时候保持必要的低姿态绝不是懦弱的表现，这也是低姿态做...
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML源码，个人模板
05-30
有比较多的HTML源代码可以选择，代码比较简单基础，适合初学者使用
StriveTherapyWebsite:Strive Therapy网站的资料库
03-13
StriveTherapy网站
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
制作一个简单HTML西安旅游网页(HTML+CSS)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML大学生个人自我介绍网页示范
2401_83334819的博客
03-24 1007
linux系统管理项目教程</p><p>学校：*******</p><p>专业：计算机应用技术</p><p>网页设计与制作</p><p>探索计算机技术</p><p>姓名：***</p><h2>学习课程</h2><h1>***个人介绍</h1><p>年龄：**</p><p>大数据导论</p><h2>座右铭</h2><h2>简介</h2><p>性别：*</p><p>数据结构</p><p>网页美工
人败皆因懒，事败皆因傲，家败皆因奢
D部落
01-15 294
古人讲究 “修身、齐家、治国、平天下” 中国五百年来可以做到此话的人，前有王阳明，后有曾国藩。 曾国藩在仕途看尽了人世兴衰，看透了得失成败， 他曾专门写下家书，告诫家族子弟三句话： “人败皆因懒，事败皆因傲，家败皆因奢”。 这句话也道出了家庭衰败的原因， 如果一个家庭有这三个暗示，往往是衰败的开端，发现一个就要警醒了！ 人败皆因懒 宋朝的朱熹说过：“天下事，坏于懒与私。”意思就是纵览古今兴衰成败，凡是导致一个人失败的原因，主要就是因为懒惰和自私。 现在很多年轻人都有一个心比天高的梦想.
用css html和js制作一个简单HTML个人网页完整代码
06-12
好的，以下是一个简单的HTML个人网页的完整代码，包括HTML、CSS和JavaScript： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>我的个人网页</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>欢迎来到我的个人网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我</a></li> <li><a href="#">我的作品</a></li> <li><a href="#">联系我</a></li> </ul> </nav> <main> <section> <h2>关于我</h2> <p>我是一个热爱编程的程序员，喜欢挑战和不断学习新技术。</p> </section> <section> <h2>我的作品</h2> <ul> <li><a href="#">作品1</a></li> <li><a href="#">作品2</a></li> <li><a href="#">作品3</a></li> </ul> </section> <section> <h2>联系我</h2> <form> <label>姓名：</label> <input type="text" name="name"><br> <label>邮箱：</label> <input type="email" name="email"><br> <label>留言：</label> <textarea name="message"></textarea><br> <input type="submit" value="提交"> </form> </section> </main> <footer> <p>© 2021 我的个人网页</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #444; color: #fff; padding: 10px; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; } nav ul li { margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; } main { margin: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } section { flex: 1; margin: 10px; padding: 10px; background-color: #eee; border: 1px solid #ccc; } section h2 { margin-top: 0; } form label { display: inline-block; width: 100px; } form input, form textarea { width: 100%; padding: 5px; margin-bottom: 10px; } form input[type="submit"] { background-color: #333; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } form input[type="submit"]:hover { background-color: #444; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` JavaScript代码： ```javascript // 在此处添加您的JavaScript代码 ``` 您可以将上述代码复制到对应的文件中（HTML代码复制到.html文件，CSS代码复制到.css文件，JavaScript代码复制到.js文件），并在本地服务器或者Web服务器上运行您的个人网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值