精华内容
下载资源
问答
  • css+div 图片排列布局

    千次阅读 2016-10-06 20:58:42
    下面就是我们的上面这段图片显示方式的div布局哦.      头像列表                                                     样式很简洁的就用了div ul...

    我们来看如下图这种css div网页布局吧,分析一下是由一个大层,里面由多个li标签组成了,
     




    下面就是我们的上面这段图片显示方式的div布局哦.
     
    <div id="face">
     <div id="facetitle">
     <span>头像列表</span>
     <input id="faceclose" type="submit" value="" />
     </div>
     <ul id="faceul">
     <li><a href="#"><img src="images/1.bmp"></img></a></li>
     <li><a href="#"><img src="images/11.bmp"></img></a></li>
     <li><a href="#"><img src="images/2.bmp"></img></a></li>
     <li><a href="#"><img src="images/13.bmp"></img></a></li>
     <li><a href="#"><img src="images/19.bmp"></img></a></li>
     <li><a href="#"><img src="images/26.bmp"></img></a></li>
     <li><a href="#"><img src="images/31.bmp"></img></a></li>
     <li><a href="#"><img src="images/43.bmp"></img></a></li>
     <li><a href="#"><img src="images/48.bmp"></img></a></li>
     <li><a href="#"><img src="images/63.bmp"></img></a></li>
     <li><a href="#"><img src="images/68.bmp"></img></a></li>
     <li><a href="#"><img src="images/64.bmp"></img></a></li>
     <li><a href="#"><img src="images/65.bmp"></img></a></li>
     <li><a href="#"><img src="images/66.bmp"></img></a></li>
     <li><a href="#"><img src="images/71.bmp"></img></a></li>
     <li><a href="#"><img src="images/88.bmp"></img></a></li>
     <li><a href="#"><img src="images/93.bmp"></img></a></li>
     <li><a href="#"><img src="images/99.bmp"></img></a></li>
     <li><a href="#"><img src="images/112.bmp"></img></a></li>
     <li><a href="#"><img src="images/114.bmp"></img></a></li>
     
    </ul>
     </div>
     
    样式很简洁的就用了div ul li就完成了如此漂亮又有规则的网页图片布局哦,那我们来看看css是怎么写的吧.
     
    #face{
     width:300px;
     border:1px solid #b4b4b4;
     height:280px;
     margin:0 0 0 50px;
     background:#ffffff;
     }
     #face input{
     background:url(images/faceclose.gif) no-repeat center;
     margin:0 0 0 140px;
     float:left;
     border:none;
     cursor:pointer;
     width:30px;
     height:30px;
     }
     #facetitle{
     font-weight:bold;
     height:30px;
     width:292px;
     margin:3px 0 0 3px;
     background:url(images/faceback.gif) repeat-x top left;
     }
     #facetitle span{
     float:left;
     color:#ffffff;
     display:block;
     height:30px;
     line-height:30px;
     width:100px;
     margin:0 0 0 10px;
     }
     #faceul{
     margin:0 0 0 2px;
     width:290px;
     }
     #faceul li{
     float:left;
     border:1px solid #b4b4b4;
     margin:5px 0 0 4px;
     height:52px;
     width:50px;
     }
     #faceul li a{
     
    display:block;
     height:52px;
     width:50px;
     }
     
    #faceul img{
     margin:5px 0 0 5px;
     border:none;
     height:40px;
     width:40px;
     }
     
    上面我们定义了face然后再给它的子类进行了定义,li,a ,img ul 等

    展开全文
  • css+div图片滚动效果

    千次阅读 2012-03-30 00:32:39
    图片滚动经常在网页里面用到,高手们都是自己来写,我不是高手,所以高手们写了,我就搬来用了,偷偷懒,“常用js效果一:div+css图片上下左右滚动代码”这个也是在网上找的,这个被转载了很多次,测试了下,ie6,7,8...


    图片滚动经常在网页里面用到,高手们都是自己来写,我不是高手,所以高手们写了,我就搬来用了,偷偷懒,“常用js效果一:div+css图片上下左右滚动代码”这个也是在网上找的,这个被转载了很多次,测试了下,ie6,7,8还有火狐都能兼容的。还有demo哦!!需要的可以下载哈。


    这是向上滚动的:

     

    XML/HTML代码
    <style type="text/css"> 
    <!-- 
    #demo { 
        background: #FFF; 
        overflow:hidden; 
        border: 1px dashed #CCC; 
        height: 300px; 
        text-align: center; 
        float: left; 

    #demo img { 
        border: 3px solid #F2F2F2; 
        display: block; 

    --> 
    </style> 
    向上滚动 
    <div id="demo"> 
    <div id="demo1"> 
    <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
    </div> 
    <div id="demo2"></div> 
    </div> 
    <script> 
    <!-- 
    var speed=10; //数字越大速度越慢 
    var tab=document.getElementById("demo"); 
    var tab1=document.getElementById("demo1"); 
    var tab2=document.getElementById("demo2"); 
    tab2.innerHTML=tab1.innerHTML;          //克隆demo1为demo2 
    function Marquee(){ 
    if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 
    tab.scrollTop-=tab1.offsetHeight  //demo跳到最顶端 
    else{ 
    tab.scrollTop++ 


    var MyMar=setInterval(Marquee,speed); 
    tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
    --> 
    </script> 

    演示地址:http://www.phplover.cn/demo/1.html


     

    这是向下滚动的:


    XML/HTML代码
    <style type="text/css"> 
    <!-- 
    #demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    height: 200px; 
    text-align: center; 
    float: left; 

    #demo img { 
    border: 3px solid #F2F2F2; 
    display: block; 

    --> 
    </style> 
    向下滚动 
    <div id="demo"> 
    <div id="demo1"> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    </div> 
    <div id="demo2"></div> 
    </div> 
    <script> 
    <!-- 
    var speed=10; //数字越大速度越慢 
    var tab=document.getElementById("demo"); 
    var tab1=document.getElementById("demo1"); 
    var tab2=document.getElementById("demo2"); 
    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 
    tabtab.scrollTop=tab.scrollHeight 
    function Marquee(){ 
    if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 
    tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 
    else{ 
    tab.scrollTop-- 


    var MyMar=setInterval(Marquee,speed); 
    tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
    --> 
    </script>  

    演示地址:http://www.phplover.cn/demo/3.html

    这是向左滚动的:


    XML/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=gb2312" /> 
    <title>无标题文档</title> 
    </head> 
    <body> 
    <style> 
    .scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 
    .scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;} 
    #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;} 
    </style> 
    <script language="javascript"> 
    function ScrollImgLeft(){ 
    var speed=20 
    var scroll_begin = document.getElementById("scroll_begin"); 
    var scroll_end = document.getElementById("scroll_end"); 
    var scroll_div = document.getElementById("scroll_div"); 
    scroll_end.innerHTML=scroll_begin.innerHTML 
    function Marquee(){ 
        if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
          scroll_div.scrollLeft-=scroll_begin.offsetWidth 
        else 
          scroll_div.scrollLeft++ 

    var MyMar=setInterval(Marquee,speed) 
    scroll_div.οnmοuseοver=function() {clearInterval(MyMar)} 
    scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 

    </script> 
    <h2 align="center">向左滚动</h2> 
    <div style="text-align:center"> 
    <div class="sqBorder"> 
        <!--#####滚动区域#####--> 
        <div id="scroll_div" class="scroll_div"> 
          <div id="scroll_begin"> 
            <ul> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
              <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
            </ul> 
          </div> 
          <div id="scroll_end"></div> 
        </div> 
        <!--#####滚动区域#####--> 
    </div> 
    <script type="text/javascript">ScrollImgLeft();</script> 
    </div> 
    <!--//向左滚动代码结束--> 
    </body></html> 

    演示地址:http://www.phplover.cn/demo/2.html

     

    这是向右滚动的代码:


    XML/HTML代码
    <style type="text/css"> 
    <!-- 
    #demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    width: 500px; 

    #demo img { 
    border: 3px solid #F2F2F2; 

    #indemo { 
    float: left; 
    width: 800%; 

    #demo1 { 
    float: left; 

    #demo2 { 
    float: left; 

    --> 
    </style> 
    向右滚动 
    <div id="demo"> 
    <div id="indemo"> 
    <div id="demo1"> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
    </div> 
    <div id="demo2"></div> 
    </div> 
    </div> 
    <script> 
    <!-- 
    var speed=10; //数字越大速度越慢 
    var tab=document.getElementById("demo"); 
    var tab1=document.getElementById("demo1"); 
    var tab2=document.getElementById("demo2"); 
    tab2.innerHTML=tab1.innerHTML; 
    function Marquee(){ 
    if(tab.scrollLeft<=0) 
    tab.scrollLeft+=tab2.offsetWidth 
    else{ 
    tab.scrollLeft-- 


    var MyMar=setInterval(Marquee,speed); 
    tab.οnmοuseοver=function() {clearInterval(MyMar)}; 
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; 
    --> 
    </script>  

     

    演示地址:http://www.phplover.cn/demo/4.html


     

     


     

    展开全文
  • 处理计划: 方法一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。 img{vertical-align:bottom;}  方法二:定义容器里的字体大小为0。 div { ...

    IE6、IE7下 img与divblock类型元素)下边境有间隔(或许叫缝隙、空隙)。

    IE7才会有这个题目,IE8下是没有的。

    处理计划:

    方法一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。

    img{vertical-align:bottom;} 

    方法二:定义容器里的字体大小为0。

    div {
    width:110px;
    border:1px solid #000000;
    font-size:0
    }

    原因:

    图片文字等inline元素默许是和父级元素的baseline对齐的,而baseline又和父级底边有必定间隔(这个间隔和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。而且不光li,其他的block元素中包括img也会有这个景象。

    展开全文
  • div图片之间有缝隙,display:block

    千次阅读 2012-09-14 16:34:40
    这两天在psd to div+css的过程中,发现IE系的浏览器有一个比较奇怪的问题,上下两个相邻的div之中存在3px的...经过google之后,找到的解决办法是,找到上面的div中的图片代码所在位置,为其设定属性style="display:bloc

    这两天在psd to div+css的过程中,发现IE系的浏览器有一个比较奇怪的问题,上下两个相邻的div之中存在3px的缝隙,具体的描述如下:

    上面的div:里面有一张图片

    下面的div:使用的是背景,纵轴重复

    具体如图所示:

     

    经过google之后,找到的解决办法是,找到上面的div中的图片代码所在位置,为其设定属性style="display:block",问题解决。

     

     

    display:block  意思是:让对象成为块级元素(比如a,span等)。

     

    一般的块级元素诸如段落<p>、标题<h1><h2>...、列表<uL><ol><dl> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........

     

    块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

     

     

    《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

     

    举例:以下这段代码分别为内联元素img与块级元素div,仅展示其差别:

     

    Html代码 复制代码
    1. <img src="a.jpg" style="border-bottom:1px solid #000;" />    
    2. <img src="a.jpg" style="border-bottom:1px solid #000;display:block" />    
    3. <p></p>  
    4. <img src="a.jpg" style="border-bottom:1px solid #000;display:block" />    
    5. <img src="a.jpg" style="border-bottom:1px solid #000;" />   
    [html] view plaincopy
    1. <img src="a.jpg" style="border-bottom:1px solid #000;" />   
    2. <img src="a.jpg" style="border-bottom:1px solid #000;display:block" />   
    3. <p></p>  
    4. <img src="a.jpg" style="border-bottom:1px solid #000;display:block" />   
    5. <img src="a.jpg" style="border-bottom:1px solid #000;" />   

     以下为上述代码的效果:

     

     

    转载网址:http://xiaofeng.javaeye.com/blog/547040

    展开全文
  • CSS3 实现六边形Div图片展示效果

    千次阅读 2014-11-05 23:36:11
    效果图: ... 图片旋转 2.>overflow:hidden; 超出隐藏 3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置   我们要用到3层di
  • div图片旋转,IE支持不好。

    千次阅读 2014-12-16 14:39:16
    目前越来越多的浏览器兼容CSS3标准了,就连IE浏览器老大哥也开始向CSS3低头,微软宣布IE9浏览器支持更多的CSS3属性,IE9更注重HTML5... <div id="example">这是一个CSS旋转属性的演示</div> 返回文章    
  • DIV图片不能紧贴问题

    千次阅读 2006-01-24 22:57:00
    1:定义了多个div,在每个div中间嵌入table以及img,发现两个div总是无法贴紧,之间总是有空隙??2:aaaaaa帖你的代码。是不是没有设置3:cellpadding = 0 cellspacing = 0 是一定会设置的,我发觉嵌入图片就会有空隙,...
  • js+div 图片滚动代码

    千次阅读 2010-04-01 09:56:00
    <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" style="white-space:nowrap;padding:0;"> ...
  • /* 保证图片和输入框绝对居中 */     height :  200px ;    text-align :  center ;  /* 只对input有效,图片无效 */     float :  left ;    padding-bottom :  100px ;  /*重要!给...
  • div背景图片处理

    2019-07-14 10:55:28
    div背景图片处理 ** 一、图片不重复,宽度自适应div宽(图片宽<div宽或图片宽>div宽均适应div宽) background: url("../img/info-bac1.jpg") no-repeat; background-size: 100%; background-attachment: ...
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    div> <img src="1.jpg" alt="haha"> </div> </body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。...
  • 1、图片div的width和height一致(一般不同),手动调整div图片的width和height 2、div的属性设置: background:url("背景图片路径"); background-size:100% 100%; 这下背景图片自动填满div,并能够在改变div...
  • 正常css填充div图片背景 .itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png); } 但是在vue项目中不生效,需要改成如下。 .tip...
  • 图片溢出div,超出div解决办法

    万次阅读 2018-07-07 10:14:50
    当我的图片宽度大小没有设置,过大的时候,它会超出我的div宽度。这个时候,我给它设置了一个小于我的div的宽度,它是可以进入div盒子而不溢出的,然而,当我们的浏览器缩小的时候,我的div是栅格布局,固定了百分比...
  • 设置div背景图片填满div

    千次阅读 2017-02-28 15:45:00
    可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;heigth:100%' 转载于:https://www.cnblogs.com/myzy/p/6479186.html
  • CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV
  • 动态给div添加图片

    2020-03-27 15:41:57
    首先把图片地址赋值给变量: var picpath=“photo.jpg” 通过id获取div: $(“#im”).html(“’ ”+picpath+” ’ align=’center’>"); <div id="im"></div> ...
  • 图片充满整个Div

    2020-01-19 22:31:05
    原来div容器尺寸比较大,而图片尺寸比较小。我们模拟一下这个现象。 真是图片如下(450px 237px): 设置div容器大小为600px 600px。代码如下: <html> <head> <style type="text/css"> #...
  • div添加背景图片

    千次阅读 2016-12-10 20:42:53
    div{background:url(图片路径) no-repeat 4px 5px}
  • js 若 拖动 div中的图片div 框架之外的区域 则该图片就隐藏
  • DIV CSS图片_CSS img

    2017-09-11 18:18:04
    DIV CSS图片_CSS img css图片_DIV CSS图片_CSS img 这里为大家介绍的是DIV CSS对img图片控制(css img图片大小)。 我们常常会遇到以下情况: 1、img图片多了边框,特别是链接后的图片带边框 2、...
  • div里面添加图片

    千次阅读 2018-11-05 15:47:01
    div style="height:120px;;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url({{ApiUrl}}{{visitDetail.PICTURE}})"&gt;&lt;/div&gt;
  • 2、无论图片多大多小,都可以充满div 给定一个div,宽高都是给定的像素 img的宽高都是100%,就可以了 <div class="row" style="width:300px;height:300px;"> <img src="1.jpg" style="width:100%;...
  • div背景图片自适应

    千次阅读 2015-03-11 16:22:42
    在为文莱的一个天气预报网站做页面,突然遇到一个问题,就是需要div的背景图片自适应屏幕大小,网上找了好久,chrome都无效,最后找到了一个,说要这么写 .product_wx { background:url('../images2/bgd_1.jpg')...
  • // 将图片的一部分作为div的背景图片,首先div的宽高要设置,然后设置background // 设置到合适的div宽高然后修改no-repeat后面的两个数字进行偏移设置 &lt;div style="background: url('***') no-repeat ...
  • div中使用背景图片

    千次阅读 2017-10-25 20:40:40
    div中使用背景图片,并可以随意缩放图片
  • 图片自适应div的大小

    万次阅读 2019-05-16 09:37:14
    图片自适应div的大小。(刚出道的初级菜鸟,如果有大神,请指点指点) 一. 设置div大小和图片的大小同样相等 <div style="width:100px;height:100px;"> <img src="a.jpg" style="width:100px;height:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,834
精华内容 14,733
关键字:

div图片