2、点击“显示”选项卡;
3、点击“画布”部分;
4、勾选“启用画布面积框”;
5、设置“面积框宽度”和“面积框高度”;
6、点击“确定”按钮,完成设置。
思路:为添加边框样式设置一个class(设为selected),点击li后使用removeClass()方法删除其他li的selected类,并且为当前li添加selected类。
实例演示如下:
1、HTML结构
<style>
ul.test li{display:inline-blockborder:1px solid white} /*默认为白色边框*/
.selected{border:1px solid #ff99cc !important}
</style>
<ul class="test">
<li>Glen</li> <li>Tane</li> <li>John</li> <li>Ralph</li>
</ul>
2、jquery代码
$(function(){
$("li").click(function() {
$(this).siblings('li').removeClass('selected') // 删除其他li的边框样式
$(this).addClass('selected') // 为当前li添加边框样式
})
})
3、效果演示
1、打开编辑测试的软件,设置一个div区域,li标签因为默认的需要换行,所以需要设置一个浮动点,float:left使其靠左浮动对齐;主要代码如下:<style>
.ceshi{
width:100%
height:30px
background-color:#F00
color:#FFF
}
.ceshi ul{ width:820pxmargin:0 auto}
.ceshi ul li{width:180pxheight:30pxfloat:leftlist-style-type:nonetext-align:centerline-height:30pxborder-right:1px solid #FFF}
</style>
<div class="ceshi">
<ul>
<li>li标签右边框</li>
<li>li标签右边框</li>
<li>li标签右边框</li>
<li>li标签右边框</li>
</ul>
</div>
详解:设置一个宽度:100%,高度为30px的区域,再次设置一下背景颜色与字体颜色,使其区分开;
设置一个ul宽度,让其在div区域中居中对齐;
最后也是最关键的li标签设置:宽度180px高度同样30px;靠左浮动float:leftlist-style-type:none去除左侧的点,然后使字体居中对齐center最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)