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