开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

div css个人博客

基础概念

div 是 HTML 中的一个块级元素，用于布局和分组其他 HTML 元素。CSS（层叠样式表）则是一种样式表语言，用于描述 HTML 或 XML（包括 SVG 和 XHTML）文档的外观和格式。

相关优势

布局灵活性：使用 div 和 CSS 可以轻松实现复杂的页面布局。
样式分离：CSS 将样式与内容分离，使得网页更易于维护和更新。
响应式设计：通过 CSS 媒体查询，可以实现不同设备上的自适应布局。
可重用性：CSS 样式可以应用于多个元素，提高代码的重用性。

类型

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

应用场景

个人博客是一个非常适合使用 div 和 CSS 进行布局和设计的应用场景。通过合理的布局和样式设计，可以创建出美观、易读、易维护的博客页面。

示例代码

以下是一个简单的个人博客页面的 HTML 和 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>
    <div class="container">
        <header class="header">
            <h1>我的博客</h1>
        </header>
        <nav class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </nav>
        <main class="main">
            <article class="article">
                <h2>文章标题</h2>
                <p>这是文章的内容...</p>
            </article>
        </main>
        <footer class="footer">
            <p>版权所有 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>

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

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
}

.nav ul {
    list-style-type: none;
    padding: 0;
}

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

.main {
    padding: 20px 0;
}

.article {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px 0;
}

参考链接

通过以上示例代码，你可以创建一个简单的个人博客页面，并通过 CSS 进行样式设计。如果你遇到具体的问题，可以详细描述问题，我会尽力提供解决方案。

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

有帮助

没帮助

相关·内容

使用DIV、CSS技术设计的个人博客网页（web期末考试）

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。...二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构..." /> 个人博客 div class="content"> div class="menu"> div class="clear">div> div class="con"> div class="bar">个人简介div> div class="con1...> div class="end"> 个人简介网页 div> CSS样式代码 ul, li, h1, h2, h3, p { } .news li

5601 0

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

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

8705 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

个人博客搭建

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

2.3K14 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

个人博客搭建

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

1.1K4 3

个人博客搭建

个人博客搭建作者：张首富时间：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

Css添加div点击态

0, 0, 0.1); } .active:active::after { display: block; } div...class="active">点击态div>

4.8K2 0

css+div知识温馨

position:relative 或者position:absolute的父元素的位置关于z-index z-index为负值的时候，javascript将不起作用一个站点的css...结构建议采用 base.css+common.css+page.css的模式其中base.css 定义CSS reset 以及一些原子类 common.css 可以定义页面的框架 page.css

1.6K2 0

自学DIV+CSS总结

