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

news2024/11/18 8:36:29

目录

上节回顾：

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.coloradmin.cn/o/1567589.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenHarmony实战：小型系统平台驱动移植

OpenHarmony实战：小型系统平台驱动移植

在这一步&#xff0c;我们会在源码目录//device/vendor_name/soc_name/drivers目录下创建平台驱动。 建议的目录结构&#xff1a; device ├── vendor_name │ ├── drivers │ │ │ ├── common │ │ │ ├── Kconfig # 厂商驱动内核菜单入口 │ …
阅读更多...
win11安装wsl报错：无法解析服务器的名称或地址

win11安装wsl报错：无法解析服务器的名称或地址

一 说明 项目开发中&#xff0c;需要用到wsl&#xff0c;因此根据wsl官方&#xff08;WSL安装教程&#xff09;命令 wsl --install 进行wsl的安装。而本文主要是记录自己在安装wsl中遇到的问题 “无法解析服务器的名称或地址” 的解决办法。 二 方法一&#xff1a;更改DNS&…
阅读更多...
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…
阅读更多...
【web】nginx+php-fpm云导航项目部署-(简版)

【web】nginx+php-fpm云导航项目部署-(简版)

一、yum安装nginx yum -y install nginx 二、php环境安装 2.1 php安装 yum -y install php 2.2 php-fpm安装 yum -y install php-fpm 注&#xff1a;PHP在 5.3.3 之后已经讲php-fpm写入php源码核心了。 2.3 项目依赖的php-xml和php-xmlrpc安装 yum -y install php-…
阅读更多...
在Vue2里面加载AntvL7

在Vue2里面加载AntvL7

