B站pink老师CSS学习(二)

文章目录

  • 一、emmet语法
    • 1.快速生成HTML结构语法
  • 二、复合选择器
    • 1.什么是复合选择器
    • 2.后代选择器
    • 3.子选择器
    • 4.并集选择器
    • 5.伪类选择器
    • 6.链接伪类选择器
    • 7:focus伪类选择器
    • 8.总结
  • 三、元素的显示模式
    • 1.什么是元素显示模式
    • 2.块元素
    • 3.行内元素
    • 4.行内块元素
    • 5.总结
    • 6.元素显示模式转换
    • 7.单行文字垂直居中
  • 三、CSS的背景
    • 1.背景颜色
    • 2.背景图片
    • 3.背景平铺
    • 4.背景图片位置
    • 5.背景图像固定
    • 6.背景复合写法
    • 7.背景色半透明
    • 8.总结
  • 四、CSS三大特性
    • 1.层叠性
    • 2.继承性
    • 3.优先级
    • 4.权重的叠加

一、emmet语法

1.快速生成HTML结构语法

在这里插入图片描述

二、复合选择器

1.什么是复合选择器

在这里插入图片描述

2.后代选择器

在这里插入图片描述

3.子选择器

在这里插入图片描述

4.并集选择器

在这里插入图片描述

5.伪类选择器

在这里插入图片描述

6.链接伪类选择器

在这里插入图片描述

    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
 
        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
 
        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
 
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
 
<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

7:focus伪类选择器

在这里插入图片描述

8.总结

三、元素的显示模式

1.什么是元素显示模式

在这里插入图片描述

2.块元素

在这里插入图片描述

3.行内元素

在这里插入图片描述

4.行内块元素

在这里插入图片描述

5.总结

在这里插入图片描述

6.元素显示模式转换

在这里插入图片描述

  • 截图小工具 snipaste
    在这里插入图片描述

7.单行文字垂直居中

在这里插入图片描述

三、CSS的背景

1.背景颜色

在这里插入图片描述

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

4.背景图片位置

在这里插入图片描述
在这里插入图片描述

5.背景图像固定

在这里插入图片描述

6.背景复合写法

在这里插入图片描述

7.背景色半透明

在这里插入图片描述

8.总结

在这里插入图片描述

四、CSS三大特性

1.层叠性

在这里插入图片描述

2.继承性

在这里插入图片描述

  • 行高的继承
    在这里插入图片描述

3.优先级

在这里插入图片描述
注意点
在这里插入图片描述

4.权重的叠加

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

黑马点评1——短信篇(基于session)

&#x1f308;hello&#xff0c;你好鸭&#xff0c;我是Ethan&#xff0c;一名不断学习的码农&#xff0c;很高兴你能来阅读。 ✔️目前博客主要更新Java系列、项目案例、计算机必学四件套等。 &#x1f3c3;人生之义&#xff0c;在于追求&#xff0c;不在成败&#xff0c;勤通…

uniapp 安卓 Pc端真机浏览器调试

下载插件:真机模拟浏览器 1. 安装, 每次启用时使用usb 线连接电脑, 并且打开手机或者POS (调试设备)开发者模式, 比如我的是pos 机 则在系统设置中找到版本号,点击多次就会触发开发者模式 2.打开真机模拟软件,打开后会打开一个浏览器,如果想要模拟google的浏览器则 在浏览器地…

ZFNet论文详解

ZFNet CNN卷积网络的发展史 1. LetNet5(1998) 2. AlexNet(2012) 3. ZFNet(2013) 4. VGGNet(2014) 5. GoogLeNet(2014) 6. ResNet(2015) 7. DenseNet(2017) 8. EfficientNet(2019) 9. Vision Transformers(2020) 10. 自适应卷积网络(2021) 上面列出了发展到现在CNN的一些经典的…

基于CNN卷积神经网络的金融数据预测matlab仿真,对比BP,RBF,LSTM

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 反向传播网络&#xff08;BP&#xff0c;多层感知器MLP&#xff09; 4.2 径向基函数网络&#xff08;RBF&#xff09; 4.3 卷积神经网络&#xff08;CNN&#xff09; 4.4 长短期记忆网…

成都青年AI人才崭露头角,知了汇智科技助力孵化营大放异彩

5月18日-19日&#xff0c;为期两天的成都国际商贸城青年&#xff08;大学生&#xff09;AI应用孵化营活动在热烈的氛围中圆满落幕。本次活动由成都国际商贸城、成都成商数字科技有限公司、成都知了汇智科技有限公司及成都电商职教集团联合举办&#xff0c;旨在为青年&#xff0…

深入浅出递归算法

文章目录 递归思想递归的题目1.汉诺塔问题问题分析代码展示 2.合并两个有序链表问题分析代码展示 3.反转链表问题分析代码展示 4.两两交换 链表中的节点问题分析代码展示 总结 递归思想 递归就是将一个很大的问题拆分成子问题&#xff0c;然后再将子问题继续拆分&#xff0c;拆…

