【每日CSS3代码】

news/2024/10/30 23:23:14/

1-1 两栏布局【1/27】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.outer {height: 100px;margin-bottom: 10px;}.left {background: tomato;height: 100px;}.right {background: gold;height: 100px;}/* 浮动 */.outer1 .left {width: 200px;float: left;/* margin-top: 30px; */}.outer1 .right {width: auto;margin-left: 200px;}/* flex */.outer2 {display: flex;}.outer2 .left {flex-grow: 0;    /* // flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 */flex-shrink: 0;  /* flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小 */flex-basis: 200px;}.outer2 .right {flex: auto; /* 1 1 auto */}/* position */.outer3 {position: relative;}.outer3 .left {position: absolute;width: 200px;}.outer3 .right {margin-left: 200px;}/* position again */.outer4 {position: relative;}.outer4 .left {width: 200px;}.outer4 .right {position: absolute;top: 0;left: 200px;right: 0;}  </style>
</head>
<body><!-- 垂直两栏,左边固定右边自适应 --><div class="outer outer1"><p class="left">1-left</p><p class="right">1-right</p></div><div class="outer outer2"><p class="left">2-left</p><p class="right">2-right</p></div><div class="outer outer3"><p class="left">3-left</p><p class="right">3-right</p></div><div class="outer outer4"><p class="left">4-left</p><p class="right">4-right</p></div>
</body>
</html>

1-2 三栏布局【1/28、29双飞翼,圣杯】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.outer{margin-top: 40px;   }.left {height: 20px;background-color: aqua;}.center {height: 20px;background-color:brown;}.right {height: 20px;background-color:blue;}/* // flex */.outer1 {display: flex;}.outer1 .left{width: 200px;flex-grow: 0;flex-shrink: 1;flex-basis: auto;}.outer1 .center {width: auto;flex: 1 1 auto;}.outer1 .right {width: 200px;flex: none;}/* postion */.outer2 {position: relative;}.outer2 .left {position: absolute;width: 200px;}.outer2 .right {position: absolute;width: 200px;top:0;right:0;}.outer2 .center{margin-left: 200px;margin-right: 200px;}/* 浮动 *//* .outer3 {position: relative;} */.outer3 .left {float:left;width: 200px;}.outer3 .right {float: right;width: 200px;}.outer3 .center{margin: 0 200px 0 200px;}/* 圣杯布局 : 浮动+负边距 : 和三栏布局要求相同,不过中间列要写在前面保证优先渲染*/.outer4 {padding: 0 200px 0 100px;}.outer4 .center {width: 100%;float: left;}.outer4 .left {width: 100px;float: left;margin-left: -100%;position: relative;left: -100px;}.outer4 .right {width: 200px;float: left;margin-left: -200px;position: relative;left: 200px;}/* 双飞翼  :和三栏布局要求相同,不过中间列要写在前面保证优先渲染*/.outer5 {margin-top: 100px;}.outer5 .center {width: 100%;float: left;}.outer5 .middle {margin: 0 200px 0 100px;}.outer5 .left {width: 100px;float: left;margin-left: -100%;}.outer5 .right {width: 200px;float: left;margin-left: -200px;}</style>
</head>
<body><div class="outer outer1"><p class="left"></p><p class="center"></p><p class="right"></p></div><div class="outer outer2"><p class="left"></p><p class="center"></p><p class="right"></p></div><div class="outer outer3"><p class="left"></p><p class="right"></p><p class="center"></p></div><div class="outer outer4"><p class="center">圣杯-center</p><p class="left">圣杯-left</p><p class="right">圣杯-right</p></div><div class="outer outer5"><div class="center"><p class="middle">双飞翼布局-center</p></div><p class="left">双飞翼布局-left</p><p class="right">双飞翼布局-right</p></div>
</body>
</html>

1-3 实现三角形【2023/1/30】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><title>三角形</title><style type="text/css">.triangle {height: 0px;width: 0px;border-top:200px solid red;border-left:400px solid blue;border-bottom:200px solid green;border-right:400px solid transparent;}.box1, .box2, .box3, .box4 {height: 0px;width: 0px;border-style: solid;margin: 10px;}.box1 { /* 等腰直角 */border-width: 100px;border-color: tomato transparent transparent transparent;}.box2 { /* 等边 */border-width: 100px 173px;border-color: transparent tomato transparent transparent;}.box3 { /* 等腰 */border-width: 100px 80px;border-color: transparent transparent tomato transparent;}.box4 { /* 其他 */border-width: 100px 90px 80px 70px;border-color: transparent transparent transparent tomato;}
</style>
</head>
<body><div class="triangle"></div><p class="box1"></p><p class="box2"></p><p class="box3"></p><p class="box4"></p>
</body>
</html>

