[HTML_CSS]HTML_CSS实战:制作一个常见的hexo样式的博客

最新推荐文章于 2022-10-23 23:13:36 发布
最新推荐文章于 2022-10-23 23:13:36 发布
阅读量356 收藏 4
点赞数
分类专栏： Full Stack Developer 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013716535/article/details/105986039
版权

目录

背景

上一节个人漫威博客没有使用到div，这一节用起来~~~

示意图

在这里插入图片描述

代码

补充知识点

  • 左边固定，右边自适应

     .content{
        display: flex;
    }
    .left{
     position:fixed;
     }
    .right{
        flex-grow: 1;
        position:absolute;
    }

  • 引用icon,fontawesome
    先认准官网地址：这个https://fontawesome.com/
    注册后会有邮件告诉你引用的代码，copy到html，和css的引入方式差不多。
    然后搜索想要的icon,fa-2x是大小
    eg:

      <i class="fa fa-github fa-2x" aria-hidden="true"></i>

  • px / em / vh
    px : 像素，绝对单位
    em : 针对父元素，采用倍数，相对单位
    vh ：视窗百分比

（下午coding的时候，进入了一个很相似的网站，最后引用的时候尽然收费！！！要去淘宝购买？？？）

基础骨架搭建

  1. 整体

    <div class="content">
	<div class="left"></div>
	<div class="right"><div>
</div>

  2. 左边

    	<nav>
                <section id="info">
                    <img src="images/my.jpg" alt="tina">

                </section>
                <section id="info2">
                    <h1>Tina</h1>
                    <h3>Welcome to see my blog</h3>
                    <ul class="menu">
                        <li>
                            <a href="">主页</a>
                        </li>
                        <li>
                            <a href="">技术博客</a>
                        </li>
                        <li>
                            <a href="">生活</a>
                        </li>
                        <li>
                            <a href="">关于我</a>
                        </li>
                    </ul>
                    <ul class="icon">
                        <li>
                            <a href="">
                                <i class="fa fa-github fa-2x" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="fab fa-cuttlefish fa-2x"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="fab fa-facebook fa-2x"></i>
                            </a>
                        </li>
                    </ul>
                </section>
            </nav>

  3. 右边文章模板

    <div class="right">
<div class="card">
                <div class="article">
                    <header>
                        <span style="font-size:20px;">This is a longer card</span>
                        <span>2020-05-09</span>
                    </header>
                    <hr />
                    <article>
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                    </article>
                    <hr />
                    <footer>
                        <i class="fas fa-tags"> HTML+CSS</i>
                        <a href="">More...</a>
                    </footer>
                </div>
            </div>
           <div>

  4. css

    body{
    margin:0;
}
.content{
    display: flex;
   
}
.left{
   
    width: 22%;
    height:100%;
    background-color: white;
    text-align: center;
    position:fixed;
}
#info{
    background-color: RGB(77,77,77);
    height:180px;
}
#info img{
    width: 100px;
    height: 100px;
    border: 4px solid RGB(234,234,234); 
    border-radius: 50px;
    margin-top:120px;
    
}
#info2{
    margin-top:80px;
}
nav li{
    list-style-type:none;
}
a{
    text-decoration: none;
}
#info2 h1{
    color:RGB(105,105,105);
    font-size: 1.5em;
}
nav,li,a{
    color: RGB(153,153,153);
}
.menu{
  
    margin-top:3em;

}
.menu li{
    margin-top:1em;
}
.menu a{
    align-items:center; 
    margin-right: 2em;
    width:100%;
    margin-top:2em;
}
.icon{
    text-align: center;
    padding-left:6.5em;
    margin-top:2em;
}
.icon li{
    float:left;
    margin-right:1em;
}
.right{
    position:absolute;
    width: 78%;
    flex-grow: 1;
    background-color:RGB(234,234,234);
    margin-left:22%;
   
}
.card{
    background-color: white;
    margin:50px;
}
.article{
    padding:30px;
}
.article header{
    display: flex;
    justify-content: space-between;
}

.article article{
    margin-top:10px;
}
.article footer{
    display: flex;
    justify-content: space-between;
}

整体html代码

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

<head>
    <meta charset="UTF-8">
    <!-- 自适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 为IE服务 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hexo blog</title>
    <script src="https://kit.fontawesome.com/bdcd850d9d.js"></script>
    <link rel="stylesheet" href="css/4.css">
</head>

