效果：
源码：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度星座</title> <style type="text/css"> *{ margin: 0; padding: 0; } .clearfix:after{ content: ""; display: block; clear: both; height: 0; line-height: 0; visibility: hidden; } .clearfix{ zoom: 1; } ul{ list-style: none; } button{ border: none; outline: none; cursor: pointer; } body{ background: url("img/bg.jpg") no-repeat; background-size: cover; -webkit-background-size: cover; } .logo{ width: 270px; margin: 30px auto 0; } .logo img{ width: 270px; height: 129px; } .links{ width: 600px; margin: 0px auto; } .links li{ float: left; } .links li a{ color: #fff; padding: 0 10px; } .search{ width: 640px; margin: 10px auto; } .search input{ width: 536px; height: 40px; border: none; outline: none; } .search button{ width: 104px; height: 40px; background-color: #DDD; } .container{ width: 888px; margin: 40px auto; } .container .menu{ float: left; width: 80px; height: 318px; background-color: rgba(0,0,0,.4 ); } .container .menu a{ display: block; font-weight: bold; color: #fff; text-decoration: none; width: 80px; height: 35px; line-height: 35px; text-align: center; } .container .menu a.active{ background-color: #A4A5A7; } .container .card{ float: left; margin-left: 20px; width: 768px; height: 278px; background-color: rgba(255,255,255,.6); padding: 20px 0 20px 20px; } .container .card li{ width: 170px; height: 50px; border: 1px solid #fff; float: left; margin: 0px 20px 20px 0; /*background: url("img/xingzuo.png") no-repeat 0 0;*/ position: relative; } .container .card li a{ display: block; width: 100px; height: 30px; padding: 3px 0 10px 70px; text-decoration: none; color: #000; } .container .card li div{ position: absolute; top: -1px; right: -1px; height: 0; width: 30px; height: 30px; background: url("img/xingzuo.png") no-repeat 0 -624px; cursor: pointer; display: none; } .container .card li div.mark{ display: block; } .container .card .bottom{ border-top: 1px solid #fff; width: 748px; } .container .card .bottom button{ display: block; width: 80px; height: 30px; color: #fff; background-color: #389CFF; margin: 20px auto; } </style> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div class="logo"> <img src="img/logo_white.png" alt=""> </div> <div class="links clearfix"> <ul> <li><a href="http://news.baidu.com" target="_blank">新闻</a></li> <li><a href="http://www.baidu.com" target="_blank">网页</a></li> <li><a href="http://tieba.baidu.com" target="_blank">贴吧</a></li> <li><a href="http://zhidao.baidu.com" target="_blank">知道</a></li> <li><a href="http://music.baidu.com" target="_blank">音乐</a></li> <li><a href="http://image.baidu.com" target="_blank">图片</a></li> <li><a href="http://v.baidu.com" target="_blank">视频</a></li> <li><a href="http://map.baidu.com" target="_blank">地图</a></li> <li><a href="http://baike.baidu.com" target="_blank">百科</a></li> <li><a href="http://wenku.baidu.com" target="_blank">文库</a></li> <li><a href="http://www.baidu.com/more/" target="_blank">更多>></a></li> </ul> </div> <div class="search"> <input type="text" name="question"><button type="submit">百度一下</button> </div> <div class="container"> <div class="menu"> <ul> <li><a href="javascript:;">导航</a></li> <li><a href="javascript:;">音乐</a></li> <li><a href="javascript:;">新闻</a></li> <li><a href="javascript:;" class="active">星座</a></li> </ul> </div> <div class="card"> <div class="xingzuo clearfix" id="xz"></div> <div class="bottom"> <button>确定</button> </div> </div> </div> </body> </html>
index.js
$(function () { var datas = [{ name : "白羊座", date : "3.21-4.19" },{ name : "金牛座", date : "4.20-5.20" },{ name : "双子座", date : "5.21-6.21" },{ name : "巨蟹座", date : "6.22-7.22" },{ name : "狮子座", date : "7.23-8.22" },{ name : "处女座", date : "8.23-9.22" },{ name : "天秤座", date : "9.23-10.23" },{ name : "天蝎座", date : "10.24-11.22" },{ name : "射手座", date : "11.23-12.21" },{ name : "摩羯座", date : "12.22-1.19" },{ name : "水瓶座", date : "1.20-2.18" },{ name : "双鱼座", date : "2.19-3.20" }]; var str = "<ul>"; for(var i=0;i<datas.length;i++){ str += "<li>"; str += "<a href='#'>"+datas[i].name+"<br>"+datas[i].date+"</a>"; str += "<div></div></li>"; } str += "</ul>"; $("#xz").html(str); $("#xz li").each(function (i) { $("#xz li:eq("+i+")").css("background","url('img/xingzuo.png') no-repeat 0 -"+(52*i)+"px"); }) $("#xz li").click(function () { $(this).children("div").toggleClass("mark"); }); })
图片：
