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>
时间: 2024-12-08 18:38:14

CSS_03_03_ul图片替换的相关文章

图片替换技术、雪碧图技术、图片透明技术、常用的电商布局方式

###雪碧图技术### !DOCTYPE html>     <html lang="en">     <head>     <meta charset="UTF-8">     <title>sprite雪碧图技术</title>         <style type="text/css">             div{                 widt

导航链接添加背景图片替换样式

HTMl代码: <div class="welcome_button"> <ul> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> </div> CSS样式: <style type="text/cs

图片替换文字

提要:为什么要使用图片替换文字 文字的表现力差,但是便于网页获取信息,这里说的图片替换文字,是指文字还是存在于dom树中,但是显示的时候用图片来显示. 会遇到得问题: css on/images off 我的理解:当图片没有加载到,页面会什么都不显示 替换方法: 1.原始的方法:使用span元素,设置display为none 代码: <h3 id="header1"> <span>image replacement</span> </h3>

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

由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和行内元素都可以. 方法二: line-height:(只针对行内元素可行) 将行高设置成和父元素的高度相等,就可以实现行内元素的垂直居中了. 由于行内元素的对其方式是基线对齐,所以当图片和文字位于一列时,呈现出来的效果往往不是我们想要看到的样子, 我们要想将里面的元素都实现垂直居中,就应该分别对每个

无序列表前小黑点图片替换方法

无须列表前小黑点图片替换方法: 直接上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>无序列表小黑点图片替换</title> &l

一个iOS图片选择器的DEMO(实现图片添加,宫格排列,图片长按删除,以及图片替换等功能)

在开发中,经常用到选择多张图片进行上传或作其他处理等等,以下DEMO满足了此功能中的大部分功能,可直接使用到项目中. 主要功能如下: 1,图片九宫格排列(可自动设置) 2,图片长按抖动(仿苹果软件删除时,图标抖动效果),可进入删除状态,再次单击进入普通状态 3,图片设置最大上限,加号按钮自动隐藏 4,已选图片可单击进行重新选择 5,无需代理,直接调用对应属性就可获取所有图片,并与显示顺序保持一致 效果图如下: 1 // 2 // SZAddImage.h 3 // addImage 4 // 5

CSS——图片替换方法比较

图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner图片替换法(FIR) 源码: Html: <h1 id="fir"><span>Fahrner Image Replacement</span></h1> CSS: #fir { width: 287px; height: 29px; bac

Android webView 加载网页时,使用本地图片替换网页内的图片

============问题描述============ RT,本质目的是阻止网页图片加载,将图片放在本地,然后在app中替换,以加快反应速度. 以前提过这个问题,没能解决,因为3.0以上才提供了替换网页资源的接口(WebResourceResponse),3.0以下没有专门的接口,想过使用get将网页取下来存为String然后替换,却发现不是所有的网页都能使用get取到(很多页面都报异常,包括百度中的某些链接),研究过一段时间,认为不能实现,放弃了. 今天突然发现一款游戏,叫巴哈姆特之怒,惊讶

文本替换(图片替换文本)

<h1>文本替换</h1> <h2 class="h2">标题2 <span></span></h2> .h2{position: relative;width: 250px;height: 76px;overflow: hidden;} .h2 span{position: absolute;top: 0;left: 0;width: 250px;height: 76px;background:url("