HTML实战案例3：制作易趣网商品列表页面

实战案例3：制作易趣网商品列表页面

一、完整的页面效果图

二、代码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>易趣网 商品列表</title>
</head><body>
<p><img src="data:images/header.jpg" /></p>
<p>首页 &gt; 中国馆 &gt; 女装/女士精品 &gt; 所有商品</p>
<p><img src="data:images/list_header.jpg" /></p>
<h2>热点推荐</h2>
<dl><dt><img src="data:images/photo_01.jpg" /></dt><dd>一口价：49.00<br />全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<dl><dt><img src="data:images/photo_02.jpg" /></dt><dd>一口价：35.00<br />2011新款T恤短袖 t恤女短袖 影子熊猫</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<dl><dt><img src="data:images/photo_03.jpg" /></dt><dd>一口价：48.00<br />钉珠蝴蝶结秋冬背心呢料裙911 -4366</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<dl><dt><img src="data:images/photo_04.jpg" /></dt><dd>一口价：88.00<br />2011 春装 新款 女装 假两件拼接修身包臀裙 洋装 长袖连衣裙</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<dl><dt><img src="data:images/photo_05.jpg" /></dt><dd>一口价：169.00<br />卖家推荐 2011春装新款 时尚韩版 假两件式 百褶 连衣裙 0210806 热销款</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<dl><dt><img src="data:images/photo_06.jpg" /></dt><dd>一口价：98.00<br />波西米亚 民族风格 扎染珠片 多穿裙 沙滩</dd>
</dl>
<p><img src="data:images/line.gif" /></p>
<p>Copyright &copy; xxxx 易趣版权所有</p>
</body>
</html>

注：其中全部图片存放在文件夹images下

HTML实战案例3：制作易趣网商品列表页面相关推荐

服务器制作raid,实战案例——服务器制作raid磁盘阵列并管理
3.3 实战案例--服务器制作raid磁盘阵列并管理 3.3.1 案例目标 (1)掌握RAID的构建,挂载和使用. (2)掌握RAID的基础运维. Raid磁盘冗余 RAID LEVEL1:N块相同空 ...
Axure 9 实战案例，中继器的应用 2，列表的交替色和悬停色
前言 Hello!欢迎来到Axure 9 实战案例专栏(进阶篇).课程简介>> 在上一篇教程,我们讲解了如何使用中继器绘制原型列表页(了解更多>>),相信大家已经运用上了吧?是 ...
爬虫项目实战十一：爬取当当网商品信息
爬取当当网商品信息目标项目准备网站分析页码分析反爬分析代码实现效果显示目标批量爬取当当网商品信息,保存为csv文件到本地. 项目准备软件:Pycharm 第三方库:requests ...
静态小米官网主页html5设计,web案例-css制作小米官网产品展示
web前端群,189394454,有视频.源码.学习方法等大量干货分享效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标 ...
仿手机端京东商城html源码_web前端入门到实战：制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能一.html代码已选条件: 品牌: 全部惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕戴尔三星索尼东芝 ...
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container.row等栅格系统的知识布局响应式的网页,需要适配中等屏幕.小屏幕.超小屏幕使用.img-responsive设置响应式图片,使之适应不同屏幕的终端使用.img-t ...
使用CSS3制作一个简单的商品列表、浮动布局
代码如下: <style>*{margin: 0px;padding: 0px;list-style: none;}.box{width: 1365px;height: 490px;bor ...
易趣已是黄昏落日盖棺瞑目
全面宣布免费并没有给易趣带来好消息.记得好朋友写道"易趣全免费战略的启动,虽然来的有点晚,但迟到总比不到好.易趣放弃了原来一直坚持的收费原则,从战略角度考虑,就应该全力以赴围绕用户资源争夺, ...
聚焦上海：千锤百炼出神器，高可用架构实战案例
随着移动互联网.云计算和大数据的高速发展,科技创新企业的扩张速度也呈指数级增长,越来越多产品和服务从 idea 到落地,只需要几个月甚至几天的时间.但伴随服务化的深入,数据量急剧增加,高并发高扩展高性 ...

HTML实战案例3：制作易趣网商品列表页面

HTML实战案例3：制作易趣网商品列表页面相关推荐

最新文章

热门文章