Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1226作业
Blogger Information
Blog 15
fans 0
comment 0
visits 10898
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1226作业
安
Original
627 people have browsed it

一、二手商品列表

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

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

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：下次不要用这样的课程标题了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post