zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    网络七层模型
    datagaridview添加序号
    sqlserver查询数据库所有字段和表的关系
    Code Project精彩系列转
    操作不同线程中的控件
    PetaPoco数据读写并发时出错
    浮点型float数据强制转换成int整型
    PetaPoco微型ORM的使用错误记录
    EF出现基础提供程序在 Open 上失败
    Python中random模块
  • 原文地址:https://www.cnblogs.com/zjsy/p/4376618.html
Copyright © 2011-2022 走看看