哈哈 这个网页是一个大作业 让学生自主选择网页题目 然后复刻该网页 我选了豆瓣市集的首页 恩 做的还是有点差距 不过已经差不多了 希望能给大家一个参考
代码来啦
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>finall task</title>
<link rel="stylesheet" type="text/css" href="zmx_finall.css">
</head>
<body>
<div id="all">
<body>
<div class="nav">
<ul>
<li>
<a href="https://market.douban.com/?utm_campaign=douban_top_nav&utm_source=douban&utm_medium=pc_web">豆瓣</a>
</li>
<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>
<li>
<a href="#">阅读</a>
</li>
<li>
<a href="#">FM</a>
</li>
<li>
<a href="#">时间</a>
</li>
<li>
<a href="#">市集</a>
</li>
<li>
<a href="#">更多</a>
</li>
<li style="float:right ;margin-right:12px;">
<a href="#">登录/注册</a>
</li>
<li style="float:right; margin-right:3px;">
<a href="#">下载豆瓣客户端</a>
</li>
</ul>
</div>
<div class="top_blank">
<div class="dropdown">
<img src="personal.jpg" style="float:right;">
<div class="dropdown-content">
<p>市集/纸书订单</p><br>
<p>我的优惠券</p><br>
<p>收货地址管理</p><br>
</div>
</div>
<div id="top_img" style="text-align: center;">
<img src="top_img.jpg">
</div>
</div>
<!-- <div class="slide_img">
<img src="slide2.jpg">
</div> -->
<div id="wrap"><!-- 图片展示区 -->
<div id="inner" class="clear"><!-- 所有图片并排的块 -->
<img src="slide1.jpg" alt="">
<img src="slide2.jpg" alt="">
<img src="slide3.jpg" alt="">
<img src="slide4.jpg" alt="">
<img src="slide5.jpg" alt="">
<img src="slide6.jpg" alt="">
<img src="slide7.jpg" alt="">
</div>
<div class="paganation" id="paganation"><!-- 页面按钮区域 -->
<span class ="selected">○</span>
<span>○</span>
<span>○</span>
<span>○</span>
<span>○</span>
<span>○</span>
<span>○</span>
<!-- <span>○</span> -->
</div>
<div id="left" class="arrow"><</div><!-- 向左切换按钮 -->
<div id="right" class="arrow">></div><!-- 向右切换按钮 -->
</div>
<div class="middle_container">
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block1_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣相册</h5>
<p class="product-desc">回忆，是一种相见的方式</p>
<div class="product-prices">
<span class="sale-price">¥136</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block1_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣咖啡</h5>
<p class="product-desc">收藏世界风味</p>
<div class="product-prices">
<span class="sale-price">¥56</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block1_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣晴雨伞</h5>
<p class="product-desc">防水防晒，真正晴雨两用</p>
<div class="product-prices">
<span class="sale-price">¥138</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block2_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣自然系列餐具</h5>
<p class="product-desc">吃饭，是很重要的小事</p>
<div class="product-prices">
<span class="sale-price">¥138</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block2_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆猫T恤</h5>
<p class="product-desc">精棉制造，不易变形</p>
<div class="product-prices">
<span class="sale-price">¥88</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block2_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣 丝巾上的美术馆</h5>
<p class="product-desc">天然桑蚕丝面料</p>
<div class="product-prices">
<span class="sale-price">¥178</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block3_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣藏书票马克杯</h5>
<p class="product-desc">书与水，时刻在</p>
<div class="product-prices">
<span class="sale-price">¥65</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block3_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣藏书票笔记本</h5>
<p class="product-desc">扉页宣纸，植入生长植物</p>
<div class="product-prices">
<span class="sale-price">¥58</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block3_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣冻顶乌龙茶</h5>
<p class="product-desc">源自台湾 地道好茶</p>
<div class="product-prices">
<span class="sale-price">¥59</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block4_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣软面笔记本</h5>
<p class="product-desc">质地柔软，纯色设计</p>
<div class="product-prices">
<span class="sale-price">¥39</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block4_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣经典帆布包</h5>
<p class="product-desc">百搭耐用 四色可选</p>
<div class="product-prices">
<span class="sale-price">¥149</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block4_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣相册</h5>
<p class="product-desc">回忆，是一种相见的方式</p>
<div class="product-prices">
<span class="sale-price">¥136</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block5_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣精品挂耳咖啡</h5>
<p class="product-desc">甄选精品咖啡</p>
<div class="product-prices">
<span class="sale-price">¥56</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block5_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆猫马克杯</h5>
<p class="product-desc">回忆，是一种相见的方式</p>
<div class="product-prices">
<span class="sale-price">¥58</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block5_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣读书笔记</h5>
<p class="product-desc">为深度阅读而设计</p>
<div class="product-prices">
<span class="sale-price">¥78</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block6_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣相册</h5>
<p class="product-desc">回忆，是一种相见的方式</p>
<div class="product-prices">
<span class="sale-price">¥136</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block6_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣搪瓷杯</h5>
<p class="product-desc">手工打造 四款文字可选</p>
<div class="product-prices">
<span class="sale-price">¥68</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block6_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣收藏夹</h5>
<p class="product-desc">万千票据 一本搞定</p>
<div class="product-prices">
<span class="sale-price">¥99</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block7_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">[遇见你]系列笔记本</h5>
<p class="product-desc">落笔顺畅 书写自如</p>
<div class="product-prices">
<span class="sale-price">¥48</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block7_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">线装笔记本</h5>
<p class="product-desc">轻巧便捷，记录灵感</p>
<div class="product-prices">
<span class="sale-price">¥18</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
<div class="block_part">
<div class="block_img">
<img src="block7_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣猫咪年品</h5>
<p class="product-desc">小猫咪 过大年</p>
<div class="product-prices">
<span class="sale-price">¥136</span>
<span class="product-tag">
新品上市
</span>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block_part">
<a href="#">
<div class="block_img">
<img src="block8_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">[三刻]双肩包</h5>
<p class="product-desc">双肩斜跨 瞬间变形</p>
<div class="product-prices">
<span class="sale-price">¥499</span>
</div>
</div>
</a>
</div>
<div class="block_part">
<a href="#">
<div class="block_img">
<img src="block8_2.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣电影日历2019</h5>
<p class="product-desc">电影 就是生活</p>
<div class="product-prices">
<span class="sale-price">¥159</span>
</div>
</div>
</a>
</div>
<div class="block_part">
<a href="#">
<div class="block_img">
<img src="block8_3.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣年品</h5>
<p class="product-desc">豆瓣年品 年在一起</p>
<div class="product-prices">
<span class="sale-price">¥78</span>
</div>
</div>
</div>
</a>
</div>
<div class="block">
<div class="block_part">
<div class="block_img">
<img src="block9_1.jpg">
</div>
<div class="product-info">
<h5 class="product-title">豆瓣2019日程本</h5>
<p class="product-desc">记录日常 规划日程</p>
<div class="product-prices">
<span class="sale-price">¥88</span>
</div>
</div>
</div>
</div>
</div>
<div class="group_container">
<div class="group-hd">
<h4>官方小组</h4>
<a href="#" class="more" target="_blank">
查看更多 >
</a>
</div>
<ul class="group-topics" >
<li class="group-topic-item">
<div class="topic-update-time">
06-01
</div>
<span class="topic-comment-amount">
<img src="topic1.jpg" style="width: 40px;height: 30px;vertical-align:text-top;">
</span>
<a href="#"
class="topic-title"
target="_blank">
【申请已结束】邀请你免费试用豆瓣自然系列餐具！陪你好好吃饭。
</a>
</li>
<li class="group-topic-item">
<div class="topic-update-time">
06-20
</div>
<span class="topic-comment-amount">
<img src="topic2.jpg" style="width: 40px;height: 30px;vertical-align:text-top;">
<!-- <em>12</em> -->
</span>
<a href="#"
class="topic-title"
target="_blank">
【上新通知】豆瓣自然系列餐具，陪你好好吃饭。
</a>
</li>
<li class="group-topic-item">
<div class="topic-update-time">
06-16
</div>
<span class="topic-comment-amount">
<img src="topic3.jpg" style="width: 40px;height: 30px;vertical-align:text-top;">
<!-- <em>4</em> -->
</span>
<a href="#"
class="topic-title"
target="_blank">
【补货通知】豆瓣笔记本 遇见·你 补货啦
</a>
</li>
</ul>
</div>
<div class="topic_container">
<div class="topics-hd">
<h4>热门活动 </h4>
</div>
<div class="topics-list" style="margin-left: 0;">
<a href="#" class="topic-item">
<div class="topic-photo">
<img src="bottom1_1.jpg">
</div>
<div class="topic-info">
<p class="topic-title">
#豆瓣年品晒单#
</p>
<p class="topic-desc">
新年，总不能少了年货buff加持
</p>
<div class="topic-button">
立即查看
</div>
</div>
</a>
</div>
<div class="topics-list">
<a href="#" class="topic-item">
<div class="topic-photo">
<img src="bottom1_2.jpg">
</div>
<div class="topic-info">
<p class="topic-title">
#豆瓣经典帆布包#
</p>
<p class="topic-desc">
一个贴心“能装”的好包包
</p>
<div class="topic-button">
立即查看
</div>
</div>
</a>
</div>
<div class="topics-list" style="margin-left: 0;">
<a href="#" class="topic-item">
<div class="topic-photo">
<img src="bottom2_1.jpg">
</div>
<div class="topic-info">
<p class="topic-title">
#晒出你的豆瓣电影日历#
</p>
<p class="topic-desc">
你打算如何用这本日历点缀生活，我们想邀请你和豆友分享。
</p>
<div class="topic-button">
立即查看
</div>
</div>
</a>
</div>
<div class="topics-list">
<a href="#" class="topic-item">
<div class="topic-photo">
<img src="bottom2_2.jpg">
</div>
<div class="topic-info">
<p class="topic-title">
#2019年你计划中最重要的事#
</p>
<p class="topic-desc">
来聊一聊你新一年的“雄心壮志”
</p>
<div class="topic-button">
立即查看
</div>
</div>
</a>
</div>
</div>
<div class="footer">
<div class="footer-left">
<span class="logo">
<img src="footer_logo.jpg">
</span>
<div class="info">
<p>
© 2019 market.douban.com, all rights reserved
<a href='#'target='_blank'>北京豆瓣豆品文化有限公司</a>
</p>
<p>
<a href='#'target='_blank'>食品经营许可证: JY11105111524423</a>
<a href='#'target='_blank'>出版物经营许可证：新出发京批字第直170330号</a>
</p>
</div>
</div>
<div class="footer-right">
<div class="footer-kits">
<a class="item" id="openMarketInfo">
<img src="state.jpg" style="vertical-align: text-top; ">
<span>购物说明</span>
</a>
<a class="item" id="openMarketService">
<img src="contract.jpg" style="vertical-align: text-top; margin-left: 37px;">
<span>联系客服</span>
</a>
<a class="item" target="_blank" href="#" style="vertical-align:text-top;margin-left:37px;">
<img src="advice.jpg" >
<span>意见反馈</span>
</a>
<a class="item" href="#">
<img src="contract.jpg" style="vertical-align:text-top;margin-left: 37px;" >
<span>商务合作</span>
</a>
</div>
<div class="contract_forms">
<img src="footer_forms.jpg">
</div>
</div>
</div>
</body>
</html>
css完整代码：
*{
margin:0px;
}
body{
width: 100%;
height:1200px;
overflow-y:auto;
overflow-x: hidden;
}
.nav{
width:100%;
height: 35px;
}
.nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #545652;
}
a{
color:black;
text-decoration: none;
}
.nav li {
float: left;
}
.nav li a
{
display: block;
color: lightgrey;
text-align: center;
padding: 6px 12px;
text-decoration: none;
font-size: 10px;
}
.top_blank{
width: 100%;
height: 56px;
margin: 3px 0px;
background-color: white;
padding: 12px 16px;
}
#top_img
{
display: inline-block;
float:left;
margin-left:7.8%;
margin-top:-2.8%;
}
.dropdown {
position: relative;
display: inline-block;
margin-top:0.7%;
margin-left: 83%;
}
.dropdown-content {
display: none;
position: absolute;
background-color:white;
color: lightgrey;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1);
padding: 5px 5px;
font-size: 13px;
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
}
.block{
margin-top:4%;
width: 100%;
height:410px;
border: solid;
border-radius: 10px;
border:white;
}
.middle_container
{
width: 100%;
background-color: white;
}
.block_part
{
float: left;
width: 20%;
margin-left: 10%;
}
.product-info{
margin-top: 4%;
}
.product-title{
font-size:18px;
color: #3E3A39;
font-weight: lighter;
padding: 2px 0px;
}
.product-desc{
font-size: 15px;
color: lightgrey;
padding: 2px 0px;
}
.product-prices
{
display: inline-block;
}
.sale-price
{
font-size: 20px;
color:#DD1944;
}
.product-tag
{
font-size:10px;
color: #DD1944;
border: 1px solid #DD1944;
padding: 1px 8px;
margin-left: 3px;
}
.group_container
{
margin-top: 7%;
margin-left: 10%;
margin-right: 10%;
}
ul {
list-style-type: none;
}
.group-hd
{
display: inline;
}
.group-hd h4{
font-size: 24px;
font-weight: lighter;
color: #44883E;
display:table-cell;
vertical-align:middle;
}
.more{
float: right;
color: grey;
display:table-cell;
vertical-align:middle;
}
.group-topics
{
display: inline;
}
.group-topic-item
{
font-size:18px;
color: grey;
padding: 10px 0px;
border-bottom:1px solid #EEEEEE;
}
.topic-update-time
{
float: right;
margin-right: 0px;
}
.topic-title
{
font-size:16px;
color: #3E3A39;
font-weight: lighter;
padding: 2px 0px;
display: inline;
}
.topic_container{
margin-top: 4%;
margin-left: 10%;
height: 500px;
}
.topics-hd h4
{
font-size: 24px;
font-weight: lighter;
color: #44883E;
}
.topics-list
{
width:45%;
float: left;
margin-left:2%;
margin-top: 3%;
background-color: #F3F2F2;
}
.topic-photo
{
float: left;
}
.topic-info
{
float: left;
margin-left:20px;
margin-top: 10%;
}
.topic-title
{
font-size: 16px;
font-weight: 500px;
color: #44883E;
}
.topic-desc
{
font-size: 10px;
color:#A9A7A8;;
margin-top: 5%;
}
.topic-button
{
width: 60px;
height: 18px;
font-size: 10px;
color: white;
padding: 4px 20px;
background-color:#44883E;
margin-top: 5%;
}
.footer-left
{
float: left;
margin-left: 10%;
margin-top: 4%;
}
.footer-right
{
float: left;
margin-left: 10%;
}
.footer-right span
{
font-size: 15x;
color:#A9A7A8;
}
.footer{
width: 100%;
height: 180px;
margin-top: 6%;
background-color: #F3F2F2;
}
.footer-left a:hover
{
text-decoration: underline;
}
.footer-right a:hover
{
color: lightgrey;
}
.logo
{
margin-top: 200px;
}
.info, .info a{
color:#A9A7A8;
font-size:10px;
}
.item
{
}
.footer-kits
{
margin-top: 50px;
}
.contract_forms
{
margin-top: 5%;
margin-left:80%;
}
/* .topic-comment-amount
{
position: relative;
background-color: white;
width: 35px;
height: 28px;
display: flex;
justify-content: center;
border:1px solid grey;
font-size: 10px;
}*/
*{
margin:0;
padding:0;
border:0;
}
.clear{
*zoom:1;
}
.clear:after{
visibility: none;
content:"";
display:block;
clear:both;
height:0;
}
#wrap{
width: 100%;
height:400px;
margin:0 auto;
position:relative;
background: white;
overflow: hidden;
}
#inner{
width: 1000%;
height:100%;
position:absolute;
left:0;
top:0;
}
#inner img{
width:10%;
height:100%;
float: left;
}
.paganation{
width: 100%;
position: absolute;
bottom:10px;
text-align:center;
}
.paganation span{
padding:2px 6px;
background: #F2F2F2;
color:black;
border-radius:50%;
cursor: pointer
}
.paganation .selected{
background: aliceblue;
color:white;
}
.arrow{
position:absolute;
top:0;
line-height: 400px;
vertical-align: middle;
text-align: center;
color:lightgrey;
cursor: pointer;
font-size: 60px;
}
#right{
right: 0;
}
.arrow:hover{
background:grey;
}
JavaScript代码：
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right");
var clickFlag=true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index=0;//记录每次滑动图片的下标
var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
//定义图片滑动的函数
function AutoGo(){
var start=inner.offsetLeft;//获取移动块当前的left的开始坐标
var end=index*Distance*(-1);//获取移动块移动结束的坐标。
//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
var change=end-start;//偏移量
var timer;//用计时器为图片添加动画效果
var t=0;
var maxT=30;
clear();//先把按钮状态清除,再让对应按钮改变状态
if(index==spanList.length){
spanList[0].className="selected";
}else{
spanList[index].className="selected";
}
clearInterval(timer);//开启计时器前先把之前的清
timer=setInterval(function(){
t++;
if(t>=maxT){//当图片到达终点停止计时器
clearInterval(timer);
clickFlag=true;//当图片到达终点才能切换
}
inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
if(index==spanList.length&&t>=maxT){
inner.style.left=0;
index=0;
//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
}
},17);
}
//编写图片向右滑动的函数
function forward(){
index++;
//当图片下标到最后一张把小标换0
if(index>spanList.length){
index=0;
}
AutoGo();
}
//编写图片向左滑动函数
function backward(){
index--;
//当图片下标到第一张让它返回到倒数第二张，
//left值要变到最后一张才不影响过渡效果
if(index<0){
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
}
AutoGo();
}
//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);
//设置鼠标悬停动画停止
wrap.οnmοuseοver=function(){
clearInterval(time);
}
wrap.οnmοuseοut=function(){
time=setInterval(forward,3000);
}
//遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++){
spanList[i].οnclick=function(){
index=this.innerText-1;
AutoGo();
}
}
//左切换事件
left.οnclick=function(){
if(clickFlag){
backward();
}
clickFlag=false;
}
//右切换事件
right.οnclick=function(){
if(clickFlag){
forward();
}
clickFlag=false;
}
//清除页面所有按钮状态颜色
function clear(){
for(var i=0;i<spanList.length;i++){
spanList[i].className="";
}
}
</script>
运行截图：
扫一扫
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
