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

CSS(二):美化网页元素

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 CSS 属性:

  • font-family:设置字体
  • font-size:设置字体大小
  • font-weight:设置字体的粗细(如 normal, bold, lighter 等)
  • color:设置字体颜色

可以将多个字体属性写在一行:

font: <font-size> <font-weight> <font-family>;

例如:

p {font: 16px normal Arial, sans-serif; /* 设置字体大小、粗细和字体类型 */color: #333333; /* 字体颜色为深灰色 */
}

文本样式

常见的文本样式属性:

  • color:设置文本颜色
  • text-align:设置文本对齐方式
    • left:左对齐
    • center:居中对齐
    • right:右对齐
    • justify:两端对齐
  • text-indent:设置段落的首行缩进,常用于段落的美化
  • line-height:设置行高,可以帮助改善可读性,特别是对于多行文本
  • text-decoration:设置文本的装饰效果
    • underline:下划线
    • overline:上划线
    • line-through:中划线
    • none:去掉装饰(常用于去除链接下划线)
  • text-shadow:设置文本的阴影,通常是四个参数:阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如:

h1 {color: #2c3e50;text-align: center;text-decoration: underline;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);line-height: 1.5;
}

列表样式

通过 list-style 属性可以自定义列表项的符号

  • list-style:控制列表项的样式,可以设置多个属性
    • none:去掉默认的项目符号
    • circle:空心圆
    • decimal:数字(有序列表的默认样式)
    • square:实心方块

例如:

ul {list-style: square; /* 使用正方形符号 */
}ol {list-style: decimal; /* 使用数字 */
}

背景图片

常见的背景属性:

  • background-image:设置背景图片。语法:background-image: url("image.jpg");
  • background-position:设置背景图片的定位。语法:background-position: x% y%; 或者 background-position: top left;
  • background-repeat:控制背景图片是否重复,常见值:
    • repeat:默认,背景图片在水平方向和垂直方向上都重复
    • no-repeat:背景图片不重复
    • repeat-x:仅水平重复
    • repeat-y:仅垂直重复
  • background-size:用来控制背景图像的大小,常用的值有:
    • cover:保持背景图比例,自动填满背景区域,可能裁剪部分图片
    • contain:保持背景图比例,图片完整显示,但可能留白
    • 具体的 px% 数值。

合并写法:

background: <color> <image> <position> <size> <repeat>;

例如:

div {background: #ffcc00 url("image.jpg") no-repeat center center;background-size: cover;
}

相关文章:

CSS(二):美化网页元素

目录 字体样式 文本样式 列表样式 背景图片 字体样式 字体相关的 CSS 属性&#xff1a; font-family&#xff1a;设置字体font-size&#xff1a;设置字体大小font-weight&#xff1a;设置字体的粗细&#xff08;如 normal, bold, lighter 等&#xff09;color&#xff1a;…...

如何不让场景UI受后处理影响

1&#xff09;如何不让场景UI受后处理影响 2&#xff09;Sprite打入SpriteAtlasv2依赖丢失 3&#xff09;如何为Render Texture模式的videoPlayer生成封面 4&#xff09;如何排查Shader变体的SRP Batcher兼容性 这是第415篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热…...

【教程】通过Docker运行AnythingLLM

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 官方教程&#xff1a;Local Docker Installation ~ AnythingLLM 1、先创建一个目录用于保存anythingllm的持久化文件&#xff1a; sudo mkdir /app su…...

2024/12/29 黄冈师范学院计算机学院网络工程《路由期末复习作业一》

一、选择题 1.某公司为其一些远程小站点预留了网段 172.29.100.0/26&#xff0c;每一个站点有10个IP设备接到网络&#xff0c;下面那个VLSM掩码能够为该需求提供最小数量的主机数目 &#xff08; &#xff09; A./27 B./28 C./29 D./30 -首先审题我们需要搞清楚站点与网…...

LeetCode-整数反转(007)

一.题目描述 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 二.示例 …...

碰一碰发视频矩阵系统源码搭建,支持OEM

一、引言 随着短视频的火爆发展&#xff0c;碰一碰发视频的矩阵系统逐渐受到关注。这种系统能够实现用户通过碰一碰设备&#xff08;如 NFC 标签&#xff09;快速触发视频的发布&#xff0c;在营销推广、互动体验等领域有着广泛的应用前景。本文将详细介绍碰一碰发视频矩阵系统…...

