个人网站、个人博客的设计案例,仅供参考

article/2025/11/10 16:50:11

关于网站的内容,我也是纠结了好久,我这里说的是网站建设的内容。个人网站,大多数人还是做个博客,想着能平时写点内容,发点文章,图片,一些简短的分享什么的。

好,想到就做。

我做了文章,但是关于文章的分类我好纠结,不懂得怎么分类好,因为一开始想法有些局限,那就是文章大分类就作为网站的栏目,但是怎么分都感觉不充分,因为我想以后发的文章肯定是各种各样的,也许是一些分享,也许是一些吐槽,也许是一些学习笔记,一些技术性的文章,或者是纯粹的图片分享,百科知识等等。这样一来,栏目改了好几版,还是没有改到自己满意的。

在这里插入图片描述

后面看了几个知名网站,灵感一来,就干脆文章不在页面上做分类了(后台自己分类),把文章放到首页,只留几个查询条件,并且首页实现无限滚动。

第二个简短的分享、感悟等等内容的实现,我想做出一个类似微信朋友圈的那种,可以随便发几句。于是我做出了个简版的类似的功能,这个内容作为一个栏目,一开始叫“分享圈”,后来叫“动态”。下面有些小分类:资讯、分享、打卡、公告。后来我把打卡去掉了,总觉得跟分享有点重复。

在这里插入图片描述

我看到很多网站都做了个导航,一个是自己用,一个是如果做得好的话,也许能留住一些访客。于是我做了一个简约的导航。

在这里插入图片描述

后面觉得“专栏”、“归档”这种功能是很重要的,我觉得可以提供网站内容的质量,甚至可以增加网站内容的搜索排行。于是我分类一个网站栏目,叫“专栏”,里面的一些封面图片源于网络。专栏内容,相当于网站内容的归类、集锦,我把它分为三种:文章类、动态类、单独页面。这些归类会随着网站内容的增加而增加。

在这里插入图片描述
(图片打码是因为这个图片被CSDN机器识别为非法图片,封面比较性感)

到了这里,网站整体的建设就出来了。
首页,显示文章列表,侧边栏显示精选专栏和精选动态。
动态栏目,显示动态列表,分为资讯、分享、公告。
专栏,显示专栏列表,用封面图提高颜值,点击进去就是对应的内容列表。
导航,参考一些知名导航,自己发挥,效果见图。
此外,还需要做友情链接、留言建议、网站的备案号、免责声明等等。

在这里插入图片描述

在这里插入图片描述

最后还要提一点,现在很多访客都是通过手机访问到你的网站,所以手机端样式一定要适配。

原文地址:个人网站、个人博客的设计案例,仅供参考

感谢您的阅读,欢迎访问我的个人网站:闲乐小站


http://chatgpt.dhexx.cn/article/kJYaURTa.shtml

相关文章

如何用html制作博客页面,HTML个人博客页面

知识点总结:下面的是一个个人博客页面,歌词的段落用的时“p”标签,超链接为“a”标签。 包括鼠标经过的事件:颜色变换;去顶部去底部和指定位置:写入的锚点,点击后可以到制定位置。 刚开始学习ht…

手把手教你十五分钟搭建个人博客网站

文章目录 一、下载二、上传服务器与配置三、加备案号四、关闭所有评论五、删除自豪采用wordpress六、优雅主题配置七、安装md编译器八、自定义站点九、发一篇博客 一、下载 https://cn.wordpress.org/download/下载一个就行: 二、上传服务器与配置 解压&#xff…

HTML+CSS大作业: 个人介绍网页制作作业 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人博客网站制作成品下载

HTML5期末大作业:个人介绍网站设计——个人博客(6页) HTMLCSSJavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、…

个人博客网站建设详细版

前言:在讲个人博客,我要向机灵鹤大佬致以最高的敬意!感谢他提出的技术指导,本章我将以我犯的错误一步步讲述。 1. 购买服务器 我是在阿里购买的服务器,因为我是一名学生的原因我通过认证学生身份参加了阿里云高校计划…

HTML5+CSS大作业——清新春暖花开个人博客网站(6页)

