div+css布局的一个减肥产品排行榜的页面模版

共39个文件

jpg：23个

gif：8个

db：2个

需积分: 47 122 浏览量 2014-01-20 09:36:48 上传评论收藏 926KB RAR 举报

在网页设计领域，`div+css`布局是一种广泛使用的页面构造技术，它将内容与表现分离，提高了网页的可维护性和可扩展性。本主题聚焦于一个基于`div+css`布局的减肥产品排行榜页面模版，这个模版可能是为了展示减肥产品的排名、评价和相关信息。下面将详细探讨`div+css`布局以及如何构建此类页面模版。 `div`（division）是HTML中的一个块级元素，通常用来组织网页上的内容，它可以包含文本、图像、链接等多种元素。在`div+css`布局中，`div`元素作为容器，通过CSS（Cascading Style Sheets）来控制其样式和位置，实现页面的布局。 CSS是网页设计的核心技术之一，用于定义网页的外观和布局。在`div+css`布局中，我们可以通过设置`display`属性（如`block`、`inline-block`或`flex`）来调整`div`元素的显示方式，通过`position`（如`static`、`relative`、`absolute`或`fixed`）来控制元素的位置，使用`width`、`height`、`margin`、`padding`等属性来调整元素的大小和间距，以及运用`float`（左浮动或右浮动）来创建流式布局。对于一个减肥产品排行榜页面模版，我们可以预见以下关键组件： 1. **头部**（Header）：通常包含网站的logo、导航菜单等，可以使用一个`div`元素进行封装，并通过CSS设置背景色、字体样式等。 2. **主要内容区**（Main Content）：展示排行榜信息，可能包括产品图片、名称、评分、描述等。每个产品可以视为一个独立的`div`，并利用CSS实现水平或垂直排列。 3. **侧边栏**（Sidebar）：可包含广告、相关推荐、用户评价等，同样用`div`包裹，可以设置为浮动或固定宽度。 4. **底部**（Footer）：包含版权信息、联系方式等，用一个`div`元素表示，通常设置为始终位于页面底部。 5. **响应式设计**：考虑到不同设备的屏幕尺寸，模版应采用响应式布局，使用`@media`查询根据设备特性调整元素的样式。 6. **图像优化**：压缩包内的文件"28_74_9483709cc551e3f.jpg"可能是一个示例产品图片，优化图片大小可以提高页面加载速度。 7. **交互元素**：可能包含按钮、链接等，通过CSS可以定制它们的样式和交互效果。 8. **SEO优化**：使用合适的`<meta>`标签、`alt`属性等提升搜索引擎可见性。 9. **代码结构**：保持良好的代码组织和注释，便于后期维护和团队协作。 `div+css`布局的减肥产品排行榜页面模版涉及网页布局、样式设计、用户体验、响应式设计等多个方面，开发者需要具备扎实的HTML和CSS基础，同时关注网页性能和可访问性。通过灵活运用这些技术，可以创建出美观且功能完善的网页模版。

资源推荐

资源详情

资源评论

收起资源包目录

div+css 布局的一个减肥产品排行榜的页面.rar （39个子文件）

28_74_9483709cc551e3f.jpg 130KB

index.html 14KB

tit_bg.gif 3KB

a-9.jpg 28KB

a-10.jpg 27KB

1.swf 4KB

a-8.jpg 28KB

未标题-1.psd 391KB

a-2.jpg 28KB

a-7.jpg 28KB

a-6.jpg 28KB

a-3.jpg 28KB

1.fla 95KB

Thumbs.db 24KB

a-1.jpg 28KB

aa.jpg 28KB

css

css.css 2KB

more.gif 3KB

jianfei_3.jpg 58KB

jianfei1.jpg 53KB

jianfei_2.jpg 60KB

buy.gif 3KB

jianfei_7.jpg 48KB

jianfei_9.jpg 48KB

jianfei_6.jpg 41KB

jianfei_4.jpg 41KB

7t.gif 2KB

Skin2.css 5KB

jianfei_8.jpg 36KB

tongji.gif 43B

Thumbs.db 84KB

jianfei_14.gif 14KB

10.jpg 46KB

jianfei_44.jpg 51KB

jianfei.jpg 126KB

jianfei_5.jpg 41KB

a-5.jpg 28KB

