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

                        background-image:radius-gradient(directioncolor-stop1color-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>

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

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

相关文章

echart 仪表盘实现指针的渐变色及添加图片

需求&#xff1a; 在仪表盘中设置指针为渐变色&#xff0c;并在仪表盘中间添加图片。 实现重点&#xff1a; 1、仪表盘指针渐变色的实现 渐变色通过设置pointer的itemStyle属性内的color实现&#xff0c;重点是echart版本&#xff0c;这个原本使用4.8.0的版本不起作用&#xff…

排序基础---插入排序及在c++中开辟二维数组

排序基础---插入排序 插入排序是一种比较排序。 选出一个临时变量tmp. 然后弄一个end&#xff0c;end最初可以是0. 那么tmp便应该是a[end1] 最终的目的是为了使一个序列有序&#xff0c;所以应该让tmp依次与前[0,end],进行比较最后插入到合适的位置。 void insert_sort(…

AD20全流程的使用笔记

目录 首先一个完整的AD工程文件需要我们自己建立的文件有这些&#xff1a; 新建工程&#xff1a; 从现有的工程文件中将元件添加到原理图库&#xff1a; 元件的摆放&#xff1a; 器件的复制及对齐&#xff1a; 导线、Netlabe、端口的添加&#xff1a; Value值的校对&…

SQL注入---盲注

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.盲注概述 注是一种SQL注入攻击的形式&#xff0c;在这种攻击中&#xff0c;攻击者向目标应用程序发送恶意注入代码&#xff0c;然后通过观察应用程序的响应来推断出数据库中的信息。与常规的…

设计模式——抽象工厂模式02

如果是工厂模式是对同一类商品进行抽象然后生产。 那么抽象工厂模式是对工厂的抽象&#xff0c;每个工厂都能生产多种产品&#xff0c;不同工厂生产的商品性质相同&#xff0c;但外观&#xff0c;品牌会略有差异。 设计模式&#xff0c;一定要敲代码理解 商品抽象 public in…

每日五道java面试题之ZooKeeper篇(一)

目录&#xff1a; 第一题. ZooKeeper 是什么&#xff1f;第二题. Zookeeper 文件系统第三题. Zookeeper 怎么保证主从节点的状态同步&#xff1f;第四题. 四种类型的数据节点 Znode第五题 . Zookeeper Watcher 机制 – 数据变更通知 第一题. ZooKeeper 是什么&#xff1f; Zoo…

MySQL面试题系列-6

MySQL是一个关系型数据库管理系统&#xff0c;由瑞典 MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的RDBMS (Relational Database Management System&#xff0c;关系数据…

flutter项目ffi相关

Flutter 使用FFICustomPainter实现全平台渲染视频_flutter ffi-CSDN博客

libusb Qt使用记录

1.libusb 下载 &#xff0c;选择编译好的二进制文件&#xff0c;libusb-1.0.26-binaries.7z libusb Activity 2. 解压 3. 在 Qt Widgets Application 或者 Qt Console Application 工程中导入库&#xff0c;Qt 使用的是 minggw 64编译器&#xff0c;所以选择libusb-MinGW-x64。…

基于STM32的电子钟与万年历设计

1、功能 硬件部分&#xff1a; (1). 采用 STM32F103ZET6作为主控芯片&#xff0c; 负责驱动其他外设模块 (2). 实时时钟采用 STM32 本身的 RTC (3). TFT(LCD)彩色显示屏 正点原子的3.5寸触摸屏&#xff08;NT3510&#xff09; (4). DS18B20 温度传感器 支持的功能&#xf…

C语言—用EasyX实现反弹球消砖块游戏

代码效果如下 #undef UNICODE #undef _UNICODE #include<graphics.h> #include<conio.h> #include<time.h> #include<stdio.h>#define width 640 #define high 480 #define brick_num 10int ball_x, ball_y; int ball_vx, ball_vy; int radius; int ba…

使用 Clickhouse 集成的表引擎同步数据方式详解

Clickhouse作为一个列式存储分析型数据库&#xff0c;提供了很多集成其他组件的表引擎数据同步方案。 官网介绍 一 Kafka 表引擎 使用Clickhouse集成的Kafka表引擎消费Kafka写入Clickhouse表中。 1.1 流程图 1.2 建表 根据上面的流程图需要建立三张表&#xff0c;分别Click…

Vue 组合式 API

Vue 组合式 API 生命周期钩子 在 Vue2 中&#xff0c;我们通过以下方式实现生命周期钩子函数&#xff1a; export default {beforeMount() {console.log(V2 beforeMount!)},mounted() {console.log(V2 mounted!)} }; 在 Vue3 组合 API 中实现生命周期钩子函数可以在 setup()…

鸿蒙组件学习_Image组件

说明 该组件从API Version 7 开始支持 使用网络图片时,需要申请ohos.permission.INTERNET 参数 必填 src 图片的数据源,支持本地图片和网络图片 不支持跨包跨模块调用该Image组件,建议使用$r方式来管理需全局使用的图片资源。属性 alt 加载时显示的占位图&#xf…

Linux云计算之网络基础8——IPV6和常用网络服务

目录 一、IPV6基础 IPV6详解 IPv6数据报的基本首部 IPv6数据报的扩展首部 IPv6地址的表示方法 IPv6地址分类 网际控制报文协议ICMPv6 二、cisco基于IPV6的配置 cisco基于IPV6的配置步骤 模拟配置 三、HTML基础介绍 文档的结构 动手操作一下 四、常用网络服务介绍…

【架构一】CS架构和BS架构

最近在做架构的设计工作&#xff0c;做技术选型难免要区分好CS架构和BS架构。下面就来谈谈两者的区别。 首先CS架构分两层C/S和三层C/S架构。最开始人们都是用的两层CS架构&#xff0c;但它的缺点也孕育而生。 两层CS架构的缺点&#xff1f; &#xff08;1&#xff09;服务器…

B2029 大象喝水

题目描述 一只大象口渴了&#xff0c;要喝 20 升水才能解渴&#xff0c;但现在只有一个深 ℎh 厘米&#xff0c;底面半径为 r 厘米的小圆桶 &#xff08;h 和 r 都是整数&#xff09;。问大象至少要喝多少桶水才会解渴。 Update&#xff1a;数据更新&#xff0c;这里我们近似地…

网络编程(TCP、UDP)

文章目录 一、概念1.1 什么是网络编程1.2 网络编程中的基本知识 二、Socket套接字2.1 概念及分类2.2 TCP VS UDP2.3 通信模型2.4 接口方法UDP数据报套接字编程TCP流套接字编程 三、代码示例3.1 注意点3.2 回显服务器基于UDP基于TCP 一、概念 首先介绍了什么是网络编程&#xff…

Emacs之实现复制当前已打开文件buffer(一百三十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

ruoyi-nbcio-plus基于vue3的flowable流程元素选择区面板的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…