简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1226作业

1226作业

安
安原创
2019年12月27日 16:04:49625浏览

一、二手商品列表

<!DOCTYPE html>

<html lang="en">

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

<body>
<!--引入大标题-->

<div class="public-headline">
<span>二手交易</span>
</div>

<!--二手交易专区-->

<div class="public-second-hand">
<div class="title1">
<a href="">抢好货</a>
<span>0底价，便捷，安全，快速</span>
</div>
<div class="title2">
<span>热门分类</span>
<a href="">美女写真</a>
<a href="">日本美女</a>
<a href="">美国美女</a>
<a href="">国内美女</a>
<a href="">AV美女</a>
</div> 

  1. <div class="goods">
  2.     <!--商品列表-->
  3.     <div class="goods-list">
  4.         <!--商品简介-->
  5.         <div class="intro">
  6.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  7.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  8.             <div>
  9.                 <span>&yen;333</span>
  10.                 <span>美女</span>
  11.             </div>
  12.         </div>
  13.         <div class="intro">
  14.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  15.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  16.             <div>
  17.                 <span>&yen;333</span>
  18.                 <span>美女</span>
  19.             </div>
  20.         </div>
  21.         <div class="intro">
  22.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  23.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  24.             <div>
  25.                 <span>&yen;333</span>
  26.                 <span>美女</span>
  27.             </div>
  28.         </div>
  29.         <div class="intro">
  30.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  31.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  32.             <div>
  33.                 <span>&yen;333</span>
  34.                 <span>美女</span>
  35.             </div>
  36.         </div>
  37.         <div class="intro">
  38.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  39.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  40.             <div>
  41.                 <span>&yen;333</span>
  42.                 <span>美女</span>
  43.             </div>
  44.         </div>
  45.         <div class="intro">
  46.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  47.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  48.             <div>
  49.                 <span>&yen;333</span>
  50.                 <span>美女</span>
  51.             </div>
  52.         </div>
  53.         <div class="intro">
  54.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  55.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  56.             <div>
  57.                 <span>&yen;333</span>
  58.                 <span>美女</span>
  59.             </div>
  60.         </div>
  61.         <div class="intro">
  62.             <a href=""><img src="../../../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  63.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  64.             <div>
  65.                 <span>&yen;333</span>
  66.                 <span>美女</span>
  67.             </div>
  68.         </div>
  69.     </div>
  71.     <!--功能入口-->
  72.     <div class="quick-entry">
  73.         <a href=""><img src="../../../images/ad/1.png" alt=""></a>
  74.         <a href=""><img src="../../../images/ad/2.png" alt=""></a>
  75.         <a href=""><img src="../../../images/ad/3.png" alt=""></a>
  76.         <a href=""><img src="../../../images/ad/4.png" alt=""></a>
  77.         <div>
  78.             <a href=""><img src="../../../images/ad/image.png" alt=""></a>
  79.             <a href=""><img src="../../../images/ad/ad2.jpg" alt=""></a>
  80.         </div>
  81.     </div>
  83. </div>

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

css文件

/公共样式/
{
margin: 0;
padding: 0;
/outline: 1px dashed red;*/
}
body{
font-size: 13px;
color: #555555;
background-color: #efefef;
}
a{
color:#404040;

  1. text-decoration: none;
  2. font-size: 13px;

}
li{
list-style: none;
}
/二手标题/
.public-headline{
padding: 30px;
text-align: center;
}
.public-headline span{
font-size: 30px;
font-weight: bolder;
padding-bottom: 7px;
border-bottom: 3px solid red;
}

/二手交易专区/

.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 5px #888;
}

.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;
}
.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: #0077aa;
}

/商品区/

.public-second-hand > .goods{
height: 440px;
display: flex;
}

.public-second-hand > .goods > .goods-list{
padding: 10px;
flex-basis: 800px;

  1. display: flex;
  2. flex-flow: row wrap;
  3. 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 #ccc;
border-radius:5px ;
}

.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;
}
样式图

思路
将出了标题意外的其他内容放到一个div中，然后将剩余部分分成3个部分进行编写。分别是：抢好货、热门分类、主要内容。
然后再将主要内容分成左右两个部分进行编写。在css部分用大盒子套小盒子的方法把内容实现精准定位

二、评论回复

<!DOCTYPE html>

<html lang="en">

<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="public-comment-reply">
<!--评论区-->
<div class="comment">
<h3>我要评论</h3>
<div>
<label for="comment">
<img src="../../../static/images/user.png" alt="">
</label>
<textarea name="" id="comment"></textarea>
</div>
<button>发表评论</button>
</div> 

  1. <!--回复区-->
  2. <div class="reply">
  3.     <h3>最新回复</h3>
  4.     <div>
  5.         <img src="../../../static/images/user.png" alt="">
  6.         <div class="detail">
  7.             <span>用户昵称</span>
  8.             <span>用户昵称留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  9.             <div>
  10.                 <span>2019-12-12 15:34:23发表</span>
  11.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <div>
  16.         <img src="../../../static/images/user.png" alt="">
  17.         <div class="detail">
  18.             <span>用户昵称</span>
  19.             <span>用户昵称留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  20.             <div>
  21.                 <span>2019-12-12 15:34:23发表</span>
  22.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div>
  27.         <img src="../../../static/images/user.png" alt="">
  28.         <div class="detail">
  29.             <span>用户昵称</span>
  30.             <span>用户昵称留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  31.             <div>
  32.                 <span>2019-12-12 15:34:23发表</span>
  33.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <div>
  38.         <img src="../../../static/images/user.png" alt="">
  39.         <div class="detail">
  40.             <span>用户昵称</span>
  41.             <span>用户昵称留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  42.             <div>
  43.                 <span>2019-12-12 15:34:23发表</span>
  44.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  45.             </div>
  46.         </div>
  47.     </div>
  49. </div>

</div>
</body>
</html>
css部分
{
margin: 0;
padding: 0;
/outline: 1px dashed red;*/
}
body{
font-size: 13px;
color: #555555;
background-color: #efefef;
}
a{
color:#404040;

  1. text-decoration: none;
  2. font-size: 13px;

}
li{
list-style: none;
}

.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: 1;
}

.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;
}
效果图

思路
将网站分为两不分：一个是评论区部分、一个是回复区部分。

评论区需要注意文本框的锁定，还有头像的右边距或文本框的左边距需要调整大小。
回复区需要注意头像的居中。

上一条：2019-12-26作业，商品交易区和评论回复组件下一条：12月26日 学号：478291 组件开发实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多