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

目录

内容回顾：

特殊样式

特殊样式    

CSS变量

常见函数

倒影效果

页面布局

Table 布局（了解即可）

DIV+CSS布局

弹性布局

1）不使用弹性布局，而是使用DIV+CSS

2）使用弹性布局实现导航菜单

内容回顾：

特殊样式

        媒体查询：@media

        自定义字体：@font-face {

                                font-family:自定义名称；

                                src：url（“字体的路径”）；

                                }

                                选择{

                                font-family：自定义名称；

                                }

        转换：transform

        移动：translate（）

        旋转：rotate（）

        缩放：scale（）

        翻转：skew（）

        综合：matrix（）

        过渡：transition   属性  时间  效果（默认值：ease）  延迟（默认值：0）

        动画：@keyframes      animate

                  @keyframes  自定义动画名称{

        帧名称1{

                        属性名：值

                        }

        帧名称2{

                        属性名：值

                        }

                        …..

                }

        选择器{

                animate：自定义动画名称；

                }

                属性有：动画名称（animate-name）、动画时长（animate-duration）、延迟、次数（默认值：1）、方向、状态

                渐变：background-image：linear-gradient（direction，color-stop1，color-stop2，…）

                        background-image：radius-gradient（direction，color-stop1，color-stop2，…）

                多列：column-count

        字体图标

特殊样式    

CSS变量

在CSS3中支持定义变量，然后可以在不同的地方来使用这个变量所对应的值。它的好处就是可以减少代码的编写，从而提交代码的复用性。

要注意：变量只能是用于值的地方，而不能用到属性的地方。

常见函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常见函数的使用</title>

    <style>

        body {

            background: #cccccc;

        }

        div {

            position: absolute;

            top: 30px;

            left: 5px;

            width: calc(100% - 50px);

            height: 200px;

            background: rgba(0, 200, 200, .9);

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

倒影效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒影效果</title>

    <style>

        .box {

            width: 500px;

            height: 200px;

            border: 1px solid #cccccc;

            -webkit-box-reflect: below 2px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));

        }

    </style>

</head>

<body>

<div class="box">

    <img src="image/5.jpeg" width="500">

</div>

</body>

</html>

页面布局

在实际工作中，页面布局有以下几种：

--- table 布局

--- div+css布局

--- 弹性布局

--- 网络布局

Table 布局（了解即可）

这种布局方式早起经常使用，大概在2000年开始就基本不适用这种布局方式了，因为解析性能差。

利用table布局，完成下图。

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table 布局</title>

</head>

<body>

<table width="100%">

    <tr bgcolor="#cccccc">

        <td height="60" align="center">顶部内容</td>

    </tr>

    <tr>

        <td align="center">

            <form action="" method="post">

                <table width="300">

                    <tr bgcolor="#CCCCCC">

                        <th colspan="2">用户注册</th>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td width="30%" align="right">用户名</td>

                        <td width="70%"><input type="text" name="username"></td>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td align="right">密码</td>

                        <td><input type="password" name="password"></td>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td align="right">性别</td>

                        <td><input type="radio" name="gender" checked value="男"> 男 <input type="radio" name="gender" value="女"> 女</td>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td align="right">爱好</td>

                        <td><input type="checkbox" name="hobby" value="写作"> 写作 <input type="checkbox" name="hobby" value="听音乐"> 听音乐 <input type="checkbox" name="hobby" value="体育"> 体育</td>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td align="right">省份</td>

                        <td>

                            <select name="province">

                                <option value="陕西省">陕西省</option>

                            </select>

                        </td>

                    </tr>

                    <tr bgcolor="#E6E6E6">

                        <td align="right">自我介绍</td>

                        <td><textarea name="intro" cols="25" rows="5"></textarea> </td>

                    </tr>

                    <tr bgcolor="#CCCCCC">

                        <td colspan="2" align="center">

                            <input type="submit" value="提交">

                            <input type="reset" value="重置">

                        </td>

                    </tr>

                </table>

            </form>

        </td>

    </tr>

    <tr bgcolor="#cccccc">

        <td align="center" height="30">底部</td>

    </tr>

</table>

</body>

</html>

DIV+CSS布局

盒子模型

div是一个标准块标签，而HTML的块标签都存在了 margin, padding, border 等属性，我们就可以通过这些内边距、边框、外边距来控制不同的标签的布局和存放位置，这个就是我们经常说的盒子模型。

自从 1996 年 CSS1 的推出，W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中，我们可以通过控制盒子属性，来操作页面。

