HTML做一个个人博客页面(纯html代码)

news2025/7/9 9:01:37

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。


二、✍️网站描述

🏷️ 大学生个人HTML网页设计作品,采用DIV CSS布局制作,页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局,学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="bigbox">
        <div id="banner">
            <img src="picture/banner.png" alt="">
        </div>
        <nav>
            <a class="dangqian" href="">首页</a>
            <a href="duanwen.html">短文</a>
            <a href="rizhi.html">日志</a>
            <a href="liuyan.html">留言板</a>
        </nav>
        <div id="main">
            <div id="main_left">
                <h2>关于我</h2>
                <img src="picture/me.png" alt="">
                <p>
                    <span>姓名</span>:*****<br>
                    <span>性别</span>:男<br>
                    <span>爱好</span>:听歌 踢足球 打游戏<br>
                    <span>性格</span> :开朗<br>
                    <span>家乡</span>:新疆乌恰县<br>
                    <span>专业</span>:计算机网络技术
                </p>
            </div>
            <div id="main_right">
                <h2>热爱生活</h2>
                <p>
                    一、岁月从来不曾静好,只是有人在替你背负枷锁,含泪前行。也许是父母,也许是朋友,也许是陌生人……无论是谁,请记得常怀感恩之心。
                </p>
                <p>
                    二、这个世界并不完美,甚至有点残酷。你无法决定下一段旅途遇见的是好事还是坏事,可你能决定面对它们的态度。你看这个世界的角度,决定了这个世界给你的温度。
                </p>
                <p>
                    三、总会有一件事让你瞬间长大,也总会有一个人让你泪如雨下。愿你早日领教这个世界的深深恶意,让自己活得开心得意。
                </p>
                <p>
                    四、想要与众不同,却总随遇而安,想要做很多未做的事,却在现实棘手的吃喝拉撒前低下了头,我们间歇性热血满腔,长时间迷茫犯懒,别等了,再努力试试看!
                </p>
                <img src="picture/life.png" alt="">
            </div>
        </div>
        <div id="luxing">
            <h2>旅行生活</h2>
            <div>
                <div id="picture">
                    <img src="picture/11.png" alt="">
                    <p>在日月潭</p>
                </div>
                <div id="picture">
                    <img src="picture/22.png" alt="">
                    <p>
                        在毛里求斯
                    </p>
                </div>
                <div id="picture">
                    <img src="picture/33.png" alt="">
                    <p>
                        在马尔代夫
                    </p>
                </div>
                <div id="picture">
                    <img src="picture/44.png" alt="">
                    <p>
                        在玉龙雪山
                    </p>
                </div>
            </div>
        </div>
        <footer>
            <p>
                版权所有©*****
            </p>
        </footer>
    </div>
</body>

</html>



💒CSS样式代码

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body {
    background-color: #4B7C99;
}

#bigbox {
    width: 1000px;
    margin: 0 auto;
}

#banner {
    width: 1000px;
    font-size: 0px;
}

#banner img {
    width: 1000px;
}

nav {
    background-color: #CCD0D9;
    width: 1000px;
    height: 60px;
}

nav a {
    text-decoration: none;
    line-height: 60px;
    margin-left: 50px;
    margin-right: 50px;
    color: #020C16;
    font-weight: bold;
}

nav a:hover {
    color: #1a9be6;
}

.dangqian {
    color: #1a9be6;

}

#main {
    height: 490px;
    width: 1000px;
    margin: 0 auto;
    background-color: #86aacb;
}

#main_left {
    width: 300px;
    display: inline-block;
    background-color: #86aacb;
    float: left;
}

h2 {
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 20px;
    line-height: 30px;
    background-color: #03151F;
    color: #CCD0D9;
}

#main_left img {
    width: 300px;
}

#main_left p {
    margin-left: 10px;
    line-height: 40px;
}

#main_left span {
    font-weight: bold;
}

