前端三剑客 —— CSS （第三节）

目录

上节回顾：

1.CSS使用有以下几种样式;

2.选择器

        1.基本选择器

        2.包含选择器

        3.属性选择器 []

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

一些特殊样式

媒体查询

自定义字体

变换效果

translate（）方法

rotate（）方法

scale（）方法

skew（）方法

matrix（）方法

上节回顾：

1.CSS使用有以下几种样式;

        1.行内样式

        2.页面样式

        3.外部样式（link标签，@import）

2.选择器

        1.基本选择器

                1.ID选择器

                2.标签选择器

                3.类选择器

                4.通用选择器

        2.包含选择器

                1.子选择器 >

                2.后代选择器 空格

                3.并列选择器 ，

                4.交集选择器 选择器.选择器

        3.属性选择器 []

                1.完全匹配 =

                2.包含匹配 *=

                3.以什么开头 ^=

                4.以什么结尾 $=

        4.伪类选择器 ：

        5.伪元素选择器 ::before :after

3.常见样式的使用

常见样式参考表

text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色

box-shadow

border-radio 实现圆角

margin 内边距

padding 外边距

background

样式（CSS）：

body {

    /*background-color: #666666;*/

  }

  .content {

    width: 600px;

    font-family: "微软雅黑","宋体";

    font-size: 16px;

    line-height: 35px;

    /*font-weight: bold;*/

    text-shadow: -5px -5px 2px #317FE5;   /* offset-x | offset-y | blur

  radius | color */

    position: fixed;

    top: 0;

    left: 0;

  }

  .box {

    margin: 30px auto;

    width: 700px;

    height: 100px;

    background-color: grey;

    color: white;

    /*text-align: justify;*/

    word-spacing: 10px;

    letter-spacing: 5px;

    text-transform: lowercase;

    text-decoration: underline;

    direction: inherit;

    box-shadow: 5px 5px 5px #ff0000;   /* offset-x | offset-y | blur-radius |

  color */

    /*border: 2px solid green;*/

    border-width: 2px;

    border-style: solid;

    border-color: green;

    /*border-radius: 5px;*/

    border-bottom-left-radius: 5px;

    border-top-right-radius: 15px;

    /*visibility: hidden;*/

    /*display: none;*/

  }

  input {

    outline: blue 1px solid;

  }

  .box1 {

    margin-top: 30px;

    width: 300px;

    height: 300px;

    /*background-color: #317FE5;*/

    border-radius: 50%;

    background: #317FE5 url("../image/5.jpeg") left top;

  }

  .box2 {

    margin: 30px;

    width: 700px;

    height: 300px;

    border: 1px solid red;

    background: url("../image/mybatis-logo.png") no-repeat 50px 5px;

  }

页面（HTML）:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>常见样式的使用</title>

   <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="content">

中新网2月20日电 据香港《明报》报道，澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，被视为“城中

钻石笋盘”，家底丰厚兼遗传了赌王的帅气。2018年农历新年，他公布向内地女友GiGi求婚成功，随后传

媒追问他有关婚礼的安排却低调避谈。

</div>

<div class="box">澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，hello HTML css</div>

<input type="text" name="username" placeholder="姓名">

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

一些特殊样式

媒体查询

有时，我们需要显示的区域根据不同设备显示不一样的效果，这时就可以使用媒体查询。而使用媒体查询我们就需要使用到@media来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体查询</title>

    <style>

        .box{

            width: 100%;

            height: 500px;

            background-color: #317FE5;

        }

        @media screen and (max-width: 500px) {

            .box {

                background-color: red;

            }

        }

        @media screen and (min-width: 768px){

            .box {

                background-color: blue;

            }

        }

        @media screen and (min-width: 1200px){

            .box {

                background-color: #C44F00;

            }

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

自定义字体

由于浏览器默认的使用的字体是微软雅黑，但有时候我们希望使用我们自己指定的字体，这时就需要使用@font-face来实现

变换效果

在CSS中有以下几种变换效果：translate（）移动、rotate（）转换、scale（）缩放、shew（）、mareix（）

translate（）方法

它是一种平移效果，从元素某个位置移动到另一个位置。在使用过程中，需要通过X轴和Y轴来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            z-index: 900000;

        }

        div.box2 {

            background-color: orange;

            /*transform: translate(200px, 30px);*/

            /*transform: translate(100px, -100px);*/

            /*transform: translate(50px);*/

            /*transform: translateX(100px);*/

            transform: translateY(100px);

            z-index: 0;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

rotate（）方法

这个效果是·让某个元素进行旋转，需要指定旋转的角度。负数为逆时针旋转，正数为顺时针旋转，旋转单位是deg。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rotate</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: rotate(-20deg);

        }

        div.box2 {

            background-color: orange;

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

scale（）方法

这个方法的作用是让某个元素的尺寸增加或者减少，会根据给定的宽度（x轴）和高度（y轴）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale</title>

    <style>

        div {

            width: 200px;

            height: 200px;

        }

        div.box1 {

            background-color: #317FE5;

            transform: scale(0.5, 0.5);

        }

        div.box2 {

            background-color: orange;

            /*transform: scale(1.5, 1.5);*/

            /*transform: scale(2);*/

            transform: scaleX(2);

        }

        .container {

            position: absolute;

            left: 200px;

            top: 0;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

skew（）方法

这个方法的作用是让元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）来进行变换。

matrix（）方法

这个方法可以实现前面几个效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>matrix</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            color: white;

            text-align: center;

        }

        div.box1 {

            background-color: #317FE5;

        }

        div.box2 {

            background-color: orange;

            transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);  /* matrix(a, b, c, d, tx, ty) */

        }

    </style>

