Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局实践(12月26)
Blogger Information
Blog 7
fans 0
comment 0
visits 5096
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
flex布局实践(12月26)
孤心泪的博客
Original
571 people have browsed it

二手商品交易

布局思路：整体分为上下两部分；上部为大标题（引用标题组件），下部为主体内容。
下部分为三部分：副标题区，分类选项区，商品区；
商品区分为左侧要商品，右侧快速导航和广告区

1.布局效果图

2.HTML代码 和css代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手交易组件</title>
  6.     <link rel="stylesheet" href="./public-second-hand.css">
  7. </head>
  8. <body>
  9. <!--引入大标题组件-->
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  13. <!--二手交易专区-->
  14. <div class="public-second-hand">
  15.     <!--副标题-->
  16.     <div class="title1">
  17.         <a href="">抢好货</a>
  18.         <span>低价，便捷，安全，快速</span>
  19.     </div>
  20.     <!--分类选项-->
  21.     <div class="title2">
  22.         <span>热门分类</span>
  23.         <a href="">美女写真</a>
  24.         <a href="">日本美女</a>
  25.         <a href="">美国美女</a>
  26.         <a href="">国内美女</a>
  27.         <a href="">AV美女</a>
  28.     </div>
  29.     <!--商品展示区-->
  30.     <div class="goods">
  31.         <!--1.左边商品列表-->
  32.         <div class="goods-list">
  33.             <!--商品简介-->
  34.             <div class="intro">
  35.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  36.                 <a href="">美女性感写真海报图片美女性感写真海报图</a>
  37.                 <div>
  38.                     <span>&yen;666</span>
  39.                     <span>美女</span>
  40.                 </div>
  41.             </div>
  42.             <div class="intro">
  43.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  44.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  45.                 <div>
  46.                     <span>&yen;666</span>
  47.                     <span>美女</span>
  48.                 </div>
  49.             </div>
  50.             <div class="intro">
  51.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  52.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  53.                 <div>
  54.                     <span>&yen;666</span>
  55.                     <span>美女</span>
  56.                 </div>
  57.             </div>
  58.             <div class="intro">
  59.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  60.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  61.                 <div>
  62.                     <span>&yen;666</span>
  63.                     <span>美女</span>
  64.                 </div>
  65.             </div>
  66.             <div class="intro">
  67.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  68.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  69.                 <div>
  70.                     <span>&yen;666</span>
  71.                     <span>美女</span>
  72.                 </div>
  73.             </div>
  74.             <div class="intro">
  75.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  76.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  77.                 <div>
  78.                     <span>&yen;666</span>
  79.                     <span>美女</span>
  80.                 </div>
  81.             </div>
  82.             <div class="intro">
  83.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  84.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  85.                 <div>
  86.                     <span>&yen;666</span>
  87.                     <span>美女</span>
  88.                 </div>
  89.             </div>
  90.             <div class="intro">
  91.                 <a href=""><img src="../../../../image/shop/shop1.jpg" alt=""></a>
  92.                 <a href="">美女性感写真海报图片美女性感写真海报图片美女性感写真海报图片</a>
  93.                 <div>
  94.                     <span>&yen;666</span>
  95.                     <span>美女</span>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.         <!--2.右边的功能是快速入口-->
  100.         <div class="quick-entry">
  101.             <a href=""><img src="../../../../image/ad/1.png" alt=""></a>
  102.             <a href=""><img src="../../../../image/ad/2.png" alt=""></a>
  103.             <a href=""><img src="../../../../image/ad/3.png" alt=""></a>
  104.             <a href=""><img src="../../../../image/ad/4.png" alt=""></a>
  105.             <div>
  106.                 <a href=""><img src="../../../../image/ad/image.png" alt=""></a>
  107.                 <a href=""><img src="../../../../image/ad/ad2.jpg" alt=""></a>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </div>
  112. </body>
  113. </html>

css代码
/重置样式/
@import “../../public_reset.css”;
/大标题组件/
@import “../public_headline/public-headline.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 #ccc;
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: lightblue;
}