#main_right {
    position: relative;
    width: 680px;
    margin-left: 20px;
    display: inline-block;
    height: 200px;
}

#main_right img {
    position: absolute;
    width: 260px;
    right: 0px;
    top: 30px;
}

#main_right p {
    width: 400px;
    display: inline-block;
    margin-left: 10px;
    text-indent: 32px;
    line-height: 30px;
    margin-top: 10px;
}

#luxing {
    background-color: #86aacb;
    width: 1000px;
}

#luxing div {
    font-size: 0px;
}

#picture {
    font-size: 0px;
    display: inline-block;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
}

#picture img {
    width: 200px;
}

#picture p {
    font-size: 16px;
    text-align: center;
    line-height: 60px;

}

footer {
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background-color: #CCD0D9;
}

#main_right ul li {
    width: 660px;
    margin-left: 10px;
    font-size: 12px;
    margin-top: 10px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

#main_right ul li span {
    font-size: 14px;
    font-weight: bold;
}

#liuyan {
    width: 660px;
    margin-left: 10px;
    margin: 20px;
}

#liuyan span {
    display: inline-block;
    width: 80px;
    line-height: 40px;
}

button {
    width: 100px;
    height: 30px;
    margin-left: 80px;
}




六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

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

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

相关文章

【网页设计】期末大作业html+css (个人生活记录介绍网站)

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理 ROZRZ 数控程序文档流程管理系统能够实现 NC 数控程序文档及流程的管理&#xff0c;且为企业日后能够进行整体生产资料信息的综合管理做好了在程序代码方面的数据准备&#xff0c;提供了更为方便、快捷、安全的系…

Java——后端开发经验总结(持续更新中)

目录 一、判断实体类 二、图片无法正常显示 三、图片路径存储问题 四、xml注释 五、常用快捷键使用 每日三问 重要配置 一、判断实体类 Assert.notNull&#xff1a; 断言某个值是否为空 优点&#xff1a;告别了if判断为空。缺点&#xff1a;场景比较单一&#xff0c;基本…

【JavaSE】继承那些事儿

目录 1. 继承 1.1 为什么要有继承 1.2 何为继承 1.3 继承的语法 1.4 父类成员的访问 1.4.1 子类中访问父类的成员变量 1.4.2 子类中访问父类的成员方法 1.5 super 关键字 1.5.1 super 关键字能让子类访问父类同名成员变量及方法 1.5.2 super 关键字在子类构造方法所起的作用 1…

STC51单片机21——EEPROM测试

STC89C51RC系列单片机内部EEPROM详细地址表&#xff1a; 第一扇区 第二扇区 第三扇区 第四扇区 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 2000h 21FFh 22…

node.js的pat/fs/events模块以及磁盘遍历的实现

path模块: 概述: path模块是一个内置模块,他里面内置的相关方法来造作的路径地址 导入path模块: const path require(path) 使用方法: //导入对应的path模块 const pathrequire(path) //相关方法 //1.join方法是将多个相关的地址连接成一个地址 (做路径拼接) let pathStrpath…

2022年下半年系统架构设计师下午真题及答案解析

