header_v0.7.32

电商HTML代码救急

1年前发布

原创文章 / 多领域 / 观点
earB 原创,如需商业用途或转载请与earB联系,谢谢配合。

这是自我梳理,也是帮助电商小伙伴 脸不红心不跳地调好代码,深藏功与名。
当然,这是极度不规范的临场救急贴,对于HTML+CSS,我还未入门。

WARNING

专业人士请在代码菜鸟陪同下观看!



  首先,我们了解一下什么是HTML?

  HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)

• HTML 不是一种编程语言,而是一种标记语言 (markup language)

• 标记语言是一套标记标签 (markup tag)

• HTML 使用标记标签来描述网页


说到这里我必须提一下什么是XHTML ,XHTML 是更严格更纯净的 HTML 代码。

而最新一代的,仍处于完善之中的称为HTML5。

说好的简单暴力呢!


好吧!前戏结束,直接开搞!




--------------------------------------------------------------------------------------



1.元素基本都是成对出现, 以开放标签(opening tag)开始,闭合标签(closing tag)结束


HTML 文档实例:

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>


<body>

The content of the document......

</body>


</html>


当然也有例外:<br> 就是没有关闭标签的空元素(<br> 标签定义换行)直接写为<br /> 


基本上电商小伙伴们只需要掐头去尾,关注<body>到</body>之间的代码。




--------------------------------------------------------------------------------------



2 常用标签


HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

实例

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>


HTML 段落是通过 <p> 标签进行定义的。

实例

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>


HTML 链接是通过 <a> 标签进行定义的。

实例

<a href="http://www.w3school.com.cn">This is a link</a>

  href 属性规定 链接 的目标(要会看链接!链接!链接!)


HTML 图像是通过 <img> 标签进行定义的。

实例

<img src="w3school.jpg" width="104" height="142" />


<hr /> <li> <span> <b> <span>等标签请自行扩展学习,然并卵!




--------------------------------------------------------------------------------------




3 需要重点说明的Table标签

如图所示,这就是在DW里面的代码。


一般包括 注释代码 在内的两端头尾都会删除(对!电商就是这样简单 暴力)



现在来看一下代码:

width="1536"  页面宽度是1536 (修改代码的时候,注意双引号的存在!)

height="4688"  页面总高度是4688




--------------------------------------------------------------------------------------



拓展一下:


添加align="center"以后,表示table表格是居中显示效果。

(1920宽度全屏海报怎么设置请询问你家前端大神)



添加background="#",表示table表格有了个背景图片,如图所示,我猥琐的添加了一张nipic昵图网的图片。

(了解了这一点,我想你就快会切旺旺客服栏) 

另外bgcolor="#000000" 表示table表格填充了黑色背景。



现在来点黑货:

当我们做套一款宝贝详情页时,由于宝贝颜色、图片数量的影响,详情页长度是不一样的,那么就需要移动图层,调整画板长度,好复杂啊!


今天需求排太满了,(比如说一款详情页宝贝有16个颜色,别问我运营大人为什么不拆款,我怎么知道!我只是个美工!)本美工不乐意移动那些复杂的图层。

所以我直接把详情页中间空白区域作为一个切片切出来,然后删除掉这段代码。(从<tr> 删到</tr>哦)然后还有一件事情要做:删除总的高度 或 把总的height="4688"改成height="auto"(我们删了一张空白切片,table总高度当然变小了所以要修改)




--------------------------------------------------------------------------------------



4.苦口婆心的延伸


正统前端教程请去 http://www.w3school.com.cn/html/ 这样的网站学习,其他资源请自行搜索 或者咨询你家前端。


另外粗略说一下切旺旺:把各位做好的旺旺客服栏底图设置成table表格的background,然后百度搜索:旺旺代码生成,把代码或者生成的旺旺复制到table表格,然后爱加几个旺旺加几个,完事!


然后会删除空白切片,那么详情页代码分段,也会了吧?

别说你家天猫详情页代码不分段的!那好吧!


然后页面切片,记得切成四四方方规则的切片,配合热区工具加链接。不要切成上三下四的切片,产生分隔符.gif    呵呵会在火狐之类的浏览器中不正常显示,要么前端收拾你,要么运营收拾你。


好烦!突然想到还有 淘宝视频 插入页面的点!简单说一下,就是根据视频长宽比例,在页面上等比缩小预留一个位置,然后切片完了,放好页面代码,在后台自定义模板里面,直接找到视频插入页面。很简单的



--------------------------------------------------------------------------------------

最后

欢迎大家给建议,反正我也不会改




!站酷为什么不给文章编辑器一个字号大小修改功能!

9
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功