<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>