当前位置： 首页 > news >正文

HTML---CSS美化网页元素

news 文章来源：https://blog.csdn.net/zhoutong2323/article/details/135069683 2024/11/20 15:36:12

文章目录

  • 前言
  • 一、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/>

五.文本阴影

语法：

text-shadow:h-shadow v-shadow blur color;(属性值)
text-shadow: 属性值
h-shadow水平阴影的位置。可以使用负值表示向左移动阴影，正值表示向右移动阴影。
v-shadow垂直阴影的位置。可以使用负值表示向上移动阴影，正值表示向下移动阴影。
blur可选项，表示模糊半径。可以为0，表示无模糊效果。
color可选项，表示阴影的颜色。可以使用颜色的名称、RGB值或十六进制值。

 案例：

    <style type="text/css">h1{text-shadow: 15px 15px 1px rebeccapurple;}</style>
<body><a href="#"><h3>html</h3></a>
</body>

六.超链接伪类 

 HTML中的超文本伪类是用于为链接添加特殊效果或样式的伪类。

超链接伪类的常用样式
hover表示鼠标悬停在链接上时的状态，示例：a:hover { color: red; }
active表示正在点击链接时的状态，示例:a:active { color: green;}

 hover

语法：

a:hover {#CSS样式 }

案例： 

    <style type="text/css">h3{font-size: 100px;color: aqua;text-decoration: none;}h3:hover{font-size: 200px;color: red;text-decoration: none;}</style>
<body><a href="#"><h3>html</h3></a>
</body>
  • 鼠标不在超链接上的样式

 

  •  鼠标在超链接上的样式

七.列表样式 

 语法：

list-style：属性值

 案例：

<style>ul{list-style-type: none;}
</style>

八.网页背景样式

 背景颜色

 案例：

    <style type="text/css">div{width: 200px;height: 200px;border: 1px solid red; /**solid:定义边框样式**/background-color: aqua;}</style>
body><div></div>/**定义一个HTML边框**/
</body>

 背景图像

 案例：

    <style type="text/css">div{width: 800px;height: 200px;border: 1px solid red;background-image: url("index1.png");/**背景图默认平铺展示**/}<!--repeat:重复显示方式 position：定位 -->#d1{background-repeat:repeat-x;}/**在X轴平铺**/ <!---->#d2{background-repeat:repeat-y;}/**在y轴平铺**/#d3{background-repeat:no-repeat;}/**不平铺**/#d3{background-position: 90px 90px;}/**不平铺时控制图片在该区域中显示的位置**/</style>
<body><div id="d1"></div><div id="d2"></div><div id="d3"></div>
</body>

 九.CSS渐变

 语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

案例：

    <style type="text/css">div{width: 800px;height: 200px;border: 1px solid rebeccapurple;background: linear-gradient(to top ,blue,red);/**从下到上由蓝变红**/}</style>
<body><div id="d1"></div>
</body>

十：练习 
 

总结

相关文章：

HTML---CSS美化网页元素

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.div 标签&#xff1a; <div>是HTML中的一个常用标签&#xff0c;用于定义HTML文档中的一个区块&#xff08;或一个容器&#xff09;。它可以包含其他HTML元素&#xff0c;如文本、图像…...

编程日记 2023/12/21 1:00:21

【Docker】基础篇

文章目录 Docker为什么出现容器和虚拟机关于虚拟机关于Docker二者区别&#xff1a; Docker的基本组成相关概念-镜像&#xff0c;容器&#xff0c;仓库安装Docker卸载docker阿里云镜像加速docker run的原理**为什么容器比虚拟机快**Docker的常用命令1.帮助命令2.镜像相关命令3.容…...

编程日记 2023/12/21 0:50:13

Potplayer播放器远程访问群晖WebDav本地资源【内网穿透】

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是&#xff1a;1 使用环境要求&#xff1a;2 配置webdav3 测试局域网使用potplayer访问webdav3 内网穿透&#xff0c;映射至公网4 使用固定地址在potplayer访问webdav 国内流媒体平台的内容…...

编程日记 2023/12/21 0:45:09

【神经网络】imshow展示图片报错

文章目录 代码示例报错信息报错原因解决方法其他问题 代码示例 plt.imshow(np.squeeze(images[0]))报错信息 Invalid shape (3, 60, 90) for image data报错原因 格式错误&#xff0c;输入具有RGB值的图像&#xff0c;输入三维数组参数的格式应该是&#xff08;高度&#xf…...

编程日记 2023/12/21 0:43:07

【C++】对象特性：无参有参构造函数，拷贝构造函数，析构函数

目录 对象的初始化和清理1.1 构造函数和析构函数1.2 构造函数的分类及调用1.3 拷贝构造函数调用时机1.4 构造函数调用规则1.5 深拷贝与浅拷贝 对象的初始化和清理 生活中我们买的电子产品都基本会有出厂设置&#xff0c;在某一天我们不用时候也会删除一些自己信息数据保证安全。…...

编程日记 2023/12/21 0:41:06

【算法与数据结构】1005、LeetCode K 次取反后最大化的数组和

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题允许某个下标的数字多次翻转&#xff0c;因此思路比较简单。首先&#xff0c;我们要求最大和&…...

编程日记 2023/12/21 0:40:05

作业--day34

使用select完成TCP并发服务器和客户端 server.c #include <myhead.h>#define PORT 8888 #define IP "192.168.125.137"int main(int argc, const char *argv[]) {int sfd socket(AF_INET, SOCK_STREAM, 0);if(sfd -1){perror("socket error");re…...

编程日记 2023/12/21 0:39:04

车辆违规开启远光灯检测系统：融合YOLO-MS改进YOLOv8

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 随着社会的不断发展和交通工具的普及&#xff0c;车辆违规行为成为了一个严重的问题。其中&#xff0c;车辆违规开启远光灯是一种常见的违规行为&#xff0c;给其…...

编程日记 2023/12/21 0:36:01

爬虫工作量由小到大的思维转变---＜第十三章 Scrapy之pipelines分离的思考＞

前言: 收到留言: "我的爬取的数据处理有点大,scrapy抓网页挺快,处理数据慢了!" -----针对这位粉丝留言,我只想说:你那培训班老师可能给你漏了课程! 大概你们上课讲的案例属于demo,他教了你一些基本操作,但他没有对相关业务对你讲透! 你研究一下pipelines,或者看我现…...

编程日记 2023/12/21 0:29:56

【Unity】运行时创建曲线（贝塞尔的运用）

[Unity]运行时创建线&#xff08;贝塞尔的运用&#xff09; 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点&#xff0c;三角面&#xff0c…...

编程日记 2023/12/21 0:25:53

基于DSP的IIR数字滤波器（论文+源码）

1.系统设计 在本次基于DSP的IIR数字低通滤波计中&#xff0c;拟以TMS320F28335来作为系统的主控制器&#xff0c;通过ADC0832模数转换芯片来对输入信号进行采集&#xff1b;通过TLC5615来将低通滤波后的信号进行输出&#xff1b;同时结合MATLAB仿真软件&#xff0c;对设计的II…...

编程日记 2023/12/21 0:23:51

Django(一）

1.web框架底层 1.1 网络通信 注意&#xff1a;局域网 个人一般写程序&#xff0c;想要让别人访问&#xff1a;阿里云、腾讯云。 去云平台租服务器&#xff08;含公网IP&#xff09;程序放在云服务器 先以局域网为例 我的电脑【服务端】 import socket# 1.监听本机的IP和…...

编程日记 2023/12/21 0:19:46

微信小程序如何利用createIntersectionObserver实现图片懒加载

微信小程序如何利用createIntersectionObserver实现图片懒加载 节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 节点布局相交状态 API中有一个 wx.createInter…...

编程日记 2023/12/21 0:18:45

七：爬虫-数据解析之正则表达式

七&#xff1a;正则表达式概述 正则表达式&#xff0c;又称规则表达式,&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xf…...

编程日记 2023/12/21 0:06:34

云原生之深入解析亿级流量架构之服务限流思路与方法

一、限流思路 ① 熔断 系统在设计之初就把熔断措施考虑进去&#xff0c;当系统出现问题时&#xff0c;如果短时间内无法修复&#xff0c;系统要自动做出判断&#xff0c;开启熔断开关&#xff0c;拒绝流量访问&#xff0c;避免大流量对后端的过载请求。系统也应该能够动态监测…...

编程日记 2023/12/21 0:04:33

【Python炫酷系列】祝考研的友友们金榜题名吖（完整代码）

文章目录 环境需求完整代码详细分析系列文章环境需求 python3.11.4及以上版本PyCharm Community Edition 2023.2.5pyinstaller6.2.0（可选，这个库用于打包，使程序没有python环境也可以运行，如果想发给好朋友的话需要这个库哦~）【注】 python环境搭建请见：https://want595.…...

编程日记 2023/12/21 0:03:32

KL散度、CrossEntropy详解

文章目录 0. 概述1. 信息量1.1 定义1.2 性质1.3 例子2. 熵 Entropy2.1 定义2.2 公式2.3 例子3. 交叉熵 Cross Entropy3.1 定义3.2 公式3.3 例子4. KL 散度（相对熵）4.1 公式...

编程日记 2023/12/21 0:02:31

【算法】红黑树

一、红黑树介绍 红黑树是一种自平衡二叉查找树&#xff0c;是在计算机科学中用到的一种数据结构&#xff0c;典型的用途是实现关联数组。 红黑树是在1972年由Rudolf Bayer发明的&#xff0c;当时被称为平衡二叉B树&#xff08;symmetric binary B-trees&#xff09;。后来&am…...

编程日记 2023/12/20 23:58:25

2023楚慧杯 WEB方向 部分:(

1、eaaeval 查看源码能看见账号&#xff1a;username169&#xff0c;密码&#xff1a;password196提交这个用户密码可以跳转到页面/dhwiaoubfeuobgeobg.php 通过dirsearch目录爆破可以得到www.zip <?php class Flag{public $a;public $b;public function __construct(){…...

编程日记 2023/12/20 23:56:23

STM32 CAN多节点组网项目实操 挖坑与填坑记录2

系列文章&#xff0c;持续探索CAN多节点通讯&#xff0c; 上一篇文章链接&#xff1a; STM32 CAN多节点组网项目实操 挖坑与填坑记录-CSDN博客文章浏览阅读120次。CAN线性组网项目开发过程中遇到的数据丢包问题&#xff0c;并尝试解决的记录和推测分析。开发了一个多节点线性…...

编程日记 2023/12/20 23:54:22

Flink 数据类型 TypeInformation信息

Flink流应用程序处理的是以数据对象表示的事件流。所以在Flink内部&#xff0c;我么需要能够处理这些对象。它们需要被序列化和反序列化&#xff0c;以便通过网络传送它们&#xff1b;或者从状态后端、检查点和保存点读取它们。为了有效地做到这一点&#xff0c;Flink需要明确知…...

编程日记 2023/12/20 23:53:21

基于python的leetcode算法介绍之递归

文章目录 零 算法介绍一 简单示例 辗转相除法Leetcode例题与思路[509. 斐波那契数](https://leetcode.cn/problems/fibonacci-number/)解题思路&#xff1a;题解&#xff1a; [206. 反转链表](https://leetcode.cn/problems/reverse-linked-list/)解题思路&#xff1a;题解&…...

编程日记 2023/12/20 23:49:18

2023年度佳作：AIGC、AGI、GhatGPT、人工智能大语言模型的崛起与挑战

目录 前言 01 《ChatGPT 驱动软件开发》 内容简介 02 《ChatGPT原理与实战》 内容简介 03 《神经网络与深度学习》 04 《AIGC重塑教育》 内容简介 05 《通用人工智能》 目　　录 前言 2023年是人工智能大语言模型大爆发的一年&#xff0c;一些概念和英文缩写也在这一…...

编程日记 2023/12/20 23:44:14

Axure的交互以及情形的介绍

一. 交互 1.1 交互概述 通俗来讲就是&#xff0c;谁用了什么方法做了什么事情&#xff0c;主体"谁"对应的就是axure中的元件&#xff0c;"什么方法"对应的就是交互事件&#xff0c;比如单击事件、双击事件&#xff0c;"什么事情"对应的就是交互…...

编程日记 2023/12/20 23:42:12

【MATLAB第84期】基于MATLAB的波形叠加极限学习机SW-ELM代理模型的sobol全局敏感性分析法应用

【MATLAB第84期】基于MATLAB的波形叠加极限学习机SW-ELM代理模型的sobol全局敏感性分析法应用 前言 跟往期sobol区别&#xff1a; 1.sobol计算依赖于验证集样本&#xff0c;无需定义变量上下限。 2.SW-ELM自带激活函数&#xff0c;计算具有phi&#xff08;x&#xff09;e^x激…...

编程日记 2023/12/20 23:41:11

米游社区表情包整合网站源码

源码介绍 米游社表情包整合网站源码&#xff0c;来自Github大佬的项目&#xff0c;包含米游兔123枚&#xff0c;米游社 玩家12枚&#xff0c;崩坏 星穹铁道112枚&#xff0c;绝区零218枚&#xff0c;NAP32枚&#xff0c;崩坏RPG62枚&#xff0c;崩坏3-1282枚&#xff0c;原神 …...

编程日记 2023/12/20 23:39:09

easyexcel调用公共导出方法导出数据

easyexcel备忘 Slf4j public class ConditionDownloadUtil {//扫描在xboot 包下所有IService 接口的子类, 每次启动服务后, 重新扫描public final static Class[] classesExtendsIService ClassUtil.scanPackageBySuper("cn.exrick.xboot", IService.class).toArra…...

编程日记 2023/12/20 23:37:07

C语言插入排序算法及代码

一、原理 在待排序的数组里&#xff0c;从数组的第二个数字开始&#xff0c;通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。 二、代码部分 #include<stdio.h> #include<stdlib.h> int ma…...

编程日记 2023/12/20 23:35:04

2023年中国法拍房用户画像和数据分析

法拍房主要平台 法拍房主要平台有3家&#xff0c;分别是阿里、京东和北交互联平台。目前官方认定纳入网络司法拍卖的平台共有7家&#xff0c;其中阿里资产司法拍卖平台的挂拍量最大。 阿里法拍房 阿里法拍房数据显示2017年&#xff0c;全国法拍房9000套&#xff1b;2018年&a…...

编程日记 2023/12/20 23:34:03

Android 清除临时文件，清空缓存

python 代码&#xff1a; import os import shutil import tracebackdef delete_folder(path):if os.path.exists(path):print(f"删除文件夹: {path}")shutil.rmtree(path)print("删除完成")def delete_file(path):if os.path.exists(path):print(f"删…...

编程日记 2023/12/20 23:31:00

网站建设合同是否交纳印花税/开发网站用什么软件

一、概念 1.分布式事务 分布式事务通俗来说&#xff0c;一次操作由若干分支组成&#xff0c;这些分支操作分属于不同的应用&#xff0c;分布在不同的服务器上&#xff0c;分布式事务需要保证这些操作要么全部成功&#xff0c;要么全部失败&#xff0c;分支事务与普通事务一样…...

编程日记 2024/11/20 15:24:24

轴承外贸网站怎么做/打开百度网站

在login屏幕一直不能登录进去&#xff0c;输入admin密码admin后还会是停止在登录屏幕&#xff0c;要求输入用户和密码.百思不得其解&#xff0c;后面在cacti的官方论坛上找答案&#xff0c;发现有人有同样的问题&#xff0c;他有发apache的日志。突然一想&#xff0c;我也可以看…...

编程日记 2024/11/20 9:41:25

建设网站项目概述/怎么去推广自己的网站

javaweb新建jsp文件第一行报错 原因 缺少包 解决 1.右击项目名&#xff0c;选择build path&#xff0c;如图。 2.选择导入外包&#xff0c;如图。 3.在 Tomcat的安装路径里&#xff0c;在lib文件夹下找见servlet-api.jar导进去&#xff0c;应用并关闭&#xff0c;如图。 …...

编程日记 2024/11/20 8:20:04

设计网站登录框ps怎么做/李飞seo

问题导读&#xff1a;1.Flume的存在些什么问题&#xff1f;2.基于开源的Flume美团增加了哪些功能&#xff1f;3.Flume系统如何调优&#xff1f;在《基于Flume的美团日志收集系统(一)架构和设计》中&#xff0c;我们详述了基于Flume的美团日志收集系统的架构设计&#xff0c;以及…...

编程日记 2024/11/20 6:43:28

网站建设和维护委托合同/谷歌商店下载官方

转自CSDN java ACM Java做ACM-ICPC的特点&#xff1a;(1) 在一般比赛中&#xff0c;Java程序会有额外的时间和空间&#xff0c;而实际上经过实验&#xff0c;在执行计算密集任务的时候Java并不比C/C慢多少&#xff0c;只是IO操作较慢而已。(2) Java 简单而功能强大&#xff0c;…...

编程日记 2024/11/20 5:38:18

网站设计费用志/网络营销的几种模式

域名泛解析什么意思 在域名前添加任何子域名&#xff0c;均可访问到所指向的网站。也就是客户的域名yfi6.com之下所设的*.yfi6.com全部域名均可访问。 域名泛解析怎么设置 泛域名解析是指将*.域名解析到同一IP。 泛域名解析和域名解析有何不同&#xff1f; 泛域名解析是指&a…...

编程日记 2024/11/20 2:26:23