rss.gif 382B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网站名称</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> <link href="css/Skin2.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div class="web"> <div id="s"> <TABLE width="99%" height="35" border=0 cellPadding=0 cellSpacing=0> <TBODY> <TR> <TD align=right><A href="http://www.langyair.com" target="_self" onclick=window.external.addFavorite(location.href,document.title)>加入收藏</A> | <A href="http://www.langyair.com" target="_self" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('/')">设为首页</A> | <A href="http://www.langyair.com" target=_self>RSS</A></TD> </TR></TBODY></TABLE></div> <div id="x"> <div class="a"> <div class="aa"><a href="http://www.langyair.com" target="_self">三皇冠-欧麦诗闪电定点瘦减肥胶囊-绿色减肥-健康瘦身-货到付款 </a></div> <div class="ab"> <div class="c"><img src="css/jianfei1.jpg" /></div> <div class="d"> <div id="e"><img src="aa.jpg" width="584" height="40" /></div> <div id="f"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="60"></embed> </object>　　 30天出<span class="STYLE4"><span class="STYLE15">6987</span></span>件</div> <div id="g">　　　　　　<a href="http://www.langyair.com" target="_blank"><img src="css/buy.gif" width="172" height="37" border="0" /></a> 　　　　 <a href="http://www.langyair.com" target="_blank"><img src="css/more.gif" width="172" height="37" border="0" /></a></div> </div> </div> </div> <div class="a"> <div class="aa"><a href="http://s.click.taobao.com/t_1?i=qvMiwyRg1zFUEA%3D%3D&p=mm_14951070_0_0&n=11" target="_blank">【歌迪安减肥系列之全身瘦】更瘦更美更健康　2010完美升级</a><a href="http://www.langyair.com" target="_self"></a></div> <div class="ab"> <div class="c"><img src="css/jianfei_6.jpg" width="230" height="230" /></div> <div class="d"> <div id="e"><img src="a-1.jpg" width="584" height="40" /></div> <div id="f"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="60"></embed> </object>　　　 30天出<span class="STYLE4"><span class="STYLE15">5872</span></span>件 </div> <div id="g">　　　　　　<a href="http://www.langyair.com" target="_blank"><img src="css/buy.gif" width="172" height="37" border="0" /></a> 　　　　 <a href="http://www.langyair.com " target="_blank"><img src="css/more.gif" width="172" height="37" border="0" /></a></div> </div> </div> </div> <div class="a"> <div class="aa"><a href="http://www.langyair.com" target="_self">镇店之宝★韩国软黄金减肥药百万买家真实反馈减肥排行榜第三</a></div> <div class="ab"> <div class="c"><img src="css/jianfei_3.jpg" /></div> <div class="d"> <div id="e"><img src="a-2.jpg" width="584" height="40" /></div> <div id="f"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="60"></embed> </object>　　　 30天出<span class="STYLE4"><span class="STYLE15">4223</span></span>件</div> <div id="g">　　　　　　<a href="http://www.langyair.com" target="_blank"><img src="css/buy.gif" width="172" height="37" border="0" /></a> 　　　　 <a href="http://www.langyair.com" target="_blank"><img src="css/more.gif" width="172" height="37" border="0" /></a></div> </div> </div> </div> <div class="a"> <div class="aa"><a href="http://www.langyair.com" target="_self">百分百柠梅瘦身螺旋藻减肥绿色健康系列★中药+水果+蔬菜 </a></div> <div class="ab"> <div class="c"><img src="css/jianfei_4.jpg" /></div> <div class="d"> <div id="e"><img src="a-3.jpg" width="584" height="40" /></div> <div id="f"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="60"></embed> </object>　　　30天出<span class="STYLE4"><span class="STYLE15">3763</span></span>件</div> <div id="g">　　　　　　<a href="http://www.langyair.com" target="_blank"><img src="css/buy.gif" width="172" height="37" border="0" /></a> 　　　　 <a href="http://www.langyair.com" target="_blank"><img src="css/more.gif" width="172" height="37" border="0" /></a></div> </div> </div> </div> <div class="a"> <div class="aa"><a href="http://www.langyair.com" target="_self">窈窕瘦身减肥胶囊/挺靓牌减肥药/绿色减淝药/销售排行榜第五 </a></div> <div class="ab"> <div class="c"><img src="css/jianfei_5.jpg" width="229" height="230" /></div> <div class="d"> <div id="e"><img src="a-5.jpg" width="584" height="40" /></div> <div id="f"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="60"></embed> </object>　　　 30天出<span class="STYLE4"><span class="STYLE15">3502</span></span>件</div> <div id="g">　　　　　　<a href="http://www.langyair.com" target="_blank"><img src="css/buy.gif" width="172" height="37" border="0" /></a> 　　　　 <a href="http://www.langyair.com" target="_blank"><img src="css/more.gif" width="172" height="37" border="0" /></a></div> </div> </div> </div> <div class="a"> <div class="aa"><a href="http://www.langyair.com" target="_self">轻易蔬果蔬减肥药减淝药销售排行榜减肥胶囊产品排行榜第一绿色</a></div> <div class="ab"> <div class="c"><img src="css/jianfei_2.jpg" width="230" height="230" /></div> <div class="d"> <div id="e"><img src="a-6.jpg" width="584" height="40" /></div> <div id="f"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="60"> <param name="movie" value="1.swf" /> <param name="quality" value="high" /> <embed src="1.swf" qua

评论收藏

内容反馈