盒模型主要定义四个区域：内容(content)、内边距(padding)、边界(border)和外边距(margin)。

利用DIV + CSS 完成 用户注册图。

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DIV+CSS布局</title>

    <style>

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

        .box {

            width: 300px;

            margin: 0 auto;

            border: 1px solid #cccccc;

        }

        .row {

            width: 300px;

            background: #E6E6E6;

            margin: 1px 0;

        }

        .label {

            display: inline-block;

            width: 30%;

            background: #E6E6E6;

            text-align: right;

        }

        /*

        .row:nth-child(1) {

            width: 30%;

            text-align: right;

            background: red;

        }

        .row:nth-child(2) {

            width: 60%;

            text-align: left;

            background: #317FE5;

        }

        .row:nth-child(2) input[type="text"] {

            width: 10px;

            border: 1px solid #0000ff;

        }*/

    </style>

</head>

<body>

<div class="box">

    <h3>用户注册</h3>

    <form action="" method="post">

        <div class="row">

            <label class="label" for="username">用户名</label>

            <input type="text" id="username" name="username">

        </div>

        <div class="row">

            <label class="label" for="password">密码</label>

            <input type="password" id="password" name="password">

        </div>

        <div class="row">

            <label class="label">性别</label>

            <input type="radio" name="gender" id="man" checked value="男"> <label for="man">男</label>

            <input type="radio" name="gender" id="feman" value="女"> <label for="feman">女</label>

        </div>

        <div class="row">

            <label class="label">爱你</label>

            <input type="checkbox" name="hobby" id="writer" value="写作"> <label for="writer">写作</label>

            <input type="checkbox" name="hobby" id="music" value="听音乐"> <label for="music">听音乐</label>

        </div>

        <div class="row">

            <label class="label" for="province">省份</label>

            <select name="province" id="province">

                <option value="陕西省">陕西省</option>

            </select>

        </div>

        <div class="row">

            <label class="label" for="intro">自我介绍</label>

            <textarea name="intro" id="intro" cols="25" rows="5"></textarea>

        </div>

        <div class="row">

            <input type="submit" value="提交">

            <input type="reset" value="重置">

        </div>

    </form>

</div>

</body>

</html>

弹性布局

弹性布局是CSS3中出现的一种布局方式，它的作用是更加方便快捷来进行页面布局。但它只能对一维元素进行布局，如果是多维元素就不能胜任。要想使用弹性布局，我们就需要使用display：flex；来开启弹性布局。

引入案例

1）不使用弹性布局，而是使用DIV+CSS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用DIV+CSS实现导航菜单</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .container {

            width: 900px;

            height: 60px;

            margin: 0 auto;

        }

        ul {

            width: 100%;

            height: 100%;

        }

        ul li {

            list-style: none;

            width: 100px;

            height: 100%;

            background: #2A3C5C;

            float: left;

            text-align: center;   /* 水平居中 */

            line-height: 60px; /* 垂直居中 */

            color: white;

            font-weight: 500;

        }

        ul li:hover {

            background: #8B0000;

            cursor: pointer;  /* 将鼠标变为手 */

        }

    </style>

</head>

<body>

<div class="container">

    <ul>

        <li>游戏1</li>

        <li>游戏2</li>

        <li>游戏3</li>

        <li>游戏4</li>

        <li>游戏5</li>

        <li>游戏6</li>

        <li>游戏7</li>

        <li>游戏8</li>

        <li>游戏9</li>

    </ul>

</div>

</body>

</html>

2）使用弹性布局实现导航菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用弹性布局实现导航菜单</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .container {

            width: 900px;

            height: 60px;

            margin: 0 auto;

            background: #317FE5;

        }

        ul {

            width: 100%;

            height: 100%;

            list-style: none;

            display: flex;   /* 开启弹性布局，注意它需要放到父容器中 */

        }

        ul li {

            width: 100px;

            height: 100%;

            background: #2A3C5C;

            color: white;

            text-align: center;

            line-height: 60px;

        }

        ul li:hover {

            background: #8B0000;

            cursor: pointer;  /* 将鼠标变为手 */

        }

    </style>

</head>

<body>

<div class="container">

    <ul>

        <li>游戏1</li>

        <li>游戏2</li>

        <li>游戏3</li>

        <li>游戏4</li>

        <li>游戏5</li>

        <li>游戏6</li>

        <li>游戏7</li>

        <li>游戏8</li>

        <li>游戏9</li>

    </ul>

</div>

</body>

</html>

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

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

相关文章

中非绿色能源合作走深走实

中非绿色能源合作走深走实

