• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网页设计中的阴影图片

    • 2019-10-10 12:54:19
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.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.0737dz.com/news/wzzz/3108.html

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

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

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图