html中li标签中这条边线怎么添加的

html-css021

html中li标签中这条边线怎么添加的,第1张

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为分隔线的颜色;

两个方法:1、写css 2、用图片

1、用border写,你可以写在导航的li或者a标签上

li {

border:1px solid #fff /* 1像素 直线 白色 */

}

2、图片的话 也是可以写在li 或者 a上

li {

background:url(...) left center no-repeat/* 图片的路径 背景图片靠左 背景图片垂直居中 图片不重复 */

}

这个可以使用css来控制边框根据不同的需求,您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框: TABLE { 5px solid black} 除此以外,您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型: l none: 指定表格没有边框,所以边框宽度为0。l dotted: 由点线组成的表格边框。l dashed: 由虚线组成的表格边框。l solid: 由实线组成的表格边框。l Double: 由双实线组成的表格边框。l Groove: 槽线效果边框。l ridge: 脊线效果边框,和槽线效果相反。l inset: 内凹效果边框。l outset: 外凸效果边框,和内凹效果相反。每个边框类型都可以指定一种颜色,边框是绘制在背景颜色上的,列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。 <html><head><title>HTML Table</title></head><style type="text/css">TABLE { background: blueborder-collapse: separateborder-spacing: 10ptborder: 5px solid red}TD, TH { background: whiteborder: inset 5pthorizontal-align: right}CAPTION { border: ridge 5pt blue}</style><body><table summary="TechRepublic.com - Tables and CSS"><caption>First Quarter Sales</caption><thead><tr><thabbr="salesperson" scope="col">Person</th><thabbr="sales" scope="col">Sales</th></tr></thead><tbody><tr><td>Mr. Smith</td><td>600.00</td></tr><tr><td>Mr. Jones</td><td>0000.00</td></tr><tr><td>Ms. Williams</td><td>0000.00</td></tr></tbody><tfoot><tr><td colspan="2">Let's sale, sale, sale!</td></tr></tfoot></table></body></html>