</head>

<body>

<div class="box1">这是第一个块元素</div>

<div class="box2">这是第二个块元素</div>

</body>

</html>

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

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

相关文章

从 Redis 开源协议变更到 ES 国产化：一次技术自主的机遇

从 Redis 开源协议变更到 ES 国产化：一次技术自主的机遇

引言 近日&#xff0c;Redis Labs 宣布其主导的开源项目 Redis 将采用双重源代码可用许可证&#xff08;RSALv2&#xff09;和服务器端公共许可证&#xff08;SSPLv1&#xff09;。这一重大决策标志着 Redis 从传统的 BSD 许可证向更加严格的控制权转变&#xff0c;同时也引发…
阅读更多...
Servlet Response的常用方法 缓存和乱码处理

Servlet Response的常用方法 缓存和乱码处理

前言 Servlet Response相关的信息&#xff0c;在service方法中使用的是HttpServletResponse&#xff0c;它继承自ServletResponse&#xff0c;扩展了Http协议相关的内容&#xff0c;下面简单记录一下它的基本用法。 一、response组成内容 以下是一个常见response响应的内容&…
阅读更多...
Ruby 之交租阶段信息生成

Ruby 之交租阶段信息生成

题目 我看了一下&#xff0c;这个题目应该不是什么机密&#xff0c;所以先放上来了。大概意思是根据合同信息生成交租阶段信息。 解答 要求是要使用 Ruby 生成交租阶段信息&#xff0c;由于时间比较仓促&#xff0c;变量名那些就用得随意了些。要点主要有下面这些&#xff1a…
阅读更多...
Redission--布隆过滤器解决缓存穿透问题

Redission--布隆过滤器解决缓存穿透问题

布隆过滤器在缓存穿透问题中的使用 布隆过滤器的核心是一个位数组 布隆过滤器的误判 使用Redission的布隆过滤器步骤 添加 Redission 依赖&#xff1a;首先需要将 Redission 添加到你的 Java 项目中&#xff0c;你可以通过 Maven 来添加 Redission 的依赖。 创建 Redissio…
阅读更多...
机器学习全攻略：概念、流程、分类与行业应用案例集锦

机器学习全攻略：概念、流程、分类与行业应用案例集锦

目录 1.引言 2.从零开始认识机器学习&#xff1a;基本概念与重要术语 3.五步走&#xff1a;掌握机器学习项目执行的完整流程 3.1.问题定义与数据收集 3.2.数据预处理与特征工程 3.3.模型选择与训练 3.4.模型评估与优化 3.5.模型部署与监控 4.深入了解各类机器学习方法…
阅读更多...
LeetCode-146. LRU 缓存【设计 哈希表 链表 双向链表】

LeetCode-146. LRU 缓存【设计 哈希表 链表 双向链表】

LeetCode-146. LRU 缓存【设计 哈希表 链表 双向链表】 题目描述&#xff1a;解题思路一&#xff1a;双向链表&#xff0c;函数 get 和 put 必须以 O(1) 的平均时间复杂度运行。一张图&#xff1a;知识点__slots__ 解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&am…
阅读更多...
使用 Flume 将 CSV 数据导入 Kafka：实现实时数据流

使用 Flume 将 CSV 数据导入 Kafka：实现实时数据流

使用 Flume 将 CSV 数据导入 Kafka&#xff1a;实现实时数据流 文介绍了如何使用 Apache Flume 将 CSV 格式的数据从本地文件系统导入到 Apache Kafka 中&#xff0c;以实现实时数据流处理。通过 Flume 的配置和操作步骤&#xff0c;我们可以轻松地将数据从 CSV 文件中读取并发…
阅读更多...
医院云HIS系统源码，二级医院、专科医院his系统源码，经扩展后能够应用于医联体/医共体

医院云HIS系统源码，二级医院、专科医院his系统源码，经扩展后能够应用于医联体/医共体

基于云计算技术的B/S架构的HIS系统&#xff0c;为医疗机构提供标准化的、信息化的、可共享的医疗信息管理系统&#xff0c;实现医患事务管理和临床诊疗管理等标准医疗管理信息系统的功能。 系统利用云计算平台的技术优势&#xff0c;建立统一的云HIS、云病历、云LIS&#xff0…
阅读更多...
设计模式12--组合模式

设计模式12--组合模式

