商城首页布局实现（HTML源码）

商城首页布局效果：

div+css实现，用到了浮动来布局，具体参见以下源码。

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>div+cs网站首页布局</title><style>/*第一部分：Logo部分*/.header{width: 100%;}.header div{/*左浮动*/float: left;width: 33.3%;height:75px;/*行高*/line-height:50px;}/*a标签*//*控制Logo部分的a标签*/.header a{color: #000;/*颜色*/}a{font-size: 17px;/*字体*/padding:10px;/*控制内边距*/text-decoration: none;/*去掉超链接的下划线*/}/*第二部分：导航栏部分*//*清除浮动*/.clear{clear:both;}.menu{width:100%;background-color: #000;height:50px;padding-top:1px;}.menu ul li{/*去掉标记*/list-style-type: none;/*元素设为同一行*/display: inline;}.menu a{color:#FFF;}/*第三部分：轮播图*/.img1{width:100%;}.img1 img{width:100%;}/*第四部分+第六部分：最新+热门商品*/.hot{height:50px;padding-top:10px;}/*左边大图*/.left{float:left;width:16%;height: 500px;}.right{float:left;width:84%;text-align:center;height: 500px;}.middle{float:left;width: 50%;height:250px;}.item{float:left;width: 16.6%;height:250px;                }/*第五+七部分:广告图片+正品保证*/.adv{width:100%;}/*第八部分:页脚部分*/.foot{width:100%;}.foot p{text-align: center;}</style></head><body><div><!--第一部分：Logo部分--><div class="header"><div id="d1-1"><img src="img/logo2.png"/></div><div id="d1-2"><img src="img/header.jpg"/></div><div id="d1-3" align="center"><a href="#">登录</a><a href="#">注册</a><a href="#">购物车</a></div>  </div><!--第二部分：导航栏部分--><!--清除浮动--><div class="clear"></div><div class="menu"><ul><li><a href="#">首页</a></li><li><a href="#">手机数码</a></li><li><a href="#">电脑办公</a></li><li><a href="#">鞋靴箱包</a></li><li><a href="#">户外</a></li></ul></div><!--第三部分：轮播图部分--><div class="img1"><img src="img/1.jpg" /></div><!--第四部分：最新商品部分--><div><div class="hot"><h3 style="display: inline;">最新商品</h3><img src="img/title2.jpg"/></div><!--左边大图+右边商品--><!--左边大图--><div class="left"><img src="img/big01.jpg" width="95%"/></div><!--右边商品--><div class="right"><div class="middle"><img  src="img/middle01.jpg" width="95%" height="240px"/></div><div class="item"><img src="img/small01.jpg"/><p><a href="#">豆浆机</a></p><p><font color="red">$298</font></p></div><div class="item"><img src="img/small02.jpg"/><p><a href="#">电脑</a></p><p><font color="red">$6998</font></p></div><div class="item"><img src="img/small03.jpg"/><p><a href="#">炒锅</a></p><p><font color="red">$398</font></p></div><div class="item"><img src="img/small04.jpg"/><p><a href="#">面包机</a></p><p><font color="red">$298</font></p></div><div class="item"><img src="img/small05.jpg"/><p><a href="#">饮水机</a></p><p><font color="red">$998</font></p></div><div class="item"><img src="img/small06.jpg"/><p><a href="#">洗衣机</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/small07.jpg"/><p><a href="#">扫地机器人</a></p><p><font color="red">$998</font></p></div><div class="item"><img src="img/small08.jpg"/><p><a href="#">压力锅</a></p><p><font color="red">$598</font></p></div><div class="item"><img src="img/small09.jpg"/><p><a href="#">微波炉</a></p><p><font color="red">$398</font></p></div></div></div><!--第五部分:广告图片--><div class="adv"><img src="img/ad.jpg" width="100%"/></div><!--第六部分：热门商品部分--><div><div class="hot"><h3 style="display: inline;">热门商品</h3><img src="img/title2.jpg"/></div><!--左边大图+右边商品--><!--左边大图--><div class="left"><img src="img/155210007679548_y.jpg" width="95%"/></div><!--右边商品--><div class="right"><div class="middle"><img  src="img/news_right.jpg" width="95%" height="240px"/></div><div class="item"><img src="img/c_0005.jpg"/><p><a href="#">小米</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0006.jpg"/><p><a href="#">vivo</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0007.jpg"/><p><a href="#">oppo</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0005.jpg"/><p><a href="#">华为</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0006.jpg"/><p><a href="#">苹果</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0007.jpg"/><p><a href="#">魅族</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0005.jpg"/><p><a href="#">三星</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0006.jpg"/><p><a href="#">乐视</a></p><p><font color="red">$1998</font></p></div><div class="item"><img src="img/c_0007.jpg"/><p><a href="#">诺基亚</a></p><p><font color="red">$1998</font></p></div></div></div><!--第七部分：正品保证--><div class="adv"><img src="img/footer.jpg" width="100%"/></div><!--第八部分:页脚部分--><div class="foot"><p><a href="#">关于我们</a><a href="#">联系我们</a><a href="#">投诉建议</a></p><p>CopyRight 2018-2020 XXX商城 &copy;</p></div></div></body>
</html>

商城首页布局实现（HTML源码）相关推荐

HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)
HTML网页设计结课作业~服装商城主页纯HTML模板源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多 ...
java计算机毕业设计ssm理想电子商城网站c48j7（附源码、数据库）
java计算机毕业设计ssm理想电子商城网站c48j7(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
JAVA计算机毕业设计校园外卖零食商城系统计算机（附源码、数据库）
JAVA计算机毕业设计校园外卖零食商城系统计算机(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
java计算机毕业设计ssm基于SSM的服装商城系统whe10（附源码、数据库）
java计算机毕业设计ssm基于SSM的服装商城系统whe10(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也 ...
Java毕设项目校园外卖零食商城系统计算机（附源码+系统+数据库+LW）
Java毕设项目校园外卖零食商城系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
用html语言编写美食栏目源码,仿美食网首页html+css 完全源码和图片
[实例简介] 用了一个多星期仿的美食网的首页,html和css分离,完整的源码及图片: [实例截图] [核心代码] kikibingo_6821075 └── 仿美食网首页html+css 完全源码和 ...
完美高仿精仿京东商城手机客户端android版源码
转自http://blog.csdn.net/xiaocnblogs/article/details/45815445, 完美高仿精仿京东商城手机客户端android版源码,喜欢的朋友可以下载吧. 源 ...
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技术栈 ...
Android应用源码商城商品交易客户端小框架源码下载
Android应用源码商城商品交易客户端小框架源码下载项目源码下载地址:https://download.csdn.net/download/meimeieee/20939837 项目截图:

商城首页布局实现（HTML源码）

商城首页布局效果：

代码：

商城首页布局实现（HTML源码）相关推荐

最新文章

热门文章