HTML代码

<!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=utf-8" />
<title>首页</title>
<script src="js/Untitled-4.js"></script>
<link href="CSS/首页.css" rel="stylesheet" type="text/css">
<link href="CSS/whole.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--header begin-->
<div class="header">
<div class="header_logo"> <img src="data:images/huawei_logo.png" /></div>
<div class="header_text"> <a href= "HTML/登录.html">登录</a>|<a href="HTML/登录.html">注册</a> </div>
</div>
<!--header end--><!--nav begin-->
<div class="nav"><ul class="nav_in"><li><a href="首页.html">首页</a></li><li><a href="HTML/华为专区.html">华为专区</a></li><li><a href="HTML/鸿蒙智选.html">鸿蒙智联</a></li><li><a href="HTML/华为智选.html">华为智选</a></li><li><a href="HTML/HarmonyOS.html">HarmonyOS</a></li><li><a href= "HTML/购物车.html">我的购物车</a></li></ul></div>
<!--nav end-->
<!--banner begin-->
<div class="main"><!-- 左按钮 --><a href="javascript:;" class="left">&lt;</a><!-- 右按钮 --><a href="javascript:;" class="right">&gt;</a><!-- 滚动区 --><ul><li><img src="data:images/ban1.jpg"></li><li><img src= "images/ban2.jpg"></li></ul><!-- 小圆 --><ol class="circle"></ol></div>

CSS代码

