使用HTML制作一个简单的个人主页

最新推荐文章于 2024-03-23 13:43:52 发布
VIP文章 最新推荐文章于 2024-03-23 13:43:52 发布
阅读量9.4k 收藏 112
点赞数 11
分类专栏： 前端 html 文章标签： 小程序 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67394360/article/details/123304953
版权

此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。
废话不多说，先来看效果
1、首页
在这里插入图片描述
这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。
2、我的相册
在这里插入图片描述
这一页主要是对大量图片进行一个排版的练习
3、我的计划
在这里插入图片描述
这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习
4、我的家乡
在这里插入图片描述
在这里插入图片描述
这一部分是对段落的细节处理、还有文本与图片结合的练习
5、我的故事
在这里插入图片描述
这个是对表格进阶版的练习，文字都是随便写的。这边其实还可以处理的更加合理，比如说大三下面那段文字可以从左向右排版，而不只是放在中间，由于时间关系，我就没有实现。

下面是代码

<html>
  <head>
     <title>马哈哈的个人主页</title>  
  </head>
     <body background="HTML主页背景.jpg" >
        <h1><p align="center"><font color="black" face="楷体">自我介绍</font></p></h1>
        <hr size="3px" color ="red">
		<center>&nbsp&nbsp<a href="马哈哈.html">首页</a>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="我的相册.html">我的相册</a>
	    &nbsp&nbsp&nbsp&nbsp
最低0.47元/天 解锁文章
免费的东西
关注
  • 11
    点赞
  • 踩
  • 112
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
个人主页程序简洁漂亮HTML代码
01-16
自己用HTML编写的主页程序，简洁高效，适合当成网页程序作业
html个人博客网站模板（源码）
xcLeigh
12-12 2万+
html个人博客网站模板，包括主界面，主要根据类型查询相关的文章，有文章管理，文章详细的模板页面，可以借鉴这个模板，开发自己的博客，容易上手。下载后直接运行。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
制作一个简单的HTML个人网页，步骤如下（包含代码及解释）
最新发布
qq_51182593的博客
03-23 1万+
制作一个简单的HTML个人网页，步骤如下（包含代码及解释）
html实现好看的个人介绍，个人主页模板2(附源码)
xcLeigh
06-17 4954
html实现好看的个人介绍，个人主页模板2(附源码)，第二种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。代码备注详细，可在此基础上更加完善功能，打造属于自己的个人介绍主页。
html个人网页完整代码模板,静态 html 个人主页 模板
weixin_39716971的博客
06-04 1万+
【实例简介】适合html 入门提升使用，其中包含了 html 技术 ，css 技术 ， js 技术 。希望对网友有所帮助。【实例截图】【核心代码】myweb├── myweb│ └── book_store│ ├── css│ │ ├── lightbox.css│ │ ├── style.css│ │ └── style_ie.cs...
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 57万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
简单个人静态HTML网页设计作品——广西北海家乡旅游景点 10页 DIV布局个人介绍网页模板代码 DW个人网站制作成品 web网页制作与实现
VX_WJ88950106的博客
08-17 1092
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
个人主页HTML模板
11-28
个人主页HTML模板 儿童模板 个人模板 主页模板 HTML模板 可爱儿童模板 绘画 斑点 橘黄色背景
个人主页模板HTML
12-08
个人主页模板HTML
我的个人html主页源代码
12-19
我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码
我的个人 html 主页源代码
03-30
我的个人 html 主页源代码。 我的个人html主页源代码
html5个人主页源码
05-26
html5个人主页源码 很好用的源码 欢迎来下载啦
HTML个人主页
06-19
单纯的利用HTML写的一个关于个人主页的一个网页，代码比较简单，适合初学者，易懂
html个人主页，学生网页，DW制作
03-25
这一套个人主页，主要用于学生学习交流，包含：首页，个人简介，兴趣爱好，专业认知和我的相册等5个页面，采用HTML；
博主推荐HTML制作一个美观的个人简介网页（附源码）
05-13
HTML制作一个美观的个人简介网页，利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web；
一个简单的网页制作期末作业，学生个人html静态网页制作成品代码
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
使用HTML和CSS制作一个简单的个人网页
07-10
当然可以！以下是一个简单的个人网页示例，使用HTML和CSS来设计页面布局和样式： ```html <!DOCTYPE html> <html> <head> <title>个人网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { margin: 0; } nav { background-color: #555; color: #fff; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; } nav ul li { margin-right: 20px; } section { padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>个人网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我</a></li> <li><a href="#">联系方式</a></li> </ul> </nav> <section> <h2>欢迎来到我的个人网页！</h2> <p>这里是一些关于我的信息。</p> </section> <footer> <p>版权所有 © 2022</p> </footer> </body> </html> ``` 这段代码创建了一个简单的个人网页，其中包含一个标题，导航栏，内容区域和页脚。你可以根据自己的需求进行修改和扩展。在CSS部分，我们定义了页面的样式，包括颜色、字体和布局。你可以根据自己的喜好进行调整。将这段代码保存为一个HTML文件，并在浏览器中打开，你将看到一个简单的个人网页！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值