CSS_03_03_ul图片替换

最新推荐文章于 2024-08-09 06:13:01 发布

weixin_30483013

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量99

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/zjsy/p/4376618.html

版权

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>

转载于:https://www.cnblogs.com/zjsy/p/4376618.html

weixin_30483013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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{/*表...
复制链接

扫一扫