CSS_03_03_ul图片替换
ul图片替换
第01步:编写css样式:url.css
@charset "utf-8"; /*ul用图片替换*/ ul.u_01{/*图片*/ list-style:circle; } ul.u_02{/*图片*/ list-style-image:url(uimg.jpg); } table.tb_01{/*表格样式*/ border-bottom:#603 double 3px;/*表格底部线,双线条*/ } table.tb_02{/*表格样式*/ border-left:#0F0 solid 2px;/*表格左线,直线条*/ }
第02步:编写html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ul图片替换</title> <link href="url.css" rel="stylesheet" type="text/css" /> </head> <body> <ul> <li>未定义效果</li> <li>未定义效果</li> <li>未定义效果</li> </ul> <br /> <ul class="u_01"> <li>定义效果</li> <li>定义效果</li> <li>定义效果</li> </ul> <br /> <ul class="u_02"> <li>自定义图片效果</li> <li>自定义图片效果</li> <li>自定义图片效果</li> </ul> <br /> 表格下面线条 <table class="tb_01"> <tr> <td>恩恩恩恩</td> </tr> <tr> <td>恩恩恩恩</td> </tr> </table> <br /> 表格左边线条 <table class="tb_02"> <tr> <td>恩恩恩恩</td> </tr> <tr> <td>恩恩恩恩</td> </tr> </table> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。