<body>

    <div class="content">
        <div class="left">
            <nav>
                <section id="info">
                    <img src="images/my.jpg" alt="tina">

                </section>
                <section id="info2">
                    <h1>Tina</h1>
                    <h3>Welcome to see my blog</h3>
                    <ul class="menu">
                        <li>
                            <a href="">主页</a>
                        </li>
                        <li>
                            <a href="">技术博客</a>
                        </li>
                        <li>
                            <a href="">生活</a>
                        </li>
                        <li>
                            <a href="">关于我</a>
                        </li>
                    </ul>
                    <ul class="icon">
                        <li>
                            <a href="">
                                <i class="fa fa-github fa-2x" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="fab fa-cuttlefish fa-2x"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="fab fa-facebook fa-2x"></i>
                            </a>
                        </li>
                    </ul>
                </section>
            </nav>
        </div>
        <div class="right">
            <div class="card">
                <div class="article">
                    <header>
                        <span style="font-size:20px;">This is a longer card</span>
                        <span>2020-05-09</span>
                    </header>
                    <hr />
                    <article>
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                    </article>
                    <hr />
                    <footer>
                        <i class="fas fa-tags"> HTML+CSS</i>
                        <a href="">More...</a>
                    </footer>
                </div>
            </div>
            <div class="card">
                <div class="article">
                    <header>
                        <span style="font-size:20px;">This is a longer card</span>
                        <span>2020-05-09</span>
                    </header>
                    <hr />
                    <article>
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                    </article>
                    <hr />
                    <footer>
                        <i class="fas fa-tags"> HTML+CSS</i>
                        <a href="">More...</a>
                    </footer>
                </div>
            </div>
            <div class="card">
                <div class="article">
                    <header>
                        <span style="font-size:20px;">This is a longer card</span>
                        <span>2020-05-09</span>
                    </header>
                    <hr />
                    <article>
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                    </article>
                    <hr />
                    <footer>
                        <i class="fas fa-tags"> HTML+CSS</i>
                        <a href="">More...</a>
                    </footer>
                </div>
            </div>
            <div class="card">
                <div class="article">
                    <header>
                        <span style="font-size:20px;">This is a longer card</span>
                        <span>2020-05-09</span>
                    </header>
                    <hr />
                    <article>
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                        This is a longer card with supporting text below as a natural lead-in to additional content.
                        This
                        content is a little bit longer.
                    </article>
                    <hr />
                    <footer>
                        <i class="fas fa-tags"> HTML+CSS</i>
                        <a href="">More...</a>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
