【伪类·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,一经查实,立即删除!

相关文章

C++ STL库之Vector简介及例题(哈希表)(一)

文章目录 C STL库之Vector简介及例题&#xff08;哈希表&#xff09;&#xff08;一&#xff09;一、初始化二、数值操作例题题解哈希表简析C哈希表初始化C哈希表基本操作 C STL库之Vector简介及例题&#xff08;哈希表&#xff09;&#xff08;一&#xff09; Vector是一个能…

代码随想录刷题笔记-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…

动态规划入门题目

动态规划&#xff08;记忆化搜索&#xff09;&#xff1a; 将给定问题划分成若干子问题&#xff0c;直到子问题可以被直接解决。然后把子问题的答保存下来以免重复计算&#xff0c;然后根据子问题反推出原问题解的方法 动态规划也称为递推&#xff08;暴力深搜记忆中间状态结果…

MySQL-运算符

文章目录 1. 运算符概述2. 算术运算符3. 比较运算符4. 逻辑运算符5. 位运算符 1. 运算符概述 在 MySQL 中&#xff0c;可以通过运算符来获取表结构以外的另一种数据。MySQL 所提供的运算符可以直接对表中数据或字段进行运算&#xff0c;进而实现用户的新需求&#xff0c;增强了…

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

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

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

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

c++vector解释

C中的vector是一种容器&#xff0c;用于存储一组同类型的元素。它类似于数组&#xff0c;但具有更多的功能和灵活性。vector可以自动调整大小&#xff0c;允许动态插入和删除元素。 使用vector之前&#xff0c;需要包含<vector>头文件。然后可以使用vector模板类来创建v…

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文件存不存在不重要…

【影像组学入门百问】#93---#96

#93-如何实现影像组学特征的可视化&#xff1f; 特征映射实现影像组学特征的可视化是将特征值映射回原始医学图像上的对应体素&#xff0c;从而直观地展示特征在图像中的分布。通过特征映射&#xff0c;我们可以观察到哪些区域与特定特征更相关&#xff0c;以便更好地理解病变…

知识点积累系列(八)各种IDE编辑器篇【持续更新】

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 知识点积累 系列文章的第八篇&#xff0c;记录日常学习中遇到的 各种IDE编辑器 相关的知识点 1.VS Code 1.1.launch.json是干嘛的 launch.json 文件的主要作用是提供一个结构化的配置方式&#xff0c;以便在V…

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…

PandaWallet :Web3.0世界的入口

如果说互联网的普及和发展造就了移动支付&#xff0c;那么Web3的到来则书写了加密支付的新篇章&#xff0c;并将加密钱包的发展推向新高潮。 传统电子钱包的功能是储存资产与移动支付。加密钱包在储存资产与移动支付的基础上&#xff0c;增加了身份标识的功能。这也是Web3中用户…

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

板式家具生产线是现代家具制造业中不可或缺的重要工具。然而&#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的原生系统。容器化和云原…