html怎样设置背景颜色?HTML背景颜色代码详细分析

本篇文章使用了html的代码和css样式的代码为大家展示了如何设置html的背景颜色,后面还有如何设置背景图片的介绍。希望对大家有所帮助,现在我们一起来看这篇文章吧

首先我们先来看看关于HTML设置背景颜色:

我们首先设置一个背景颜色,把背景颜色设在body标签中我们来看看效果:

PHP中文网这是PHP中文网

背景颜色设置成了黑色,大家能想到在浏览器中显示的效果吗?

1.png

立即学习“前端免费学习笔记(深入)”;

没错就是这个效果,什么都看不到了,我们看看把字体设置一个颜色,看看能不能显示出来:

这是PHP中文网

现在我们来看看效果:

2.png

是不是很明显,在字体里面加个颜色就能显示出来文本,但是还有两个字没有加颜色,所以还是显示不出来。

现在我们来看看如何制作文字的背景:

这是PHP中文网

这时候的font标签已经不管用了,所以我们果断的使用了css样式来改变背景颜色,看的出来吧,这是一个简单的css样式,只设置了一个背景颜色。

我们来看看在浏览器中显示的效果:

3.png

因为p标签的原因,所以背景就把整个一行给全部占据了。这样看起来效果更明显点,所以我也就不框起来了,就当把方法教给大家吧,我们用背景用不了这么多的时候,可以在p标签的外围加上一个div标签,设置宽度为文字的宽度,这样就不会让文字背景成一行显示了,这也是一种常用的方法之一。

当然背景还可以使用图片来做背景图,我们来看看效果实例:

PHP中文网

这是PHP中文网

这是在网上复制的一张图,效果还是很明显的,现在来看看实例:

4.png

这就是当做整个网页的背景了。我们可以从别的地方看到好看的适合做背景图的可以右击那张图片,选复制图片地址,往这url里面一套就行了。这也是很简单的,大家可以在下面多多练习看看效果是不是和我这一样。

这篇关于HTML 设置背景颜色的文章到这就结束了,想学更多就到PHP中文网,HTML学习手册栏目中学习。有问题的可以在下方留言提问。

【小编推荐】

HTML段落元素中怎么设置空格?HTML空格的设置总结

html中big标签如何使用?html big标签的使用实例

以上就是html怎样设置背景颜色?HTML背景颜色代码详细分析的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546993.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:44:13
下一篇 2025年12月21日 18:44:21

