总结一下通常的小选项卡的编写过程.
HTML结构代码：
<!--结构方面-->
<body>
<div id="box">
<ul id="title">
<li class="active">新闻</li>
<li>首页</li>
<li>政治</li>
<li>时事</li>
</ul>
<div style="display: block;">新闻</div>
<div>首页</div>
<div>政治</div>
<div>时事</div>
</div>
</body>我用一个大盒子包囊着一个ul以及四个div 并且给li设置独特的样式 让li刚开始时 有一个是独特的. 其余box里面的四个div 是对应上面作为按钮的li的.
CSS样式代码：
<style type="text/css">
*{margin: 0;padding: 0; list-style: none;}
#box{width:322px;height:360px; border:1px solid pink; box-sizing: border-box; margin: 0 auto; }
#title{width:320; height: 40px; border-bottom:2px solid pink;box-sizing: border-box; }
#title li{height: 38px; padding: 0px 23px; border :1px solid red; font-size: 16px；font-weight:微软雅黑; line-height: 38px; text-align: center;float: left; cursor: pointer; }
#box div{display: none; width: 320px; height: 320px; font-size: 60px;font-family:"microsoft yahei"; text-align: center; line-height: 320px;text-shadow: 1px 1px 8px aqua; color: pink;}
.active{background:plum;}
</style> /*必须要有的属性是*/
1.#b
最低0.47元/天 解锁文章
5234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
