开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css制作个人博客

CSS制作个人博客

基础概念

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的外观和格式。通过CSS，可以控制网页的布局、颜色、字体、间距等视觉效果。

相关优势

分离内容和表现：CSS将网页的内容（HTML）和表现（样式）分离，使得网页结构更加清晰，便于维护和更新。
提高可访问性：通过CSS可以更容易地调整网页样式，以适应不同的设备和用户需求，提高网站的可访问性。
减少代码量：使用CSS可以减少HTML中的样式代码，使得HTML文档更加简洁。
易于维护：修改CSS文件可以一次性更新所有相关页面的样式，而不需要逐个修改HTML文件。

类型

内联样式：直接在HTML元素中使用style属性定义样式。
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。
外部样式表：将CSS代码放在单独的文件中，通过<link>标签引入到HTML文档中。

应用场景

个人博客通常需要个性化的布局和设计，CSS在这方面有广泛的应用：

布局设计：使用CSS Grid或Flexbox进行页面布局。
响应式设计：通过媒体查询（Media Queries）实现不同设备上的自适应布局。
动画效果：使用CSS动画和过渡效果增强用户体验。
字体和颜色：自定义字体、颜色和背景，使博客更具个性化。

示例代码

以下是一个简单的CSS样式表示例，用于设置个人博客的基本样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <link rel="stylesheet" href="styles.css">
</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>
    <main>
        <article>
            <h2>欢迎来到我的博客</h2>
            <p>这是我的第一篇文章。</p>
        </article>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px 20px;
}

nav ul li a:hover {
    background-color: #333;
    color: #fff;
}

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
}

参考链接

通过以上示例和参考链接，你可以进一步学习和掌握CSS在个人博客制作中的应用。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

个人博客制作简介

个人博客制作简介大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说个人博客制作简介,希望能够帮助大家进步!!!...个人博客制作简介一、写在前面很久之前自己就做了个人博客了，但是种种原因，没有把自己的制作过程整理记录下来，时间长了重装系统，这些步骤都比较生疏了，导致再想重新捡起有点困难，不过还是尽量回忆整理一下...这是因为我们的个人博客为了节省成本，其实是嵌套到github上面运行的，言外之意，github才是我们的服务器，博客的模式是B/S模式访问。...，然后使用命令初始化： hexo init 博客名（最好英文）此时会在该文件夹下创建这样名称的博客，并且生成一些附属文件。...不蒜子可以给任何类型的个人站点使用，对于hexo，打开themes/主题/layout/_partial/footer.ejs添加上述脚本即可，当然也可以添加到 header 中。

1.1K2 0

【个人博客网站制作】自己不会个人博客网站制作，你会选择用什么博客程序源码？

现在很多人都想制作一个个人博客，前端html静态页面，免费的很多，但是拿到一个静态页面，自己并不知道怎么用。你可以选择下载免费的博客程序源码，或者cms。...这些都是开源免费的程序，用它们来做一个个人博客网站，是可以的。很多新手站长不知道该如何选择合适的博客程序源码来搭建自己的个人独立博客，主要原因还是不太了解这些博客程序的特点。...我记得dede和帝国cms还在用table的时候，phpcms开发模板用的是div+css，界面好看布局又合理。就扩展性来说，不是很好，v9之后，就不再更新了。 6、帝国cms。...之前我写过一篇文章，《个人博客，我为什么要用帝国cms？》，也是在使用了以上这些博客程序源码后写的一个总结，兜兜转转，最后还是使用了帝国cms，作为我的博客程序。...以上这些，仅属于个人观点，每个程序都有它的优缺点，选择什么样的程序源码，看个人的需求和爱好。比如，有程序基础的，喜欢易于开发和灵活性强的，可以选择帝国cms。

4.2K3 0

如何使用HTML制作个人网站（如何搭建个人博客）

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。...一、‍网站题目 ‍个人博客网站、‍个人主页介绍、个人简介、个人博客设计制作、等网站的设计与制作。...二、✍️网站描述 ️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。...页面精美包含多个排版布局，学生网页作业水平制作。一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。...="css/css.css"> 主页 <div class="top

1.7K2 0

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/ 一、菜单思路参考及制作在 CSDN 首页中的菜单部分为一串横排的内容，并且可以进行拖动：首先咱们添加一个行...二、轮播图制作菜单栏之后是一个轮播图：该轮播图占据整行，并且自动进行滚动，那如何制作呢？需要通过行和图片自己设置吗？...其实咱们的行有很多作用，例如在行中设置内容后，设置上的上外边距为负，那么此时就可以往上移动，这样就可以覆盖在这个轮播容器之上了，但是文本却不能进行轮播，这种方法需要额外的制作很多的事情，例如你要设置动画

1.4K3 0

三、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/ 一、首页内容分析此时我们分析一下首页内容：通过以上内容可以得知，这些内容都统一包含在一个块之内，这个块之内包含了多个内容...二、首页内容制作分析完毕后此时我们创建一个行，命名为内容，用于包裹所有内容块：接着设置这个内容块的高度为包裹，高度将随着当前内部内容的增加而增加：你可能会疑问，为啥不设置内边距

