先看页面效果
html+css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | ...
<style>
div.main{
margin-left: 2%; width :96%;
.title{
width: 100%;display: flex;justify-content: space-between;
align-items: center;padding: 10px 0;line-height: 16px;
span{
font-size: 16px;color: #333;width: 200px; text-align: left;
}
>div{/*右侧单号、箭头*/
display: inline-flex;justify-content: right;align-items: center;width: 100px;
span{
font-size: 14px;color: #999;
}
img{
width: 14px; height: 14px; margin-right: -2px;/*修正png图的框框*/
}
}
}
.content{
width: 100%;
.order{
background-color: #fff;border-radius: 5px;display: flex;
justify-content: space-between;align-items: center; margin: 10px 0;
>img{/*商品图*/
width: 80px;height: 80px; border: 1px solid blue;
border-radius: 5px; margin: 10px;
}
>div{/*商品图右侧详情*/
display: inline-flex;flex-direction: column;
justify-content: space-between;align-items: center;
height: 80px;margin-right: 10px;
>div{/*单号、时间*/
display: flex; font-size: 16px;line-height: 16px;
span{
display:block;font-size: 16px;
color: #333;width: 200px;
text-align: left;width: 100%;
}
>span:last-child{/*时间*/
font-size: 11px;color: #999;text-align: right;
}
}
>span{/*商品名*/
display:inline-block;font-size: 18px;
color: #333;font-weight: 900;
text-align: left;width: 100%;
}
>span:last-child{/*规格*/
font-size: 11px;color: #999;
line-height: 12px;margin-top: -20px;/*拉进商品名与规格*/
}
}
}
}
}
</style>
<div class="main">
<div class="title">
<span>近期订单</span>
<div>
<span>查看全部订单</span>
<img src="arrow_right_small.png">
</div>
</div>
<div class="content">
<div class="order">
<img src="IMG_1101.JPG">
<div>
<div>
<span>订单号: 123456789</span>
<span>2024-07-23 10:01:31</span>
</div>
<span>5090系列散热格窗............</span>
<span>红色、水冷款</span>
</div>
</div>
... |
——-
over~~
后记：
记得上小学时，某日，学校请来村里老木匠，做桌椅。木匠逐个做好各种课桌的部件：桌子腿、桌面、桌洞底板，然后一个个部件拼接起来，再在接口处敲几个木削进去，一张桌子完工。老师盯着这一切，跟我们说：看到了吧，老师傅做东西就是有谱，每个部件都刚刚好，一个人轻松组装；这要是不靠谱的小年轻木匠，三五个人辅助也也不见的能拼到一起，而且拼出来桌子可能还桌腿不平摇摇晃晃
每次写页面、css，脑子里想的都是几个人辅助一起拼桌子的画面…虽然前有firebug、后有chrome的开发工具，各种页面布局，也是要反复测试才能勉强完成设计图的目标。当然，大部分时候都不能完全实现效果图，最后就彻底改成position: absolute，各种算坐标，绝对定位~~给人感觉就是：虽然呈现在眼前的貌似是一张桌子，但后面其实是各种钉子、角铁钉住、甚至胶带粘在一起的 O(∩_∩)O哈哈~
近期写小程序，再次开始搞css，发现display:flex“弹性盒模型”真的很好用，这里记个布局范式，便于以后查阅
关于本站