second-hand.html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--引入阿里字体图标库的css--><link rel="stylesheet" href="../static/font/iconfont.css"><link rel="stylesheet" href="second-hand.css"><title>二手交易</title></head><body><span class="iconfont icon-huiyuan1"></span><hr><!-- 标题1 --><div class="title1"><a href="">抢好货</a><span>0低价，便捷，安全，快速</span></div><!-- 标题2 --><div class="title2"><span>热门分类</span><a href="">家用电器</a><a href="">日常百货</a><a href="">运动器械</a><a href="">户外装备</a></div><!-- 功能区 --><div class="func"><div class="left"><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt=""><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div><div class="intro"><img src="full_template/static/images/shop/shop6.jpg" alt="" width="176"><a href="">家用电器家用电器家用电器</a><div class="des"><span>$ 333</span><span>电器</span></div></div></div><div class="right"><div class="ad"><img src="full_template/static/images/ad/1.png" alt="" width="180"><img src="full_template/static/images/ad/2.png" alt="" width="180"><img src="full_template/static/images/ad/3.png" alt="" width="180"><img src="full_template/static/images/ad/4.png" alt="" width="180"></div><img src="full_template/static/images/ad/image.png" alt="" width="380"><img src="full_template/static/images/ad/ad2.jpg" alt="" width="380"></div></div></body></html>
second-hand.css代码
* {margin: 0;padding: 0;font-size: 13px;/* outline: 2px solid cyan; */}a {text-decoration: none;}.title1 {width: inherit;height: 50px;border-bottom: 1px solid #cccccc;padding: 10px;box-sizing: border-box;}.title1 > a {font-size: 23px;}.title1 > span {margin-left: 20px;color: red;}.title2 {width: inherit;height: 60px;padding: 10px;box-sizing: border-box;}.title2 > span {font-size: 23px;color: red;}.title2 > a {margin-left: 10px;}.func {width: 1200px;display: flex;margin: auto;}.func > .left {width: 800px;display: flex;flex-flow: row wrap;}.func > .left > .intro {display: flex;flex-flow: column wrap;margin: 10px;}.func > .left > .intro > img {width: 176px;}.func > .left > .intro > .des {display: flex;flex-flow: row nowrap;justify-content: space-between;}.func > .left > .intro > .des span:first-of-type {color: red;/* padding: 0 10px 0 10px; */}.func > .left > .intro > .des span:last-of-type {color: white;background-color: green;padding: 0 10px 0 10px;}.func > .left > .intro > .des span:last-of-type:hover {background-color: blue;cursor: pointer;}.func > .right {width: 400px;display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: center;margin: 5px;}.func > .right > .ad {display: flex;flex-flow: row wrap;justify-content: space-between;margin: 10px;}.func > .right > img {}