Linux网络编程3——多线程编程(改良版)

一.多线程 1.什么是线程 要了解线程&#xff0c;首先需要知道进程。一个进程指的是一个正在执行的应用程序。线程对应的英文名称为“thread”&#xff0c;它的功能是执行应用程序中的某个具体任务&#xff0c;比如一段程序、一个函数等。 线程和进程之间的关系&#xff0c;类…...

LeetCode每日三题(六)数组

一、最大子数组和 自己答案&#xff1a; class Solution {public int maxSubArray(int[] nums) {int begin0;int end0;if(numsnull){//如果数组非空return 0;}else if(nums.length1){//如果数组只有一个元素return nums[0];}//初值选为数组的第一个值int resultnums[0];int i…...

安装了python,环境变量也设置了,但是输入python不报错也没反应是为什么?window的锅!

目录 问题 结论总结 衍生问题 1 第1步&#xff1a;小白python安装&#xff0c;不要埋头一直点下一步&#xff01;&#xff01;&#xff01; 2 第2步&#xff1a;可以选择删了之前的&#xff0c;重新安装python 3 第3步&#xff1a;如果你不想或不能删了重装python&#…...

Vue.js组件开发-使用KeepAlive缓存特定组件

在Vue中&#xff0c;<keep-alive> 组件是一个非常有用的工具&#xff0c;可以用来缓存那些不希望每次切换时都重新渲染的组件。要缓存特定组件&#xff0c;可以使用 <keep-alive> 的 include 和 exclude 属性&#xff0c;这两个属性都接受字符串、正则表达式或数组…...

配置hive支持中文注释

hive元数据metastore默认的字符集是latin1&#xff0c;所以中文注释会乱码。但是不能将metastore库的字符集更改为utf-8&#xff0c;只能对特定表、特定列修改为utf-8。配置hive支持中文注释&#xff0c;主要在两个方面&#xff1a; 1、在Hive元数据存储的Mysql数据库中&#…...

Windows配置IE浏览器不自动跳转到Edge

一&#xff1a;使用 IE 浏览器自身设置&#xff08;部分情况有效&#xff09; 打开 IE 浏览器设置&#xff1a;启动 IE 浏览器&#xff0c;点击右上角的 “工具”&#xff08;齿轮形状&#xff09;图标&#xff0c;选择 “Internet 选项”。设置启动选项&#xff1a;在 “Inte…...

BGP特性实验

实验拓扑 实验需求及解法 本实验模拟大规模BGP网络部署&#xff0c;使用4字节AS号&#xff0c;传递IPv6路由。 预配说明&#xff1a; sysname R1 ospfv3 1router-id 1.1.1.1 # firewall zone Localpriority 15 # interface Serial1/0/0link-protocol pppipv6 enable ipv6 ad…...

【多模态】从零学习多模态——2024学习笔记总结

从零学习多模态——2024学习笔记总结 前言1. preliminary2. Transformer和NLP基础3. 多模态模型原理和架构学习4. 动手实验多模态模型第一步尝试Swift框架使用数据验证 5. 总结 前言 2024快结束啦&#xff0c;半年抽空学了学多模态还挺好玩的&#xff0c;学习和踩坑记录记一下&…...

Meta AI 提出大型概念模型(LCMs):语义超越基于令牌的语言建模

在自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;的领域&#xff0c;大型语言模型&#xff08;Large Language Models, LLMs&#xff09;已经取得了令人瞩目的成就&#xff0c;它们使得文本生成、摘要和问答等应用成为现实。但是&#xff0c;这些模型依…...

【优先算法】滑动窗口 --(结合例题讲解解题思路)(C++)

目录 ​编辑 1.什么是滑动窗口&#xff1f; 2. 滑动窗口例题 2.1 例题1&#xff1a;长度最小的子数组 2.1.1 解题思路 2.1.2 方法一&#xff1a;暴力枚举出所有的子数组的和 2.1.3 方法二&#xff1a;使用 “同向双指针” 也就是滑动窗口来进行优化 2.2 例题2&#xff1a;无重…...

Linux下PostgreSQL-12.0安装部署详细步骤

一、安装环境 postgresql-12.0 CentOS-7.6 注意&#xff1a;确认linux系统可以正常连接网络&#xff0c;因为在后面需要添加依赖包。 二、pg数据库安装包下载 下载地址&#xff1a;PostgreSQL: File Browser 选择要安装的版本进行下载&#xff1a; 三、安装依赖包 在要安…...

