博客美化作业详细教程

article/2025/9/24 18:26:02

博客美化作业

第一步 下载作业资源

资源下载

第二步 在文件夹内打开下载资源

单击后缀为HTML文件的网页文件,右击用编译器打开文件夹内资源
在这里插入图片描述
这些软件都可以(除了紫色的)

第三步 准备工作

首先让我们重新看下作业要求:
必须使用“类选择器”来美化网页
1、导航部分:字体18号,加粗,颜色为#006843
2、您的位置:字号为12像素
3、标题(军训感言):加粗,字号为20像素
4、正文部分:字号为14像素,首行缩进2字符,行高30像素
5、给正文部分四周添加边框:实线边框、颜色为#FCEAAA、粗细为1像素

第四步 代码环节

head标签内写 类选择器代码
要求:1、导航部分:字体18号,加粗,颜色为#006843

<style type="text/css">table .navigation/*导航*/{font-size: 18px;color: #006843;text-align: center;font-weight: bold;}
</style>

接下来在tr中的td表格把代码class进去

<tbody><tr><td class="navigation">首页</td><td class="navigation">日志</td><td class="navigation">相册</td><td class="navigation">留言板</td><td class="navigation">关于我</td></tr>
</tbody>

原样式:
在这里插入图片描述
align="center"属性由于我们在类选择器中已经设置了居中,删除此属性即可。
class引入即可。
要求 2、您的位置:字号为12像素
在内容处添加您的位置
之后创建完类选择器,class导入样式。

  <td height="20" align="right" bgcolor="#FFFFDB" class="location">您的位置&nbsp;:&nbsp; 首页&gt;&gt;日志&gt;&gt;大学生活   </td>

返回head标签内写

.location/*您的位置*/{font-size: 12px;}

在td内导入location类的样式
在这里插入图片描述
设置字体为12号
要求 3、标题(军训感言):加粗,字号为20像素

.a /*标题部分*/
{font-size: 20px;font-weight: bold;
}

在td里class引入样式
在这里插入图片描述
要求 4、正文部分:字号为14像素,首行缩进2字符,行高30像素

.article/*正文*/{text-indent: 2em;font-size: 14px;line-height: 30px;}

给p标签class=“article”
在这里插入图片描述 要求 5、给正文部分四周添加边框:实线边框、颜色为#FCEAAA、粗细为1像素(可以不做)

 .bk{border:1px solid #FCEAAA; border-collapse: collapse;border-top:none;border-bottom:none;}

在这里插入图片描述
空格+bk让属性有多个类选择器
下面依次
在这里插入图片描述
然后就完成了!!
完成截图
在这里插入图片描述
对比作业效果图无异常。
作业完成
资源链接:https://download.csdn.net/download/qq_45088992/12430878
点击下载查看完整代码。


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

相关文章

【全网最全的博客美化系列教程】04.访客量统计的实现

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.访客量统计的实现 【全网…

Hexo博客美化之——IP签名图一网打尽

love421个人博客地址&#xff1a;https://www.makedreamsir.xyz IP签名图可以实时显示来访者的坐标&#xff0c;IP地址&#xff0c;操作系统&#xff0c;浏览器等等。 使用方法&#xff1a;将下面生成的链接插入到合适的位置即可。 项目原地址&#xff1a;点我打开 原作者博…

Web前端:博客美化:一、模板美化

1、选用模板simplememory 2、写css放在 这些会覆盖掉原来的css样式 我是在网上找的css代码二次加工的 : &#xff09; /*1、针对simplememory的修改*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, …

Hexo博客之主题美化

据说 NexT 是使用最多的Hexo主题,原因当然是比较漂亮啦!这个项目托管于github上,你可以fork一下,贡献代码。NexT官网上面给出了详细的主题配置过程,这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置,请参考NexT官网。这篇文章介…

csdn写博客美化代码显示

本人写博客只是随笔记录&#xff0c;并不是很正规&#xff0c;见谅。 最近在写博客的时候发现自己贴的代码块就只显示代码&#xff0c;而一些前辈的代码块是这样的&#xff1a; 上图只看格式&#xff0c;代码无实际意义。 下面是我的代码块&#xff1a; 我写的代码块就…

【学习之博客美化】matery主题

为了方便我们这里使用 "Visual Studio Code"打开文件 将博客改为中文 目录&#xff1a;E:\IsQiyaBlog 将 " _config.yml " 文件中代码段 language: en 改为 language: zh-CN 修改主题菜单栏 将它们填上内容 新建分类 categories 页&#xff1a; hexo …

Hexo博客美化之蝴蝶(butterfly)主题魔改

这里写自定义目录标题 首先下载主题配置博客主题_config.yaml配置前须知_config.yaml配置简单介绍 如果参考我的脚手架&#xff0c;大家可以阅读readme和changelog文件&#xff0c;和蝴蝶主题官方文档。 tip: 由于butterfly主题升级至3.0.1&#xff0c;所提供的源码不在进行维护…

Vuepress博客美化技巧

文章目录 导航栏透明背景图填充跳转样式悬浮气泡背景图填充导航栏透明图片中的点击向下跳转的样式悬浮气泡 导航栏透明背景图填充跳转样式悬浮气泡 背景图填充 效果图&#xff1a; 下面的小框扩展到大框&#xff0c;让后面的导航栏透明更完善一些。 编辑Theme/components/Ho…

个人博客美化界面

先看一下我的界面 进入个人博客———管理——设置 在CSS代码框中输入一段代码&#xff0c;如下&#xff1a; /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter t…

Wordpress(Argon)主题博客美化

前言 常言道&#xff1a;工欲善其事必先利其器&#xff0c;在发表文章前&#xff0c;美化博客&#xff0c;使其利于自己的观看与管理极其重要&#xff0c;所以我四处搜寻&#xff0c;得到了以下美化代码。 但是&#xff0c;有时候我们走得太远&#xff0c;会忘了为什么出发。…

Hexo博客美化

Hexo博客美化 我们搭建好自己的博客以后&#xff0c;可以在hexo官网的 主题 中选择自己喜欢的博客主题&#xff0c;可以直接在主题中点开预览主题样式或者打开主题项目的 github 地址&#xff0c;将该主题下载到我们自己的博客项目中的 theme 文件夹中&#xff0c;然后在 _con…

个人博客美化

文章目录 Butterfly 主题安装修改博主头像生成文章唯一链接本地搜索SitemapRSS追番插件夜间模式繁星&#xff08;宇宙&#xff09;背景添加页脚徽标和计时器关于页面 总体参考&#xff1a; Butterfly 文档&#xff1a;https://butterfly.js.organzhiyu &#xff1a;https://anz…

个人博客美化(总结、分享)

博客美化&#xff08;经验&#xff09; |主题&#xff1a;EVA、新世纪福音战士、初号机、二号机 |颜色&#xff1a;基础黑白、紫色、绿色、红色 |取材&#xff1a;P站、贴吧eva |我这里只写我的经验&#xff0c;具体的参考主题作者写的笔记具体 修改主题为中文 ​ 这个其实我解…

个人博客网站的美化

文章目录 更换Next主题网站基本设置添加页面动态背景鼠标点击效果图设置站点建立时间设置头像修改网站图标添加RSS添加fork me Github修改文章底部带#号的标签在每篇文章末尾统一添加“本文结束”标记博文压缩修改代码块自定义样式侧边栏社交链接小图标添加热度添加音乐网站底部…

博客园美化教程

博客园美化教程 一、进入管理>设置>勾选下面的JS权限&#xff0c;然后填写一下开通的理由等待管理员进行审核通过。 二、选择下面的博客皮肤 三、贴入以下CSS代码到自定义&#xff0c;并禁用CSS默认模板 *,.Cal{padding:0}::-moz-selection{background:#807dd4;color:#…

Hexo 博客优化之博客美化系列(持续更新)

2022-01-25 更新&#xff1a;博客新地址&#xff1a;https://www.itbob.cn/&#xff0c;文章距上次编辑时间较远&#xff0c;部分内容可能已经过时&#xff01; 本文将讲述一些 Hexo 博客的美化&#xff0c;本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X 主题为例…

选股+择时策略组合

导语&#xff1a;本文讨论交易中两个非常重要的命题&#xff1a;选股择时&#xff0c;并将其两者结合起来开发策略。下文会给出样例并附上源码链接&#xff0c;感兴趣的朋友可以直接前往BigQuant一键克隆进一步研究。 选股就是要选一只好股票&#xff0c;而择时就是选一个好的买…

量化选股策略模型大全

原文链接&#xff1a;原文 量化选股就是利用数量化的方法选择股票组合&#xff0c;期望该股票组合能够获得超越基准收益率的投资行为。量化选股策略总的来说可以分为两类&#xff1a;第一类是基本面选股&#xff0c;第二类是市场行为选股。 基本面选股主要有多因子模型、风格…

如何通过形态选股构建量化策略?

形态选股是各类炒股软件必备的重要功能&#xff0c;用户手动选择股票及其K线区间后&#xff0c;软件能够基于给定“形态匹配度”筛选出最相似的股票。 然而&#xff0c;手动的方式往往覆盖面较低&#xff0c;也较为麻烦。所以&#xff0c;我们将通过形态选股的方式构建量化策略…

二、量化选股

文章目录 总体介绍一、基本面选股1、因子选股判断方法五个步骤 2、风格轮动3、行业轮动 二、市场行为选股1、资金流2、动量反转基本概念&#xff08;1&#xff09;行为金融学&#xff08;2&#xff09;阿尔法动量模型 3、一致预期4、 趋势追踪基本概念 5、筹码选股基本概念1. 筹…