/商品展示区/
.public-second-hand>.goods{
height: 440px;
display: flex;
}
.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 #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;
align-items: center;
}
.public-second-hand>.goods>.goods-list>.intro span:last-of-type{
color: red;
background-color: #55ce9f;
padding: 0 5px;
margin-left: auto;
}
/商品图片/
.public-second-hand > .goods > .goods-list > .intro img {
border: 1px solid #cccccc;
border-radius: 5px;
width: 176px;
height: 120px;
display: block;
}
/功能快速入口/
.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;
}

评论与回复

布局思路：整体分为上下两部分，上部为评论区，下部为回复区；
上部又分为标题区，文本输入区，按钮区；下部分为标题区和回复列表，列表子项分为左侧头像和右侧内容；内容区分为纵向三部分用户昵称，留言内容，评论时间区

1.布局效果图

2.html和css代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论与回复</title>
  7.     <link rel="stylesheet" href="../../../../font/iconfont.css">
  8.     <link rel="stylesheet" href="public_comment_reply.css">
  9. </head>
  10. <body>
  11. <div class="public-comment-reply">
  12.     <!--评论区-->
  13.     <div class="comment">
  14.         <h3>我要评论</h3>
  15.         <div>
  16.             <label for="comment">
  17.                 <img src="../../../../image/user.png" alt="">
  18.             </label>
  19.             <textarea name="" id="comment"></textarea>
  21.         </div>
  22.         <button>发表评论</button>
  23.     </div>
  25.     <!--回复区-->
  26.     <div class="reply">
  27.         <h3>最新回复</h3>
  28.         <div>
  29.             <img src="../../../../image/user.png" alt="">
  30.             <div class="detail">
  31.                 <span>用户昵称</span>
  32.                 <span>留言内容：这是测试的内容</span>
  33.                 <div>
  34.                     <span>2019-12-25 15:23:34发表</span>
  35.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  36.                 </div>
  37.             </div>
  38.         </div>
  39.         <div>
  40.             <img src="../../../../image/user.png" alt="">
  41.             <div class="detail">
  42.                 <span>用户昵称</span>
  43.                 <span>留言内容：这是测试的内容</span>
  44.                 <div>
  45.                     <span>2019-12-25 15:23:34发表</span>
  46.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.         <div>
  51.             <img src="../../../../image/user.png" alt="">
  52.             <div class="detail">
  53.                 <span>用户昵称</span>
  54.                 <span>留言内容：这是测试的内容</span>
  55.                 <div>
  56.                     <span>2019-12-25 15:23:34发表</span>
  57.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.         <div>
  62.             <img src="../../../../image/user.png" alt="">
  63.             <div class="detail">
  64.                 <span>用户昵称</span>
  65.                 <span>留言内容：这是测试的内容</span>
  66.                 <div>
  67.                     <span>2019-12-25 15:23:34发表</span>
  68.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.         <div>
  73.             <img src="../../../../image/user.png" alt="">
  74.             <div class="detail">
  75.                 <span>用户昵称</span>
  76.                 <span>留言内容：这是测试的内容</span>
  77.                 <div>
  78.                     <span>2019-12-25 15:23:34发表</span>
  79.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84. </div>
  85. </body>
  86. </html>

css代码
@import “../../public_reset.css”;

.public-comment-reply {
padding: 15px;
box-sizing: border-box;
background-color: #fff;

  1. display: flex;
  2. flex-direction: column;

}

.public-comment-reply img{
width: 60px;
height: 60px;
border-radius: 5px;
box-shadow: 1px 1px 3px #ccc;
}

.public-comment-reply>.comment {
display: flex;
flex-direction: column;
}
.public-comment-reply>.comment h3 {
padding: 20px 0;
border-top: 1px solid #cccc;
}

.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 6px #ccc;
}
.public-comment-reply>.comment>button {
font-size: 14px;
color: #fff;
background-color: #f64c59;
border: none;
width: 150px;
height: 40px;
align-self: end;
}
.public-comment-reply>.comment>button:hover{
background-color: #178cee;
box-shadow: 0 0 6px #ccc;
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;

  1. display: flex;
  2. flex-direction: column;
  3. margin-left: 20px;
  4. height: 90px;
  5. 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.5rem;
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