微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 两个经典的组件flex写法案例（商品列表及评论区块）--PHP线上班十期1226

博主信息

博文 25

粉丝 1

访问量 26165

专题推荐

更多>

案例一：商品列表展示区块的实现方法

要实现的效果

首先分析这个案例的结构，并确定关系

结构如下

按照分析的结构写出HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手商品列表</title>
    <link rel="stylesheet" href="public_second_hand.css">
</head>
<body>
<!--标题组件-->
<div class="public-headline">
    <span>二手交易</span>
</div>
<!--交易专区-->
<div class="publi-second-hand">
<!--    抢好货标题-->
    <div class="title1">
        <a href="">抢好货</a>
        <span>0元低价，便捷，安全</span>
    </div>
<!--    分类标题-->
    <div class="title2">
        <span>热门分类</span>
<!--        在光标所在行按CTRL+D可以快速复制当前行-->
        <a href="">美女写真</a>
        <a href="">日本美女</a>
        <a href="">美国美女</a>
        <a href="">国内美女</a>
    </div>
<!--    商品内容区-->
    <div class="goods">
<!--        商品列表-->
        <div class="goods-list">
<!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop1.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop2.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop3.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop4.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop5.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop6.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop7.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
            <!--            单个商品块-->
            <div class="intro">
                <a href=""><img src="../../../static/images/shop8.jpg" alt="" width="176" height="120"></a>
                <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                <div>
                    <span>&yen; 333</span>
                    <span>美女</span>
                </div>
            </div>
        </div>
<!--        右侧图片功能区-->
        <div class="quick-entry">
            <a href=""><img src="../../../static/images/1.png" alt=""></a>
            <a href=""><img src="../../../static/images/2.png" alt=""></a>
            <a href=""><img src="../../../static/images/3.png" alt=""></a>
            <a href=""><img src="../../../static/images/4.png" alt=""></a>
            <div>
                <a href=""><img src="../../../static/images/ad1.png" alt=""></a>
                <a href=""><img src="../../../static/images/ad2.jpg" alt=""></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

先运行一下看下效果

添加公共初始化的样式表

将PhpStorm显示方式设置为左右两栏方式，方便对照HTML

写出CSS样式表,并做好注释，尤其是自己还不太熟悉的命令

一定要做好注释加深印象

/*引入初始化样式表*/
@import "../public_reset.css";
/*引入标题样式*/
@import "../../public/public_headline/public-headline.css";
/*交易专区的样式表*/
.publi-second-hand {
    width: 1200px;
    padding: 10px;
    /*防止盒子撑大*/
    box-sizing: border-box;
    margin: auto;
    /*加圆角*/
    border-radius: 5px;
    background-color: #fff;
}
/*鼠标经过加阴影*/
.publi-second-hand:hover {
    box-shadow: 0 0 8px #888;
}
/*抢好货标题*/
.publi-second-hand > .title1 {
    height: 50px;
    /*一个像素的的底部实线*/
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}
.publi-second-hand > .title1 > a {
    font-size: 23px;
    margin-right: 20px;
}
.publi-second-hand > .title1 > span {
    color: red;
}
/*分类标题*/
.publi-second-hand > .title2 {
    height: 55px;
}
.publi-second-hand > .title2 > span {
    color: red;
    font-size: 23px;
}
.publi-second-hand > .title2 > span ~ a {
    padding-left: 20px;
}
/*鼠标经过分类标题时的颜色变化*/
.publi-second-hand > .title2 > span ~ a:hover {
    color: lightcoral;
}
/*商品内容区*/
.publi-second-hand > .goods {
    height: 440px;
    /*转为flex*/
    display: flex;
}
.publi-second-hand > .goods > .goods-list {
    padding: 10px;
    flex-basis: 800px;
    /*转为flex*/
    display: flex;
    flex-flow: row wrap;
    /*设置对齐方式为两端对齐*/
    justify-content: space-between;
}
.publi-second-hand > .goods > .goods-list > .intro{
    width: 178px;
    height: 200px;
    /*转为flex*/
    display: flex;
    /*设置主轴方向，并不允许换行*/
    flex-flow: column nowrap;
    justify-content: space-between;
}
.publi-second-hand > .goods > .goods-list > .intro img {
    border: 1px solid #cccccc;
    border-radius: 5px;
}
.publi-second-hand > .goods > .goods-list > .intro span:first-of-type {
    color: red;
}
.publi-second-hand > .goods > .goods-list > .intro > div {
    display: flex;
}
.publi-second-hand > .goods > .goods-list > .intro span:last-of-type {
    color: white;
    background-color: #55ce9f;
    padding: 0 5px;
    margin-left: auto;
}
/*右侧图片功能区*/
.publi-second-hand > .goods > .quick-entry {
    flex-basis: 400px;
    padding: 10px;
    display: flex;
    /*按行方向排列并允许换行*/
    flex-flow: row wrap;
    justify-content: space-between;
}
.publi-second-hand > .goods > .quick-entry img {
    width: 190px;
    height: 130px;
}
.publi-second-hand > .goods > .quick-entry > div {
    width: 400px;
    display: flex;
    /*按列方向排列*/
    flex-direction: column;
}
.publi-second-hand > .goods > .quick-entry > div img {
    width: 393px;
    height: 60px;
}

最终运行效果如下

案例二:评论组件的实现方法及步骤

要实现的效果

首先拿到图需要分析架构，写出HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论组件</title>
<!--    引入字体图标样式表-->
    <link rel="stylesheet" href="../../../static/font/iconfont.css">
    <link rel="stylesheet" href="public_comment_reply.css">
