<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿写淘宝主页</title>
<link rel="stylesheet" href="./css/all.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/content.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/user.css">
<link rel="stylesheet" href="./css/haohuo.css">
<link rel="stylesheet" href="./css/guess.css">
<link rel="stylesheet" href="./css/position.css">
<script src="./js/jquery.min.js"></script>
</head>
<!-- 轮播图css -->
<style type="text/css">
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.box {
width: 520px;
height: 280px;
margin: auto;
overflow: hidden;
position: relative;
}
.box-1 ul li {
width: 800px;
height: 400px;
position: relative;
overflow: hidden;
}
.box-1 ul li img {
display: block;
width: 800px;
height: 400px;
}
.box-1 ul li h2 {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 300px;
background: rgba(125, 125, 120, .4);
text-indent: 2em;
font-size: 15px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
color: ghostwhite
}
.box-2 {
position: absolute;
right: 10px;
bottom: 14px;
}
.box-2 ul li {
float: left;
width: 12px;
height: 12px;
overflow: hidden;
margin: 0 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
text-indent: 100px;
cursor: pointer;
}
.box-2 ul .on {
background: rgba(255, 255, 255, 0.6);
}
.box-3 span {
position: absolute;
color: white;
background: rgba(125, 125, 120, .3);
width: 50px;
height: 80px;
top: 50%;
font-family: "宋体";
line-height: 80px;
font-size: 60px;
margin-top: -40px;
text-align: center;
cursor: pointer;
}
.box-3 .prev {
left: 10px;
}
.box-3 .next {
right: 10px;
}
.box-3 span::selection {
background: transparent;
}
.box-3 span:hover {
background: rgba(125, 125, 120, .8);
}
</style>
<!-- 轮播图js -->
<script type="text/javascript">
window.onload = function() {
function $(param) {
if (arguments[1] == true) {
return document.querySelectorAll(param);
} else {
return document.querySelector(param);
}
}
var $box = $(".box");
var $box1 = $(".box-1 ul li", true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;
var str = "";
for (var i = 0; i < $length; i++) {
if (i == 0) {
str += "<li class='on'>" + (i + 1) + "</li>";
} else {
str += "<li>" + (i + 1) + "</li>";
}
}
$box2.innerHTML = str;
var current = 0;
var timer;
timer = setInterval(go, 1000);
function go() {
for (var j = 0; j < $length; j++) {
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if ($length == current) {
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}
for (var k = 0; k < $length; k++) {
$box1[k].onmouseover = function() {
clearInterval(timer);
}
$box1[k].onmouseout = function() {
timer = setInterval(go, 1000);
}
}
for (var p = 0; p < $box3.children.length; p++) {
$box3.children[p].onmouseover = function() {
clearInterval(timer);
};
$box3.children[p].onmouseout = function() {
timer = setInterval(go, 1000);
}
}
for (var u = 0; u < $length; u++) {
$box2.children[u].index = u;
$box2.children[u].onmouseover = function() {
clearInterval(timer);
for (var j = 0; j < $length; j++) {
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index + 1;
}
$box2.children[u].onmouseout = function() {
timer = setInterval(go, 1000);
}
}
$box3.children[0].onclick = function() {
back();
}
$box3.children[1].onclick = function() {
go();
}
function back() {
for (var j = 0; j < $length; j++) {
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if (current == 0) {
current = $length;
}
$box1[current - 1].style.display = "block";
$box2.children[current - 1].className = "on";
current--;
}
}
</script>
<!-- 登陆button -->
<script type="text/javascript">
$(document).ready(function() {
$("#clickbtn").on('click', function() {
$(".dialog_bg").show();
})
$("#close_btn").on('click', function() {
$(".dialog_bg").hide();
})
})
</script>
<body>
<div class="header">
<div class="header-top center-x-block" id="top">
<div class="htopl fl">
<ul class="topnav">
<!-- 中国大陆下拉菜单 -->
<li class="topnav-li1">
<div>
<span>中国大陆</span>
<span class="arr">^</span>
</div>
<div class="pull-down">
<ul>
<li><a href="#" target="_blank">地理位置1</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
<li><a href="#" target="_blank">地理位置</a></li>
</ul>
</div>
</li>
<li clas
仿写淘宝首页静态.zip （60个子文件） 
仿写淘宝首页静态 image 
hh5.jpg 25KB
guess2.webp 12KB 双1.webp 1KB a2.jpg 4KB
双11-1.png 13KB footer.jpg 11KB cn3.webp 12KB footer2.jpg 2KB cn4.webp 5KB guess1.webp 7KB login.jpg 4KB cn5.webp 9KB tiaomaolog.png 527B hh2.jpg 39KB haohuo1.png 601B 双11-3.png 13KB content.png 321KB conve-3-5-24-595.png 11KB cn2.webp 7KB 双2.webp 596B a3.png 32KB cn1.webp 8KB guess-cat.png 2KB 双11.png 1KB tblog.png 1KB a5.png 27KB login2.jpg 21KB caini.png 677B erweima.png 9KB hh1.jpg 18KB 双11-5.png 12KB a1.png 28KB a4.png 30KB loginbeijing.png 3KB 双11-2.png 13KB 双11-4.png 13KB hh4.png 63KB hh3.jpg 23KB js jquery.min.js 123KB css haohuo.css 3KB content.css 6KB footer.css 824B user.css 3KB position.css 1KB guess.css 1KB header.css 2KB all.css 3KB
index.html 60KB 测试 button.html 2KB iframe.html 481B flex.html 1002B flex2.html 4KB transition.html 759B test.js 123KB images 2.jpg 69KB 6.jpg 114KB 1.jpg 112KB 5.jpg 42KB 3.jpg 27KB 4.jpg 35KB资源评论