近日&#xff0c;第十六届非洲能源大会在南非立法首都开普敦举行&#xff0c;探讨实现非洲能源转型的可持续解决方案。近年来&#xff0c;中国与非洲国家不断加强绿色能源合作&#xff0c;促进双方优势资源互补&#xff0c;逐步探索合作共赢的绿色能源合作方案。 势头良好 近年…
阅读更多...
SystemC入门学习Demo用例的工程化配置

SystemC入门学习Demo用例的工程化配置

背景&#xff1a;对不同的用例文件&#xff0c;使用CMakeLists.txt进行工程化管理的演示&#xff0c;这样开发者可以更加关注在代码开发上。 1&#xff0c;首先安装好系统环境的systemC库&#xff1a;ubuntu系统安装systemc-2.3.4流程-CSDN博客 2&#xff0c;准备好一个demo用…
阅读更多...
开源免费的MySQL和MariaDB图形化管理软件

开源免费的MySQL和MariaDB图形化管理软件

2024年4月7日&#xff0c;周日凌晨 有很多开源免费的MySQL和MariaDB图形化管理界面可供选择。 以下是一些常用的工具&#xff1a; phpMyAdmin&#xff1a;phpMyAdmin 是一个用 PHP 编写的免费开源的 MySQL 和 MariaDB 管理工具&#xff0c;它提供了一个基于 Web 的界面&#…
阅读更多...
PCF8591(ADDA转换芯片)

PCF8591(ADDA转换芯片)

工具 1.Proteus 8 仿真器 2.keil 5 编辑器 原理图 讲解 PCF8591是一个单片集成、单独供电、低功耗、8-bit CMOS数据获取器件。PCF8591具有4个模拟输入、1个模拟输出和1个串行IC总线接口。PCF8591的3个地址引脚A0, A1和A2可用于硬件地址编程&#xff0c;允许在同个I2C总线上接…
阅读更多...
软件测试下的AI之路（4）

软件测试下的AI之路（4）

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…
阅读更多...
数控机床采集网关助力企业实现智能化生产-天拓四方

数控机床采集网关助力企业实现智能化生产-天拓四方

随着工业4.0时代的到来&#xff0c;智能制造成为制造业转型升级的重要方向。数控机床作为制造业的核心设备&#xff0c;其数据采集与监控对于提升生产效率、优化生产流程具有重要意义。本案例将介绍数控机床采集网关的应用&#xff0c;通过该网关实现数控机床数据的实时采集、传…
阅读更多...
IP地址证书怎么申请？

IP地址证书怎么申请？

在数字化时代&#xff0c;网络空间的安全与稳定至关重要。其中&#xff0c;IP地址作为互联网通信的基础标识&#xff0c;其安全认证则依赖于一项重要工具——IP地址证书。本文将深入探讨IP地址证书的概念、作用以及其在网络安全防护中的重要意义。 一、IP地址证书的作用 身份验…
阅读更多...
Java设计模式—策略模式（商场打折）

Java设计模式—策略模式（商场打折）

策略这个词应该怎么理解&#xff0c;打个比方说&#xff0c;我们出门的时候会选择不同的出行方式&#xff0c;比如骑自行车、坐公交、坐火车、坐飞机、坐火箭等等&#xff0c;这些出行方式&#xff0c;每一种都是一个策略。 再比如我们去逛商场&#xff0c;商场现在正在搞活动&…
阅读更多...
设计模式总结-桥接模式

设计模式总结-桥接模式

桥接模式 模式动机模式定义模式结构模式分析桥接模式实例与解析实例一&#xff1a;模拟毛笔 模式优缺点 模式动机 设想如果要绘制矩形、圆形、椭圆、正方形&#xff0c;我们至少需要4个形状类&#xff0c;但是如果绘制的图形需要具有不同的颜色&#xff0c;如红色、绿色、蓝色…
阅读更多...
MySQL-基本SQL语句编写：运算符练习

MySQL-基本SQL语句编写：运算符练习

运算符练习 1.选择工资不在5000到12000的员工的姓名和工资 SELECT last_name,salary FROM employees #where salary not between 5000 and 12000; WHERE salary < 5000 OR salary > 12000;2.选择在20或50号部门工作的员工姓名和部门号 SELECT last_name,department_id…
阅读更多...
蓝桥杯算法题：卡片换位

蓝桥杯算法题：卡片换位

