• 运营托管
  • 装修设计
  • 摄影拍照
  • 客服外包
  • 全 部 栏 目

    装修设计 运营托管 摄影拍照 营销推广 客服外包 商城入驻 短视频推广 设计素材 电商百科

    来论坛不久,写点我对图片代码的一点认识与大家交流,望大家不吝赐教,多多扔砖。

    由于我写代码标签使用<>尖括号发现论坛会解析出错,所以我用了《》书名号代替,实际复制代码去使用请在文档软件中将《》书名号查找替换为<>尖括号。

    1、body标签中的背景图片代码

    写在《body》《/body》之内或之间,设置自定义区整体的背景。如: (1)《body style="background-image:url(slt.jpg)"》《/body》 (2)《body》《img src="slt.jpg" width="590px" height="350px"/》《/body》 第一种方式写在标签内,在url()括号内加入图片地址,代码简单,但没有可控制背景图大小的代码,你必须事先制作好相应尺寸的图片。以扶植版右侧自定义区(宽750px 高度不限,根据总的布局高度确定)为例:如果图片宽度小于自定义区的750px,高度小于总体布局,则图片产生重复效果。如宽高大于750px及总体布局,则图片被剪切不全。此代码不会影响图片自身比例。

    下图为自定义区宽750px 总布局高500px,  背景图宽590px 高350px,图片重复。

    下图为自定义区宽750px 总布局高500px, 背景图宽1011px 高600px,图片右侧及下方剪切不全。

    第二种方式写在标签之间,在body标签之间加入图片代码标签,然后在src=""引号内加入图片地址,width值控制背景图宽度,height值控制背景图高度。图片尺寸比例可控。以扶植版右侧自定义区为例:图片尺寸小于自定义区则区域内产生留白,大于自定义区则宽度上剪切不全,高度上自动依据图片完全显示。

    下图为自定义区宽750px 总布局高500px, 背景图宽590px 高350px,图片右侧及下方留白。

    下图为自定义区宽750px 高自动依据图片, 背景图宽1011px 高600px,图片右侧剪切不全下方完全显示。 2、div标签中的背景图片代码 定在《div》《/div》之内或之间,设置特定div层的背景。(在淘宝网上我都采用绝对定位或相对定位的div,没有定位属性的div我在使用时无法正常显示)如: (1)《div style="position:absolute;top:0;left:0;width:750px;height:350px;background-image:url(slt.jpg)"》《/div》 (2)《div style="position:absolute;top:0;left:0;width:750px;height:350px;》《img src="slt.jpg"width="750px"height="350px"》《/div》 第一种方式中position(定位):absolute(绝对)、top(距顶部距离) left(距左侧距离)、width(div层的宽) height(div层的高)。url()括号中加入图片地址。这里有了可控制div层位置及大小的代码,可以设置背景图在自定义区的位置,但仍然不可控制背景图大小。图片大于div则剪切不全,小于div则重复。 下图为div宽450px 高450px,背景图为宽590px 高350px,可以看到背景宽超出div宽,产生剪切;背景高小于div高,产生重复。 第二种方式写在标签之间,src=""引号中加入图片地址,width=""引号中的值设置背景图宽度,height=""引号中的值设置背景图高度。因为前面有div的定位属性,也可以控制背景图的位置,同时后面有了控制背景图尺寸的代码,可以任意控制图片尺寸比例。图片尺寸小于div尺寸则留白,大于则将div撑大,整个div按照图片尺寸显示。

    下图为div宽450px 高450px,背景图为宽590px 高350px,可以看到背景宽超出div宽,撑大了div;背景高小于div高,产生留白。

    3、img标签是纯粹的图片代码标签即:《img src="slt.jpg"width="750px"height="350px"》 图片地址直接加入到src=""的引号内,width=""和height=""直接控制图片宽高,但它不带有定位代码,单独使用只能按照默认排列方式排在上一个标签(标签可以是任何标签,包括与之一样的图片标签)之下。要想给它定位需要把代码加入到div标签或table标签内,建议加入div标签内,控制起来灵活方便。此外可加入的还有轮播代码内,实现一个位置多图轮播,以及加入走码灯代码中实现多图横排或竖排依次左右或上下游动。这个标签单独使用所设宽度小于自定义区宽度,可完全显示并右侧留白;超出自定义区宽度,则超出部分被剪切。高度上因为自定义区不限高,所以不管多高都完全显示。
    上一篇:淘宝做了半年,快两颗钻石,靠的只是自己!从无到有,一步步来
    下一篇:淘宝再重拳度出击

    © 2016-2020 巨人电商

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信