自适应列表项

来源：互联网发布：raft算法 term 编辑：程序博客网时间：2024/06/06 07:07

列表项：1.显示固定图片 2. 显示文字 3. 显示按钮

HTML

<div class="ChooseTools"><!-- 添加文字样式 NavLinks 以及更改背景颜色-->  <div class="NavLinks">  <!-- 列表项 Item：图片加文字 -->    <div class="Item">     <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->    <div class="Item"> <a class="ItemLink" href="javascript:void(0)">    <span class="Ico Ico1"></span>      <h2>会话气泡</h2>      <div>5张</div>      <div class="Item GotoDld"><p style="color:#4BB754;">添加</p></div>      </a> </div>    <div class="Item"> <a class="ItemLink" href="javascript:void(0)"> <span class="Ico Ico2"></span>      <h2>红色印章</h2>      <div>5张</div>      <div class="Item GotoDld"><p style="color:#4BB754;">添加</p></div>      </a> </div>    <div class="Item"> <a class="ItemLink" href="javascript:void(0)"> <span class="Ico Ico3"></span>      <h2>水印</h2>      <div>7张</div>      <div class="Item GotoDld"><p style="color:#4BB754;">添加</p></div>      </a> </div>  </div></div><script type="text/javascript">$(function(){   $(".GotoDld").click(function(){    $(this).css("border-color","#cccccc");      $(this).html("<p>已添加</p>");    $(".GotoDld p").click(function(){    $(this).css("color","#cccccc");    })  })  })  window.onload=function() {    var obj = document.getElementById('TrainPic');    obj.onclick=function(){          window.location.href="wxPictureSdTrain.html";      }}</script>

css

.NavLinks{    background:#ffffff; position:relative;}.NavLinks .Item{position:relative;}/* Test 10.18 */.NavLinks .Item ul li{list-style: none;}.Item .ItemLink:before{content:" ";position:absolute;left:15px;top:0px;right:0px;border-top:1px solid #d9d9d9;color:#d9d9d9;background-color: #d9d9d9;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);z-index:5;}.Item .GotoDld{position:absolute;width:60px;height:30px;right:15px;top:12px;color: #4BB754;    border-radius: 4px;    border:1px solid #4BB754;    margin-top:18px;     text-align: center;    line-height: 54px;    vertical-align: middle; }.GotoPstyle{color:#4BB754 important!; }.Item .GotoDld p{color:#dadada;margin-top: 4px;}.PStyle{color:gray;}.Item .GotoOrd{position:absolute;width:29px;height:28px;right:18px;top:30px;color: #4BB754;    border-radius: 4px;    margin-top:6px;     text-align: center;    line-height: 34px;    vertical-align: middle;   }.Item .GotoOrd div{width: 20px;height: 2px;margin-top: 2px;opacity: 0.8;filter: alpha(opacity=0.7);background-color: gray;}.Item .GotoOrd{display: none;}

.NavLinks .ItemLink{display:block;padding:11px 34px 12px 80px;position:relative;min-height:60px;/* background:url(../images/Mobile_bg0154.png) right 16px center no-repeat; */background-size:8px 14px;}.NavLinks .ItemLink .Ico3{ background:url(../images/Mobile_bg0232_3.png) center center no-repeat; background-size:48px 48px;}/*  */.NavLinks .ItemLink .Ico{position:absolute;width:48px;height:48px;left:16px;top:16px;}.NavLinks .ItemLink .Ico1{background:url(../images/Mobile_bg0289.png) center center no-repeat;background-size:48px 48px;}.NavLinks .ItemLink .Ico2{background:url(../images/Mobile_bg0290.png) center center no-repeat;background-size:48px 48px;}.NavLinks .ItemLink .Ico3{background:url(../images/Mobile_bg0291.png) center center no-repeat;background-size:48px 48px;}.NavLinks .ItemLink h2{font-size:18px;line-height:1.5;color:#333333;}.NavLinks .ItemLink  li{position:relative;font-size:14px;color:#888888;line-height:1.5;padding-left:10px;}.NavLinks .ItemLink  li:before{content:"";width:4px;height:4px;background:#888888;border-radius:4px;left:0px;top:9px;position:absolute;}.NavLinks .ItemLink div{font-size:14px;color:#888888;line-height:1.5;}

0 0