定义 案例一 案例二 优缺点
阅读更多...
【ESP32S3 Sense接入语音识别+MiniMax模型+TTS模块语音播报】

【ESP32S3 Sense接入语音识别+MiniMax模型+TTS模块语音播报】

【ESP32S3 Sense接入语音识别MiniMax模型TTS模块语音播报】 1. 前言2. 功能模块概述2.1 语音接入2.2 大模型接入2.3 TTS模块接入 3. 先决条件3.1 环境配置3.2 所需零件3.3 硬件连接步骤 4. 核心代码4.1 源码分享4.2 代码解析 5. 上传验证5.1 对话测试5.2 报错 6. 总结 1. 前言 …
阅读更多...
【 书生·浦语大模型实战营】学习笔记（一）：全链路开源体系介绍

【 书生·浦语大模型实战营】学习笔记（一）：全链路开源体系介绍

&#x1f389;AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料&#xff0c;配有全面而有深度的专栏内容&#xff0c;包括不限于 前沿论文解读、…
阅读更多...
我的2024java实习投递历程

我的2024java实习投递历程

每天投递一个简历吧&#xff0c;我tm投投投投投投投 3/21 周四 招商银行 招银网络科技 杭州 java实习生 4月2号笔试 笔试经验&#xff1a;45分钟 30道选择题 题目回忆版&#xff1a; 1.8进制 1-777 多少个数各位乘积为0 2.有关系R&#xff08;ABCDE&#xff09;&…
阅读更多...
【EasyExcel】多sheet、追加列

【EasyExcel】多sheet、追加列

业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务&#xff0c;需求就是多sheet&#xff0c;每个sheet导出不同结构&#xff0c;第一个sheet里面能够根据最后一列动态的追加列&#xff0c;追加多少得看运营人员传了多少需求列。原本使用的 pig4cloud 架子&…
阅读更多...
备战蓝桥杯Day36 - 动态规划 - 三角形最小路径和问题

备战蓝桥杯Day36 - 动态规划 - 三角形最小路径和问题

一、什么是动态规划 通过拆分问题&#xff0c;定义问题状态和状态之间的关系&#xff0c;使得问题能够以递推的方式解决。 哪些问题可以使用动态规划&#xff1f; 1、具有最优子结构&#xff1a;问题的最优解所包含的子结构的解也是最优的 2、具有无后效性&#xff1a;未来…
阅读更多...
若依框架时间比较的坑（DATE_FORMAT）

若依框架时间比较的坑（DATE_FORMAT）

背景 - 想做生日的比较 若依自带的比较 <if test"params.beginTime ! null and params.beginTime ! "><!-- 开始时间检索 -->AND date_format(u.create_time,%y%m%d) > date_format(#{params.beginTime},%y%m%d)</if><if test"params…
阅读更多...
Linux中的shell脚本之流程控制循环遍历

Linux中的shell脚本之流程控制循环遍历

3 条件判断 4 流程控制语句 1&#xff09;if 语句 案例&#xff0c;用户输入用户名和密码&#xff0c;判断用户名是否是admin,密码是否是123,如果正确&#xff0c;则显示登录成功 首先我创建了shell文件&#xff0c;touch getpawer 其中getpawer 是我自己命的名 #!/bin/bas…
阅读更多...
C#实现只保存2天的日志文件

C#实现只保存2天的日志文件

文章目录 业务需求代码运行效果 欢迎讨论&#xff01; 业务需求 在生产环境中&#xff0c;控制台窗口不便展示出来。 为了在生产环境中&#xff0c;完整记录控制台应用的输出&#xff0c;选择将其输出到文件中。 但是&#xff0c;存储所有输出的话会占用很多空间&#xff0c;…
阅读更多...
03 Python进阶：MySQL - mysql-connector

03 Python进阶：MySQL - mysql-connector

mysql-connector安装 要在 Python 中使用 MySQL 数据库&#xff0c;你需要安装 MySQL 官方提供的 MySQL Connector/Python。下面是安装 MySQL Connector/Python 的步骤&#xff1a; 首先&#xff0c;确保你已经安装了 Python&#xff0c;如果没有安装&#xff0c;可以在 Python…
阅读更多...
AR/VR技术对制造业劳动力危机的影响

AR/VR技术对制造业劳动力危机的影响

借助 AR/VR 的力量缩小现代制造业的技能差距 数字化转型仍然是企业的首要任务&#xff0c;其许多方面都需要人工干预。然而&#xff0c;推动此类举措所需的技术工人日益短缺。这就造成了我们所说的“制造业劳动力危机”。 制造业应当如何&#xff1a; 制造业用工危机正在影响…
阅读更多...
JAVAEE之Cookie/Session

JAVAEE之Cookie/Session

1.Cookie HTTP 协议自身是属于 "无状态" 协议. "无状态" 的含义指的是: 默认情况下 HTTP 协议的客户端和服务器之间的这次通信, 和下次通信之间没有直接的联系. 但是实际开发中, 我们很多时候是需要知道请求之间的关联关系的. 例如登陆网站成功后, 第二…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023