3.3 简单商品展示页(淘宝商品外链)_HTML视频教程

- 灬无言 - 阅 5,132

本套课程的最后一节,制作出一个商品窗口链接效果。

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

原理很简单,就是商品窗口的利用html插入一张图片,css用一张图片做背景,img:hover来实现html插入的图片,有透明效果即可。

当然,这里可以用之前讲过的图片库来制作也是没问题的。

还可以用position制作出这样的效果,但比这个要复杂。

  1. 修改主页的menu信息,来展示我们店铺的商品分类情况。
  2. 修改iframe框架的链接,改为html、xiuxian.html。
  3. 将html分割为水平的两个div模块

<div class=”row”></div>

<div class=”row”></div>

.row{

height:400px;

width:1190px;

background:pink;

}

  1. 再将每一行插入三个div模块,这个就是用来展示商品的窗口。

<div class=”row”>

<div id=”window1”></div>

<div id=”window2”></div>

<div id=”window3”></div>

</div>

<div class=”row”>

<div id=”window4”></div>

<div id=”window5”></div>

<div id=”window6”></div>

</div>

并在每个div中插入一张图片,且在CSS中设置图片背景。

  1. 设置img:hover让鼠标移动到窗口上时,HTML中插入的图片,透明度改变,从而显示出背景图片。

.row img:hover{

opacity:0.2;

}

  1. 视频讲解中,有一位置未改,导致默认框架中的文档出错。

<!–主体开始–>

<div id=”main”>

<div id=”main_content” class=”auto”>

<iframe id=”iframes” name=”main_html” src=”html/main_html.html”></iframe>

</div>

</div>

<!–主体结束–>

上面这段代码中的src=”html/main_html.html” 改为src=”html/yundong.html”就可以了。。这个代表了默认的浮动窗口的HTML文档。在iframe中也是讲过的。。视频中,以为是误差,就跳过了。在此纠错。

结束语

恭喜您!完成了本套课程的学习,相信您已经可以做出不错的静态网页了!

但,HTML、CSS入门课程的结束,只是一个起点,并非终点。

进阶学习:建议学习HTML5和CSS3的知识。

简单建站:建议了解CMS系统,可轻松完成网站搭建。

美化网站:建议学习JavaScript、Photoshop和flash等。

独立建站:建议学习Windows server 2012服务器管理与架站。

深入学习:建议学习PHP或ASP。

以上就是小小课堂SEO自学网带来的《3.3 简单商品展示页(淘宝商品外链)_HTML视频教程》。感谢您的观看。SEO教程认准小小课堂!

非特殊说明,本文为小小课堂SEO自学网原创,欢迎转载并保留版权 https://www.xxkt.org/

本站提供SEO培训、咨询、诊断,微信(电话):13722793092 微信公众号:xxktorg

            

一条回应:“3.3 简单商品展示页(淘宝商品外链)_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章!