1-4 块级子元素水平垂直居中【2023/1/31】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.parent {height: 200px;width: 200px;margin-top: 30px;background-color: aqua;}.child {width: 50px;height: 50px;background-color:black;}/* position和margin居中 */.parent1 {position: relative;}.child1 {position: absolute;top: 0;left:0;right: 0;bottom:0;margin: auto;}/* position和transform居中 */.parent2 {position: relative;}.child2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/* flex居中 */.parent3 {display: flex;justify-content: center;align-items: center;}.child3 {/* align-self:center; */}/* * 通过 position 和 margin 居中 */.parent4 {position: relative;}.child4 {position: absolute;top: 50%;left: 50%;margin-top: -25px;margin-left: -25px;}</style>
</head>
<body><!-- position和margin居中 --><div class="parent parent1"><div class="child child1"></div></div> <div class="parent parent2"><div class="child child2"></div></div> <div class="parent parent3"><div class="child child3"></div></div> <!-- * 通过 position 和 margin 居中:知道子盒子宽高 --><div class="parent parent4"><div class="child child4"></div></div> 
</body>
</html>

1-5实现自适应的正方形【2023/2/1】

在这里插入图片描述


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 都是像对于屏幕宽度的比例 */.square1 {width: 10%;height: 10vw;background: red;}/* margin/padding 百分比是相对父元素 width 的 */.square2 {width: 20%;height: 0;padding-top: 20%;background: orange;}/* 通过子元素 margin */.square3 {width: 30%;overflow: hidden; /* 触发 BFC */background: yellow;}.square3::after {content: '';display: block;margin-top: 100%; /* 高度相对于 square3 的 width */}
</style></head><!-- 画一个正方形 --><body><p class="square1"></p><p class="square2"></p><p class="square3"></p></body>
</html>

http://www.ppmy.cn/news/21391.html

相关文章

数学建模与数据分析 || 3. 面向数据的特征提取方法: 探索性数据分析

面向数据的特征提取方法: 探索性数据分析 文章目录面向数据的特征提取方法: 探索性数据分析1. 原始数据的准备1.1 导入 python 模块1.2 导入数据集并进行宏观认识1.3 数据集描述2. 数据的预处理2.1 缺失数据的甄别2.2 类别规模的评估3. 数据特征的处理3.1 第一个因变量- 分析范…

我们为什么要学习servlet? servlet是干嘛的?

最近刚刚学习完servlet&#xff0c;明白了一个事情&#xff0c;servlet是用来干嘛的&#xff0c;为什么要学习servlet&#xff0c;我想如果我在刚刚开始学习servlet时就明白这件事的话&#xff0c;会更加有利于我带有目的的去学习servlet&#xff1b;所以记录以下文章&#xff…

一些关于Linux内核中的结构体函数指针的理解

一些关于Linux内核中常用的结构体函数指针的理解 动机 在看linux内核代码的时候经常能够看到一些结构体里面的成员跟我们以往见的到一些结构体不一样&#xff0c;常见的架构体如下面的代码&#xff1a; struct a{int i;char b;struct c; };而内核中又见有这样的一些结构体&a…

【MyBatis】| MyBatis查询语句专题(核心知识)

目录 一&#xff1a;MyBatis查询语句专题 1. 返回Car对象 2. 返回List<Car> 3. 返回Map 4. 返回List<Map> 5. 返回Map<String,Map> 6. resultMap结果映射 7. 返回总记录条数 一&#xff1a;MyBatis查询语句专题 前期准备&#xff1a; 模块名&#xf…

springboot+mongodb初体验

MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写&#xff0c;旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 1、mongodb服务…

CMOS器件与TTL器件CMOS电平与TTL电平

常用的数字芯片&#xff0c;按制造工艺主要分为TTL器件和CMOS器件。TTL器件是指其内部主要逻辑单元为双极性晶体管&#xff0c;CMOS器件是指其内部的主要逻辑单元为MOS管。现在绝大部分数字芯片使用的工艺都是CMOS工艺&#xff0c;在一些比较老的74系列芯片中还使用的是TTL工艺…

智能驾驶 车牌检测和识别(五)《C++实现车牌检测和识别(可实时车牌识别)》

智能驾驶 车牌检测和识别&#xff08;五&#xff09;《C实现车牌检测和识别&#xff08;可实时车牌识别&#xff09;》 目录 智能驾驶 车牌检测和识别&#xff08;五&#xff09;《C实现车牌检测和识别&#xff08;可实时车牌识别&#xff09;》 1. 前言 2. 车牌检测模型&a…

LeetCode 2283. 判断一个数的数字计数是否等于数位的值

给你一个下标从 0 开始长度为 n 的字符串 num &#xff0c;它只包含数字。 如果对于 每个 0 < i < n 的下标 i &#xff0c;都满足数位 i 在 num 中出现了 num[i]次&#xff0c;那么请你返回 true &#xff0c;否则返回 false 。 示例 1&#xff1a; 输入&#xff1a;…