首页 前端知识 HTML静态网页作业(HTML CSS JS)——蜡笔小新动漫网页设计制作(5个页面)

HTML静态网页作业(HTML CSS JS)——蜡笔小新动漫网页设计制作(5个页面)

2024-06-08 09:06:51 前端知识 前端哥 565 373 我要收藏

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
    • 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.想要获取本文源码,点击前往吧

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11472.html
标签
评论
发布的文章

echarts柱状图自动轮播

2024-06-16 01:06:46

Echarts--markPoint属性

2024-06-16 01:06:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!