053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

网页上图片的表现形式详解

时间:2017-08-22

网页的表现出来的是一个真个效果。除了文字,网页最多的就是图片的。在网页上图片是怎么表现的呢?

1.网页图片分成背景图片和内容图片

背景图片一般都是css中定义。形式{ background: url(templatez.jpg); }。而内容图片就是<img class="lazy" data-original="1.gif">.在网页上哪些要设置成内容图片,哪些设置成背景图片。如图

 

网页上图片的表现形式详解
大家一个就明白了。
2.背景图片如何设置呢?
一般有单色图片,渐变背景,单色和渐变合成的三种。单色,和渐变不做说明了,说说最好一个二者的合成。
 
网页上图片的表现形式详解
 
代码如下:
 div {
width: 100px; height: 100px; border: 1px solid #626262;
background: #f5f5f5 url(bg.gif) repeat-x;
}

 

说明,背景background中先写颜色后写渐变背景。

 3.如何设置标题前面的图标?

 

网页上图片的表现形式详解
 
 代码如下:

 <ul>
<li><a class="ico1" href="#">页面</a></li>
<li><a class="ico2" href="#">评论</a></li>
<li><a class="ico3" href="#">外观</a></li>
</ul>

 

 

css代码:

ul { width: 120px; border: 1px solid #e3e3e3; border-bottom: 0; padding-left: 0; margin-left: 0; }
li { list-style: none; }
a { display: block; height: 27px; line-height: 27px; border-top: 1px solid #fff; border-bottom: 1px solid #e3e3e3; padding-left: 26px; text-decoration: none; color: #21759b; font-size: 12px; }
a:hover { color: #d54e21; text-decoration: underline; }
.ico1 { background: #f1f1f1 url(ico.gif) no-repeat 5px 6px; }
.ico2 { background: #f1f1f1 url(ico.gif) no-repeat 5px -24px; }
.ico3 { background: #f1f1f1 url(ico.gif) no-repeat 5px -52px; }

这一句:“background: #f1f1f1 url(ico.gif) no-repeat 5px 6px;”
中文解释:背景:背景颜色 图片链接地址 图片不重复 图片水平方向 图片垂直方向;

 

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP