用CSS给图片打标的方法_经验交流

<!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=gb2312" />
<title>图片打标</title>
<style>
body{padding:0px; margin:20px;}
.pic{background:#000; padding:5px; border:1px solid #4F4F4F; float:left;}
.pic span{width:99px; height:99px; background:url(images/blogo.gif); position:absolute; margin:1px;}
</style>
</head>
<body>
<div class="pic">
  <span></span>
  <img src="attachments/date_200706/74b26c75ae67e5fdabf34d29e20bec31.jpg" />
</div>
</body>
</html>

时间: 2024-10-24 16:32:48

用CSS给图片打标的方法_经验交流的相关文章

用CSS给图片打标的代码_经验交流

<!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-

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

xhtml+css网页制作中常见问题解决方法_经验交流

无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决.解决问题的前提是要知道问题出在什么地方,对于新手来说不一定一看到问题就知道问题出在哪里.比如在IE6中"多了一只猪"的问题,对于一些问题需要更多的经验交流分享吸收后才能更好的成长. 在网络中我想大家都有提过问题,需要别人解答的时候,但往往是你的一个问题却得不到任何人给你的解答,或者说是完全被无视了.对于这个时候的你,是不是在想"难道是因为我这个问题太简单了,他们都不想回答""他们

发现四种在网页中使用CSS样式表的方法_经验交流

如何在网页中插入CSS  前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式.  1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --  

css强制换行 css强制不换行的css方法_经验交流

以前总结过Div的换行和不换行的css写法.但对于表格单元格只知道一个属性nowrap可以使其不换行. 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了. 用CSS实现表格单元格数据自动换行或不换行 1.自动换行: 自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

css 不换行 自动换行 强制换行的实现方法_经验交流

强制不换行 div{ white-space:nowrap; } 自动换行 div{  word-wrap: break-word;  word-break: normal;  } 强制英文单词断行 div{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认  pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 设置强行换行: wor

firefox css自动换行的实现方法_经验交流

IE直接用:word-break:break-all;  /*允许词内换行*/    word-wrap:break-word; /*内容将在边界内换行*/    /*需要注意的默认是:*/    word-wrap:normal /*允许内容顶开指定的窗口边界*/           而firefox却没有很好的实现办法 ,一个折中方案就是使用滚动条,但网上也提出了一种用js来判断换行的办法,这里摘录下(转自网络,特此说明). JavaScript复制代码 <script type="t

使用CSS解决文字环绕图片问题的代码_经验交流

上图是美工为一站点制作的图文并茂的新闻标题列表,采用表格进行布局,右上和下部分分布在两个单元格中,程序实现起来可不太容易:要么分两次查询,一次取4条,一次取5条:要么一次取出9条,再分在两个单元格中显示.能不能通过设置图片的属性,让文字和图片像Word中一样可以四周环绕对齐?这样程序就不用理会图片,只负责一次读取显示就可以了.经测试将图片的float属性设置为left可解决我们的问题,效果如下图: ·新闻标题列表 ·新闻标题列表 ·新闻标题列表 ·新闻标题列表 ·新闻标题列表新闻标题列表 ·新闻