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="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"><</a>
<!-- 右按钮 -->
<a href="javascript:;" class="right">></a>
<!-- 滚动区 -->
<ul>
<li><img src="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 Document
function 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();
}
}
// 把每次加 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.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++) {
//创建一个li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
//插入ol
ol.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设置为current
ol.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