12月23日作业：flex入门小demo - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 12月23日作业：flex入门小demo

博主信息

博文 145

粉丝 7

访问量 202285

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

12月23日作业：flex入门小demo

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰

原创

1369人浏览过

12月20日作业问题总结和回顾：
通过12月20日作业知识：position（relative\absolute）、float、等定位知识，外部素材的引用

<link rel="stylesheet" href="">
<span class=''></span>

整体布局的规划以及标签语义化的合理运用和注释的应用
/*css注释*/

css选择器的使用：
1、群选择器：div,h1,p,span {}
2、后代选择器：div span {}
3、子代选择器：div>span {}
4、通配选择器： * {}
5、相邻同级选择器：div+p {}
6、相邻所有级选择器：div~p {}
phpstorm快捷键：
ctrl+/ 注释
Tal 补全
ctrl+D 复制当前行代码
css样式代码简写(tab键补全)：宽高左右上下
w100 tab width:100;
h100 tab height:100;
r100 tab right:100;
l100 tab left:100;
t100 tab top:100;
b100 tab bottom:100;

12月23日知识点默写：

通过昨天晚上的学习对flex有一个简单的认识，参考直播课程的小demo自己做的小demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局小demo</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 2px dashed red;
        }
        .item {
            width: 200px;
            height: 100px;
            border:2px dashed green;
            text-align: center;
            line-height: 100px;
        }
        .flex {
            display:flex;
            align-items: center;
            justify-content: center;
        }
        .tradition-1 {
            position: relative;
        }
        .tradition-2 {
            position:absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="container flex">
        <div class="item" >flex</div>
    </div>
    <hr>
    <div class="container tradition-1">
        <div class="item tradition-2">传统</div>
    </div>
</body>
</html>