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

- 灬无言 - 阅 4,932

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

小小课堂网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。

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

10

本文转载 " https://www.xxkt.org/1658 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

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