1、CSS有四种控制方式：行内样式、内嵌式、链接式、导入式（优先级从高到低） 2、CSS选择器有：标记选择器（p、ul、a、li、img、span、input、select、等）、类别选择器（class...8、定位 div和span的区别在于div是块级标记可以包含span但是span不可以包含div，span是行内元素 float定位：可以向左靠紧float：left、float：right向右靠紧...设置成relative z-index：空间定位，z-index值大的在小的上面 9、CSS控制盒子模型所有的div都可以看成盒子，其中内容（content）、边框（border）、间隙(padding...10、设计和编辑div+CSS心得根据设计的ps图，先把页面划分成几个板块（越少越好），然后几个板块的关系以及margin和padding和边框都设计好（做到心中有图，胸有成竹），继续写成对的div...进行命名和声明和注释（解决div不成对和注释少的问题），确定每个块的名字和样式（精确到大小和颜色），最后写代码调试（每个浏览器的方法不一样编写的css可能有不同的样式，需要进行深入研究） 11、补充

2.1K6 0

Div+CSS – 简单布局

--页面层容器--> div id="Header"> div> div id="PageBody"> div id="Sidebar"> div> div id="MainBody"> div> div> div id="Footer"> div> div> 页面如下：常用的css布局代码 font:12px Tahoma；这里使用了缩写，完整的代码应该是

2.8K1 0

css让div居中显示_css页面居中

css中设置div元素居中显示的四种方法一、先确定div的基本样式二、具体实现方法第一种：利用子绝父相和margin: auto实现第二种：利用子绝父相和过渡动画tranform实现第三种：同样是利用子绝父相和...css结构： css"> *{ margin: 0; height: 0; } .warp{ width: 500px; height: 500px; background-color...class="warp"> div class="box">div> div> 二、具体实现方法第一种：利用子绝父相和margin: auto实现给父级div设置相对定位，子元素div...原理：设置了left: 50%;top:50%; 之后，子元素位于如图所在位置，此时，我们需要向左移动子级div宽度的一半，子级div所在位置如图所示向上移动子级div高度的一半，结果如图所示...注意：calc()函数，CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。

9.5K5 0

求一个网页设计作业——个人博客(HTML+CSS)

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。...二、✍️网站描述 ️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。...一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。...="css/style.css" /> div class="banner"> div> div

3604 0

搭建 WordPress 个人博客

因为我的两个站点之前都不是搞纯技术的，现在全部搞成了Linux技术博客，好多人也非常想建立自己的博客。...说实话我之前的站点第5篇文章以内几乎都是讲如何建站很详细（也是为了防止后期忘掉），现在既然进来这个门了，咱们就踏踏实实的用真正的技术搞个wordpress博客！...准备 LNMP 环境 LNMP 是 Linux、Nginx、MySQL 和 PHP 的缩写，是 WordPress 博客系统依赖的基础运行环境。...恭喜，您的 WordPress 博客已经部署完成，您可以通过浏览器访问博客查看效果。...通过IP地址查看：博客访问地址：http:///wp-admin/install.php 通过域名查看：博客访问地址：http://www.yourdomain.com/wp-admin

2.3K7 0

个人博客搭建心得

本文长度为 1855 字，建议阅读 5 分钟搭建博客的初衷我是从18年开始写博客，最初的平台选择在博客园，界面比较清爽，但是博客园主要是针对互联网软件行业的，我发的内容相对来说偏硬件，后来转战CSDN...博客框架的选择对于我这种前端大白，一直搞底层的C和汇编，再去学习HTML+CSS+JS，太难了，不过还好，就像Arduino让电子爱好者无需懂太多编程知识就可以做出作品，现有的很多博客框架可以让我们无需写一行前端代码即可搭建出博客...Github 等代码托管平台上，加上这些平台提供的免费 Page 服务，不用花一分钱就可以拥有一个好看易用的个人博客，何乐而不为呢我的个人博客基本配置域名：mculover666.cn 国内分流...如果不是因为如此丰富的主题模板和插件，不可能获得如此广的应用；其次来看我所使用的Next主题，本来就是一个主题而已，也并不是特别好看，只要懂点网页知识都可以写出来，但是它集成了特别多的第三方服务，使用服务时变得非常方便，这些服务一个人是写不上去的...整个博客搭建完成后，在自己的地盘上可以为所欲为，再也不用受平台限制了，这个博客我准备搬运过来一些以前写过的好文章，后续我还是会以CSDN的博客为主阵地，写日常的工作博客，个人博客主要是分享一些心得体会，

2.8K5 0

大一新生HTML期末作业个人旅游图片博客HTML5 用DIV+CSS技术设计的个人网站（web前端网页制作课作业）

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。...一、‍网站题目个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板、等网站的设计与制作。... 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。...-- Lead Style --> css/style.css" rel="stylesheet" type="text/css">

6302 0

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。...div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。...注释：为了方便截图，对CSS代码进行换行*/ div id="main">DIV水平居中和上下垂直居中CSS Web Design 阿冰的博客 - liweiliang.com Div 上线居中盒子模型演示。... Div 上线居中盒子模型演示。 div> div>

2.8K5 0

个人博客美化教程

");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div...">div id="Loadanimation-center-absolute">div class="xccx_object" id="xccx_four">div>div class="xccx_object..." id="xccx_three">div>div class="xccx_object" id="xccx_two">div>div class="xccx_object" id="xccx_one...">div>div>div>div>document.body.style.overflow="hidden",document.onreadystatechange=(...document.body.style.overflow="visible",$("#Loadanimation").fadeOut(540)},500)}); 6.添加网站logo扫光（注意这个是joe主题的示例,如果是其它博客的需要将

1.1K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