html+css 实现简单的列表

水深无声 2022-06-04 05:25 230阅读 0赞

**实现效果**

![Image 1][]

**结构**

<div id="f_list" class="list"> <div class="list-item"> <div class="img_box"> <img class="lazy" data-original="http://img.ejyfile.com/format_img/1463017443.png!500" src="http://img.ejyfile.com/format_img/1463017443.png!500" style=""> <span class="prices">128.00</span> <span class="dot"> <img class="icon" src="../img/img1/btn_shoucang.png"> <span class="num">0</span> </span> </div> <div class="info"> <h3>苏州石公山、明月湾、古樟园一日自驾游</h3> <div class="detail"> <span class="line">南京-->苏州</span> 出发时间： <span class="time">2017-12-02</span> 共 <span class="total">1</span> 天 </div> <div class="tag"> <span class="tag-items">踏青旅游</span> <span class="tag-items">古镇园林</span> <span class="tag-items">亲子活动</span> <span class="volume_temp">已售:3</span> </div> </div> </div> </div>

**样式**

*{ margin: 0; padding: 0; } body,html{ background-color: #eee; } ul,li{ list-style: none; /*列表样式：无。*/ list-style-type: none;/*列表无标记*/ } a,a:active,a:focus,a:hover{ text-decoration: none; /* 文本修饰：无 */ color: inherit;/*inherit 关键字指定一个属性应从父元素继承它的值。*/ } input{/*内边距和边距不再会增加它的宽度*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*重置表格元素*/ table{ border-collapse: collapse; border-spacing: 0; } /*线路列表*/ .list{ width: 100%; } .list-item{ width: 100%; height: 300px; background-color: white; } .img_box{ width: 100%; height: 200px; position: relative; } .lazy{ width: 100%; height: 200px; } .prices::before{ content: "￥"; } .prices{ position: absolute; bottom: 16px; left: 16px; color: white; font-size: 18px; background-color: rgba(0,0,0,0.2); } .prices::after{ content: "起"; } .dot{ position: absolute; bottom: 16px; right: 16px; color: white; background-color: rgba(0,0,0,0.2); } .icon{ height: 30px; vertical-align: middle; position: relative; bottom: 2px; left: 5px; } .info{ width: 100%; padding: 10px 0 0 6px; } .info>h3{ font-size: 16px; font-weight: 500; } .detail{ margin: 10px 0; font-size: 14px; color: #999; } .tag-items{ display: inline-block; height: 20px; line-height: 20px; padding: 2px 10px; color: #CCB68A; background-color: #F3EEE0; border-radius: 10px; font-size: 14px; } .volume_temp{ float: right; margin-right: 10px; color: #999; }

[Image 1]: