【伪类·HTML】

伪类

在 CSS 中,伪类是添加到选择器的关键字,给指定元素设置一些特殊状态,以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
在这里插入图片描述
对于超链接的伪类,推荐的使用顺序是:
:link - :visited - :hover - :active。

 <style>* {text-decoration: none;}a:link {color: red;}a:visited {color: blue;}a:hover {color: green;}a:active {color: yellow;}</style></head><body><a href="#">这是一个链接</a></body>

链接伪类的使用顺序是很重要的,如果顺序不对,有些样式就会被覆盖

列表样式

在这里插入图片描述

<style>ul {list-style-position: inside;list-style-image: url(list.gif);}</style><ul><li></li></ul>

盒子模型

在这里插入图片描述
在这里插入图片描述
border 属性用于设置元素的边框属性,其用法如下

//border: border-width border-style border-color;border-top: thin solid red;
  • border-width:是边框宽度,宽度一般用数值即可。

  • border-style:是边框线的样式,一般有 solid(实线)、dotted(圆点)、dashed(虚线)、double(双横线)。

  • border-color:是边框线的颜色。

  • border、border-width、border-style、border-color 都是复合属性,我们也可以单独设置某条边框的样式。
    border-color

border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;

padding (内边距)属性是一个复合属性padding: 上右下左;

margin (外边距)

margin: 上右下左;
当左右边距值相同时,写法:

margin: 上边距 左右边距 下边距;

可以通过 margin 属性来改变 p元素相对于 div 元素的位置

display 属性

display 属性可以用来设置元素在页面上的排列方式,也可用来隐藏元素。
在这里插入图片描述
block 属性值可以让行内元素以块级元素的方式显示在页面上。

 <style>span {display: block;}</style><body><span>蓝桥</span><span>云课</span></body>  

span 标签是行内元素,却因为设置 display: block; 导致「蓝桥」与「云课」分开
在这里插入图片描述
inline 属性值可以让像 div 这样的块级元素,接纳其他元素来自己行。

 <style>div {display: inline;}</style><body><div>蓝桥</div><div>云课</div></body>

在这里插入图片描述
inline-block让元素具有块内元素的特点,又具备行内元素的特点。display: inline-block;
比如,我们用 a 标签来实现导航的时候,a 标签虽然可以让元素在一行显示,但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block,它就具备块的特性了。

    <style>a {text-decoration: none;background-color: rgb(95, 118, 160);display: inline-block;width: 70px;height: 30px;text-align: center;}</style><body><a href="#">首页</a><a href="#">分类</a><a href="#">展示</a><a href="#">更多</a></body>

在这里插入图片描述
none 属性值可以用来隐藏页面上的元素。display: none;

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

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

相关文章

代码随想录刷题笔记-Day15

1. 完全二叉树的的节点个数 222. 完全二叉树的节点个数https://leetcode.cn/problems/count-complete-tree-nodes/ 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没…

幻兽帕鲁服务器多少钱?幻兽帕鲁服务器价格,2月最新

2024年幻兽帕鲁服务器价格表更新&#xff0c;阿里云、腾讯云和华为云Palworld服务器报价大全&#xff0c;4核16G幻兽帕鲁专用服务器阿里云26元、腾讯云32元、华为云26元&#xff0c;阿腾云atengyun.com分享幻兽帕鲁服务器优惠价格表&#xff0c;多配置报价&#xff1a; 幻兽帕鲁…

Spring Boot 中使用 Spring MVC基础

Spring MVC基础 一、控制器 controller1.定制控制器的方法&#xff08;1&#xff09;接收请求&#xff08;2&#xff09;接收请求参数&#xff08;3&#xff09;返回值 二、模型 Modle三、视图 View四、总结 Spring MVC 是非常著名的 Web 应用框架&#xff0c;现在的大多数 Web…

【C++】类和对象之构造函数、析构函数、拷贝构造函数(二)

前言&#xff1a;在上一篇我们对于C中类和对象有了一个初步的了解&#xff0c;今天我们将进一步的学习&#xff0c;今天我们目标是对构造函数、析构函数、拷贝构造函数进行一个初步学习在后面也会进一步的学习&#xff0c;一起加油呐&#xff01; &#x1f496; 博主CSDN主页:卫…

幻兽帕鲁服务器多少钱——幻兽帕鲁服务器价格介绍

2024年幻兽帕鲁服务器价格表更新&#xff0c;阿里云、腾讯云和华为云Palworld服务器报价大全&#xff0c;4核16G幻兽帕鲁专用服务器阿里云26元、腾讯云32元、华为云26元&#xff0c;阿腾云atengyun.com分享幻兽帕鲁服务器优惠价格表&#xff0c;多配置报价&#xff1a; 幻兽帕鲁…

Windows Service 2008虚拟机安装mysql service 5.7并实现远程连接

安装前必读 mysql好像在5.7.20版本之后的绿色压缩包版解压都没有my.ini或者my-default.ini配置文件了&#xff0c;需要自己添加配置。 也没有data数据库文件夹&#xff0c;data文件夹不能自己新建&#xff0c;需要命令initialize初始化建立。 my-default.ini文件存不存在不重要…

JavaWeb学习|Session

