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. Delphi XE5 Android 程序退出功能

    Uses FMX.Platform.Android; ... begin {退出程序} MainActivity.finish; end;

  2. php获得文件夹下所有文件的递归算法

    function my_scandir($dir){ $files=array(); if(is_dir($dir)) { if($handle=opendir($dir)) { while(($fi ...

  3. JSON格式解析和libjson使用简介(关于cjson的使用示例)

    JSON格式解析和libjson使用简介 在阅读本文之前,请先阅读下<Rss Reader实例开发之系统设计>一文. Rss Reader实例开发中,进行网络数据交换时主要使用到了两种数据 ...

  4. windows7 密码保护 共享文件

    windows7 密码保护 共享文件 2台windows7之间设置文件共享,本想使用ftp,但是配置指定用户连接,配置权限比较繁琐. 所以就想到使用window7的文件共享,并设置密码,共享整个硬盘的 ...

  5. 将option添加到select框

    var select=document.createElement("select"); select.setAttribute("class","f ...

  6. iOS苹果开发者客服电话地址

    苹果开发者客服电话地址:https://developer.apple.com/contact/phone.php 中国大陆地区客服电话:4006 701 855 中国香港地区客服电话:(852) 2 ...

  7. css3背景色渐变

    <style> .test { width: 200px; height: 200px; background: -moz-linear-gradient(top, #8fa1ff, #3 ...

  8. opencv的高斯混合模型

    http://blog.jasonding.top/2015/04/05/Machine%20Learning/%E3%80%90%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%8 ...

  9. marathon参考(11):ports端口设置(转）

    Ports marathon中应用的端口配置可能被混淆,并有一个悬而未决的问题,需要重新设计 ports API.这个页面试图更清楚地解释它们是如何工作的. 定义 containerPort:在容器内 ...

  10. Android RecycleView + CardView 控件简析

    今天使用了V7包加入的RecycleView 和 CardView,写篇简析. 先上效果图: 原理图: 这是RecycleView的工作原理: 1.LayoutManager用来处理RecycleVi ...