2019-12-26 二手商品列表与评论与回复开发思路及实现-PHP培训十期 - html/css笔记

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 2019-12-26 二手商品列表与评论与回复开发思路及实现-PHP培训十期

博主信息

博文 12

粉丝 0

访问量 10269

专题推荐

更多>

1、二手商品列表组件

首先设计dom结构，分上下结构；
接着写css样式，设计页面元素排版
使用flex排版按row默认排版，两边对齐
```html code
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="public_second_hand.css">
<title>公共二手交易区组件</title>
</head>

<!--商品展示区-->
<div class="goods">
    <!--1.左边商品列表-->
    <div class="goods-list">
        <!--商品简介-->
        <div class="intro">
            <a href=""><img src="../../../static/images/shop/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/shop/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/shop/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/shop/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/shop/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/shop/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/shop/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/shop/shop1.jpg" alt="" width="176" height="120"></a>
            <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
            <div>
                <span>&yen; 333</span>
                <span>美女</span>
            </div>
        </div>
    </div>
    <!--2. 右侧的功能快速入口-->
    <div class="quick-entry">
        <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
        <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
        <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
        <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
        <div>
            <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
            <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
        </div>
    </div>
</div>

</div>
</body>
</html>

```CSS code
/*样式重置*/
@import "../public_reset.css";
/*大标题组件*/
@import "../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;
}
/*标题1*/
.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;
}
/*标题2*/
.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;
    /*flex-flow: row nowrap;*/
}
.publi-second-hand > .goods > .goods-list {
    padding: 10px;
    flex-basis: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.publi-second-hand > .goods > .goods-list > .intro{
    width: 178px;
    height: 200px;
    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;
}

效果图

2、评论与回复组件

首先设计dom结构，分上下结构；
接着写css样式，设计页面元素排版
使用flex排版按column排版
```html code
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../static/font/iconfont.css">
<link rel="stylesheet" href="public_comment_reply.css">
<title>评论与回复组件</title>
</head>

<body>

<!--回复区-->
<div class="reply">
    <h3>最新回复</h3>
    <div>
        <img src="../../../static/images/user.png" 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.png" 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.png" 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.png" 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>

```CSS Code
@import url(../public_reset.css);
.public-comment-reply {
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    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 > .comment {
    display: flex;
    flex-direction: column;
}
.public-comment-reply > .comment h3 {
    padding: 20px 0;
    border-top: 1px solid #cccccc;
}
.public-comment-reply > .comment > div {
    padding: 15px;
    height: 200px;
    display: flex;
    flex-flow: row nowrap;
}
.public-comment-reply > .comment > div img {
    align-self: flex-start;
}
.public-comment-reply > .comment > div textarea {
    height: 200px;
    margin-left: 20px;
    resize: none;
    flex: auto;
}
.public-comment-reply > .comment > div textarea:hover {
    box-shadow: 0 0 8px #888888;
}
.public-comment-reply > .comment > button {
    font-size: 14px;
    background-color: #f64c59;
    border: none;
    color: white;
    width: 150px;
    height: 40px;
    align-self:  end;
}
.public-comment-reply > .comment > button:hover {
    background-color: #178cee;
    box-shadow: 0 0 8px #888888;
    cursor: pointer;
}
/*回复区*/
.public-comment-reply > .reply {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
}
.public-comment-reply > .reply > h3 {
    padding: 20px 0;
}
.public-comment-reply > .reply > div {
    display: flex;
    margin-top: 30px;
}
.public-comment-reply > .reply > div > img {
    align-self: center;
}
.public-comment-reply > .reply > div > .detail {
    flex: auto;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    height: 90px;
    justify-content: space-between;
}
.public-comment-reply > .reply > div > .detail > div {
    display: flex;
    justify-content: space-between;
}
.public-comment-reply > .reply > div > .detail > div i {
    color: red;
    font-size: 1.2rem;
    margin-right: 5px;
}