试题一(25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…

2022年数维杯国际大学生数学建模挑战赛开赛公告

各参赛队伍&#xff1a; 为了保证2022年数维杯国际大学生数学建模挑战赛参赛队伍顺利参赛&#xff0c;现将竞赛开赛的相关事项通知如下&#xff1a; 一、时间节点 报名截止时间&#xff1a;北京时间2022年11月17日06:00&#xff08;周四&#xff09; 竞赛开始时间&#xff…

大半夜排查bug:竟然是同事把Redis用成这鬼样子,坑了我

首先说下问题现象&#xff1a;内网sandbox环境API持续1周出现应用卡死&#xff0c;所有api无响应现象。 刚开始当测试抱怨环境响应慢的时候 &#xff0c;我们重启一下应用&#xff0c;应用恢复正常&#xff0c;于是没做处理。但是后来问题出现频率越来越频繁&#xff0c;越来越…

VSCode常用插件

目录1. 简体中文2. git3. 项目文件夹管理4. 文件图标主题5. markdown6. 主题7. Rest API 客户端1. 简体中文 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2. git GitLens — Git supercharged 3. 项目文件夹管理 Project Manager&#xff0c;帮助…

MySQL增删改查语句练习(grade表,student表,subjects表,result表)

目录 问题描述 问题分析 1. 添加操作 2. 修改操作 3. 删除操作 问题实现 1. 添加测试数据 2. 根据题目要求完成crud操作 1. 将地址是西安市的更新为西安科技二路 2. 将S1001的email修改为空的字符串 3. 将第二门课的名字更新为 java基础&#xff0c;课时为60 &#…

基于ssm的固定收益营销系统设计与实现(ERP系统)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

5进程创建FORK

文章目录1. fork函数初识2. fork函数返回值1. fork函数初识 fork函数的作用从已存在的进程中创建一个新的进程,而新进程被称为子进程,原进程称为父进程,我们先看一下当执行fork后会发生什么. 分配新的内存块和内核数据结构给子进程将父进程部分数据结构内容拷贝至子进程添加子…

数据库管理系统

简介 数据库管理系统是一种操纵和管理数据库的大型软件&#xff0c;用于建立、使用和维护数据库&#xff0c;简称 DBMS。它对数据库进行统一的管理和控制&#xff0c;以保证数据库的安全性和完整性。[2] 数据库管理系统是一个能够提供数据录入、修改、查询的数据操作软件&…

MySQL约束和表的复杂查询操作

✨博客主页: 心荣~ ✨系列专栏:【MySQL】 ✨一句短话: 难在坚持,贵在坚持,成在坚持! 文章目录一. 数据库约束1. 数据库常用约束2. not null 约束3. unique约束4. default设置默认值5. primary key约束6. 分库分表下的自增主键7. foreign key约束8. 主键,外键,uniqe运用原理二. …

Android App开发中使用Glide加载网络图片讲解及实战(附源码 简单易懂)

运行有问题或需要源码请点赞关注收藏~~~ 一、使用Glide加载网络图片 对于如何方便快速的显示网络图片&#xff0c;谷歌开发了自己的Glide开源库&#xff0c;同样我们需要在bulid.gradle中引入如下依赖 implementationcom.github.bumptech.glide:glide:4.11.0 Glide用法如下 G…

攻防世界-misc-流量分析1

下载附件&#xff0c;获得一个流量包 wireshark打开 随便选择一个&#xff0c;追踪tcp流 把请求包url解码看看是什么操作 还存在url编码&#xff0c;继续解码 GET /index.php?urlgopher://127.0.0.1:80/_POST /admin.php HTTP/1.1 Host: localhost:80 Connection: close Conte…

SpringBoot+@Validated实现参数验证(非空、类型、范围、格式等)-若依前后端导入Excel数据并校验为例

场景 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出&#xff1a; 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出_霸道流氓气质的博客-CSDN博客 SpringBootVue实现excel导入带格式化的时间参数(moment格式化明天日…

使用image-map编写校区平面示意图

一、效果图 先上一波效果图&#xff0c;手机录制 二、项目中用到的图片 呐&#xff0c;最近领导让俺帮某学校做一个校区平面示意图的移动端项目&#xff0c;用到的图片就是这样的&#xff0c;不过这是截的图片&#xff0c;放大后会模糊&#xff0c;项目中真正使用的图片有6…

HazelEngine 学习记录 - Profiling

Profiling Intro To Profiling 为了能够清晰的观察整个引擎的性能消耗情况&#xff0c;我们需要一个可视化的工具来进行性能分析&#xff0c;例如 Unity 的内置 Profiler&#xff1a; 其实本质就是将每个函数运行的时间进行可视化&#xff0c;这里我们借用标准库 chrono 来进…