HTML5CSS大作业——清新春暖花开个人博客网站(6页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄…

大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品

🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

SpringBoot注解详解

一、简介 基于 SpringBoot 平台开发的项目数不胜数,与常规的基于Spring开发的项目最大的不同之处,SpringBoot 里面提供了大量的注解用于快速开发,而且非常简单,基本可以做到开箱即用! 那 SpringBoot 为开发者提供了多少注解呢?…

Spring常用注解详解大全(建议收藏)

SuppressWarnings(“deprecation”)**就表示我们忽略了deprecation这样的一个警告。 JDK注解作用总结: Override 表示当前方法覆盖了父类的方法 Deprecation 表示方法已经过时,方法上有横线,使用时会有警告。 SuppviseWarnings 表示关闭一些警告信息…

Spring注解开发详解

学习基于注解的 IOC 配置,大家脑海里首先得有一个认知,即注解配置和 xml 配置要实现的功能都是一样的,都是要降低程序间的耦合。只是配置的形式不一样。 关于实际的开发中到底使用xml还是注解,每家公司有着不同的使用习惯 , 所以这…

spring注解注入详解

1、Spring配置 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:context"http://www.springframe…

Spring @Order注解详解

注解Order的作用是定义Spring容器加载Bean的顺序。 源码 Retention(RetentionPolicy.RUNTIME) Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD}) Documented public interface Order {/*** The order value.* <p>Default is {link Ordered#LOWEST_PR…

Spring注解详解:@ComponentScan自动扫描组件使用

目录 无注解方式component-scan使用 注解方式ComponentScan使用 ComponentScan的扫描规则 无注解方式component-scan使用 之前&#xff0c;我们需要扫描工程下一些类上所标注的注解&#xff0c;这些常用注解有&#xff1a; Controller,Service,Component,Repository 通过在…

Spring注解详解

一、Spring注解驱动开发入门 spring在2.5版本引入了注解配置的支持&#xff0c;同时从Spring 3版本开始&#xff0c;Spring JavaConfig项目提供的许多特性成为核心Spring框架的一部分。因此&#xff0c;可以使用Java而不是XML文件来定义应用程序类外部的bean。在这里面官方文档…

Spring常用注解的详细介绍(包你学明白)

目录 1. 为什么要使用注解&#xff1f; 2. 什么是注解&#xff1f; 3. 在Spring中使用注解的前期准备 4. Component注解的详细介绍 5. Value注解的详解介绍 6. Autowired注解的详细介绍 7. Resource注解的详细介绍 8. 怎么选择基于xml还是基于注解的方式创建对象并赋值呢…

Spring中的注解详细介绍

注&#xff1a;标颜色的需要重点掌握 一、Spring原始注解&#xff1a; Spring原始注解主要代替<bean>标签的配置。 1. Component 说明&#xff1a;使用在类上用于实例化Bean 2. Repository 说明&#xff1a;使用在dao层类上用于实例化…

isnumeric_Python字符串isnumeric()

isnumeric Python String isnumeric() function returns True if all the characters in the string are numeric, otherwise False. If the string is empty, then this function returns False. 如果字符串中的所有字符均为数字&#xff0c;则Python String isnumeric&#x…

isdigit isdecimal isnumeric 区别

一、代码测试 num "1" #unicode num.isdigit() # True num.isdecimal() # True num.isnumeric() # Truenum "1" # 全角 num.isdigit() # True num.isdecimal() # True num.isnumeric() # Truenum b"1" # byte num.isdigit() # True n…

StringUtils.isNumeric使用

网上查"java 判断字符串为数字"阅资料&#xff0c;大部分资料都在讲字符串转为整数的情况&#xff0c;很少资料提及关于负数和小数的情况&#xff0c;最终决定采用StringUtils.isNumberic这个方法差别&#xff0c; 在测试导出时发现有报错&#xff0c;用debug模块一…

Java 字符串的数字校验:isNumeric,isNumericSpace和正则表达式,对比分析

导读 数字类型的判断是项目里常见的场景&#xff0c;相比一大串的非空&#xff0c;instanceof 以及大于小于0的判断&#xff0c;我更倾向于使用工具类 StringUtils 或者 正则表达式 来实现功能&#xff0c;追求代码的简洁和高效。 你可能需要的博客&#xff1a; 正则表达式预编…

StringUtils.isNumeric(str)

在项目中遇到一处bug&#xff0c;调试的结果竟然是StringUtils.isNumeric(String str) 在捣鬼&#xff08;采用的是org.apache.commons.lang.StringUtils&#xff09;&#xff0c;下面的代码是判断一个参数非空&#xff0c;且为整数&#xff1a; if(StringUtils.isNumeric(str)…