```

本节代码地址

螺丝钉tina
关注
专栏目录
html+css-实战电商品优购网页制作_源码.zip
03-12
在本实践项目中，我们将深入学习HTML和CSS的基础知识，并通过构建一个名为“电商品优购”的电商网页来提升技能。这个压缩包包含了实现这一目标的所有必要资源，包括源码文件、样式表以及项目规划图。 首先，HTML...
html5实现卡片效果
小时
08-09 1万+
卡片效果              .card{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}         .header{             background-color: #4caf50;
10个实用的CSS样式之悬浮卡片
最新发布
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-23 9256
对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是悬浮卡片首先我们来看看最终的效果到此为止一个简单的悬浮卡片就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。
【每日一练】15—CSS实现好看的卡片效果
web前端开发
06-28 2870
写在前面最近，在做一个新项目，考虑用Tailwind CSS来实现UI效果，这个新出来的CSS框架，很多人说，它是一个用了会上瘾的框架，虽然出来时间不长，但是他的火爆程度，直接向bootstrap靠近，当然，好不好用，这个看每个人的主观感觉。如果你想学习新东西的话，可以去试试，我也是刚刚开始用，我一直觉得，框架这种东西就是锦上添花的，可以帮助我们提升工作效果，但并不一定适...
HTML、CSS卡片悬停交互效果实现
qq_52899829的博客
11-24 565
HTML代码： <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <main class="page-content"> <div class="card">
Hexo博客技巧：添加自定义html页面
Amnesia-Fu的博客
05-10 8633
前言 以前收集了很多有趣的html特效文件，自己也写过不少，但是这些文件都有一个缺点：只能本地浏览。 很早以前就有一个想法，就是将这些文件部署到网站上供人们随时随地浏览，只是一直没能实现。现在有了自己的博客，正好实现完成这个想法。 具体过程 1.首先在博客根目录的source文件夹下，新建一个文件夹用于存放要部署的HTML文件： 我这里建了一个叫HTML的文件夹，里面的子文件夹可以存放各个HTML文件，当然也可以只创建一个主文件夹，直接在里面放HTML文件。 2.然后在博客根目录的配置文件_config
div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS
09-14
本资料包"div+css.rar"专注于讲解如何利用CSS与HTML进行有效的页面布局，尤其对初学者而言，是一份极好的学习资源。 1. **CSS简介**： - CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式...
001简单滚动视差_HTML5_CSS3源码_HTMLCSS_
09-29
【标题】"001简单滚动视差"是一个基于HTML5和CSS3的网页效果示例，它展示了如何利用这两种技术实现一种常见的视觉特效——滚动视差。滚动视差是现代网页设计中的一种流行趋势，它让网页背景以较慢的速度移动，与前景...
网页制作_html_css_
09-28
1. **基础布局**：创建一个简单的静态页面，包括头部、导航栏、主体内容和页脚。 2. **响应式布局**：使页面在不同设备上都能正常显示，例如通过媒体查询实现移动优先的设计。 3. **交互设计**：添加鼠标悬停效果、...
StaticWebPage-master_HTML5_CSS3源码_静态页面_
09-29
在本项目"StaticWebPage-master"中，我们探讨了如何使用HTML5和CSS3来创建一个静态网页。静态页面是不依赖服务器端脚本或数据库交互的网页，它们的内容在用户请求时不会改变。这个实战项目是初学者理解网页开发基础...
Hexo博客添加自定义HTML页面
本该如此
09-16 9641
改 “友链” 为 “ZONE” ,增加了一些以前收藏的特效页面。 顺便说说怎么往博客添加自定义的HTML文件。 首先，在博客根目录的source文件夹下，新建文件夹用于存放HTML文件 这里我建了个ZONE文件夹，然后里面的子文件夹存放各个HTML文件，当然你也可以只创建一个主文件夹，直接在里面放文件也行。 第二步，在博客根目录的配置文件_config.yml文件里，跳过渲染 注意格式：这...
[HTML_CSS]HTML_CSS实战:做一个简单个人博客
stay hungry stay foolish
05-09 2837
这里写目录标题背景示意图代码补充知识点基础骨架搭建填充内容 背景 上一节我们讲了一篇文章快速学会HTML_CSS，这节来实战。 模仿的漫威的一个网站，如有侵权立删。 示意图 代码 补充知识点 margin:0 让块级元素水平居中 !important 避免在权重轻的时候被覆盖，换句话说锁死了这个属性，即使使用内联样式也不会改变 border-radius：10px； 设定外边框圆角 text-decoration:none 链接下面横线消失 基础骨架搭建 VSCode 新建一个html文件，输入！，选
hexo自定义css样式
weixin_43827114的博客
02-18 5511
文章目录自定义CSS部分彩色标签心形转动分类底栏修改配置文件解释站点配置文件主题配置文件 个人博客https://www.renke666.top 尽管在配置文件中做了修改美化了博客，但原有样式还是比较简陋，修改的话就需要自定义CSS样式。这也算是美化博客的一大步进展吧，踩了很多坑。 这篇算是博客的美化部分暂时完结之作，花了很多的精力去美化，整体从十二月初断断续续的忙，寒假初期忙了会也算是忙了有两...
hexo 添加html项目,Hexo 主题制作指南_html/css_WEB-ITnose
weixin_32412379的博客
06-17 594
组织的链接。常用功能的实现Hexo 提供了很多专门的变量及函数，用于在编写主题时使用。请参见 变量列表和 帮助函数列表。这里针对常用的一些功能做对应的介绍。获取站点的所有的文章、页面、标签和分类Hexo 为主题提供了一个变量 site，这个变量包括以下几个成员： site.posts博客里的所有文章列表site.pages所有创建的页面的列表site.categories分类列表site.t...
深度学习优化器 Adam 解析
kyle1314608的博客
03-22 2852
...
通过HTML和CSS设计一个静态网页（练习实例，附完整代码）
热门推荐
微子细的博客
07-04 9万+
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 网页原址：博雅互动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
Hexo不渲染.md或者.html
阿甘的博客
01-14 7217
我们知道，在 source 文件夹下的所有 md 文件或者 html 文件都会被渲染，有时候我们不想这些文件被渲染怎么办？比如很多时候我们想要写一个 README.md 或者一些自定义的页面。比如百度或者谷歌在验证站长权限的时候，通常都会要求在主目录下添加一个 html 文件。 不渲染 md 文件 使用上面的办法虽然不会渲染 md 文件，但是还是将 md 文件转化成了 html 文件，如果
html文件hexo博客,使用hexo做博客网站
weixin_33304597的博客
06-18 190
hexo有什么用？hexo 可以把md文件生成html静态网页。hexo官网：https://hexo.io/zh-cn/本地安装hexo。npm install -g hexo-cli#生成blog(名字任意)文件夹，并且在这个文件夹里面初始化。hexo init blogcd blog#安装依赖包npm install#启动hexo的服务，在本地http://localhost:4000预览博...
CSS3 float布局实战：制作与更新HTML5 header
文章通过一个具体的header组件实例，探讨了JS与CSS的配合，以及老组件如何进行翻新的问题。文中还提到了与重构同事之间的讨论，强调了JS对HTML结构的需求，特别是对于header组件的功能实现和优化。" 在HTML5和CSS3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值