使用JS完成网上商城的制作
使用JS完成网上商城的制作代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用DIV+CSS完成首页布局</title>
<style>
#father{
border: 1px solid red;
width: 1100px;
height: 2065px;
margin:auto;
}
.top{
border: 1px solid black;
width: 364.5px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid red;
width: 1100px;
height: 50px;
background-color: black;
}
ul li{
display: inline;
/*此句表示显示到一行去*/
color: white;
}
#clear{
clear: both;
}
#product{
border: 1px solid red;
width: 100%;
height: 600px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 50px;
padding-top: 15px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 532px;
}
#product_bottom_left{
border: 1px solid red;
width: 200px;
height: 532px;
float: left;
}
#product_bottom_right{
border: 1px solid blue;
width: 896px;
height: 532px;
float: left;
}
#big{
border: 1px solid red;
width: 445px;
height: 263px;
float: left;
}
.small{
border: 1px solid blue;
width: 147px;
height: 263px;
float: left;
/*让里面文本居中显示*/
text-align: center;
}
#buttom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="father">
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="../案例一：网站注册页面/regist.html">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<li style="font-size: 20px;">首页</li>
<li>手机数码</li>
<li>家用电器</li>
<li>数码箱包</li>
<li>孕婴保健</li>
<li>汽车产品</li>
</ul>
</div>
<!--3.轮播图-->
<div id="">
<img src="../img/1.jpg" width="100%"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"height="100%" />
</div>
<!--6.热门商品-->
<div id="">
<span style="font-size: 25px;">热门商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--8.版权信息与友情链接-->
<div id="buttom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright @2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
使用JS完成网上商城的制作相关推荐
- 使用JQuery完成网上商城的制作
使用JQuery完成网上商城的制作代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- 网上商城的制作中需要注意哪些方面的安全问题？
现在市场竞争越来越激烈,为了赚更多的钱,想要有更好的发展和机会,在互联网上是一个非常重要的途径.但是现在很多网站的安全问题也在警告我们要注意网站建设的安全性,那么在网上商城的制作中需要注意哪些方面的安 ...
- node.js基于JavaScript网上商城毕业设计源码261620
Node.js网上商城的开发 摘 要 随着Internet的使用越来越广泛,在传统的商业模式中,对于日常各类商品,人们习惯于到各种商家店铺购买.然而在快节奏的新时代中,人们不一定能为购买各类商品腾出 ...
- 基于JavaScript网上商城开发设计 毕业设计-附源码261620
Node.js网上商城的开发 摘 要 随着Internet的使用越来越广泛,在传统的商业模式中,对于日常各类商品,人们习惯于到各种商家店铺购买.然而在快节奏的新时代中,人们不一定能为购买各类商品腾出 ...
- 跟李宁老师做项目：小程序版网上商城（Node.js + Express + MySQL)-李宁-专题视频课程...
跟李宁老师做项目:小程序版网上商城(Node.js + Express + MySQL)-8799人已学习 课程介绍 本课程采用的技术包括小程序开发.Node.js.Express和M ...
- 基于node.js和Vue的运动装备网上商城
摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准 ...
- python制作购物网站开题报告_网上商城的设计与实现开题报告
篇一:网上购物系统的开题报告 本科毕业论文(设计)开题报告 论 文 题 目: 网上购物系统的实现 学 院: 专 业 .班 级:计算机科学与技术 学 生 姓 名: 指导教师(职称): 2013年 **月 ...
- 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
- 基于Java web的网上商城系统
源码编号:B-I09 项目类型:Java web项目/Java EE项目(非开源) 项目名称:基于JSP+Servlet的网上商城 [shop] 源码作者:逍遥游本人开发制作 论文作者:逍遥游本人撰 ...
最新文章
- 算法---------前 K 个高频元素（Java版本）
- JavaScript: 代码简洁之道
- VC编写的程序不能在其他机器上运行的解决方案
- AspectCore中的IoC容器和依赖注入
- Oracle入门（十三）之SQL的DML
- 华图砖题库php文件怎么打印_事业单位招聘考试《工会基础知识》试题库及答案1380题...
- 【DAY2】hadoop 完全分布式模式配置的学习笔记
- 并发编程之——多进程
- c++学习笔记（4）
- Linux MySQL 源码编译安装
- 个人总结之Volley的cookie处理
- 服务器自带raid功能吗,服务器的 RAID 功能介绍
- Modelsim的安装教程
- 2019新版《网易云课堂 C++收银系统项目实战教程》
- Java教师工资习题
- Cesium 添加边界墙边界线
- 【HelloKitty团队项目】Alpha阶段项目展示
- 微信公众号小程序外卖返利分销系统美团饿了么外卖cps软件源码
- Markdown KaTex 积分符号
- SNAT(源地址转换)