html+css 实现简单的列表

来源：互联网发布：娱乐软件英文怎么说编辑：程序博客网时间：2024/05/17 21:46

实现效果

结构

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

阅读全文

0 0