本文主要介绍了前端页面中经典的个人博客的简单实现。以HTML为主体，css，js修饰主体，用到了jquery与boorstrap框架，适合初学者深入学习与了解。

博客首页

<!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"><link rel="stylesheet" href="./css/index.css"><link rel="icon" href="./image/websign.jpg" sizes="16x16" type="image/png"> <title>myblog</title>
</head>
<body><ul><li><a href="index.html" >主页</a></li><li><a href="./messageboard.html">留言板</a></li><li><a href="./aboutme.html">关于我</a></li><li><a href="./visit.html">风景分享</a></li><div class="sumbit"><li><a href="./login.html">登录</a></li><li><a href="./register.html">注册</a></li></div></ul><div class="leadlanguage"><h1>欢迎来到我的个人博客<br>在这里将会分享一些关于风景人文的内容</h1><br><button><a href="./login.html">点此继续</a></button></div><div class="footer"><p>Copyright©2022-  XK blog.com  .All Rights Reserved</p></div>
</body>
</html>

主页面采用背景图对页面进行铺满，导航栏置顶，版权号置于底部。导航栏分为左右两个部分，左边四个部分分别为主页、留言板、关于我，右边两个部分为登录和注册。各部分之间的页面可以相互跳转，以绿黑色调为主。

难点：导航栏的实现

解决方案：采用无序列表对导航栏样式进行设置

留言板

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>留言板</title><link rel="stylesheet" id="templatecss" type="text/css" href="./css/messageboard.css"><link rel="icon" href="./image/websign.jpg" sizes="16x16" type="image/png"> </head>
<body><ul><li><a href="index.html" >主页</a></li><li><a href="./messageboard.html">留言板</a></li><li><a href="./aboutme.html">关于我</a></li><li><a href="./visit.html">风景分享</a></li><div class="sumbit"><li><a href="./login.html">登录</a></li><li><a href="./register.html">注册</a></li></div></ul><form action="" method="" class="basic-grey"><h1>留言板<br><span>Tip:请根据要求进行留言</span></h1><label><span>你的身份:</span><select id="template" name="themplate" onchange="changeStyle();"><option value="basic-grey">学生</option><option value="elegant-aero">程序员</option><option value="smart-green">金融分析师</option><option value="white-pink">业余编码爱好者</option><option value="bootstrap-frm">医生</option><option value="bootstrap-frm">教师</option><option value="dark-matter">其它</option></select></label><label><span>你的名字 :</span><input id="name" type="text" name="name" placeholder="你的全名" /></label><label><span>你的邮箱地址（常用） :</span><input id="email" type="email" name="email" placeholder="你的完整邮箱地址" /></label><label><span>留言 :</span><textarea id="message" name="message" placeholder="你要留言的信息"></textarea></label><label><span>&nbsp;</span><input type="button" class="button" value="Send" /></label></form><script>function changeStyle() {var template = document.getElementById("template");var index = template.selectedIndex;var templatevalue = template.options[index].value;var templatecss = document.getElementById("templatecss");templatecss.setAttribute("href","css/" + templatevalue + ".css");document.getElementsByTagName("form")[0].setAttribute("class",templatevalue);}</script><div class="footer"><p>Copyright©2022-  XK blog.com  .All Rights Reserved</p></div>
</body></html>

留言板页面以表单标签为主

难点：留言板样式的设置，以及整体的布局

个人介绍页面

子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/me.css">
<title>个人介绍</title>
</head><body><div class="jianli"><div class="left"><div class="head"></div><div class="container"><image class="ima" src="./image/me.JPG"><span>xxx</span> </image></div><div class="bottom"></div></div><div class="right"><div class="first"><span></span><span>教育背景/Eudcation</span></div><div class="second"><div class="edu"><span>某某大学</span><span>计算机科学与技术/本科</span></div><span>在校时间:2021.09-2025.06</span></div><div class="first"><span></span><span>个人介绍/Introduction</span></div><ul class="third"><li class="title">爱好:</li><li class="other">看电影、阅读、打羽毛球、听音乐、玩游戏</li><li class="title">性格:</li><li class="other">性格因心情而定，偏内向，倾向于和少数人交流</li><li class="title">其他:</li><li class="other">喜欢植物，喜欢动物</li><li class="other">喜欢纯理论</li><li class="other">喜欢诗经和汉乐府</li><li class="other">喜欢安静，但也不介意喧嚣</li><li class="other">光之使者</li></ul><div class="four"><!-- #BeginDate format:Ch1 -->22/4/10 <!-- #EndDate --></div></div></div></div>
</body>
</html>
<hr />

主页面

<!DOCTYPE html>
<head><link rel="stylesheet" href="css/about.css"><link rel="icon" href="./image/websign.jpg" sizes="16x16" type="image/png"> <title>关于我</title>
</head>
<body><ul><li><a href="index.html" >主页</a></li><li><a href="./messageboard.html">留言板</a></li><li><a href="./aboutme.html">关于我</a></li><li><a href="./visit.html">风景分享</a></li><div class="sumbit"><li><a href="./login.html">登录</a></li><li><a href="./register.html">注册</a></li></div></ul><div class="about"><div class="stars"></div><h3 class="about_tit">About me? About you!</h3><img class="about_bgc" src="./image/about1.JPG" alt=""><div class="me"><!-- 设置一个子窗口，没有滚动条，无边框，宽800，高700 --><iframe src="./me.html" scrolling="no" frameborder="0" width="800px" height="700px"></iframe><span class="me_tit animate ">我愿意做一个矢志前行的逐梦人，志之所趋，穷山距海，不可阻挡，不尽狂澜走沧海，一拳天与压潮头，这应该就是我们这代人的写照吧。靠着一股革命者的勇气，劈波斩浪，闯出狭小水域汇入海洋，何其幸运！我们赶上了中国百年来国运蒸腾日上的时代，我不想辜负这个时代。</span></div><div class="videos"><span>关于你，我总是有很多话想说，可是又怕这些话不能完全表达出我的真心。你只需要知道，倘若你感知到了七分，那我必然有八分真意。关于你，我脑海里自然浮现出来的便是“幸运”和“信任”。爱你不是情话多说一点,而是每天多爱你一些！</span><img class="me_img" src="./image/about2.JPG" alt="" width="40%" height="40%"></div><div class="footer"><p>Copyright©2022-  XK blog.com  .All Rights Reserved</p></div></div>
</body>

个人介绍页面有两个页面，一是以表单标签的子窗口，而是主页面

难点：子窗口的布局，样式的设置

风景介绍页面（bootstrap框架实现的）

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/visit.css">
<link rel="icon" href="./image/websign.jpg" sizes="16x16" type="image/png">
<title>关于我</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.37/assets/js/vendor/jquery.min.js"><\/script>')</script><script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.37/dist/js/bootstrap.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.37/assets/js/ie10-viewport-bug-workaround.js"></script><script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.37/examples/offcanvas/offcanvas.js"></script>
</head>
<body><ul><li><a href="index.html" >主页</a></li><li><a href="./messageboard.html">留言板</a></li><li><a href="./aboutme.html">关于我</a></li><li><a href="./visit.html">风景分享</a></li><div class="sumbit"><li><a href="./login.html">登录</a></li><li><a href="./register.html">注册</a></li></div></ul><div class="container"><div class="row row-offcanvas row-offcanvas-right"><div class="col-xs-12 col-sm-9"><p class="pull-right visible-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button></p><div class="jumbotron"><h1>欢迎来到这里！</h1><p> 下面将会为大家分享一些好玩的地方</p></div><div class="row"><div class="col-xs-6 col-lg-4"><h2>广州塔</h2><image src="data:image/visit/广州塔.jpg" wdith="125px" height="125px"></image><p> 广州塔昵称小蛮腰,其位于中国广东省广州市海珠区(艺洲岛)赤岗塔附近,距离珠江南岸125米,与珠江新城、花城广场、海心沙岛隔江相望。广州塔塔身主体高454米,天线桅杆高146米,总高度600米。是中国第一高塔,是国家AAAA级旅游景区。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--><div class="col-xs-6 col-lg-4"><h2>上下九步行街</h2><image src="data:image/visit/上下九步行街.jpg" wdith="125px" height="125px"></image><p>上下九步行街地处广东省广州市荔湾区,俗称(西关)的上九路、下九路、第十甫路之间,是广州市三大传统繁荣商业中心之一。在漫长的历史长河中,逐步形成了当今商业步行街中西合璧的四大西关风情特色，营造出亮丽的旅游风景线。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--><div class="col-xs-6 col-lg-4"><h2>石室圣心大教堂</h2><image src="data:image/visit/石室圣心大教堂.jpg" wdith="125px" height="125px"></image><p>石室圣心大教堂,位于广州市越秀区一德路。圣心大教堂于1863年6月18日圣心瞻礼日正式举行奠基典礼,故命名圣心大教堂。历时25年始建成,是天主教广州教区最宏伟、最具有特色的一间大教堂。它由法国设计师设计,中国工匠建造而成。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--><div class="col-xs-6 col-lg-4"><image src="data:image/visit/长隆.jpg" wdith="125px" height="125px"></image><h2>长隆旅游度假区</h2><p>广州长隆旅游度假区是综合性主题旅游度假区,总占地面积1万亩,集旅游景区、酒店餐饮、娱乐休闲于一体,拥有长隆欢乐世界、长隆国际大马戏、长隆野生动物世界、长隆飞鸟乐园酒家等设施。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--><div class="col-xs-6 col-lg-4"><image src="data:image/visit/白水寨.jpg" wdith="125px" height="125px"></image><h2>白水寨风景名胜区</h2><p>白水寨风景名胜区位于广州市增城区派潭镇,北回归线穿越其中,被誉为北回归线上的瑰丽翡翠,属山岳型风景名胜区。景区内崇山峻岭,群峰挺拔,其山体高大、山势险峻、线条挺直，集雄、奇、险、秀于一身。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--><div class="col-xs-6 col-lg-4"><image src="data:image/visit/陈家祠.jpg" wdith="125px" height="125px"></image><h2>陈家祠</h2><p>陈家祠堂俗称陈家祠,位于广州市中山七路。陈氏书院筹建于1874年,1894落成,是广东省各地陈氏宗族共同捐资兴建的“合族祠”,为陈氏宗族子弟赴省城备考科举、候任、交纳赋税等事务提供临时居所。 </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><!--/.col-xs-6.col-lg-4--></div><!--/row--></div><!--/.col-xs-12.col-sm-9--><div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"><div class="list-group"><a href="#" class="list-group-item active">沙面岛</a><a href="#" class="list-group-item">白云山</a><a href="#" class="list-group-item">岭南印象园</a><a href="#" class="list-group-item">百万葵园</a></div></div><!--/.sidebar-offcanvas--></div><!--/row--><footer><p>Copyright©2022-  XK blog.com  .All Rights Reserved</p></footer></div>
</body>

