search

博客列表 >flex布局实践(12月26)

flex布局实践(12月26)

孤心泪的博客
孤心泪的博客原创
2019年12月29日 23:56:11573浏览

二手商品交易

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

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;
}

上一条：1229作业之grid布局完成二手交易下一条：1227仿m.php.cn首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多