1、代码块 <template><div ref"mapContainer" style"width: 800vh; height: 100vh; align-items: center; justify-content: center"></div> </template><script> export default {mounted() {this.initMap();},methods: {…
阅读更多...
openplc Linux 地址映射io，读写驱动数据等使用记录

openplc Linux 地址映射io，读写驱动数据等使用记录

1. 上一篇记录 openplc使用C语言文件读写驱动实现基本流程。 openPLC_Editor C语言编程 在mp157 arm板上调用io等使用记录_openplc c 编程-CSDN博客 2. 下面通过映射地址的方式控制io和读写驱动数据。 在runtime 环境的 hardware 硬件配置中 选择 python on Linux(PSM)&#…
阅读更多...
Redis常用命令补充和持久化

Redis常用命令补充和持久化

一、redis 多数据库常用命令 1.1 多数据库间切换 1.2 多数据库间移动数据 1.3 清除数据库内数据 1.4 设置密码 1.4.1 使用config set requirepass yourpassword命令设置密码 1.4.2 使用config get requirepass命令查看密码 二、redis高可用 2.1 redis 持久化 2.1.1 持…
阅读更多...
PS从入门到精通视频各类教程整理全集，包含素材、作业等（7）复发

PS从入门到精通视频各类教程整理全集，包含素材、作业等（7）复发

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 PS敬伟01——90集等文件 https://www.alipan.com/s…
阅读更多...
日历插件fullcalendar【前端】

日历插件fullcalendar【前端】

日历插件fullcalendar【前端】 前言版权开源推荐日历插件fullcalendar一、下载二、初次使用日历界面示例-添加事件&#xff0c;删除事件 三、汉化四、动态数据五、前后端交互1.环境搭建-前端搭建2.环境搭建-后端搭建3.代码编写-前端代码fullcalendar.htmlfullcalendar.js 4.代码…
阅读更多...
vue项目引入微信sdk: npm install weixin-js-sdk --save报错

vue项目引入微信sdk: npm install weixin-js-sdk --save报错

网上查到要用淘宝的镜像 同事告知旧 域名&#xff1a;https://registry.npm.taobao.org/已经不能再使用 使用 npm config set registry http://registry.npmmirror.com
阅读更多...
DTFT及其反变换的直观理解

DTFT及其反变换的直观理解

对于离散时间傅里叶变换(DTFT)及其反变换的讲解&#xff0c;教材里通常会先给出DTFT正变换的公式&#xff0c;再举个DTFT的简单变换例子&#xff0c;推导一下DTFT的性质&#xff0c;然后给出DTFT反变换的公式&#xff0c;再证明一下正变换和反变化的对应关系。总的来说就是&…
阅读更多...
MySQL版本特性和存储引擎选择

MySQL版本特性和存储引擎选择

MySQL版本特性和存储引擎选择 1.说一下MySQL 5.5 5.6 5.7 8.0 各个版本的特性 MySQL 5.5 优点: 稳定性&#xff1a;5.5版本是长期支持&#xff08;LTS&#xff09;版本&#xff0c;因此它非常稳定&#xff0c;被广泛部署在生产环境中。兼容性&#xff1a;与旧版本的MySQL和…
阅读更多...
索引的概念

索引的概念

索引的概念    1.索引是一种可选的与表相关的数据库对象&#xff0c;用于提高数据的查询效率。    2.索引是一种有序的数据结构。    3.如果一个表没有创建索引&#xff0c;则对该表进行查询时需要进行全表扫描&#xff1b;如果创建了索引&#xff0c;则在有条件查询时…
阅读更多...
http模块 设置资源类型（mime类型）

http模块 设置资源类型（mime类型）

虽然浏览器自带websocket功能它会根据响应回来的内容自动去判断资源类型&#xff0c;但是我们加上了mime类型判断代码会更加规范些 一、mime类型概念&#xff1a; 媒体类型是一种标准&#xff0c;它用来表示文档。文件、字节流的性质和格式。HTTP服务可以设置响应头Content-T…
阅读更多...
WebKit简介

WebKit简介

1、简介&#xff08;WebKit&#xff09; WebKit 是一个开源的浏览器引擎&#xff0c;最初由苹果公司基于KHTML&#xff08;K Desktop Environment的HTML渲染引擎&#xff09;开发&#xff0c;并广泛应用于Safari浏览器&#xff0c;后来也被其他多款浏览器和应用采用。WebKit负…
阅读更多...
【管理咨询宝藏48】AA银行信息科技提升分析报告

【管理咨询宝藏48】AA银行信息科技提升分析报告

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏48】AA银行信息科技提升分析报告 【格式】PPT版本&#xff0c;可编辑 【关键词】战略规划、商业分析、管理咨询 【强烈推荐】这是一套市面上非常…
阅读更多...
【介绍什么是DDOS】

【介绍什么是DDOS】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
Swin_transformer模型解析

Swin_transformer模型解析

目录 •1、网络整体框架 •2 、Patch Merging •3 、W-MSA MSA模块计算量 W-MSA模块计算量 •4、 SW-MSA •5 、Relative Position Bias •1、网络整体框架 •2 、Patch Merging 这里看着挺复杂&#xff0c;其实就相当于先对特征图进行LayerNorm&#xff0c;然后再进行一…
阅读更多...
PDF编辑和格式转换工具 Cisdem PDFMaster for Mac

PDF编辑和格式转换工具 Cisdem PDFMaster for Mac

Cisdem PDFMaster for Mac是一款功能强大的PDF编辑和格式转换工具。它为用户提供了直观且易于使用的界面&#xff0c;使常用功能触手可及&#xff0c;从而帮助用户轻松管理、编辑和转换PDF文件。 软件下载&#xff1a;Cisdem PDFMaster for Mac v6.0.0激活版下载 作为一款完整的…
阅读更多...
vue 使用自定义标签URL Protocol 调用本地exe 并传参

vue 使用自定义标签URL Protocol 调用本地exe 并传参

创建注册表文件reg&#xff0c;并运行 里面的路径需要替换成实际exe的绝对路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\App] "URL:App Protocol Handler" "URL Protocol""" [HKEY_CLASSES_ROOT\App\DefaultIcon] &qu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023