CSS_03_03_ul图片替换

时间：2023-01-24 17:27:55

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

相关文章