</head>
<body>
<!--先写一个大区块（同组件名）-->
<div class="public-comment-reply">
<!--    发表评论区-->
    <div class="public-comment">
        <h3>发表评论</h3>
        <div>
            <label for="public-comment">
                <img src="../../../static/images/user.jpg" alt="">
            </label>
            <textarea name="" id="public-comment"></textarea>
        </div>
        <button>发表评论</button>
    </div>
<!--    评论列表显示区-->
    <div class="public-reply">
<h3>最新回复</h3>
<!--        单条评论-->
        <div>
            <img src="../../../static/images/user.jpg" alt="">
            <div class="detail">
                <span>用户名字</span>
                <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                <div>
                    <span>2019-12-12 15:34:23发表</span>
                    <span><i class="iconfont icon-dianzan"></i>回复</span>
                </div>
            </div>
        </div>
        <div>
            <img src="../../../static/images/user.jpg" alt="">
            <div class="detail">
                <span>用户名字</span>
                <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                <div>
                    <span>2019-12-12 15:34:23发表</span>
                    <span><i class="iconfont icon-dianzan"></i>回复</span>
                </div>
            </div>
        </div>
        <div>
            <img src="../../../static/images/user.jpg" alt="">
            <div class="detail">
                <span>用户名字</span>
                <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                <div>
                    <span>2019-12-12 15:34:23发表</span>
                    <span><i class="iconfont icon-dianzan"></i>回复</span>
                </div>
            </div>
        </div>
        <div>
            <img src="../../../static/images/user.jpg" alt="">
            <div class="detail">
                <span>用户名字</span>
                <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                <div>
                    <span>2019-12-12 15:34:23发表</span>
                    <span><i class="iconfont icon-dianzan"></i>回复</span>
                </div>
            </div>
        </div>
        <div>
            <img src="../../../static/images/user.jpg" alt="">
            <div class="detail">
                <span>用户名字</span>
                <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                <div>
                    <span>2019-12-12 15:34:23发表</span>
                    <span><i class="iconfont icon-dianzan"></i>回复</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：

引入公共样式表后的效果：

/*初始化样式表*/
@import "../public_reset.css";

按照效果图完成CSS样式部分代码的编写(做好注释方便后期修改)：

/*初始化样式表*/
@import "../public_reset.css";
/*评论样式开始*/
.public-comment-reply {
    padding: 15px;
    /*防止撑大*/
    box-sizing: border-box;
    background-color: #fff;
    /*转为flex*/
    display: flex;
    /*按列方向显示*/
    flex-direction: column;
}
/*定义头像的样式*/
.public-comment-reply img {
    width: 60px;
    height: 60px;
    /*圆角*/
    border-radius: 5px;
    /*加边框和阴影*/
    box-shadow: 1px 1px 3px #cccccc;
}
.public-comment-reply > .public-comment {
    display: flex;
    flex-direction: column;
}
.public-comment-reply > .public-comment h3 {
    padding: 20px 0;
    /*在顶部加一个线条分隔*/
    border-top: 1px solid #cccccc;
}
.public-comment-reply > .public-comment > div {
    padding: 15px;
    height: 150px;
    display: flex;
    /*按行显示，不允许换行*/
    flex-flow: row nowrap;
}
.public-comment-reply > .public-comment > div img {
    /*单独定义头像的对齐方式*/
    align-self: flex-start;
}
.public-comment-reply > .public-comment > div textarea {
    height: 150px;
    margin-left: 20px;
    /*不允许拉伸文本框*/
    resize: none;
    flex: auto;
}
/*文本框加阴影*/
.public-comment-reply > .public-comment > div textarea:hover {
    box-shadow: 0 0 8px #888888;
}
.public-comment-reply > .public-comment > button {
    font-size: 14px;
    background-color: #f64c59;
    /*去掉按钮边框*/
    border: none;
    color: white;
    width: 150px;
    height: 40px;
/*定义按钮的对齐位置*/
    align-self:  end;
}
/*鼠标经过按钮时的效果*/
.public-comment-reply > .public-comment > button:hover {
    background-color: #178cee;
    box-shadow: 0 0 8px #888888;
    /*给鼠标变一个指针（小手）*/
    cursor: pointer;
}
/*回复区*/
.public-comment-reply > .public-reply {
    display: flex;
    /*列对齐*/
    flex-direction: column;
    padding: 15px 0;
}
.public-comment-reply > .public-reply > h3 {
    padding: 20px 0;
}
.public-comment-reply > .public-reply > div {
    display: flex;
    margin-top: 30px;
}
/*图片居中*/
.public-comment-reply > .public-reply > div > img {
    align-self: center;
}
.public-comment-reply > .public-reply > div > .detail {
    flex: auto;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    height: 90px;
    /*两端对齐*/
    justify-content: space-between;
}
.public-comment-reply > .public-reply > div > .detail > div {
    display: flex;
    /*两端对齐*/
    justify-content: space-between;
}
.public-comment-reply > .public-reply > div > .detail > div i {
    color: red;
    /*默认字体的1.2倍*/
    font-size: 1.2rem;
    margin-right: 5px;
}

最终运行效果

此效果中将 “发表评论” 的按钮靠右侧对齐，和参照图有所区别，更美观，代码如下：

/*定义按钮的对齐位置*/
    align-self:  end;

批改老师：

天蓬老师

批改状态：合格

老师批语：你这才叫全程实录, 非常的详细

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

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

0条评论

作者最新博文

PHP文件加载的三种方式和类与对象 - - PHP中文网线上班0428

2020-06-05 16:42:44

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学