效果:
源码:
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">
- 更多 & gt;>
- </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"); }); })
图片:
来源: http://www.bubuko.com/infodetail-2876454.html