9672 0

三、登录页制作《iVX低代码无代码个人博客制作》

该页面我们复习可以的值，首先设置整个页面页面的垂直和水平对其为居中，随后一个容器包裹对应的登录区域，此时我们创建一个页面命名为登录注册页，并且设置水平和垂直...

1.2K2 0

hexo个人博客网站服务制作成镜像部署

本文基于制作-Nginx-1-21-6-免安装包文章的基础上，在腾讯云云服务器(CentOS系统)上基于镜像文件Dockerfile制作 hexo个人博客网站服务镜像。...我们将“hexo个人博客网站”打包成镜像，方便我们部署至服务器中及后续的维护升级。...: [WX20220213-205701%402x.png] docker:build构建命令说明相对比与nginx-1.21.6-tar这个项目的构建代码，只是多了构建 hexo 个人博客网站的页面到...dist 目录这一部分代码: [WX20220213-210127%402x.png] 到这里我们就制作好了 ”hexo个人博客网站服务的镜像“。...docker-compose.yamlcd /home/coder/app mkdir hexo-blog cd hexo-blog vim docker-compose.yaml # 启动个人博客网站

1K4 0

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/ 一、头部导航栏思路参考首先我们可以查看CSDN的博客首页，从中查看一下布局：在以上首页中，我们可以得知其顶部为一个整行...，这个行内容左侧为一个logo，logo右侧为一个输入框，这个输入框输入文本后可以搜索对应的内容，在CSDN中搜索框可以搜索出用户名、下载等内容，在我们只做博客时使个人博客，咱们并不做过多的搜索，在功能设计时咱们只需要搜索出对应的博客内容即可...接着打开APP 文本也可以去掉，只需要再加上右侧的头像即可，最右侧还有一个展开的菜单，在此咱们不不需要制作过多内容，所以该菜单也取消。那如何使一部分内容靠左另一部分内容靠右呢？...二、头部导航栏制作思路搞清楚了咱们开始制作头部导航栏吧，首先创建一个相对应用项目，随后点击前台创建一个页面：点击页面后添加一个主要的行，该行将会包裹所有当前页面内容。...此时设置一下文本框的宽度以及左外边距使其距离左侧有一定距离：接着设置一下输入框字体使其适应当前输入框大小：最后更改一下搜索框的提示文本即可解决：接下来制作右行的内容

1.5K2 0

简约的博客网页制作大学生个人博客网页设计模板学生个人网页成品 DIV简单个人网站作品下载静态HTML CSS个人网页作业源代码

免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星...一、‍网站题目个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板、等网站的设计与制作。... 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。..." /> 博客 <img

8725 0

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/ 一、博客详情页分析博客详情页大体分为顶部标题、发布时间、作者信息、博文内容，底部的评论我们在此不必做悬浮内容...，咱们直接放到博文之下进行显示即可；顶部标题需要注意，不是只限于俩行，因为这是博文详情页，顶部标题肯定是需要显示完毕的，接下来就是发布时间和点赞，点赞在此是需要制作的，接着往下是一个作者信息，在此咱们只需要制作一个头像和右边的昵称即可...，因为这是个人博客并不涉及关注内容，接着下面是富文本内容，富文本我们需要使用富文本容器进行显示，在此处咱们使用富文本框进行代替，在之后的内容编写时在进行对应的赋值即可。...二、博客详情页标题及发布时间制作首先咱们先制作博客详情页的标题和发布时间，此时先把顶部的头部栏复制过来，点击前台添加一个页面，命名为详情页：接着复制整个首页中的主要内容行到详情页之中，因为大体布局一致

1.1K4 0

基于html、css的个人网站（网页制作期末作业）

免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星...一、‍网站题目个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板、等网站的设计与制作。... 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。...其中：（1）html文件包含：其中index.html是首页、其他html为二级页面；（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；（3） js文件包含：js实现动态轮播特效

1.8K4 0

抓取博客园个人主页目录制作

== '__main__': page = int(raw_input('请输入你要抓取的页码总数：')) for num in range(page): #这里输入个人主页...name__ == '__main__': page = int(input('请输入你要抓取的页码总数：')) for num in range(page): #这里输入个人主页

5252 0

黑白简约个人网页制作大学生个人网页设计模板学生个人博客网页成品简单个人网站作品下载静态HTML CSS个人网页作业源代码

免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程 120G干货分享】关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星...一、‍网站题目个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板、等网站的设计与制作。... 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。...其中：（1）html文件包含：其中index.html是首页、其他html为二级页面；（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；（3） js文件包含：js实现动态轮播特效

5092 0

java基于ssm的个人博客系统个人博客网站个人博客项目源码