力扣226. 翻转二叉树(DFS的两种思路)

Problem: 226. 翻转二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 涉及二叉树的递归解法时往往需要考虑两种思路&#xff1a; 1.在递归遍历时执行题目需要的具体要求&#xff1b; 2.将一个大问题分解为多个小子问题 具体到本体&#xff1a; 思路1&#xff1a;遍历 先…

前端请求超时截断,axios timeout设置未生效情况记录

问题描述 前端请求超时截断&#xff0c;axios timeout设置未生效情况记录 timeout设置方式&#xff1a; 表现&#xff08;前端超过5min报错500&#xff0c;直接访问接口超过5min能够正常响应&#xff09;&#xff1a; 问题原因 上面的配置设置时间为1000min&#xff0c;明显…

多项式重构的平滑和法线估计-------PCL

多项式重构的平滑和法线估计 /// <summary> /// 多项式重构的平滑和法线估计 /// </summary> /// <param name"cloud"></param> /// <returns>输出一个包含平滑后的点云数据以及相应法线信息的数据结构</returns> pcl::PointCl…

ROCm上情感分析:使用循环神经网络

15.2. 情感分析&#xff1a;使用循环神经网络 — 动手学深度学习 2.0.0 documentation (d2l.ai) 代码 import torch from torch import nn from d2l import torch as d2lbatch_size 64 train_iter, test_iter, vocab d2l.load_data_imdb(batch_size)class BiRNN(nn.Module):…

sqlserver的查询(三)

目录 10. group by(分组) 11. having(对分组后的信息过滤) 可能从这里开始&#xff0c;执行顺序越来越显得重要了&#xff01;&#xff01;&#xff01; 10. group by(分组) 这个查询相比前面会有一些困难&#xff1b; 格式&#xff1a;group by 字段的集合&#xff1b; 功…

GD32F103RCT6/GD32F303RCT6-UCOSIII底层移植(4)消息队列实验

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布&#xff1a; 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转&#xff1a; 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…

Java | Leetcode Java题解之第109题有序链表转换二叉搜索树

题目&#xff1a; 题解&#xff1a; class Solution {ListNode globalHead;public TreeNode sortedListToBST(ListNode head) {globalHead head;int length getLength(head);return buildTree(0, length - 1);}public int getLength(ListNode head) {int ret 0;while (head…

kimi :系统框架 实力学习

学海无涯&#xff0c;你&#xff0c;准备好了吗&#xff1f; 学习一个新的嵌入式系统架构&#xff0c;你"只"需要 - 1 - 手册/速查函数&#xff08;对于比较大的架构&#xff0c;F12往往返回多个结果&#xff0c;增加混乱&#xff09;&#xff1b; 2 - 源代码和VS&am…

20.有序性与内存屏障

文章目录 有序性与内存屏障1.重排序1.1.编译器重排序1.2.CPU重排序1.2.1.指令级重排序1.2.2.内存系统重排序1.3.As-if-Serial规则 2.内存屏障2.1.硬件层面的内存屏障2.1.2.写屏障2.1.3.读屏障2.1.4.全屏障 2.2.硬件层的内存屏障作用2.3.案例 有序性与内存屏障 有序性 与 可见性…

混合组网VS传统网络:智能硬件混合组网优劣势浅要解析

智能硬件混合组网是一种利用多种通信技术相结合的方法&#xff0c;以实现更灵活、更可靠的网络连接。通过蓝牙、Wi-Fi、LoRa、4G相互之间的不同通讯方式&#xff0c;根据应用场景的不同以及现场实际环境&#xff0c;优选最佳物联网混合组网方案&#xff0c;以达到部署最便捷性价…

云曦2024年春季学期期中考复现

目录 Web Web_SINGIN 简简单单的文件上传 好玩的PHP 渗透的本质 简简单单的sql re baby_re easy xor Crypto easy_rsa Rsa2 Crypto_Singin Pwn pwn_Sing Misc easy_singin Xjpg 流量分析1 流量分析3 流量分析2 Web Web_SINGIN 1.使用右键检查&#xff0c…

IMU内参标定(理论)

1、内参标定标定什么&#xff1f; 生产零偏、标度因数误差、安装误差 2、现象是什么&#xff1f; 零偏现象&#xff1a;即使没有任何运动或旋转&#xff0c;IMU传感器仍然会输出一个非零的信号。零偏是一个恒定的误差&#xff0c;导致测量值始终偏离实际值。对于加速度计&am…

DolphinDB 携手九鞅科技,助力固收投研效能飞跃

随着金融市场开放的广度与深度不断拓宽&#xff0c;金融产品呈现出多样化的发展态势&#xff0c;其中债券投资组合凭借其低风险性、高流动性与稳健的收益表现&#xff0c;逐渐成为投资理财领域备受瞩目的焦点。投资经理不仅需要了解哪些债券值得投资&#xff0c;更要对债券投资…