📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
B42JP 狐妖小红娘(6页)html+css+js
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE HTML>
<html>
<head>
<title>首页</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--coustom css-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--script-->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="banner-background" id="to-top">
<div class="container">
<div class="nav-back">
<div class="navigation">
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="about.html">分篇剧情</a></li>
<li><a href="juese.html">动漫角色</a></li>
<li><a href="jieshuo.html" >用语解说</a></li>
<li><a href="news.html">相关新闻</a></li>
<li><a href="contact.html">给我留言</a></li>
</ul>
</div>
</nav>
<div class="clearfix"></div>
</div>
<div class="logo">
<img src="images/logo.png" width="150"/>
</div>
<div class="banner-slider">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/1.jpg" alt="dog" class="img-responsive">
</div>
<div class="item">
<img src="./images/2.jpg" alt="cat" class="img-responsive">
</div>
<div class="item">
<img src="./images/4.jpg" alt="wolfdog" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--header-ends-->
<!--content-->
<div class="our-products">
<div class="container">
<div class="products-gallery">
<h2>动漫人物</h2>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/b.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>白月初</h3>
<p>财迷，吃货。<br/>史上最厉害的无节操道士。<br/>涂山苏苏的未婚夫。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/c.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山苏苏</h3>
<p>涂山姐妹的三当家。<br/>
天然呆妖力弱，<br/>目标是成为优秀的狐妖。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a> </p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/d.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山雅雅</h3>
<p>涂山姐妹的大当家，<br/>如今的涂山一族最强者。<br/>
擅长的技能是冰系法术。</p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="col-md-3 arr">
<div class="bg">
<img src="./images/e.jpg" alt="pet" class="img-responsive">
<span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
<div class="caption">
<h3>涂山容容</h3>
<p>涂山姐妹二当家。<br/>
拥有涂山一族最厉害的头脑。<br/>
负责管理涂山的所有产业。 </p>
<p><a href="#" class="btn btn-danger" role="button">More</a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--content-ends-->
<!--footer-->
<div class="footer">
<p>Copyright © All rights reserved.</p>
</div>
</body>
</html>
🏠CSS样式代码
.navbar-default .navbar-nav>li>a:focus{
color: #fff;
background-color: #FF6666;
}
.logo {
text-align: center;
margin:0;
padding:16px 0px 26px;
}
.logo h1 {
margin: 0;
}
.logo a {
font-family: 'Quicksand', sans-serif;
font-weight: bold;
font-size: 35px;
text-decoration: none;
color: #000;
}
.logo a span.hlf{
text-decoration: none;
color: #FF6666;
}
.carousel-indicators .active {
background-color: #FF6666;
}
.carousel-indicators li {
border: 1px solid #444343;
}
/*--header-nav--*/
/*--our-products--*/
.our-products {
background-color: #fff;
}
.products-gallery {
margin: 0em 0em 5em;
}
.products-gallery h2 {
text-align: center;
font-weight: 400;
font-size: 3em;
margin: 0px;
color: #FDA2A2;
padding: 1em 0em;
font-family: 'Quicksand', sans-serif;
}
.caption {
text-align: center;
padding: 50px 40px 0px;
}
.arr:hover{
padding: 0;
transform: scale(1.02,1.02);
transition: 0.5s all ease-in-out;
cursor:pointer;
}
.arr {
padding: 0;
}
.bg {
background-color: #f9e4ca;
margin: 0px 8px;
border-radius: 5px;
position: relative;
}
.arr img{
width:100%;
border-bottom: 6px solid #E55151;
border-radius: 5px 5px 0px 0px;
}
.about-pg{
border-top: 3px solid rgb(255, 192, 203);
padding: 3em 0em 3em;
}
.about-pg>h3{
font-size: 3em;
font-weight: 400;
text-align: center;
color: #FDA2A2;
margin: 0px 0px 45px;
text-transform:uppercase;
font-family: 'Quicksand', sans-serif;
}
.about-list{padding:0 40px;margin-top:20px;}
.about-list img{width:160px;float:left;margin-right:30px;margin-bottom:20px;}
.about-list p{line-height:25px;}
.l{border-bottom:1px solid #ffc0cb;box-shadow: 1px 1px 10px #ffc0cb;}
/*--about--*/
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
