HBuilder X 小白日记02-布局和网页背景颜色

html:

例子1:

整个:

css案例:

1.首先右键,创建css文件

2.在html文件的头部分,引用css,快捷方式:link+Tab键

 <link rel="stylesheet" href=" ">

3.先在css文件里面写个初始化,每个浏览器中默认外边距和内边距的值不同,为了让主流浏览器出来的显示相同,我们把初始的padding,margin都设置为0

知识点:

边距 padding :上内边距[右内边距 下内边距 左内边距];

外边距 margin

通配符后代选择器:

*{

      属性1 : 属性值1;

      属性2 : 属性值2;

      属性3 : 属性值3;

}

它能匹配页面中所有的元素 eg.

若未加弹性布局 即 display:flex;  :

4.弹性布局  display: flex;

下面是加了弹性布局的效果:

5.居中对齐 justify-content:center;

可以看到,图片在网页顶部水平排列到了一起

接下来,我们需要让图片位于网页正中

6.中点对齐(它可以让所有的图片 居中对齐到一条线上)

中点(线)对齐  align-items: center;

可以看到,图片水平排列到网页中部了。

现在网页有了规范,接下来我们就可以追求一下颜色了:

知识点:

7. 线性渐变

 background-image:linear-gradient(渐变颜色,起始颜色,...,结束颜色);

#fff为白色

渐变角度:角度值 指定 渐变的方向(或角度)

1. to left  :设置渐变为从右到左,相当于:270deg

2. to right :设置渐变为从左到右,相当于:90deg

3. to top :设置渐变为从下到上,相当于:0deg 

4. to bottom :设置渐变为从上到下,相当于:180deg 这是默认值,等同于 留空不写

在网页,右击,点击检查

找到对应的代码,然后鼠标点击颜色框,就可以快速的找到想要的颜色了,当找到满意的颜色,就将它粘贴复制到代码里即可。

eg.

注:Ctrl+S 保存,再运行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/364461.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.3V到5V的负电源产生电路(电荷泵电压反相器)SGM3204输出电流0.2A封装SOT23-6

前言 SGM3204 非稳压 200mA 电荷泵负电源产生电路&#xff0c;LCEDA原理图请访问资源 SGM3204电荷泵负电源产生电路 SGM3204电荷泵负电源产生电路 一般描述 SGM3204从 1.4V 至 5.5V 的输入电压范围产生非稳压负输出电压。 该器件通常由 5V 或 3.3V 的预稳压电源轨供电。由于…

Camera Raw:增强

Camera Raw 中的增强 Enhance命令基于 AI 技术提升图像的质量&#xff0c;可用于降噪、生成清晰的细节以及提高图像的分辨率。 ◆ ◆ ◆ 主要用途 1、高 ISO 图像降噪 勾选“去杂色” Denoise&#xff0c;可轻松消除使用高 ISO 设置或在低光环境下拍摄的照片中的噪点。 可以对…

MySQL之如何处理超大分页

如何处理MySQL超发分页&#xff1f; 可以使用覆盖索引解决 【点击进入】 MySQL超大分页处理 在数据量较大时&#xff0c;如果使用limit分页查询&#xff0c;在查询时&#xff0c;越往后&#xff0c;分页查询效率会越低。 示例&#xff1a; select * from user limit 900000…

小白学webgl合集-WebGL中给图片添加背景

一.实现效果 二.逻辑 为了在WebGL中给图片添加背景&#xff0c;主要的逻辑步骤包括初始化WebGL上下文、编写和编译着色器、创建和绑定缓冲区、加载和配置纹理以及绘制场景。以下是代码逻辑的详细说明&#xff1a; 1. 获取WebGL上下文 首先&#xff0c;通过获取<canvas>…

汽车电子工程师入门系列——CAN 规范系列通读

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

互联网大厂核心知识总结PDF资料

我们要敢于追求卓越&#xff0c;也能承认自己平庸&#xff0c;不要低估3&#xff0c;5&#xff0c;10年沉淀的威力 hi 大家好&#xff0c;我是大师兄&#xff0c;大厂工作特点是需要多方面的知识和技能。这种学习和积累一般人需要一段的时间&#xff0c;不太可能一蹴而就&…

Java | Leetcode Java题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; class Solution {public ListNode reverseList(ListNode head) {if (head null || head.next null) {return head;}ListNode newHead reverseList(head.next);head.next.next head;head.next null;return newHead;} }

【Qt】QMessageBox 各种对话框的默认显示效果

