<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的阴影图片

          • 2019-10-10 12:54:19
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网页设计中中插入图片是再平常不过的事情了,有时为了美观的需要,可以给图片加上阴影,让图片有一种特殊的效果,CSS可以为图片加上阴影吗?答案是肯定的,在本例中将给读者介绍在制作网页时为图片加阴影的方法。

          【操作步骤】

          第1步,启动Dreamweaver,新建文档,保存为index.html。

          第2步,构建网页基本结构。页面的结构很简单,只有两个<div>标签,在每个<div>标签中都包含了一个<div>标签和一个<img>标签,分别定义了一左一右两幅图片。

          <div class="pic">

          <div class="left">

          <img src="images/2.jpg" border=0 alt="pic" />

          </div></div><div class="pic">

          <div class="right">

          <img src="images/1.jpg" border=0 alt="pic" />

          </div></div>

          此时的页面极其简单,只有两张图片,没有任何样式的设置。

          第3步,定义图片的阴影。其实给图片加阴影的原理很简单,就是运用两个<div>块的相对位置偏移而实现,阴影的宽度和颜色深浅由用户决定,也就是CSS中的相对定位属性position:relative;。

          .pic {    position: relative;    

          background: #CCC;    

          margin: 10px;    

          margin-right: 50px;    

          float: left;}

          .pic div {    position: relative;    

          border: 1px solid #333;    

          background: #FFF;    

          padding: 3px;}.right {    top: -6px;        /*阴影在右边时*/    

          left: -6px;}

          .left {    

          top: -6px;       /*阴影在左边时*/    

          right: -6px;

          给外层的<div>定义一个类样式为pic,设置其position属性为relative,也就是相对定位。设置它的背景色为#CCC,设置四周补白10px,并使两图之间距离为50px。最后,定义其为左浮动。

          对内层<div>进行设置:首先仍然是设置其position属性为relative,这也是本例最关键的一步,之后设置内层div的背景色为#FFF,并设置边框样式和内边距padding。left和right类样式分别定义了左侧图片的内侧<div>的偏移量和右侧图片的内侧<div>的偏移量,这句话可能有些饶舌,请读者仔细理解,也就是说我们在网页设计时必须让内侧的<div>进行位移,而左侧图片的位移方向与右侧图片是不同的,所以分别用left和right来进行设置。

          当前文章标题:网页设计中的阴影图片

          当前URL:http://www.1c4w.com/news/wzzz/3108.html

          上一篇:网页设计中的设计多图水平排列

          下一篇:如何在网页设计中设计圆角图片

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图