问题描述 你玩过华容道的游戏吗&#xff1f;这是个类似的&#xff0c;但更简单的游戏。 看下面 2 x 3 的格子 --------- | A | * | * | --------- | B | | * | --------- 1 2 3 4 5 在其中放 5 张牌&#xff0c;其中 A 代表关羽&#xff0c;B 代表张飞&#xff0c;* 代表士兵…
阅读更多...
【Erlang】【RabbitMQ】Linux（CentOS7）安装Erlang和RabbitMQ

【Erlang】【RabbitMQ】Linux（CentOS7）安装Erlang和RabbitMQ

一、系统环境 查版本对应&#xff0c;CentOS-7&#xff0c;选择Erlang 23.3.4&#xff0c;RabbitMQ 3.9.16 二、操作步骤 安装 Erlang repository curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash安装 Erlang package s…
阅读更多...
CMake学习笔记（三）区分macro与function

CMake学习笔记（三）区分macro与function

目录 共同点--形式类似 macro的形式 function的形式 不同点 1 输入参数的替换阶段不同 macro function 2 输入参数作用域不同 macro function 共同点--形式类似 macro的形式 macro(宏名 输入参数名).... endmacro() function的形式 function(函数名 输入参数名).…
阅读更多...
如何确认ip地址？一步步教会你

如何确认ip地址？一步步教会你

在数字化和网络化的时代&#xff0c;IP地址作为设备的网络标识&#xff0c;扮演着至关重要的角色。无论是个人用户还是企业网络管理员&#xff0c;掌握如何确认IP地址的方法都显得尤为重要。虎观代理将全面介绍如何确认IP地址&#xff0c;并深入探讨其背后的原理和意义。 首先&…
阅读更多...
RabbitMQ3.13.0起支持MQTT5.0协议及MQTT5.0特性功能列表

RabbitMQ3.13.0起支持MQTT5.0协议及MQTT5.0特性功能列表

RabbitMQ3.13.0起支持MQTT5.0协议及MQTT5.0特性功能列表 文章目录 RabbitMQ3.13.0起支持MQTT5.0协议及MQTT5.0特性功能列表1. MQTT概览2. MQTT 5.0 特性1. 特性概要2. Docker中安装RabbitMQ及启用MQTT5.0协议 3. MQTT 5.0 功能列表1. 消息过期1. 描述2. 举例3. 实现 2. 订阅标识…
阅读更多...
Linux网卡与IP地址：通往网络世界的通行证

Linux网卡与IP地址：通往网络世界的通行证

在探索Linux网卡和IP地址的关系之前&#xff0c;我们得先理解Linux网卡是怎么工作的。想象一下&#xff0c;每台计算机都是一个世界&#x1f30e;&#xff0c;而网卡就是连接这些世界的门户&#x1f6aa;。网卡的工作就是接收和发送数据包&#xff0c;就像邮差&#x1f4ec;递送…
阅读更多...
还在担心报表不好做？不用怕，试试这个方法（三）

还在担心报表不好做？不用怕，试试这个方法（三）

系列文章&#xff1a; 《还在担心报表不好做&#xff1f;不用怕&#xff0c;试试这个方法》&#xff08;一&#xff09; 《还在担心报表不好做&#xff1f;不用怕&#xff0c;试试这个方法》&#xff08;二&#xff09; 概要 在上一篇文章《还在担心报表不好做&#xff1f;…
阅读更多...
C++数据结构与算法——回溯算法排列问题

C++数据结构与算法——回溯算法排列问题

C第二阶段——数据结构和算法&#xff0c;之前学过一点点数据结构&#xff0c;当时是基于Python来学习的&#xff0c;现在基于C查漏补缺&#xff0c;尤其是树的部分。这一部分计划一个月&#xff0c;主要利用代码随想录来学习&#xff0c;刷题使用力扣网站&#xff0c;不定时更…
阅读更多...
SV学习笔记（六）

SV学习笔记（六）

文章目录 覆盖率类型写在前面代码覆盖率断言覆盖率功能覆盖率漏洞率曲线 功能覆盖策略收集信息而非数据只测量需要的内容验证的完备性 覆盖组写在前面在类里定义covergroup 数据采样写在前面coverpoint和binbin的创建和应用命名coverpoint和bin条件覆盖率翻转覆盖率wildcard覆盖…
阅读更多...
k8s svc流量转发

k8s svc流量转发

https://blog.csdn.net/qq_44930876/article/details/134813129 https://blog.csdn.net/weixin_43845924/article/details/136232099 默认使用iptables [rootlocalhost ~]# k logs kube-proxy-jcbcq I0405 10:37:28.610683 1 node.go:136] Successfully retrieved no…
阅读更多...
最新文章

Copyright @ 2022~2023