1. 函数原型 void about(QWidget *parent, const QString &title, const QString &text)void aboutQt(QWidget *parent, const QString &title QString())QMessageBox::StandardButton critical(QWidget *parent, const QString &title, const QString &…

ONLYOFFICE 8.1版本桌面编辑器测评:重塑办公效率的巅峰之作

在数字化办公日益普及的今天&#xff0c;一款高效、便捷且功能强大的桌面编辑器成为了职场人士不可或缺的工具。ONLYOFFICE 8.1版本桌面编辑器凭借其卓越的性能和丰富的功能&#xff0c;成功吸引了众多用户的目光。今天&#xff0c;我们将对ONLYOFFICE 8.1版本桌面编辑器进行全…

v0.9.6 开源跨平台个人知识管理工具 TidGi-Desktop

在这个信息爆炸的时代&#xff0c;知识管理变得尤为重要。太记(TidGi)&#xff0c;一款基于太微(TiddlyWiki)的知识管理桌面应用&#xff0c;正是为了满足人们对信息整理、知识管理和个人隐私保护的需求而设计的。它不仅能够帮助用户高效地管理和整理信息&#xff0c;还能够自动…

C语言 | Leetcode C语言题解之第205题同构字符串

题目&#xff1a; 题解&#xff1a; struct HashTable {char key;char val;UT_hash_handle hh; };bool isIsomorphic(char* s, char* t) {struct HashTable* s2t NULL;struct HashTable* t2s NULL;int len strlen(s);for (int i 0; i < len; i) {char x s[i], y t[i]…

ElementUI的基本搭建

目录 1&#xff0c;首先在控制终端中输入下面代码&#xff1a;npm i element-ui -S 安装element UI 2&#xff0c;构架登录页面&#xff0c;login.vue​编辑 3&#xff0c;在官网获取对应所需的代码直接复制粘贴到对应位置 4&#xff0c;在继续完善&#xff0c;从官网添加…

“论软件系统架构评估”写作框架,软考高级论文,系统架构设计师论文

论文真题 对于软件系统&#xff0c;尤其是大规模的复杂软件系统来说&#xff0c;软件的系统架构对于确保最终系统的质量具有十分重要的意义&#xff0c;不恰当的系统架构将给项目开发带来高昂的代价和难以避免的灾难。对一个系统架构进行评估&#xff0c;是为了:分析现有架构存…

定时触发-uniapp + uniCloud 订阅消息实战教程(三)

上一节已经对云函数有了一定的了解,但是,为了发送订阅消息,只会云函数还是差了那么一点意思,所以接下来的这一节,将带领大家熟悉一下定时触发。 熟悉定时触发 如果云函数需要定时/定期执行,即定时触发,您可以使用云函数定时触发器。已配置定时触发器的云函数,会在相应…

基于C语言的Jacobi迭代和Gauss-Seidel迭代的方程组求解实现

文章目录 Jacobi迭代方法介绍Gauss-Seidel迭代方法介绍具体代码实现示例题目实现效果 Jacobi迭代方法介绍 Jacobi迭代法是一种简单的迭代求解方法&#xff0c;适用于严格对角占优矩阵。其基本思想是利用当前迭代步的已知解来更新下一个迭代步的解。在C语言实现中&#xff0c;我…

什么是入侵检测系统:综合指南

在网络安全领域&#xff0c;入侵检测系统 (IDS) 长期以来一直是防御威胁的基石。但由于技术在不断发展&#xff0c;绕过它们的技术也在不断发展&#xff0c;因此评估它们是否足以保护系统是至关重要的。 在这篇综合指南中会深入探讨了 IDS 的复杂性&#xff0c;彻底了解了其功…

策略模式(Strategy Pattern)

策略模式 &#xff08;Strategy Pattern&#xff09; 定义 它是将定义的算法家族、分别封装起来&#xff0c;让它们之间可以相互替换&#xff0c;从而让算法的变化不会影响到使用算法的用户。 可以避免多重分支的 if-else、switch语句。 属于行为型模式。 适用场景 如果系…

Redis-在springboot环境下执行lua脚本

文章目录 1、什么lua2、创建SpringBoot工程3、引入相关依赖4、创建LUA脚本5、创建配置类6、创建启动类7、创建测试类 1、什么lua “Lua”的英文全称是“Lightweight Userdata Abstraction Layer”&#xff0c;意思是“轻量级用户数据抽象层”。 2、创建SpringBoot工程 3、引入相…

.net core 的 winform 的 浏览器控件 WebView2

在.NET Core WinForms应用程序中&#xff0c;没有直接的“浏览器控件”&#xff0c;因为WinForms不支持像WebBrowser控件那样的功能。但是&#xff0c;你可以使用WebView2控件&#xff0c;它是一个基于Chromium的浏览器内核&#xff0c;可以在WinForms应用程序中嵌入Web内容。 …

数据结构速成--查找

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 …