【伪类·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.hqwc.cn/news/442742.html

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

相关文章

【极数系列】Flink集成DataSource读取Socket请求数据(09)

文章目录 01 引言02 简介概述03 基于socket套接字读取数据3.1 从套接字读取。元素可以由分隔符分隔。3.2 windows安装netcat工具&#xff08;1&#xff09;下载netcat工具&#xff08;2&#xff09;安装部署&#xff08;3&#xff09;启动socket端口监听 04 源码实战demo4.1 po…

苍穹外卖项目可以写的简历和如何优化简历

文章目录 重点写中规写添加自己个性的项目面试会问道的问题 我是一名双非大二计算机本科生&#xff0c;希望我的分享对你有帮助&#xff0c;点赞关注不迷路。 简历编写一直是很多人求职人的心病&#xff0c;我自己上学期有一门课程是去校内企业面试&#xff0c;当时我就感受出…

服装行业ERP系统解决方案

我国的服装企业大多属于劳动密集型&#xff0c;主要有三种类型&#xff1a;自有品牌服装生产销售企业、接订单生产型企业及处于产业链下游的零售分销企业。在经营过程中&#xff0c;服装行业面临诸多挑战&#xff0c;如流行周期短、季节性强&#xff0c;市场变化快&#xff1b;…

福禄克万用表内置保险丝的测量技巧

所需设备&#xff1a; 1、Fluke ADPT连接器&#xff1b; 2、Fluke 15B / 17B / 18B&#xff1b; 3、Fluke 15B Max / 17B Max&#xff1b; 在不打开万用表后盖的情况下&#xff0c;判断内部的保险丝是否完好&#xff1b; 将万用表档位调整到 “电阻” 档&#xff1b;如下…

java基于springboot的美妆化妆品商城购物网站ssm+vue

美妆购物网站分为管理员&#xff0c;商家&#xff0c;用户三种权限。 用户可以注册&#xff0c;可以登录&#xff0c;用户进入到首页可以看到热门化妆品和新品化妆品&#xff0c;可以选购化妆品&#xff08;可以通过搜索查询&#xff09;加入购物车&#xff0c;查看化妆品详细情…

Android渗透测试工具之Drozer-安装

一、介绍&#xff1a; drozer&#xff08;以前称为 Mercury&#xff09;是领先的 Android 安全测试框架。 drozer 允许您通过扮演应用程序的角色并与 Dalvik VM、其他应用程序的 IPC 端点和底层操作系统交互来搜索应用程序和设备中的安全漏洞。 drozer 提供的工具可帮助您使…

JAVA处理类似饼状图占比和100%问题,采用最大余额法

前言&#xff1a; 在做数据统计报表的时候&#xff0c;有两种方式解决占比总和达不到100%或者超过100%问题。 第一种方式是前端echart图自带的算分框架。 第二种方式是java后端取处理这个问题。 现存问题&#xff1a; 前端不通过饼状图的方式去展示各个分类的占比累加和为100%问…

Java学习之基础语法

Java学习之基础语法 本文主要是对于有了其他语言基础的人总结的资料&#xff0c;因此本文只写出了Java与C语言&#xff0c;C等语言的区别之处与部分重点。 1.基础语法&#xff1a; 1.1.包与类&#xff1a; 1.1.1.包&#xff1a; 在Java中&#xff0c;包&#xff08;packag…

【C++】类和对象_1_定义和定义域

1.类的定义&#xff1a; class className {//类体&#xff1a;由成员函数和成员变量组成 };//注意后面的分号class为定义类的关键字&#xff0c;ClassName为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。 类体中内容称为类的成员&#x…

docker安全与https协议

一、docker存在的安全问题 1、docker 自身漏洞 docker 应用本身实现上会有代码缺陷&#xff0c;docker 历史版本共有超过 20 项漏洞 2、docker公有仓库安全问题 docker 提供了 docker hub&#xff0c;可以让用户上传创建的镜像&#xff0c;以便其他用户下载&#xff0c;快速…

05 MyBatis之表关系的声明+事务+SqlSession三件套的作用域

MyBatis 支持一对一&#xff0c;一对多&#xff0c;多对多查询。XML 文件和注解都能实现关系的操作。多对多实质就是一对多 1. 表关系的维护 1.1 One一对一 一对一查询和多表(两表)查询很相似, 都能查询两表的全部属性 区别是一对一可以在对象中嵌套对象, 呈现包含关系; 多表…

elementUI之用label传值给v-model的el-radio

如图 这个控件比较特别&#xff0c;是用label作为传给v-model的值&#xff0c;其他控件大多都是用value来传值。 el-radio-group的作用是将其中的单选控件作为一组。