@charset "utf-8";
/* CSS Document */
ul,ol{list-style: none;
}
a{text-decoration: none;
}
.main{width:100%; height:455px; position:relative; overflow:hidden;margin: auto;}
.left,.right{display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-size: 18px;z-index: 2;
}
.right{right: 0;
}
.circle {position: absolute;bottom: 10px;left: 50px;
}
.main ul{position: absolute;left: 0;top: 0;width: 1000%;
}
.main ul li{float:left;
}.circle li {float: left;width: 8px;height: 8px;border: 2px solid orange;margin: 0 3px;border-radius: 50%;/*鼠标经过显示小手*/cursor: pointer;
}
.current {background-color: orange;
}.content_text{text-align: center;margin-top: 20px;}
.content{width:1250px;height:1200px;margin: auto;margin-top:100px;
}
.content_box1{float:left;width:60%;height:500px;background:url("../images/pic1.jpg");background-size:cover;
}.content_box2{float:right;background:url("../images/pic2.jpg");width:35%;height:500px;background-size:cover;
}.content_box3{float:left;background:url( "../images/pic3.jpg");width:30%;height:550px;background-size:cover;margin-top:50px;
}.content_box4{float:right;background:url(  "../images/pic4.jpg");width:60%;height:550px;background-size:cover;margin-top:50px;
}.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover{transform:scale(1.15);
}.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top: 30px;
color:#ccc;
}
.footer p{
line-height: 30px;
font-size: 14px;}

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑";font-size:16px;color:#404042;}/** CSS Document */
a{text-decoration:none;color:#fff;}
.header{width:1000px;margin:0 auto;padding-top:20px;overflow:hidden;
}
.header_logo{float:left;
}
.header_text{float:right;}
.header a{ color:#404042;}
.header a:hover{color:#da5454;}
.nav{width:100%;height:40px;background:#999;margin-top: 15px
}
.nav_in{width:980px;margin:0 auto;
}
.nav_in li{float:left;
}
.nav_in li a{display:block;line-height: 40px;padding:0 36px;}
.nav_in li .current{background: #da5454;
}
.nav_in a:hover{background: #da5454;}
.banner{width:100%; height:580px; position:relative; overflow:hidden;
}
.gouwuche{position: absolute;float:right;
}
.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top:25px;
color:#ccc;margin-top: 15px;
}
.footer p{
line-height: 30px;
font-size: 14px;}

JavaScript

// JavaScript Documentfunction animate(obj, target, callback) {// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面// 把我们步长值改为整数 不要出现小数的问题var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面if (callback) {// 调用函数callback();}}// 把每次加 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}window.addEventListener('load',function(){//1.获取元素var left = document.querySelector('.left');var right = document.querySelector('.right');var main = document.querySelector('.main');var mainWidth = main.offsetWidth;//2.鼠标经过显示左右按钮main.addEventListener('mouseenter',function(){left.style.display = 'block';right.style.display = 'block';clearInterval(timer);timer = null; // 清除定时器变量})//3.鼠标离开隐藏左右按钮main.addEventListener('mouseleave',function(){left.style.display = 'none';right.style.display = 'none';timer = setInterval(function() {//手动调用点击事件right.click();}, 2000);})//4.动态生成圆圈var ul = main.querySelector('ul')var ol = main.querySelector('.circle')for (var i = 0; i < ul.children.length; i++) {//创建一个livar li = document.createElement('li'); // 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i);//插入olol.appendChild(li);//排他思想li.addEventListener('click', function() {//所有li清除类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//当前li设置current类名this.className = 'current';var index = this.getAttribute('index');num = index;circle = index; animate(ul, -index * mainWidth);})}//第一个小li设置为currentol.children[0].className = 'current';// 克隆第一张图片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 6.点击右按钮，图片滚动一张var num = 0;var circle = 0;var flag = true;// 7.右侧按钮right.addEventListener('click',function(){if(flag){//关闭节流阀flag = false;if(num == ul.children.length-1){ul.style.left = 0;num = 0;}num++;animate(ul, -num*mainWidth,function(){flag = true;});circle++;if (circle == ol.children.length) {circle = 0;}// 调用函数circleChange();}});// 8.左侧按钮left.addEventListener('click',function(){if(flag){flag = false;if(num == 0){num = ul.children.length - 1;ul.style.left = -num * mainWidth + 'px';}num--;animate(ul, -num*mainWidth, function(){flag = true;});circle--;if (circle < 0) {circle = ol.children.length - 1;}// 调用函数circleChange();}});function circleChange() {// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';}// 自动播放轮播图var timer = setInterval(function() {//手动调用点击事件right.click();}, 2000);
})

二、内容页

第一张 HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../CSS/hwzq.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
<title>华为专区</title>
</head>
<body>
<!--header begin-->
<div class="header"><div class="header_logo"> <img src="../images/huawei_logo.png" /></div><div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a></div>
</div>
<!--header end--><!--nav begin-->
<div class="nav"><ul class="nav_in"><li><a href="../首页.html">首页</a></li><li><a href="华为专区.html">华为专区</a></li><li><a href="鸿蒙智选.html">鸿蒙智联</a></li><li><a href="华为智选.html">华为智选</a></li><li><a href="HarmonyOS.html">HarmonyOS</a></li><li><a href= "购物车.html">我的购物车</a></li></ul>
</div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/nav2.jpg"></div>
<!--banner end--><!--content begin-->
<h1 class="content_text">产品分类</h1>
<div class="content"><div class="content_box1"><div class="conntent_box_text"><p><a href="#">手机</a></p></div></div><div class="content_box2"><div class="conntent_box_text"><p><a href="#">笔记本</a></p></div></div><div class="content_box3"><div class="conntent_box_text"><p><a href="#">平板</a></p></div></div><div class="content_box4"><div class="conntent_box_text"><p><a href="#">智慧屏</a></p></div></div><div class="content_box5"><div class="conntent_box_text"><p><a href="#">智能手表</a></p></div></div><div class="content_box6"><div class="conntent_box_text"> <p><a href="#">耳机</a></p></div></div>
</div>
<!--content end--><!--footer begin-->
<div class="footer">
</div>
<!--footer end-->
</body>
</html>

因为有一些板块的样式是一样的，为了减少重复的编写，建一个css用来编写相同的样式

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑";font-size:16px;color:#404042;}/** CSS Document */
a{text-decoration:none;color:#fff;}
.header{width:1000px;margin:0 auto;padding-top:20px;overflow:hidden;
}
.header_logo{float:left;
}
.header_text{float:right;}
.header a{ color:#404042;}
.header a:hover{color:#da5454;}
.nav{width:100%;height:40px;background:#999;margin-top: 15px
}
.nav_in{width:980px;margin:0 auto;
}
.nav_in li{float:left;
}
.nav_in li a{display:block;line-height: 40px;padding:0 36px;}
.nav_in li .current{background: #da5454;
}
.nav_in a:hover{background: #da5454;}
.banner{width:100%; height:580px; position:relative; overflow:hidden;
}
.gouwuche{position: absolute;float:right;
}
.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top:25px;
color:#ccc;margin-top: 15px;
}
.footer p{
line-height: 30px;
font-size: 14px;}

再根据不同的点编写一个专门的css样式

@charset "utf-8";
/* CSS Document */
.banner{width:100%; height:580px; position:relative; overflow:hidden;
}
.content{width:80%;height:800px;margin: 0 auto;
}
.content_text{text-align: center;margin-top: 20px;}.content_box1{float:left;width:20%;height:250px;background:url( "../images/content1.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}.conntent_box_text {text-align:center;float:left;width:100%;height:15px;margin-top:220px;}.conntent_box_text a{font-size: 20px;color: #000000;
}
.content_box2{float:left;width:20%;height:250px;background:url("  ../images/content2.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}.content_box3{float:left;width:20%;height:250px;background:url( "../images/content3.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}.content_box4{float:left;width:20%;height:250px;background:url( "../images/content4.jpg");background-size:cover;margin-left:125px;margin-top: 100px;}.content_box5{float:left;width:20%;height:250px;background:url(  "../images/content5.jpg");background-size:cover;margin-left:125px;margin-top: 100px;}.content_box6{float:left;width:20%;height:250px;background:url(  "../images/content6.jpg");background-size:cover;margin-left:125px;margin-top: 100px;}
.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{transform:scale(1.15);
}

第二张HTML

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鸿蒙智联</title>
<link href="../CSS/hmzx.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
</head>
<!--header begin-->
<div class="header">
<div class="header_logo"> <img src="../images/huawei_logo.png" /></div>
<div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a> </div>
</div>
<!--header end--><!--nav begin-->
<div class="nav"><ul class="nav_in"><li><a href="../首页.html">首页</a></li><li><a href="华为专区.html">华为专区</a></li><li><a href="鸿蒙智选.html">鸿蒙智联</a></li><li><a href="华为智选.html">华为智选</a></li><li><a href="HarmonyOS.html">HarmonyOS</a></li><li><a href= "购物车.html">我的购物车</a></li></ul></div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/2.webp"></div>
<!--banner end-->
<!--banner end-->
<!--content BEGIN-->
<h1 class="content_text">热门推荐</h1>
<div class="content"><a href="#"><div class="content_box1"></div></a><a href="#"><div class="content_box2"></div></a><a href="#"><div class="content_box3"></div></a><a href="#"><div class="content_box4"></div></a><a href="#"><div class="content_box5"></div></a><a href="#"><div class="content_box6"></div></a></div>
<!--content end--><!--footer begin-->
<div class="footer"></div>
<!--footer end-->
<body>
</body>
</html>

css部分

@charset "utf-8";
/* CSS Document */
.content{width:80%;height:800px;margin: 0 auto;
}
.content_text{text-align: center;margin-top: 20px;
}
.content_box1{float:left;width:20%;height:330px;background:url(  "../images/2.1.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}
.content_box2{float:left;width:20%;height:330px;background:url( "../images/2.2.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}
.content_box3{float:left;width:20%;height:330px;background:url(  "../images/2.3.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}
.content_box4{float:left;width:20%;height:330px;background:url(  "../images/2.4.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}
.content_box5{float:left;width:20%;height:330px;background:url(  "../images/2.5.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}
.content_box6{float:left;width:20%;height:330px;background:url(  "../images/2.6.jpg");background-size:cover;margin-left:125px;margin-top: 25px;
}.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{transform:scale(1.15);
}

效果图

可以根据需要更换图片

图片来源于华为商城网站

购物网站（内容页面）_Hubert★的博客-CSDN博客https://blog.csdn.net/m0_56078449/article/details/122881619

购物网站HTML（首页）相关推荐

基于ASP.Net写的一个购物网站
网站运行录像在这里链接:https://pan.baidu.com/s/1NaFNKnQ3UEorasadRf7EIA ...
HTML5期末大作业：医药用品购物网站设计——医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 医药用品购物网页制作作业_医药用品购物页设计...
HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业: 医药用品购物网页制作作业_医药用品购物页设计- 常见网页设 ...
从0开始利用宝塔linux面板+DSShop搭建一个简单的购物网站
宝塔linux面板的安装详情在这德尚官网利用DSSshop搭建一个单店铺商城在软件商店一键部署找到DSSshop点击一键安装在网站设置出添加一下ip 添加完之后在浏览器上方输入ip地址进行安 ...
paylinks.php_毕业设计-基于PHP的网上购物网站系统设计
毕业设计-基于PHP的网上购物网站系统设计,共45页,14912字,附完整的程序源代码.包括前台,后台的实现,先运行phpStudyAdmin后打开dzsw/install.php 摘要随着Inte ...
学生PHP校园超市网站制作学生PHP网页毕设源码学生动态数据库网站作品 PHP电子商务商城购物网站
学生PHP校园超市商城购物网站作品源码 PHP网站作品介绍作品介绍前端介绍后台介绍 PHP网站作品截图前端截图后台截图作品源地址 PHP网站作品介绍作品介绍本大学生动态网站毕业设计网页 ...
基于PHP服装购物网站的设计与实现
利用PHP,mysql数据库构建一个小型的服装购物网站,系统能够实现的基本功能:网上浏览服装,服装分类展示,查找搜索指定商品,购物车,用户注册.登录等网上购物基本功能,后台主要实现对服装商品和用户进行 ...
关于购物网站的设计概念
关于购物网站的设计概念完成时间:2019年4月2日作者: 在网上常见的购物网站有淘宝,京东,国美,苏宁易购等等之类的网站首先我来讲解一下国美这个购物首页,国美电器(GOME)成立于1987年1月1 ...
（附源码）spring boot校园购物网站毕业设计041037
springboot校园购物网站APP 摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所 ...
（附源码）springboot校园购物网站APP 毕业设计041037
springboot校园购物网站APP 摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们 ...

购物网站HTML（首页）

二、内容页

第二张HTML

购物网站HTML（首页）相关推荐

最新文章

热门文章