Delphi历史版本对照及主要版本特性

Delphi编程的关键特性包括&#xff1a; 可视化开发&#xff1a;Delphi以其独特的开发方法而闻名&#xff0c;它允许开发者通过直观的表单设计器来创建用户界面。这种快速应用程序开发&#xff08;RAD&#xff09;的方法大大简化并加速了图形用户界面&#xff08;GUI&#xff09…...

java基础知识22 java的反射机制

一 java反射机制 1.1 概述 Java反射&#xff0c;程序在运行时&#xff0c;动态获取类信息&#xff08;类元数据&#xff09;&#xff0c;获取字段属性&#xff0c;动态创建对象和调用方法。Spring框架正是基于反射机制&#xff0c;通过我们的配置文件&#xff0c;在项目运行时…...

多因子模型连载

多因子模型 (Multi-Factor Model)是量化投资中的一种重要工具&#xff0c;用于解释和预测股票收益。它通过将多个不同的因子&#xff08;如市值、动量、价值、质量等&#xff09;结合起来&#xff0c;构建一个综合的模型来评估股票的表现。多因子模型不仅能够捕捉单个因子的影响…...

服务器广播算法

服务器广播算法&#xff08;Server Broadcasting Algorithm&#xff09;是一种在分布式系统中用于高效地将信息从一个服务器传播到整个网络的算法。它被广泛用于分布式计算、数据中心、内容分发网络&#xff08;CDN&#xff09;和消息队列系统中。以下是常见的服务器广播算法的…...

具身智能 - Vision-language-action models for robot manipulation

具身智能大模型简介_哔哩哔哩_bilibili 受到自然语言处理、计算机视觉领域中基础模型的成功的启发&#xff0c;具身智能领域也在尝试设计、训练、微调大模型来解决现实生活中最普遍存在的机器人操作问题。“Vision-language-action models for robot manipulation”&#xff0…...

计算机组成原理的学习笔记(12) -- 总线和I/O系统

学习笔记 前言 ​ 本文主要是对于b站尚硅谷的计算机组成原理的学习笔记&#xff0c;仅用于学习交流。 总线 1. 组成 总线主要由三种信号线组成&#xff1a; 数据线&#xff1a;用于传输实际的数据&#xff0c;宽度决定了数据传输的并行性。 地址线&#xff1a;传输内存或I/…...

ReactiveStreams、Reactor、SpringWebFlux

注意&#xff1a; 本文内容于 2024-12-28 21:22:12 创建&#xff0c;可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容&#xff0c;请访问原文地址&#xff1a;ReactiveStreams、Reactor、SpringWebFlux。感谢您的关注与支持&#xff01; ReactiveStreams是…...

【潜意识Java】探寻Java子类构造器的神秘面纱与独特魅力,深度学习子类构造器特点

目录 一、子类构造器的诞生背景 &#xff08;一&#xff09;为啥要有子类构造器&#xff1f; &#xff08;二&#xff09;子类与父类构造器的关系 二、子类构造器的调用规则 &#xff08;一&#xff09;默认调用父类无参构造器 &#xff08;二&#xff09;显式调用父类构…...

OpenCV调整图像亮度和对比度

【欢迎关注编码小哥&#xff0c;学习更多实用的编程方法和技巧】 1、基本方法---线性变换 // 亮度和对比度调整 cv::Mat adjustBrightnessContrast(const cv::Mat& src, double alpha, int beta) {cv::Mat dst;src.convertTo(dst, -1, alpha, beta);return dst; }// 使用…...

HarmonyOs DevEco studio小技巧40--应用名称、图标与启动动画修改全攻略

一、引言 随着 HarmonyOS 的日益普及&#xff0c;越来越多的开发者投身于这个充满潜力的生态之中。而 DevEco Studio 作为 HarmonyOS 官方推出的集成开发环境&#xff0c;为开发者提供了一站式的开发体验。在应用开发过程中&#xff0c;一些细节上的设置&#xff0c;如应用名称…...

ESP-IDF学习记录(2)ESP-IDF 扩展的简单使用

傻瓜式记录一个示例的打开&#xff0c;编译&#xff0c;运行。后面我再一个个运行简单分析每个demo的内容。 1.打开示例代码 2.选择项目&#xff0c;文件夹 3.选择串口 4.选择调试方式 5.根据硬件GPIO口配置menuconfig 6.构建项目 7.烧录设备&#xff0c;选择串口UART方式 运行…...

2024 年最新 windows 操作系统搭建部署 nginx 服务器应用详细教程(更新中)

nginx 服务器概述 Nginx 是一款高性能的 HTTP 和 反向代理 服务器&#xff0c;同时是一个 IMAP / POP3 / SMTP 代理服务器。Nginx 凭借其高性能、稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。 浏览 nginx 官网&#xff1a;https://nginx.org/ Nginx 应用场景 静态…...

基于ArcGIS Pro的SWAT模型在流域水循环、水生态模拟中的应用及案例分析;SWAT模型安装、运行到结果读取全流程指导

目前&#xff0c;流域水资源和水生态问题逐渐成为制约社会经济和环境可持续发展的重要因素。SWAT模型是一种基于物理机制的分布式流域水文与生态模拟模型&#xff0c;能够对流域的水循环过程、污染物迁移等过程进行精细模拟和量化分析。SWAT模型目前广泛应用于流域水文过程研究…...

Quartz任务调度框架实现任务动态执行

说明&#xff1a;之前使用Quartz&#xff0c;都是写好Job&#xff0c;指定一个时间点&#xff0c;到点执行。最近有个需求&#xff0c;需要根据前端用户设置的时间点去执行&#xff0c;也就是说任务执行的时间点是动态变化的。本文介绍如何用Quartz任务调度框架实现任务动态执行…...

10.MySQL事务

目录 什么是事务为什么有事务存在事务的版本支持事务的提交方式事务常见的操作方式事务异常验证与产出结论事务隔离性理论事务隔离级别的设置与查看事务隔离级别 - 读未提交事务隔离级别 - 读提交事务隔离级别 - 可重复读事务隔离级别 - 串行化MVCC机制3个记录隐藏字段undo日志…...

1.若依介绍

若依框架 好处&#xff1a; 1.快速构建 2.通用模块&#xff08;登录、权限分配和校验、操作日志功能&#xff09; 3.代码生成&#xff08;定义好数据库表的结构&#xff0c;就能自动生成前后端对应的代码&#xff09; 位置&#xff1a;系统工具-> 代码生成 若依版本 R…...

计算机网络实验室建设方案

一、计算机网络实验室拓扑结构 计算机网络综合实验室解决方案&#xff0c;是面向高校网络相关专业开展教学实训的综合实训基地解决方案。教学实训系统采用 B&#xff0f;S架构&#xff0c;通过公有云教学实训平台在线学习模式&#xff0c;轻松实现网络系统建设与运维技术的教学…...

【Rust自学】6.4. 简单的控制流-if let

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 6.4.1. 什么是if let if let语法允许将if和let组合成一种不太冗长的方式来处理与一种模式匹配的值&#xff0c;同时忽略其余模式。 可以…...

4-1 输出一组成绩中的最高分和最低分

第一行输入人数n&#xff0c;第二行输入每个人的成绩&#xff0c;用空格分开。输出所有成绩中的最高分和最低分。 输入格式: 第一行输入n&#xff0c;大于0的整数&#xff1b;第二行输入n个大于等于0&#xff0c;小于等于100的整数&#xff0c;用空格分开。 输出格式: 最高…...

数据结构:二叉树部分接口(链式)

目录 二叉树的遍历 1.通过前序遍历的数据构造二叉树 2.二叉树销毁 3. 二叉树节点个数 4. 二叉树叶子节点的个数 5.二叉树第k层节点个数 6.二叉树查找值为x的节点 7.二叉树的前/中/后序遍历 8.层序遍历 9.判断二叉树是否是完全二叉树 二叉树的遍历 前序、中序以及后序…...

音视频入门基础:MPEG2-PS专题(1)——MPEG2-PS官方文档下载

一、引言 MPEG2-PS&#xff08;又称PS&#xff0c;Program Stream&#xff0c;程序流&#xff0c;节目流&#xff09;是一种多路复用数字音频、视频等的封装容器。MPEG2-PS将一个或多个分组但有共同的时间基准的基本数据流 &#xff08;PES&#xff09;合并成一个整体流。它是…...

overleaf中文生僻字显示不正确,显示双线F

我是不想换全文字体的&#xff0c;只是一个生僻字显示不出来&#xff0c;就想要像word一样&#xff0c;把这个生僻字用包含这个生僻字的字体来显示就好了。 解决步骤&#xff1a; 1、使用如下宏包&#xff1a; \usepackage{xeCJK} %声明宏包&#xff0c;主要用于支持在XeTeX…...

