问下怎么显示ul列表边框?

html-css020

问下怎么显示ul列表边框?,第1张

边框在css里用border的属性表示,边框有4个上下左右,也可以单独用border-top,border-right,border-bottom,border-left单独表示4个边框及border-top-width,border-top-style,border-top-color来表示宽度,样式以及颜色。

例如:#divcss5{border:1px solid #00F} //设置了divcss5对象盒子1px像素蓝色实线边框

1)、边框颜色:border-color:#000

2)、边框厚度(宽度):border-width:1px

3)、边框样式:border-style:solid

上边框的设置:border-top:1px solid #00F

1)、上边框颜色:border-top-color:#000

2)、上边框厚度(宽度):border-top-width:1px

3)、上边框样式:border-top-style:solid

只要消除<ul>元素的内边距的上边距即可,例如

ul{ padding:0 20px} /*设置ul元素上下内边距为0,左右内边距20px*/

示例如下:

创建Html元素

<ul>

<li>itemlist 1</li>

<li>itemlist 2</li>

<li>itemlist 3</li>

</ul

设置css样式

ul{width:100pxpadding:0 20pxborder:4px solid #bebceb

观察显示效果

<ul>

<li><img src="img.jpg" />这里显示的是文字</li>

</ul>

<style>

ul li img{ border:1px solid #ccc padding:3px}

ul li img:hover{ border:1px solid #f60}

</style>

控制li里面的图片就是li img 这样写

img:hover是控制鼠标放上去图片的边框颜色

希望可以帮到你~~