html如何制作自适应的列表显示

来源：互联网发布：新三板智库大数据编辑：程序博客网时间：2024/05/19 14:53

html如何制作自适应的列表显示

html中经常会出现列表排行，例如：

实现思路：

1.标签栏和数据栏的字段按照百分比设定width的值，并设置float属性，设置间距值

2.多个item复制

实现代码：

html:

<div class="dataListWrap">            <div class="dataListTag">                <span class="dataListTagSpanOne">序号</span>                    <span class="dataListTagSpanTwo">学校</span>                            <span class="dataListTagSpanTwo" >参考人数</span>                            <span class="dataListTagSpanTwo" >平均分</span>                    <span class="dataListTagSpanTwo" >最高分</span>                        <span class="dataListTagSpanTwo" >500分以上</span>                        <span class="dataListTagSpanTwo" >480分以上</span>                    <span class="dataListTagSpanTwo" >420分以上</span>                    <span class="dataListTagSpanTwo" >升学率</span>                <span class="dataListTagSpanTwo" >均分排名</span>                <div class="clear"></div>            </div></div><div class="dataList"><div class="dataItem"><span class="dataItemOne">1</span><span class="dataItemTwo">成都七中</span><span class="dataItemTwo" >1200</span><span class="dataItemTwo" ">480</span><span class="dataItemTwo" >640</span><span class="dataItemTwo" >600</span><span class="dataItemTwo" >400</span><span class="dataItemTwo" >200</span><span class="dataItemTwo" >87.5%</span><span class="dataItemTwo" >1</span></div><div class="dataItem"><span class="dataItemOne">1</span><span class="dataItemTwo">成都七中</span><span class="dataItemTwo" >1200</span><span class="dataItemTwo" ">480</span><span class="dataItemTwo" >640</span><span class="dataItemTwo" >600</span><span class="dataItemTwo" >400</span><span class="dataItemTwo" >200</span><span class="dataItemTwo" >87.5%</span><span class="dataItemTwo" >1</span></div><div class="dataItem"><span class="dataItemOne">1</span><span class="dataItemTwo">成都七中</span><span class="dataItemTwo" >1200</span><span class="dataItemTwo" ">480</span><span class="dataItemTwo" >640</span><span class="dataItemTwo" >600</span><span class="dataItemTwo" >400</span><span class="dataItemTwo" >200</span><span class="dataItemTwo" >87.5%</span><span class="dataItemTwo" >1</span></div></div>

css:

.dataListTag{width: 100%;margin-top:10px ;background: #f5f6fa;height: 41px;border-bottom: 0px solid #e9ecf0;}.dataListTagSpanOne{width: 3.8%;float: left;font-size: 12px;margin-top: 13px;margin-left: 1.56%;color: #999999;}.dataListTagSpanTwo{width: 3.8%;float: left;font-size: 12px;margin-top: 13px;margin-left: 6.52%;color: #999999;}.dataList{    width: 100%;margin-top:10px ;background: #fff;    height: auto;border-bottom: 0px solid #e9ecf0;}.dataItem{    width: 100%;margin-top:10px ;background: #fff;    height: 41px;border-bottom: 1px solid #e9ecf0;}.dataItemOne{    width: 3.8%;float: left;font-size: 12px;                    margin-top: 13px;margin-left: 1.52%;                    color: #000;}.dataItemTwo{    width: 3.8%;float: left;font-size: 12px;                    margin-top: 13px;margin-left: 6.52%;                    color: #000;}

阅读全文

0 0