代理arp(proxy arp)原理 及配置

openwrt下打开 arp代理方法 proxy arp概念打开方法openwrt下打开 arp代理方法proxy arp概念 定义 Proxy ARP(代理地址解析协议)是一种网络技术,它允许一个设备(通常是路由器)代表另一个设备来回应 ARP(地址解析协议)请求。工作原理 ARP 回顾:在正常的 ARP 过程中,当主…...

torch.tensor

torch.tensor 通过复制数据构造一个张量 &#xff08;构造出的张量是一个没有自动微分&#xff08;autograd &#xff09;历史的张量&#xff0c;也称为叶张量&#xff0c;参考Autograd mechanics&#xff09;。 torch.tensor(data, *, dtypeNone, deviceNone, requires_gra…...

Lucene 漏洞历险记:修复损坏的索引异常

作者&#xff1a;来自 Elastic Benjamin Trent 有时&#xff0c;一行代码需要几天的时间才能写完。在这里&#xff0c;我们可以看到工程师在多日内调试代码以修复潜在的 Apache Lucene 索引损坏的痛苦。 做好准备 这篇博客与往常不同。它不是对新功能或教程的解释。这是关于花…...

Github优质项目推荐(第十期)

文章目录 Github优质项目推荐&#xff08;第十期&#xff09;一、【postiz-app】&#xff0c;14.6k stars - 您的终极 AI 社交媒体调度工具二、【lobe-chat】&#xff0c;50.1k stars - AI 聊天框架三、【cobalt】&#xff0c;22.1k stars - 媒体下载器四、【build-your-own-x】…...

【已解决】“Content-Security-Policy”头缺失

1、作用 简称CSP&#xff0c;意为内容安全策略&#xff0c;通过设置约束指定可信的内容来源&#xff0c;降低异源文件攻击&#xff0c;例如&#xff1a;js/css/image等 2、相关设置值 指令名 demo 说明 default-src self cdn.example.com 默认策略,可以应用于js文件/图片…...

【每日学点鸿蒙知识】Web高度适配、变量声明规范、动画取消、签名文件、包体积优化相关

1、HarmonyOS Web页面高度适配&#xff1f; 在Web页面设置高度100%时&#xff0c;发现和Web控件的高度不一致&#xff0c;这个需要设置什么可以达到页面高度和Web容器高度一致 目前只支持两种web布局模式&#xff0c;分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大…...

呼叫中心中间件免费体验测试和freeswitch部署方案

文章目录 前言联系我们部署freeswitch常见问题汇总 前言 大部分的用户想体验呼叫中心中间件的功能&#xff0c;却没有门路。这里可以分享呼叫中心中间件的部署链接&#xff0c;可供用户们免费体验测试。 联系我们 有意向了解呼叫中心中间件的用户&#xff0c;点击该链接可添加…...

游戏开发线性空间下PS工作流程

前言 使用基于物理的渲染&#xff0c;为了保证光照计算的准确&#xff0c;需要使用线性空间&#xff1b; 使用线性空间会带来一个问题&#xff0c;ui 在游戏引擎中的渲染结果与 PS 中的不一致&#xff1a; PS&#xff08;颜色空间默认是sRGB伽马空间&#xff09;&#xff1a…...

Mono里运行C#脚本7—MonoImageStorage结构解析

Mono里运行C#脚本7—MonoImageStorage结构解析 定义一个结构来保存EXE文件加载到内存的表示。 typedef struct { MonoRefCount ref; //引用计数,如果这个文件引用计数为0就可以删除。 /* key used for lookups. owned by this image storage. */ char *key; //HASH…...

Mac 查询IP配置,网络代理

常用命令 1.查询IP ifconfig | grep "inet" 2.ping查询 ping 172.18.54.19&#xff08;自己IP&#xff09; 3.取消代理&#xff0c;通过在终端执行以下命令&#xff0c;可以取消 Git 的代理设置 git config --global --unset http.proxy git config --global …...

WebRTC 环境搭建

主题 本文主要描述webrtc开发过程中所需的环境搭建 环境&#xff1a; 运行环境&#xff1a;ubuntu20.04 Node.js环境搭建 安装编译 Node.js 所需的依赖包: sudo apt-get updatesudo apt-get install -y build-essential libssl-dev下载 Node.js 源码: curl -sL https://…...