前端三剑客 —— 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>

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

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

相关文章

2024年湖北中级职称报名时间是什么时候呢？

2024年湖北中级职称报名时间是什么时候呢？

甘建二十年耕耘职称&#xff0c;关于职称大小事都了解 2024年湖北部分地区职称报名都已经结束了&#xff0c;恩施、十堰、黄冈、黄石、东湖高新上半年、襄阳国企事业单位和副高职称&#xff0c;这些地方的报名都截止了&#xff0c;一年一次&#xff0c;错过了有的没有第二次的话…
阅读更多...
基于python的matplotlib库绘制折线图

基于python的matplotlib库绘制折线图

代码 import matplotlib.pyplot as plt# New data for CIDEr metric beam_sizes [1, 3, 5, 7] CIDEr_new [35.2, 35.6, 38.1, 37.6]# Creating the plot for CIDEr vs Beam Size with the updated data plt.figure(figsize(10, 6)) plt.plot(beam_sizes, CIDEr_new, marker^…
阅读更多...
pygame三角形重心坐标填充 沿x轴旋转

pygame三角形重心坐标填充 沿x轴旋转

import pygame from pygame.locals import * import sys import math# 初始化Pygame pygame.init()# 设置窗口大小 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(3D Triangle Fill with Barycentric Coordinates)# 定…
阅读更多...
Samba 总是需要输入网络凭证

Samba 总是需要输入网络凭证

输入网络凭证&#xff1a; 用户名是 cat /etc/samba/smb.conf&#xff0c;查看 valid users mxw 为用户名。而不是其他账号名或者用户名&#xff0c;更不是登录计算机时的计算机名&#xff1b; 密码是 需要记住安装samba服务器时&#xff0c;自己设置的password&#xff1…
阅读更多...
鸿蒙南向开发案例：【智能养花机】

鸿蒙南向开发案例：【智能养花机】

样例简介 智能养花机通过感知花卉、盆栽等植宠生长环境的温度、湿度信息&#xff0c;适时为它们补充水分。在连接网络后&#xff0c;配合数字管家应用&#xff0c;用户可远程进行浇水操作。用户还可在应用中设定日程&#xff0c;有计划的按日、按周进行浇水。在日程中用户可添…
阅读更多...
YooAssets 使用相关

YooAssets 使用相关

## 使用 YooAssets 动态加载原生文件时候 > 原生文件&#xff1a;txt&#xff1b;json&#xff1b;等需要直接保存文件内string字符的文件 需要将打包方式设置成为&#xff0c;PackRawFile 并且加载时候使用 API &#xff1a; YooAssets.LoadRawFileSync()YooAssets.LoadRa…
阅读更多...
SpringBoot3入门

SpringBoot3入门

本文用于SpringBoot3入门。可以实现在浏览器地址栏输入localhost:8080/hello显示字符串hello world ~ 创建Maven工程 创建springboot项目。Jdk版本选17及以上&#xff0c;java选17及以上版本。打包方式选jar。因为当前工程内部已经内嵌了tomcat&#xff0c;就不用另外打包成w…
阅读更多...
Redhat 7.9 安装dm8配置文档

Redhat 7.9 安装dm8配置文档

Redhat 7.9 安装dm8配置文档 一 创建用户 groupadd -g 12349 dinstall useradd -u 12345 -g dinstall -m -d /home/dmdba -s /bin/bash dmdba passwd dmdba二 创建目录 mkdir /dm8 chown -R dmdba:dinstall /dm8三 配置/etc/security/limits.conf dmdba soft nproc 163…
阅读更多...
创新视角：探索系统产品可用性测试的前沿分类方法与实践应用

创新视角：探索系统产品可用性测试的前沿分类方法与实践应用

一、可用性测试概念 1、什么是可用性&#xff1f; 任何与人可以发生交互的产品都应该是可用的&#xff0c;就一般产品而言&#xff0c;可用性被定义为目标用户可以轻松使用产品来实现特定目标。 ISO9241/11中的定义是&#xff1a; 一个产品可以被特定的用户在特定的场景中&a…
阅读更多...
可视化大屏的应用（18）：网络安全和信息安全领域

可视化大屏的应用（18）：网络安全和信息安全领域

可视化大屏在物联网领域具有以下价值&#xff1a; 实时监控和可视化&#xff1a; 可视化大屏可以将物联网设备和传感器的数据以图表、图形和动画等形式实时展示&#xff0c;帮助用户直观地了解物联网系统的运行状态和数据趋势。通过可视化大屏&#xff0c;用户可以快速发现异…
阅读更多...
探索--------------redis缓存三大问题及解决方案

