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>

CSS_03_03_ul图片替换的更多相关文章

  1. CSS样式，雪碧，图片替换，渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  2. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  3. POI Word 模板 文字 图片 替换

    实验环境:POI3.7+Word2007 Word模板: 替换后效果: 代码: 1.入口文件 public class Test { public static void main(String[] ...

  4. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  5. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  6. css图片替换方法

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...

  7. Android开机图片替换

    Android开机图片替换 Android从启动到进入Launcher一共会展示三张图片,如果只是更换静态图则更换这三张图片即可,要想换成动画那就要另外操作. 首先查找这个文件:    /bootab ...

  8. Java Word中的文本、图片替换功能

    Word中的替换功能以查找指定文本然后替换为新的文本,可单个替换或全部替换.以下将要介绍的内容,除常见的以文本替换文本外,还将介绍使用不同对象进行替换的方法,具体可包括: 1. 指定字符串内容替换文本 ...

  9. css图片替换文字

    含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用& ...

随机推荐

  1. Qt数据库操作（qt-win-commercial-src-4.3.1，VC6，Oracle，SQL Server）

    qt-win-commercial-src-4.3.1.qt-x11-commercial-src-4.3.1Microsoft Visual C++ 6.0.KDevelop 3.5.0Window ...

  2. sphinx续5-主索引增量索引和实时索引

    原文件地址:http://blog.itpub.net/29806344/viewspace-1400942/ 在数据库数据非常庞大的时候,而且实时有新的数据插入,如果我们不更新索引,新的数据就sea ...

  3. php--mongodb的安装

    1.mongodb 安装 2.mongodb 扩展 http://pecl.php.net/package/mongo/1.6.14/windows

  4. Cocos2d-JS引入资源

    以图片为例: 创建项目后,把图片放入res文件夹,修改 app.js var HelloWorldLayer = cc.Layer.extend({ sprite:null, ctor:functio ...

  5. linux spi 设备节点 读写

    本文记录spi设备节点的操作方法. SPI总线设备文件名通常为/dev/spidevN.P(N=0.1.2--,P=0.1.2--), 其中N表示第几路SPI总线,而P表示在该路SPI总线中使用哪个C ...

  6. imx6 启动 init进程

    之前不知道imx6内核是怎么启动文件系统的init进程,查了下资料,记录于此,以后再来补充. kernel/init/main.c static noinline int init_post(void ...

  7. struts配置测试中遇到报错信息，记录下

    tomcat7 jdk7myeclipse2014 部署完成后,访问页面报错struts.xml文件内容: <?xml version="1.0" encoding=&quo ...

  8. Fluentd 例子

    0. 安装.启动 安装 curl -L https://toolbelt.treasuredata.com/sh/install-redhat-td-agent2.sh | sh 更新:最近貌似会安装 ...

  9. Java基础之线程——管理线程同步代码块（BankOperation4）

    控制台程序. 除了同步类对象的方法之外,还可以把程序中的语句或代码块制定为synchronized,这种方式更强大,因为可以指定哪个对象从语句或代码块的同步中获益,而不像同步方法那样仅仅是包含代码的对 ...

  10. linux：磁盘的分割、检验、格式化与挂载

    新增一颗磁碟: 1.对磁碟进行分割,以建立可用的partition 2.对该分割槽partition进行格式化(format),以建立系统可用的filesystem 3.若要仔细点,可对刚刚建立的fi ...