怎么用CSS+DIV在图片上布局文字？
用一个div作为主框架，嵌套图片和文字内容两个div，同时使用浮动功能，代码步骤如下：
1.先输入：，建立一个主框架，如下图红框所示；
2.设置框架的样式，根据需要设置即可，如下图红框所示，代码如下：
.header{
width: 960px; /*这个div根据你写的替换就行了*/
height: 40px;
margin: 5px auto;
background-color: white; /*没用你去掉就行*/
}
3.然后嵌套图片：，如下图红框所示；
4.设置图片的样式和位置，根据需求设置即可，如下图红框所示，示例代码如下：
.header img{
height: 40px;
float: left;
}
5.然后写一个文字内容的div，如下图红框所示，代码如下：设为主页；
6.设置文字的位置和样式等，示例代码如下：
.header p{
display: block;
width: auto;
line-height: 14px;
background: url("sethome.png") no-repeat left center; /*你的图标路径*/
padding-left: 20px;
}
.header p a{
text-align: left;
text-decoration: underline;
color: red;
font-size: 12px;
}
7.对结果进行预览，如下图所示，图片在左，文字在右。
HTML图片和文字是并列显示的。如下：
1. 将文字浮在图片上我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。
我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。
display: inline-block;与定位无关，只是使整个.img-group长宽与图片适应。
2. 文字与背景处理文字左对齐，我们把文字居中。给.img-tip添加如下代码：
文字不清楚，我们加上背景和字体颜色，并适当的设置一下透明。给.img-tip添加如下代码：
3. 鼠标悬浮特效现在静态效果已经完成了，接下来，加一下鼠标悬浮出现文本的效果，现在.img-tip添加如下代码，让文本默认隐藏：
再加上鼠标悬停在图片上，显示文本的代码：
代码总汇HTML
我是雪豹
CSS
.img-group { position: relative; display: inline-block;} .img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;} .img-group:hover .img-tip { display: block; width: 100%; text-align: center;}
margin-right:auto;">所要放的文字</div></div>
你可以在CSS里面把图片作为背景,然后再你所需要写文字的地方套用这个CSS样式,而光看这个文字的代码是看不出有图片的存在的,我打个简单的比方我在前面定义一个CCS样式#div { height:44px;background:url(images/bg.jpg) no-repeat; } 这个样式我可以另存为一个css.css文件我再作另一个页面,把css.css调用里面去<link href="style.css" rel="stylesheet" type="text/css" /><div id="div">
<ul id="div" class="center">这是文字显示部分
</ul>
</div>那我现在这个文字显示部分下面的背景肯定有bg.jpg这个图片明白吗?不明白继续可以问我!
如何用DIV+CSS控制图片大小范围?
但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。解决IE6支持max-height div css解决IE6支持max-width 一般情况下只需要设置好宽度限制，比如这里只...
怎样用CSS设计实现div相对另外一个div进行定位
设置当鼠标移动到div2上时子div3优先显示，z-index:2。代码如下：<style> .div2{width:100px;height:30px;} .div3{position:absolute;z-index:1;float:left;margin-left:100px;background:#fff} .div2:hover>.div3{z-index:2;} <\/style> <ul><!--div1，在这里没毛用--> <li class...
怎样用css只让div中的图片居中?
1、打开在线写前端代码的网站如jsrun或者jsfiddle。目2、标是做一个如图所示的效果，不同大小的图片。3、每个方框的html 如下，<div> <span> <img src='图片地址'> <\/img> <\/span> <\/div> 4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的...
div+css的使用
<link href="css.css" rel="stylesheet" type="text\/css" \/> <\/head> <body> <div class="abc"> <\/div> <\/body> <\/html> 上面就可以浏览看出页面有一个500X300的红色块了 class="abc"现在说明一下.和#号了 用.abc就用class="abc"用#abc就用id="abc"他们区别就是级别不一样，#号...
div详细用法,举例说明
<!DOCTYPE html> <html> <head> <meta charset="gb2312" \/> <title>div的用法在线演示www.divcss5.com<\/title> <style> div{ margin-top:10px}\/* css注释说明：对div都设置上间距10px *\/ .divcss5-1{font-size:16px}\/* 设置css字体大小16px *\/ .divcss5-2{color:#F00}\/* 设置...
css如何使div背景图片填充
css使div背景图片填充的具体操作步骤如下：1、我们首先打开前端开发工具，新建一个html代码页面。2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。4...
如何用DIV+CSS布局例子
举例（两列布局）：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>练习使用HTML<\/title> <link rel="stylesheet" href="css\/index.css" \/> <\/head> <body> <!-- DIV --> <div id="d1"> <span>DIV<\/span> <\/div> <div id="...
用div标签布局网页时一定要与什么一起使用?
margin 和 padding 属性：通过设置 margin 和 padding 属性，可以控制 <div> 元素的外边距和内边距。background 属性：通过设置 background 属性，可以为 <div> 元素设置背景颜色、图片或渐变效果。border 属性：通过设置 border 属性，可以为 <div> 元素设置边框样式、宽度和颜色。CSS布局技巧：如使用 ...
div+css是什么
DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等...
如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?
用CSS限定网页宽度，又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域，就是body，我们就是通过给body来设置一个宽度，来做限制，至于DIV的居中，首先是需要给这个div一个宽度和高度，然后在使用margin去做，margin的用法，如图：具体的实现看代码:<html> <head> body{ width:960px; ...
矣牧益视： div是将网页区块化处理,css是给对应的div应用对应的样式,你所说的图片上进行文字处理,有两种办法,:1将图片变成该区块的背景图,<div style=＂background:url(images/index8_29.gif) repeat-y;＂>然后在这个区块中你就可以自己定义文字了,比如<div style=＂fontsize:12px;colour:#000000;margin-left:auto; margin-right:auto;＂>所要放的文字</div></div>
新会区15350749953： 用div编写网页怎么在图片上面写字 - ？
矣牧益视： 我给你举三个CSS的例子一、图片 1、你可以用background来实现,也就是添加为层的背景. .middle{background:url(../images/head-bg.gif);} 2、也可在层里直接添加图片进去, <div class=＂middle＂><img src=＂images/middle.gif＂ width=＂...
新会区15350749953： div+css 文字图片布局 - ？
矣牧益视： 你好,只要设置左侧图片左浮动就可以了,右侧p标签设置overflow:hidden; 大概代码: img{ float:left;margin-right:10px; } p{ overflow:hidden; }
新会区15350749953： div+css中图片文字如何排版 - ？
矣牧益视： div 是一个块,css是为这个块给出样式; 你所谓的如何排版,就是怎样使用吗? <div style=＂color:#fff;＂> 显示内容 </div> style属性就是的css样式的内容.
新会区15350749953： div+css中图片文字如何排版 ？
矣牧益视： div和css本来就是用来布局网页的呀!css通过控制div元素的属性布局.来排版 div+css书写基础教程:新手学习基本思路: 对于新手,感觉乱是正常的,div+css最重要的...
新会区15350749953： div+css中的图片上怎么写文字? - ？
矣牧益视： 把图片设置成为背景图片
新会区15350749953： 在网页里面怎么用div+css让图片和文字在一行呢?比如说:首先 ？
矣牧益视： 这个不很简单么, html写法:图片 图片css写法: .div ul { width:**px; } .div ul li { float:left; } /**float:left是浮动,让两个li都浮起来**/
新会区15350749953： 如何实现div+css实现图片与文字水平对齐? - ？
矣牧益视： 实现div+css实现图片与文字水平对齐,首先需要的是用3个div布局,一个div包裹着其他的2个,给每个div设置好一定的宽度和高度,然后在对包裹的2个div使用float这个属性,float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使...
新会区15350749953： 怎样在网页设计中,在图片上添加文字 - ？
矣牧益视： 把图片定义为背景或者写入CSS样式表中,然后就可以在上面布局文字了.
新会区15350749953： 怎样用div+css让图片和文字在一行里面 - ？
矣牧益视： <div style=＂ background-image:url(您的图片位置)＂> <div>这里添加logo (用css控制就可以了)</div> <div>这里可以添加文字了!如果需要的话可以吧文字放在一个容器里,并用css控制它的位置.</div></div> 这个我调试过了 在所有浏览器上都没有问题的!