简介 Java ssm开发的个人博客系统，可以发布博客，照片，站长留言。演示视频 https://www.bilibili.com/video/BV1sf4y1y7Ne/?...share_source=copy_web&vd_source=ed0f04fbb713154db5cc611225d92156 技术 mysql,SSM,css,js,jq 功能简单版(个人)：网站功能...：登录，上传照片，发布博客，首页，博客详情,注册，照片管理，博客管理，给站长留言，查看留言,分页，编辑博客，删除博客，删除照片，分页展示博客和照片，分页展示站长留言，修改登录密码。...增强版角色管理员+注册用户添加功能：博文浏览量，博文评论，用户可以删除自己的评论，博主可以管理该博文以下的所有评论，搜索博文，博客首页展示用户头像，昵称，上传头像，修改基本信息，相册显示用户头像昵称

2.1K0 0

个人博客案例

背景很多人都希望能有自己的博客，但是搭建一个博客需要大量的人力物力，比如说，需要一台一天24小时运行的服务器，需要购买一个域名，备案，自己需要运维服务器，需要繁重的开发工作，从前端到后端事无巨细。...方案设计可以采用腾讯云函数实现，通过Hexo和腾讯云函数能快速构建自己的个人博客。...serverless 安装Hexo $ npm install -g hexo-cli 初始化项目 $ hexo init hexo # 生成hexo目录 $ cd hexo $ npm install 生成博客页面...region: ap-guangzhou website: https://xxx.ap-guangzhou.myqcloud.com 25s › hexodemo › Success 修改博客内容即可

1.6K4 0

搭建个人博客

——快速搭建属于自己的个人博客思路如下： 1.拥有一台虚拟主机或者云服务器，拥有自己的域名 2.将域名解析到虚拟主机或云服务器 3.上传下载的wordpress的源码并进行相关配置 4.上传博客主题简单的四步...，你便拥有了属于自己的个人博客~ 虚拟主机+WordPress搭建如果没有其他需求的话，虚拟主机无疑是最好的选择，成本低而且便于操作，下面我以虚拟主机+wordpress 来进行演示：虚拟主机...大陆外的主机更新于2023年2月1日：我重新搭建了个人博客，原因是原白嫖的美国主机不稳定，故更换为香港，页面加载速度也极大提升了，忠心劝告：第一次就把机子搞好点，否则迁移博客很麻烦，流泪提示！！！...还有一些个性化的配置，在左下角的Argon主题选项如果懒的话，可以直接用我的（我把它放到最下面了，因为我的各种设置有点多，都是在网上搜集到的，以及自己探索出来的[doge]）那么，恭喜你，快速搭建了个人博客...,汐语の小栈,汐语的小栈,汐语的小站","argon_seo_keywords":"汐语,Blog,个人博客,汐语の小栈,汐语的小栈,汐语的小站","argon_article_meta":"time|

2.1K3 0

个人博客搭建

0x001 效果演示 0x002 简单介绍前前后后大概花了一周多的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。...在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以下载源代码，搭建属于自己的个性化博客。...个人博客演示：http://luckyzmj.cn 0x003 Hexo 初级搭建 1. 安装Git Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。...当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图我认为个人博客应该都有自己的风格和特色。...以下列出了可能对你有用的地方：修改主题颜色在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、

2.3K14 0

解决GitHub Pages制作的个人博客无法访问的问题

一、前言最近一段时间应该有很多小伙伴发现自己辛苦做的个人博客无法访问了吧。

1.1K4 0

个人博客搭建

个人博客搭建作者：张首富时间：2020-10-09 w x：y18163201 邮箱：zsf18163201@163.com 博客地址： blog.zhangshoufu.com [TOC] blog...效果展示 www.zhangshoufu.com blog.zhangshoufu.com 博客、笔记编写介绍安装 Typora 软件官网地址为： https://typora.io/ 这个软件目前支持...通过BlogHelper 自动发布到网站下载下来配置好自己要发布的网站之后进行发布，我们这里使用的是博客园，美化博客园使用BNDong 来美化博客园达到我们上面的效果，项目地址: https:/...再到域名解析网站上把 www.zhangshoufu.com解析成CNAME为shoufuzhang.github.io然后我们就可以通过自己的域名访问博客园了。...通过DNS解析直接访问博客园我们在阿里云上面配置一个隐性URL 解析就行，在DNS 解析里面设置，然后就可以正常访问。 ? 截至我们的博客就搭建完成了，如果部署中有问题请联系我微信，或者邮箱

1K7 3

搭建个人博客

博客的开始其实，一切都是为了更好的装逼。好吧，我着相了。最开始想做一个自己博客，主要是因为看到了很多人都有，觉得自己没有太 Low 了。...于是申请了 CSDN 的用户，但是太丑了，于是又申请了博客园，感觉这些都不是我想要的，而做为一个 Emacser 不使用 Github 搭建一个自己的博客，感觉就已经落伍了。...于是就有这最初的一个，相当简陋的利用 Emacs 的 Org-mode 搭建的博客，后来看了 Org-page 这个包，但是，我配置不好啊！为什么为什么！...博客的生活我很喜欢调试自己的博客，但是写博客就不是那么喜欢了，但是我希望能养成一个定期写博客的习惯。...所以，我需要博客，主要是用来装…咳，主要是用来记录我们的生活、工作的内容，这样在下次使用的时候，就能更好的做到了。

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