探索--------------redis缓存三大问题及解决方案

目录 一、redis的三大缓存问题 1、缓存穿透 1.1 问题描述 1.2缓存穿透发生的条件 1.3缓存穿透发生的原因 1.4解决方案 2、缓存雪崩 2.1问题描述 2.2解决缓存雪崩问题的方法有&#xff1a; 3、缓存击穿 &#xff08;热点数据集中失效&#xff09; 3.1问题描述 3.2缓…
阅读更多...
基于java实现的弹幕视频网站

基于java实现的弹幕视频网站

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…
阅读更多...
AMRT3D数字孪生引擎

AMRT3D数字孪生引擎

产品概述 AMRT3D引擎是由眸瑞网络科技自主研发、拥有完全自主知识产权的一款全球首款轻量化3D图形引擎&#xff0c;引擎以核心的轻量化技术及AMRT轻量格式为支柱&#xff0c;专为数字孪生项目开发打造。 AMRT3D引擎提供一整套完善的数字孪生解决方案&#xff0c;在数据处理方…
阅读更多...
Gemini即将收费，GPT无需注册？GPT3.5白嫖和升级教程

Gemini即将收费，GPT无需注册？GPT3.5白嫖和升级教程

&#x1f310;Gemini 即将开始收费 开发者“白嫖”的好日子到头了 - Gemini将开始收费&#xff0c;影响使用Google AI for Developers提供的Gemini API的用户。 - Gemini API将引入按量付费定价&#xff0c;需要注意新的服务条款。 - 用户需在5月2日之前停止使用Gemini API和Go…
阅读更多...
【蓝桥杯-Even Parity】

【蓝桥杯-Even Parity】

蓝桥杯-Even Parity 洛谷 UVA11464 Even Parity 暴力思路&#xff1a; 去遍历每个元素&#xff0c;如果不符合要求则翻转 时间复杂度大概在O&#xff08;2^&#xff08;nn&#xff09; nn&#xff09; 改进思路&#xff1a; 先去枚举确定第一行&#xff08;第一行得合法&…
阅读更多...
吴恩达：AI 智能体的四种模式

吴恩达：AI 智能体的四种模式

一、背景 吴恩达在《What’s next for AI agentic workflows ft》分享中提出 AI 智能体的四种模式。 反思&#xff08;Reflection&#xff09;&#xff1a; LLM 检查自己的工作&#xff0c;以提出改进方法。 使用工具&#xff08;Tool use&#xff09;&#xff1a;LLM 拥有…
阅读更多...
从神经元到深度学习：探索多层感知机与卷积神经网络的奥秘

从神经元到深度学习：探索多层感知机与卷积神经网络的奥秘

深度学习&#xff1a;探索未来的钥匙 在当今技术飞速发展的时代&#xff0c;深度学习已成为科技界的一颗璀璨明珠&#xff0c;它不仅推动了人工智能的边界扩展&#xff0c;还在诸多领域中展现出了巨大的应用潜力。从自动驾驶汽车、语音识别到医疗诊断&#xff0c;深度学习正在…
阅读更多...
【运输层】网络数据报协议 UDP

【运输层】网络数据报协议 UDP

目录 1、UDP 的特点 2、UDP 的首部格式 UDP 只在 IP 协议之上增加了很少的一些功能&#xff0c;比如复用、分用以及差错检测等。 1、UDP 的特点 UDP是无连接的&#xff0c;即发送数据之前不需要建立连接&#xff0c;因此减少了开销和发送数据之前的时延。 UDP使用尽最大努力…
阅读更多...
防止推特Twitter账号被冻结，应该选什么代理类型IP？

防止推特Twitter账号被冻结，应该选什么代理类型IP？

在处理多个 Twitter 帐号时&#xff0c;选择合适的代理IP对于避免大规模帐户暂停至关重要。现在&#xff0c;问题出现了&#xff1a;哪种类型的代理是满足您需求的最佳选择&#xff1f;下面文章将为你具体讲解推特账号冻结原因以及重点介绍如何选择代理IP。 一、推特账号被冻结…
阅读更多...
RUST语言基本数据类型认识

RUST语言基本数据类型认识

1.RUST的基本数据类型参考: 2.使用RUST数据类型声明变量并赋值: let a:i81;//8位有符号整数let a1:u82;//8位无符号整数let b:i161;//16位有符号整数let b1:u162;//16位无符号整数let c:i321;//32位有符号整数let c1:u322;//32位无符号整数let d:i641;//64位有符号整数let d1:u…
阅读更多...
最新文章

Copyright @ 2022~2023