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. [收藏]ASP.NET MVC管道详述

    ASP.NET MVC从诞生到现在已经好几个年头了,这个框架提供一种全新的开发模式,更符合web开发本质.你可以很好的使用以及个性化和扩展这个框架,但这需要你对它有足够的了解.这篇文章主要从整体角度总 ...

  2. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  3. 蓝牙--主机接口控制器(HCI)

    I提供对基带控制器和链路管理器的命令以及访问蓝牙硬件的统一接口,它是我们实现自己的蓝牙设备索要接触的第一个蓝牙协议,起着承上启下的作用. 1.概述 如下图所示,HCI通过对链路管理器.硬件状态注册器. ...

  4. 移动web开发--meta 之 viewport

    常用的 viewport meta 如下: 1 <meta name="viewport" content="width=device-width,initial- ...

  5. 备份mysql

    #!/bin/bash # 要备份的数据库名,多个数据库用空格分开USER=rootPASSWORD=rootdatabases=("shopnc") # 备份文件要保存的目录ba ...

  6. Visual Mingw

    Visual-MinGW 是一个专门为MinGW所设计的IDE.如果,你曾经用过VC++ 6.0这个IDE,你的第一感觉就是,Visual-MinGW和VC++ 6.0非常相似.所以,对于曾经用惯VC ...

  7. 执行动态sql返回参数

    ref: https://support.microsoft.com/en-us/kb/262499 ) ) DECLARE @IntVariable INT ) SET @SQLString = N ...

  8. 算法训练 Hanoi问题

      算法训练 Hanoi问题   时间限制:1.0s   内存限制:512.0MB      问题描述 如果将课本上的Hanoi塔问题稍做修改:仍然是给定N只盘子,3根柱子,但是允许每次最多移动相邻的 ...

  9. asp.net字符串的数学表达式计算结果

    using System; using System.Collections.Generic; using System.Web; using System.CodeDom.Compiler; usi ...

  10. LightOj1388 - Trapezium Drawing（求梯形点的坐标）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1388 题意:已知梯形的点A B的坐标,以及b c d的长度,求C D两点的坐标:默认A ...