二手商品交易和评论与回复的组件（1226前端开发学习） - 前端学习

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 二手商品交易和评论与回复的组件（1226前端开发学习）

博主信息

博文 26

粉丝 0

访问量 42483

专题推荐

更多>

1.首先是二手商品组件效果图与代码。

效果图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>二手交易</title></br>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/second_hand.css">
</head>
<body>
    <div class="public-second-hand">
    <!-- 标题一 -->
    <div class="title1">
       <a href="">抢好货</a>
       <span>低价，便捷，安全，快速</span>
    </div>
    <!-- 标题二 -->
    <div class="title2">
    <span>热门分类</span>
       <a href="">美女写真</a>
       <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="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div></div>
         <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div></div>
         <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div></div>
        <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div></div>
        <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div>
        </div>
        <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div>
        </div>
        <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div>
        </div>
        <div class="intro">
                    <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
                    <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
                    <div>
                        <span>¥ 345</span>
                        <span>美女</span>
                    </div>
        </div>
        </div>
        <!-- 右侧功能 -->
        <div class="quick-entry">
            <a href=""><img src="img/1.png" alt="" ></a>
            <a href=""><img src="img/2.png" alt=""></a>
            <a href=""><img src="img/3.png" alt=""></a>
            <a href=""><img src="img/4.png" alt=""></a>
                <div>
            <a href=""><img src="img/ad2.jpg" alt=""></a>
            <a href=""><img src="img/image.png" alt=""></a>     </div>
            </div>
        </div>
</body>
</html>

css代码

