HTML---CSS美化网页元素

文章目录

  • 前言
  • 一、pandas是什么?
  • 二、使用步骤
    • 1.引入库
    • 2.读入数据
  • 总结

 一.div 标签:

<div>是HTML中的一个常用标签,用于定义HTML文档中的一个区块(或一个容器)。它可以包含其他HTML元素,如文本、图像、表格、链接等。

语法: 

<div>这是一个div区块</div>
#可以通过CSS样式为<div>标签设置宽度、高度、背景色、边框等样式属性,从而美化和定位页面中的内容。
<div style="width: 200px; height: 200px; background-color: red; border: 1px solid black;">这是一个红色的div区块</div>

案例 

<body>
	<div>
		<h1>京东商城的全部商品分类</h1>
		<h2>图书 音响 电子书刊</h2>
		<p><span>电子书刊</span>电子书 网络原创 数字杂志<br/>
			<span>音响</span>音乐 影视 教育视频<br/>
			<span>经管励志</span>经济 管理 励志<br/>
		</p>
		<h2>家用电器</h2>
		<p> <span>大家电</span>平板 空调 冰箱<br/>
			<span>生活电器</span>净化器 电风扇 饮水机<br/>
		</p>
</body>

 

 

 二.字体样式

 

font-family 

此处演示第一种,剩余几种参考上图。

语法:

font-family: font1, font2, font3,...;

案例:

<head>
	<meta charset="utf-8">
	<title></title>
	<style> <!--匹配所有body内元素应用CSS样式-->
		body{font-family:"华文行楷";}
	</style>
</head>

 

 font-style

语法:

font-style:属性值
font-style中的属性值
normal使用默认的字体样式
italic使用斜体字体样式。
oblique使用倾斜字体样式。

 font-weight

 font-weight属性值
normal默认值,表示正常粗细
bold表示粗体
bolder比normal更粗的粗体。
ighter比normal更细的粗体

 三.文本样式

 语法:

color:CSS样式;
text-align:CSS样式;
text-indent:20px;
line-height:25px;
text-decoration:CSS样式;

案例: 

<style type="text/css">
		h1{
			color: red;
			font: oblique bold 20px "华为楷体";
			text-align: center;/**设置文本居中对齐*/
		}
		p{
			text-align: left;
			text-indent: 2em;/**设置文本首行缩进2字符**/
			text-decoration: underline;/**添加下划线**/
			line-height: 50px;/**设置行高**/
		}
</style>	

 

 text-align

 text-align 属性值
left左对齐文本
right右对齐文本
center居中对齐文本
justify两端对齐文本,行末不留空。
initial将text-align属性重置为默认值。
inherit继承父元素的text-align属性值

text-ident 

text-ident 属性值
像素值(px)正数表示向右缩进,负数表示向左缩进。
百分比(%)相对于包含块的宽度进行缩进,正数表示向右缩进,负数表示向左缩进。
em相对于当前元素的字体大小进行缩进,正数表示向右缩进,负数表示向左缩进。
rem相对于根元素的字体大小进行缩进,正数表示向右缩进,负数表示向左缩进。
浮点数(-10px)相对于包含块的宽度进行缩进,正数表示向右缩进,负数表示向左缩进。
inherit继承父元素的text-indent属性值。

text-decoration: 

text-decoration:
underline设置下划线
none移除下划线

  四.垂直对齐方式

在HTML中,垂直对齐是指将元素的内容在垂直方向上对齐到指定的位置

 语法:

<style type="text/css">/**需要同时设置图片和文本居中**/
			img,span{vertical-align: middle;}/**文本需要图片作为参照物**/
</style>

<p><img src="index1.png" alt="高管团队" width="176px" height="108px">
				<span>电子书刊</span>电子书 网络原创 数字杂志<br/>


总结

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

adb: error: cannot create file/directory ‘d:/1.png‘: No such file or directory

将文件从设备读取到PC 由于权限问题&#xff0c;不能直接pull到电脑磁盘根目录&#xff0c;否则会报错&#xff1a; adb pull <remote> <local> eg: C:\Users\admin>adb pull /sdcard/server.log C:\Users\admin\Desktop /sdcard/server.log: 1 file pulled.…

AI创作系统ChatGPT网站源码,支持AI绘画,支持GPT语音对话+智能思维导图生成

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

客观题测试-第7章查找

第1关&#xff1a;查找客观题测试&#xff08;一&#xff09; 1、关键字可以唯一地标识一个数据元素。 A、对 B、错 2、二叉排序树是一个动态查找表。 A、对 B、错 3、如果顺序表中各元素的查找概率相同&#xff0c;在顺序查找时&#xff0c;查找不成功的平均查找长度因…

nodejs微信小程序+python+PHP国漫推荐系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

TrustZone之其他设备及可信基础系统架构

一、其他设备 最后,我们将查看系统中的其他设备,如下图所示: 我们的示例TrustZone启用的系统包括一些尚未涵盖的设备,但我们需要这些设备来构建一个实际的系统。 • 一次性可编程存储器(OTP)或保险丝 这些是一旦写入就无法更改的存储器。与每个芯片上都包含相同…

【Vue2】Component template should contain exactly one root element.

问题描述 [plugin:vite:vue2] Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.原因分析 这个错误通常是由于 Vue 组件的模板中包含多个根元素导致的。Vue 要求组件模板中只…

