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

html-css013

问下怎么显示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是控制鼠标放上去图片的边框颜色

希望可以帮到你~~