相关推荐

  • 一篇文章让你看懂HTML基本规则和网页结构

    如果你不致力于成为美工的话,那么作为开发人员,可以读懂html、必要时能进行简单修改即可。下面跟着我的思路,保证一篇文让你看懂html,当然,再看的过程中,最好自己动手试试,这样理解就更深了。 1、html基本规则 我的网页………………………..…………………. 几乎所有的网页都是按照这个格式来的,…

    好文分享 2025年12月21日
    000
  • HTML简单介绍

    本章给大家带来html简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、HTML是什么?         HTML语言用于描述网页    HTML是指超文本标记语言:Hyper Text Markup Language    HTML不是一种编程语言,而是一种标记语言,标…

    2025年12月21日
    000
  • css+html实现模拟百度首页(附代码)

    本篇文章给大家带来的内容是关于css+html实现模拟百度首页(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 代码如下: Title #biaoqian{ float: right; margin: 10px; } #d2,#d3,#d4,#d5,#d6,#d7,#d8,…

    2025年12月21日
    000
  • html input标签的属性有哪些?input标签的用法总结(附实例)

    本篇文章主要的向大家介绍了关于html input标签的属性,还有关于html input标签的具体的用法总结。让我们一起来看看html input标签有哪些用法吧 首先先来说说html input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为ty…

    2025年12月21日
    000
  • html base标签怎么用?html base标签的用法总结

    本篇文章主要的讲述了关于html base标签的用法介绍,还有关于html base标签的具体用法实例解析,接下来就让我们一起来看这篇文章吧 首先我们先认识下html base标签: 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下,浏览器会从当前文档的URL中提取相应的元素来填写相对UR…

    2025年12月21日
    000
  • html base标签有什么作用?base标签的作用分析(附实例)

    本篇文章主要的介绍了关于html base标签的用法介绍,还有关于html base标签的作用的分析,接下来就让我们一起来看这篇文章吧 首先我们先分析html base标签的作用: base标签是HTML语言中的基准网址标记,它是一个单标签,位于网页头部文件的head标签内,一个页面最多只能使用一个…

    好文分享 2025年12月21日
    000
  • 详谈HTML中script标签(附代码)

    本篇文章给大家带来的内容是关于详谈html中script标签(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 script 元素 在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素,script 元素内部的代码从上而下依次执行。 在引…

    好文分享 2025年12月21日
    000
  • 什么是html文件?html格式如何打开?(图)

    打开html的软件有:1、记事本;2、Adobe Dreamweaver软件;3、sublime text软件;4、notepad软件;5、vscode软件等等。 有时我们会遇到html格式的文件需要打开,那么什么是html格式?该怎么打开html格式的文件?这就需要我们知道什么是html格式的文件…

    2025年12月21日 好文分享
    000
  • html空格代码是什么?html空格代码怎么写?(总结)

    刚开始学习html的时候,会遇到一个这样的问题,html中空格怎么打?有的人可能就直接敲了一下空格键,但是这样是不正确的,毕竟敲的空格键不是一个代码,所以接下来本篇文章就来给大家介绍一下html中空格代码该怎么写。 在html中有五种空格的代码 html中空格代码的写法一:&nbsp(不换行…

    2025年12月21日 好文分享
    000
  • html怎么换行?换行代码是什么?九种html文字换行方法总结

    在用html写网页时,为了让网页中内容看起来整洁流畅,我们需要将其中的文字内容进行换行,那么,html怎么来换行呢?本篇文章就来给大家介绍一下html中给文字换行的方法。 html中换行的方法有很多,其中最为简单的就是利用标签,但是有时我们为了网页的设计,就需要灵活的运用各种不同的方法来实现文字的换…

    2025年12月21日
    000
  • html中如何实现指示器左右两侧排列的轮播(完整代码)

    本篇文章给大家带来的内容是关于html中如何实现指示器左右两侧排列的轮播(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 轮播 /*us-banner*/.py-aboutUs .aboutUs-ele .us-banner .usban-ula li{ width: 2…

    好文分享 2025年12月21日
    000
  • 语义化的HTML结构对布局的好处是什么?

    本章我们就和大家谈谈语义化的html结构对布局的好处是什么?小编觉得挺不错的,现在就分享给大家,也给大家做个参考。 一: 1. 语义化标签只是HTML,CSS不存在语义化。HTML是标签,CSS是属性。 2. 语义化标签简历在文档化页面的基础上面,将网页当做是一个文档,DOM中的D(document…

    好文分享 2025年12月21日
    000
  • 详解HTML中相似的标签和属性的有什么区别

    本章我们给大家介绍详解html中相似的标签和属性的有什么区别。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 【1】 和 标签 相同:都是表示斜体。 区别: (1)表示被强调呈现的内容,是物理上的斜体,没有内容上的意义。 立即学习“前端免费学习笔记(深入)”; (2)标签是“含有语义…

    好文分享 2025年12月21日
    000
  • html下划线怎么设置?html下划线样式实例分析

    这篇文章主要的讲述了关于html下划线的设置方法,还有html下划线的设置实例,本篇都是用css样式来操作的,希望大家多掌握点css样式基础知识。 首先我们要说说怎么设置下划线: 我们知道HTML标签中有下划线u标签( 被加下划线 ),在需要下划线的文字字体加上html下划线标签u即可简单实现下划线…

    2025年12月21日
    000
  • html超链接的下划线怎么去掉?a标签去下划线的方法都在这里

    本篇文章就是关于%ignore_a_1%超链接取消下划线的用法,教你如何快速的去掉html超链接下划线的方法,最后还有相关代码解释,下面就让我们一起看看这篇文章吧 首先我们使用css的基础样式来做一个最简单的去下划线的方法: html a超链接标签,默认有的浏览器显示有下划线,有的没有下划线,大多 …

    2025年12月21日
    000
  • html超链接字体颜色怎么改?超链接字体颜色的更改方法总结

    本篇文章主要的讲述了一个关于%ignore_a_1%超链接文本字体颜色的更改方法,说了一个是纯a标签的文本更改,还有一种是把a标签放在div标签中进行css样式更改。现在我们一起来看文章的内容吧 首先我们先从一个例子开始改超链接的字体颜色: 我们要做的是未被点击时超链接文字无下划线,显示为灰色;当鼠…

    2025年12月21日 好文分享
    000
  • html中的include标签是什么?html include实现配置解析

    本篇文章介绍了关于html中的include的配置用法,让html文件也能实现include的功能,现在我们一起来看看这篇关于html include的文章吧 首先我们介绍html中的include标签是什么? 会编程的人都知道include的用途,他可以让一些公共页面直接调用到你要显示的页面中来,…

    2025年12月21日 好文分享
    000
  • html中滚动条的代码是什么?如何设置html滚动条?

    本篇文章主要介绍了关于html中的滚动条的代码,还有关于html 滚动条代码marquee标签属性的用法,具体的让我们一起来看这篇文章吧 首先我们介绍html中的滚动条代码: 今天我们介绍这个html滚动条标签是marquee. 标签,它是成对出现的标签,首标签和尾标签之间的内容就是滚动内容。标签的…

    好文分享 2025年12月21日
    000
  • html marquee标签如何实现上下滚动,marquee标签的滚动速度设置

    本篇文章主要的向大家介绍了关于html marquee标签的两种用法。一种是让marquee标签中的文本实现上下滚动的效果,还有一种是让marquee标签中的文本滚动的速度更快或者更慢都行。大家还能把两个合起来一起使用。现在让我们一起来看这篇文章吧 首先让我们认识这个html marquee标签: …

    好文分享 2025年12月21日
    000
  • html marquee标签如何设置图片滚动?marquee标签的图片滚动代码实例

    本篇文章主要介绍了关于html marquee标签的属性及其marquee标签的图片滚动用法实例,大家可以多试验实验,这样效果会更好。下面就让我们一起来看这篇文章吧 要想设置图片滚动,我们先了解几个html marquee标签的属性: innerHTML:     设置或获取位于对象起始和结束标签内…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信