×

borderbottom bottom border

border-bottom的示例?php或者JS或者CSS怎么删除ul中最后一个li的border-bottom

admin admin 发表于2022-06-21 01:52:07 浏览132 评论0

抢沙发发表评论

border-bottom的示例


以下示例使用 border-bottom 属性来指定复合属性。通过调用内嵌(全局)样式表,在 onmouseover 事件发生时更改右边框的属性:
《head》
《style》
td { border-bottom: 0.3cm cyan dashed; }
.change { border-bottom: 0.1cm yellow solid; }
《/style》
《/head》
《body》
《table》
《tr》
《td onmouseover=this.className=’change’
onmouseout=this.className=’’》
《img src=sphere.jpg》《/td》
《/tr》
《/table》


php或者JS或者CSS怎么删除ul中最后一个li的border-bottom


php是后台语言,一般不用作前台样式的chuli,javascript或者CSS删除ul中最后一个li的border-bottom样式的方法如下:

  • javascript:obj.style.borderBottom = “none“;

  • jquery:$(“ul#test li:last-child“).css(“border-bottom“,“none“);

  • css:ul#test li:last-child{border-bottom: none;}

jquery和css的方法比较简洁,下面实例演示javascript设置方法:

1、HTML结构

《ul id=“test“》
《li》Glen《/li》
《li》Tane《/li》
《li》John《/li》
《li》Ralph《/li》
《/ul》

2、javascript代码

window.onload = function(){
var li = document.getElementById(“test“).getElementsByTagName(“li“);
li[li.length-1].style.borderBottom = “none“;
}

3、效果演示


css中BORDER-BOTTOM是下划线,怎么实现垂直居中的线


代码如下:

《!doctype html》

《html》

《head》

《meta charset=“utf-8“》

《title》无标题文档《/title》

《style》

.my-para{

height:30px;

line-height:30px;

width:400px;

display:flex;

text-align:center;

}

.my-para span{

height:1px;

width:200px;

border-bottom:1px solid #333;

margin:auto;

display:inline-block;

}

《/style》

《/head》

《body》

《p class=“my-para“》新闻标题文字《span》《/span》2017.12.12《/p》

《/body》

《/html》

如图所示:

解释:垂直居中的直线可以设置为《span》《/span》,span标签的父元素p标签的css属性设置为:display:flex;text-align:center;  设置span为块级元素,给它宽、高、下边框。  span标签的属性设置为:margin:auto;  这样就可以使span的下边框垂直居中与父级元素p-bottom