🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 1、首页
- 2、剧集列表页
- 3、剧集详情播放页
- 4、资讯列表页
- 5、登录注册页
- 三、代码目录
- 四、网站代码
- HTML代码
- CSS代码
- 五、源码获取
一、作品介绍
🏷️本套采用DIV+CSS布局,使用Javacsript代码,共有5个页面
。
🏷️Javacsript主要是实现首页图片轮播效果
二、作品演示
1、首页
2、剧集列表页
3、剧集详情播放页
4、资讯列表页
5、登录注册页
三、代码目录
四、网站代码
HTML代码
<div class="wrap">
<div class="header base">
<div class="logo">
<img src="./img/logo.png">
</div>
<div class="links">
<a href="index.html">首页</a>
<a href="juji.html">剧集</a>
<a href="zixun.html">资讯</a>
</div>
<div class="search">
<form>
<input type="" name="" placeholder="蜡笔小新">
<button>搜索</button>
</form>
</div>
<div class="links">
<a href="login.html" style="font-size: 14px;">登录/注册</a>
</div>
</div>
<div class="banner base">
<img src="./img/left_jiantou.png" class="left" alt="">
<img src="./img/right_jiantou.png" class="right" alt="">
<img data-index="1" class="banner_img active" src="./img/banner1.jpg" alt="">
<img data-index="2" class="banner_img " src="./img/banner2.png" alt="">
<img data-index="3" class="banner_img " src="./img/banner3.jpg" alt="">
<div class="banner_index">
<div data-index="1" class="index active"></div>
<div data-index="2" class="index"></div>
<div data-index="3" class="index"></div>
</div>
</div>
CSS代码
* {
padding: 0;
margin: 0;
}
body {
background-color: #0fabff;
}
.base {
width: 1200px;
margin: 0 auto;
}
.wrap {
background-color: #fff;
width: 1260px;
margin: 0 auto;
padding: 0 30px 20px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.header .logo {
margin-right: 80px;
}
.header .logo img {
height: 80px;
}
.search {
margin-left: auto;
}
.search form {
display: flex;
align-items: center;
border: 2px solid #0fabff;
}
.search form input {
height: 36px;
border: 0;
padding-left: 5px;
width: 280px;
}
.search form button {
background-color: #0fabff;
height: 36px;
border: 0;
padding: 0 15px;
color: #fff;
}
.links a {
color: #333;
font-size: 16px;
margin-left: 40px;
text-decoration: none;
}
.links a:hover {
color: #000;
text-decoration: underline;
}
.banner {
position: relative;
height: 605px;
}
.banner_img {
width: 100%;
height: 605px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 1.2s ease;
}
.banner_img.active {
opacity: 1;
transition: all 1.2s ease;
}
.banner_index {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 20px;
cursor: pointer;
width: 100%;
}
.banner_index .index {
display: flex;
width: 16px;
height: 16px;
border-radius: 16px;
border: 2px solid #fff;
background-color: #dbdbdc;
margin: 0 6px;
}
.banner_index .index.active {
background-color: #65aeb9;
}
五、源码获取
🥇 ~ 关注我,点赞博文~
每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]
三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