@import "reset.css";
.public-second-hand {
    width: 1200px;
    padding: 10px;
    box-sizing: border-box;
    margin: auto;
    border-radius: 5px;
    background-color: #fff;
}
.public-second-hand:hover {
    box-shadow: 0 0 8px #888;
}
/*标题1*/
.public-second-hand > .title1 {
    height: 50px;
    border-bottom: 1px solid #cccccc;
    box-sizing: border-box;
}
.public-second-hand > .title1 > a {
    font-size: 23px;
    margin-right: 20px;
}
.public-second-hand > .title1 > span {
    color: red;
}
/*标题2*/
.public-second-hand > .title2 {
    height: 55px;
}
.public-second-hand > .title2 > span {
    color: red;
    font-size: 23px;
}
.public-second-hand > .title2 > span ~ a {
    padding-left: 20px;
}
.public-second-hand > .title2 > span ~ a:hover {
    color: lightcoral;
}
/*商品展示区*/
.public-second-hand > .goods {
    height: 440px;
    /*转为flex*/
    display: flex;
    /*flex-flow: row nowrap;*/
}
.public-second-hand > .goods > .goods-list {
    padding: 10px;
    flex-basis: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.public-second-hand > .goods > .goods-list > .intro{
    width: 178px;
    height: 200px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.public-second-hand > .goods > .goods-list > .intro img {
    border: 1px solid #cccccc;
    border-radius: 16px;
}
.public-second-hand > .goods > .goods-list > .intro span:first-of-type {
    color: red;
}
.public-second-hand > .goods > .goods-list > .intro > div {
    display: flex;
}
.public-second-hand > .goods > .goods-list > .intro span:last-of-type {
    color: white;
    background-color: #55ce9f;
    padding: 0 5px;
    margin-left: auto;
}
/*功能快速入口区*/
.public-second-hand > .goods > .quick-entry {
    flex-basis: 400px;
    padding: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.public-second-hand > .goods > .quick-entry img {
    width: 190px;
    height: 130px;
}
.public-second-hand > .goods > .quick-entry > div {
    width: 400px;
    display:flex;
    flex-direction:column;
}
.public-second-hand > .goods > .quick-entry > div img {
    width: 393px;
    height: 60px;
}

2.下面是评论与回复效果图与代码

效果图

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/public_reply.css">
    <title>评论回复</title>
</head>
<body>
    <div class="public-reply">
        <!-- 评论 -->
        <div class="comment">
            <h4>我要评论</h4>
            <div>
                <label for="comment">
                    <img src="img/user.png" alt="">
                </label>
                <textarea name="" id="comment">
                </textarea>
            </div>
            <button>发表评论</button>
        </div>
        <!-- 回复 -->
        <div class="reply">
            <h3>最新回复</h3>
            <div>
                <img src="img/user.png" alt="">
                <div class="detail">
                    <span>ad1</span>
                    <span>留言内容: 
                    php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>发布于：2019-12-31</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="img/user.png" alt="">
                <div class="detail">
                    <span>ad2</span>
                    <span>留言内容：
                     php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>发表于：2019-12-31</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="img/user.png" alt="">
                <div class="detail">
                    <span>ad23</span>
                    <span>留言内容：
                    php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>发表于：2019-12-31</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="img/user.png" alt="">
                <div class="detail">
                    <span>ad24</span>
                    <span>留言内容：
                    php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>发表于：2019-12-31</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css代码

@import "../public_reset.css";
/*1. 评论区域的样式*/
.public-reply {
    /*宽度和高度主它自适应的父元素,这里不要设置*/
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    /*弹性布局, 整体垂直排列*/
    display: flex;
    flex-direction: column;
}
.public-reply img {
    box-shadow: 1px 1px 3px #cccccc;
    border-radius: 5px;
}
/*评论区整体样式*/
.public-reply > .comment {  
    display: flex;
    flex-direction: column;
}
/*用户头像大小*/
.public-reply img {
    width: 60px;
    height: 60px;
}
.public-reply > .comment h3 {
    padding: 20px 0;
    border-top: 1px solid #cccccc;
}
/*设置评论发布区: 头像与按钮的样式*/
.public-reply .comment > div {
    padding: 15px;
    height: 200px;
    /*头像与按钮应该水平排列,转为弹性盒子*/
    display: flex;
    flex-flow: row nowrap;
}
.public-reply .comment > div  img {
    /*垂直方向从起始位置显示,这也是默认值,可省略*/
    align-self: start;
}
/*设置文本域样式*/
.public-reply .comment > div textarea {
    height: 200px;
    margin-left: 20px;
    resize: none;
    /*占据剩余全部空间, flex: 1*/
    flex: auto;
}
.publi-reply .comment > div textarea:hover {
    box-shadow: 0 0 8px #888;
}
/*自定义发表评论的按钮样式*/
.public-reply .comment > button {
    font-size: 14px;
    background-color: #f64c59;
    border: none;
    color: white;
    width: 150px;
    height: 40px;
    /*按钮居右显示,即交叉轴上对齐到结束框*/
    align-self: end;
}
.public-reply .comment > button:hover {
    background-color: #178cee;
    box-shadow: 0 0 5px #888;
}
/*2. 回复区域的样式*/
.publi-reply > .reply {
    /*弹性盒子,垂直排列*/
    display: flex;
    flex-direction: column;
    padding: 15px 0;
}
.public-reply > .reply > h3 {
    padding: 20px 0;
}
/*回复区整体水平排列(默认值): 头像与回复详情*/
.public-reply > .reply > div {
    display: flex;
    /*让每条回复之间有一定的间隙*/
    margin-top: 30px;
}
/*用户头像垂直居中*/
.public-reply > .reply > div > img {
    align-self: center;
}
/*回复详情垂直排列三行*/
.public-reply > .reply > div .detail {
    /*回复详情占据水平剩余全部空间*/
    flex:auto;
    /*转为弹性盒子,且垂直排列*/
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    /*必须设置高度, 否则主轴无法产生剩余空间*/
    height: 90px;
    /*三行文本二端对齐*/
    justify-content: space-between;
}
/*将回复点赞按钮,放在最右边*/
.public-reply > .reply > div .detail > div {
    /*将发表时间和回复点赞所在容器设置为flex容器,以简化代码*/
    display: flex;
    flex-direction: row;
    /*二端对齐, 实现最终效果*/
    justify-content: space-between;
}
.public-reply > .reply > div .detail > div i {
    color: red;
    font-size: 1.2rem;
    margin-right: 5px;
}