flex项目属性笔记

组件

像搭积木一样将整个页面快速的创建出来
一般有：公共组件、专用组件
可以将页面的各部分都写成组件形式进行拼接

编程约定

使用@import实现页面组件的组装
一个组件必须使用一个独一无二的类名class
垂直排列：@import
水平排列：@import+Grid

老师课程案例实例代码

public_reset.css代码

* {
    margin: 0;
    padding: 0;
    /*参考线*/
    /*outline: 1px dashed red;*/
}
body {
    font-size: 13px;
    color: #555555;
    background-color: #efefef;
}
a {
    color: #404040;
    text-decoration: none;
    font-size: 13px;
}
li {
    list-style: none;
}

public_header.css代码

/*导入元素公共初始化样式表*/
@import "../../public_reset.css";
.public-header {
    height: 44px;
    background-color: black;
    padding: 0 20px;
    display: flex;
    flex-flow: row nowrap;
}
.public-header a {
    line-height: 44px;
    color: #cccccc;
    padding: 0 10px;
}
.public-header > a:hover {
    background-color: #fff;
    color: black;
}
.public-header > span {
    margin-left: auto;
}
.public-header > span i {
    font-size: 16px;
    color: #cccccc;
    padding-right: 10px;
}

public_headline.css代码

/*导入元素公共初始化样式表*/
@import "../../public_reset.css";
.public-headline {
    padding: 30px;
    text-align: center;
}
.public-headline span {
     font-size: 30px;
    font-weight: bolder;
    padding-bottom: 7px;
    border-bottom: 3px solid red;
}

demo1.css代码

@import "components/public_reset.css";
@import "components/public/public_header/public_header.css";
@import "components/public/public_headline/public_headline.css";

组装HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/font/iconfont.css">
    <link rel="stylesheet" href="demo1.css">
    <title>组件拼装</title>
</head>
<body>
    <div class="public-header">
        <a href="">网站首页</a>
        <a href="">专题</a>
        <a href="">网站导航</a>
        <a href="">二手商品</a>
        <a href="">讨论区</a>
        <span>
                <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
                <a href="">免费注册</a>
            </span>
    </div>
    <div class="public-headline">
        <span>二手交易</span>
    </div>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：看来你落下了不少课程

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

1条评论

Dusk 2020-01-03 15:59:15

你qq多少啊看你写的有点问题

1楼

作者最新博文

《环境搭建-Visual Studio Code及常用插件安装》2020-04-01作业笔记

2020-04-10 13:39:53