图片速览 PoseGPT:基于量化的 3D 人体运动生成和预测(VQVAE)

papercodehttps://arxiv.org/pdf/2210.10542.pdfhttps://europe.naverlabs.com/research/computer-vision/posegpt/ 方法 将动作压缩到离散空间。使用GPT类的模型预测未来动作的离散索引。使用解码器解码动作得到输出。 效果 提出的方法在HumanAct12&#xff08;一个标准但小规…

13.FTP

FTP FTP配置 添加一个本地用户 设置个密码 服务类型是FTP 工作路径授权给用户 设置用户角色为网络管理员 开启FTP服务 R2的路径下有这些文件 在R1进行测试&#xff0c;输入刚才创建的用户密码 get 获取文件 put上传文件 也可以在PC进行访问 可以升级路由器系…

阅览窗格功能虽然便利,但有时会出错,特别是在Word和Excel文件中更为常见

当你打开预览窗格功能时&#xff0c;每次你打开Windows文件资源管理器并选择任何文件&#xff0c;你将在屏幕的右窗格上看到该文件的小预览缩略图。 由于这个新功能&#xff0c;你可以在Windows资源管理器的右窗格上以缩略图的形式看到文件的小预览。此功能在更快地识别文件方…

SVN小白常见操作流程

SVN小白常见操作流程 一、什么是Subversion&#xff1f;二、TortoiseSVN客户端安装教程三、SVN 操作3.1 SVN Ckeckout(检出)3.2 Add(新增文件)3.3 SVN Commit(提交)3.4 SVN Update(更新操作)3.5SVN Delete(删除操作)3.6 SVN Revert to a revision(版本回溯)3.7 不同版本内容之间…

三大主流前端框架介绍

在前端项目中&#xff0c;可以借助某些框架&#xff08;如React、Vue、Angular等&#xff09;来实现组件化开发&#xff0c;使代码更容易复用。此时&#xff0c;一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成&#xff0c;而是按照组件的思想将网页划分成一个个组…

风速预测(六)基于Pytorch的EMD-CNN-GRU并行模型

目录 前言 1 风速数据EMD分解与可视化 1.1 导入数据 1.2 EMD分解 2 数据集制作与预处理 2.1 先划分数据集&#xff0c;按照8&#xff1a;2划分训练集和测试集 2.2 设置滑动窗口大小为96&#xff0c;制作数据集 3 基于Pytorch的EMD-CNN-GRU并行模型预测 3.1 数据加载&a…

ElementUI,修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的&#xff0c;所以修改样式时&#xff0c;必须要定义全局样式才能实现样式覆盖&#xff0c;那怎样才能避免全局的样式污染呢&#xff1f; 解决办法&#xff1a;通过给组件添加自定义的 popper-class 属性来避…

「新版」PyCharm 加载condav Environment / Conda executableis not found

在新版的 PyCharm 配置中&#xff0c;设置Conda环境不再与旧版本保持一致&#xff0c;对于新手而言可能不清楚如何加载&#xff0c;作者也是郁闷了好久&#xff0c;经过一顿输出发现需要通过加载conda配置&#xff0c;才调取conda虚拟环境&#xff0c;而不再是直接调取conda的虚…

06_Web框架之Django三

Web框架之Django三 学习目标和内容 1、能够通过ORM模型创建数据表 2、能够通过ORM模型对数据进行操作 3、能够理解ORM模型对应关系 一、ORM概念 1、ORM介绍 对象关系映射 用于实现面向对象编程语言里不同类型系统数据之间的转换。 其就是使用面向对象的方式&#xff0c;操作…

Convolutional Neural Network(CNN)——卷积神经网络

1.NN的局限性 拓展性差 NN的计算量大性能差&#xff0c;不利于在不同规模的数据集上有效运行若输入维度发生变化&#xff0c;需要修改并重新训练网络容易过拟合 全连接导致参数量特别多&#xff0c;容易过拟合如果增加更多层&#xff0c;参数量会翻倍无法有效利用局部特征 输入…

EnvoyFilter API

目录 原文链接 https://onedayxyy.cn/docs/EnvoyFilter-API 本节实战 实战名称&#x1f6a9; 实战&#xff1a;EnvoyFilter API-全局范围-2023.12.18(测试成功)&#x1f6a9; 实战&#xff1a;EnvoyFilter API-配置优先级-2023.12.18(测试成功)&#x1f6a9; 实战&#xff1a…

每日一题:LeetCode-LCR 016. 无重复字符的最长子串

每日一题系列&#xff08;day 15&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

STM32_串口下载程序

目录标题 前言1、理论知识2、串口下载具体操作2.1、硬件准备2.2、软件准备2.3、设置单片机的启动模式为系统存储器启动2.4、软件配置2.5、下载程序 附:生成hex文件 前言 使用调试器下载程序又快有稳定还能使用调试功能&#xff0c;当然是下载调试的首选。但是拓展下串口下载程…

unittest自动化测试框架讲解以及实战

为什么要学习unittest 按照测试阶段来划分&#xff0c;可以将测试分为单元测试、集成测试、系统测试和验收测试。单元测试是指对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;通常指函数或者类&#xff0c;一般是开发完成的。 单元…