风景介绍页面以bootstrap框架为主

难点：bootstrap框架的使用

完整源码地址

https://download.csdn.net/download/qq_60483918/85510714https://download.csdn.net/download/qq_60483918/85510714

个人博客页面的简单实现相关推荐

Asp.net MVC 仿照博客园的简单网站首页列表设计
本来我打算采用ajax提交请求,异步的请求获取数据,但是我发现如果这样的话就会拖慢开发的进度,拖长时间.所以在这篇博客中仿照首页的列表设计其实和左侧列表网站分类采用了同样的方式,通过局部视图的方式呈现 ...
火狐扩展：CSDN 博客页面自动 “阅读全文”
简介实现确定思路编写扩展链接简介经常浏览 CSDN 博客的朋友可能会发现,篇幅较长且皮肤为"大白"的 CSDN 博客并不会自动显示全部文章内容,而是必须由读者手动点击 ...
用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
github+hexo搭建个人博客（1.简单搭建）
github+hexo搭建个人博客(1.简单搭建) 需要使用的软件,我已经放到自己的百度云盘里,网络不好的同学可以自己下载[百度云链接] 安装git 安装node 安装hexo 本地测试申请gith ...
Diango博客--21.实现简单的全文搜索
文章目录 1. 概述 2. 模板:将关键词提交给服务器 3. 视图:查找含有搜索关键词的文章 4. 视图:绑定 URL 1. 概述搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Dja ...
个人博客开发系列：前台博客页面开发部署完成
前言之前使用JS + HTML5 + CSS3 + Node.js + Express.js + Mongodb开发过一个博客网站,也部署了一段时间,但当时刚开始搞前端,写的不是很满意.后来就废弃了 ...
单机 docker 部署fastfds_云服务器使用docker可视化一键部署Wrodpress个人博客，操作简单，适合小白...
原文链接在我的博客: 教你云服务器使用docker可视化一键部署Wrodpress个人博客,操作简单,适合小白 - Kyellow's blogkyellow.gitee.io 前段时间领取了一台云 ...
博客园去除个人博客页面广告
在页面定制css中添加以下代码: /*屏蔽底层广告*/.under-post-card,#under_post_card1,#under_post_card2{display:none; !impor ...
使用vuepress搭建GitHub pages静态博客页面
提前说明:本过程比较详细,相当于手把手的教,针对于不熟悉vuepress的人介绍的,大佬不喜勿喷. 第一步:新建一个GitHub仓库仓库名随便取,不用以 username.github.io 这种方 ...
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...

个人博客页面的简单实现

博客首页

留言板

个人介绍页面

子页面

主页面

风景介绍页面（bootstrap框架实现的）

个人博客页面的简单实现相关推荐

最新文章

热门文章

个人博客页面的简单实现

博客首页

留言板

个人介绍页面

子页面

主页面

风景介绍页面 （bootstrap框架实现的）

个人博客页面的简单实现相关推荐

最新文章

热门文章

风景介绍页面（bootstrap框架实现的）