学习材料声明 所有知识点都来自互联网&#xff0c;进行总结和梳理&#xff0c;侵权必删。 引用来源&#xff1a;尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 Session 1、Session 就一个接口&#xff08;HttpSession&#xff09;。 2、Session 就是会话。它是用来…

[ESP32]在Thonny IDE中,如何將MicroPython firmware燒錄到ESP32開發板中?

[ESP32 I MicroPython] Flash Firmware by Thonny(4.1.4) IDE 正常安裝流程&#xff0c;可參考上述影片。然而&#xff0c;本篇文章主要是紀錄安裝過程遇到的bug, 供未來查詢用&#xff0c;也一併供有需要的同好參考。 問題:安裝後&#xff0c;Thonny互動介面顯示一堆亂碼和co…

【lesson26】学习MySQL事务前的基础知识

文章目录 CURD不加控制&#xff0c;会有什么问题&#xff1f;CURD满足什么属性&#xff0c;能解决上述问题&#xff1f;什么是事务&#xff1f;为什么会出现事务事务的版本支持 CURD不加控制&#xff0c;会有什么问题&#xff1f; CURD满足什么属性&#xff0c;能解决上述问题&…

文本生成高清、连贯视频,谷歌推出时空扩散模型

谷歌研究人员推出了创新性文本生成视频模型——Lumiere。 与传统模型不同的是&#xff0c;Lumiere采用了一种时空扩散&#xff08;Space-time&#xff09;U-Net架构&#xff0c;可以在单次推理中生成整个视频的所有时间段&#xff0c;能明显增强生成视频的动作连贯性&#xff…

挑选合适的板式家具生产线:满足加工需求的要素解析

板式家具生产线是现代家具制造业中不可或缺的重要工具。然而&#xff0c;选择一条适合自身加工需求的板式家具生产线并不容易&#xff0c;需要考虑多方面因素。本文将深入探讨如何挑选合适的板式家具生产线&#xff0c;从而让读者更好地理解生产线的特点和选择要点。 一、需求分…

nginx+nginx-rtmp-module+ffmpeg进行局域网推流rtmp\m3u8

局域网推流的简单方式 这里以ubuntu为例 一、先下载安装包 nginx、nginx-rtmp-module&#xff0c;再一起安装 # 下载nginx # 这里我安装的是 nginx-1.10.3 版本 cd /usr/software wget http://nginx.org/download/nginx-1.25.0.tar.gz tar -zxvf nginx-1.25.0.tar.gz# 下载ng…

Prometheus---图形化界面grafana(二进制)

前言 Prometheus是一个开源的监控以及报警系统。整合zabbix的功能&#xff0c;系统&#xff0c;网络&#xff0c;设备。 proetheus可以兼容网络&#xff0c;设备。容器的监控。告警系统。因为他和k8s是一个项目基金开发的产品&#xff0c;天生匹配k8s的原生系统。容器化和云原…

详解OpenHarmony各部分文件在XR806上的编译顺序

大家好&#xff0c;今天我们来谈一谈编程时一个很有趣的话题——编译顺序。我知道&#xff0c;一提到编译可能大家会感到有点儿头疼&#xff0c;但请放心&#xff0c;我不会让大家头疼的。我们要明白&#xff0c;在开始写代码之前&#xff0c;了解整个程序的编译路径是十分有必…

Linux进程间通信(IPC)机制之一:共享内存

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;Nonsense—Sabrina Carpenter 0:50━━━━━━️&#x1f49f;──────── 2:43 &#x1f504; ◀️ ⏸ ▶️ …

智能小程序事件系统——SJS响应事件实现方案

背景信息 如有频繁用户交互&#xff0c;在小程序上表现是比较卡顿的。例如&#xff0c;页面有 2 个元素 A 和 B&#xff0c;用户在 A 上做 touchmove 手势&#xff0c;要求 B 也跟随移动&#xff0c;movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为&#x…

可以举一反三的动态规划问题(最短编辑问题)

给定两个字符串 A 和 B&#xff0c;现在要将 A经过若干操作变为 B&#xff0c;可进行的操作有&#xff1a; 删除–将字符串 A 中的某个字符删除。插入–在字符串 A 的某个位置插入某个字符。替换–将字符串 A 中的某个字符替换为另一个字符。 现在请你求出&#xff0c;将 A 变…

第9章 安全漏洞、威胁和对策(9.1-9.2)

9.1 共担责任(shared responsibility) 共担责任是安全设计的原则&#xff0c;表明任何机构都不是孤立运行的。 相反&#xff0c;它们与世界有着千丝万缕的联系。我们使用相同的基本技术&#xff0c;遵循相同的通信协议规范&#xff0c;在同一个互联网上漫游&#xff0c;共用操…

Shell脚本——免交互

目录 一、Here Document免交互 1、免交互概述 2、语法格式 2.1示例&#xff1a;免交互方式实现对行数的统计&#xff0c;将要统计的内容置于标记EOF之间&#xff0c;直接将内容传给wc-l来统计 3、变量设定 ①变量图换成实际值 ②整行内容作为变量并输出结果 ③使输出内…

基于深度学习的鸟类识别系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络基础 4.2 GoogLeNet模型 4.3 鸟类识别系统 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................…