效果图
部分代码
index.htnl
<!DOCTYPE HTML>
<html>
<head>
<title>个人主页介绍页</title>
<meta name="keywords" content="孤客个人主页介绍页">
<meta name="description" content="孤客个人主页介绍页 ">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="/">孤客</a></h1>
<nav id="nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="https://www.baidu.com">会员</a>
<li><a href="https://www.baidu.com">下载</a></li>
<li><a href="https://www.baidu.com" target="_blank" class="button special">博客</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h2>孤客</h2>
<p>我才不要那么没用!!<br />
千里之行,始于足下!</p>
</header>
<span class="image"><img src="images/head_portrait.jpg" alt="孤客资源" /></span>
</div>
<a href="#one" class="goto-next scrolly">Next</a>
</section>
<!-- One -->
<section id="one" class="spotlight style1 bottom">
<span class="image fit main"><img src="images/pic001.jpg" alt="关于我们" /></span>
<div class="content">
<div class="container">
<div class="row">
<div class="4u 12u$(medium)">
<header>
<h2>关于我们</h2>
<p>一个一天PV只有1000的小站,但还是想要好好做下去....</p>
</header>
</div>
<div class="4u 12u$(medium)">
<p>公告:
<br />提供各种动漫网站源码的下载,弹幕网,个人引导页,导航网站...
</p>
</div>
<div class="4u$ 12u$(medium)">
<p>孤客
<br />成立于2023年六一儿童节,目标是<建设
<br />国内最大的二次元资源站,并在为此努力的路
<br />上。我们分享来自全球的动漫资源,无门槛下
<br />载资源给你最佳的体验。
</p>
</div>
</div>
</div>
</div>
<a href="#two" class="goto-next scrolly">Next</a>
</section>
<!-- Two -->
<section id="two" class="spotlight style2 right">
<span class="image fit main"><img src="images/pic002.jpg" alt="" /></span>
<div class="content">
<header>
<h2>-ACG下载、互动小站</h2>
<p>这个是八月一直在维护的网站呢</p>!
</header>
<p>
八月经常忘记更新,还希望大家多多投稿!
<br />其实还是每天按时审核的呢!
<ul class="actions">
<li><a href="https://www.baidu.com" class="button">进入孤客</a></li>
</ul>
</div>
<a href="#three" class="goto-next scrolly">Next</a>
</section>
<!-- Three -->
<section id="three" class="spotlight style3 left">
<span class="image fit main bottom"><img src="images/pic003.jpg" alt="" /></span>
<div class="content">
<header>
<h2>源码</h2>
<p>一个最近才开始涉及的板块。</p>
</header>
<p>各种动漫网站源码的下载,弹幕网,个人引导页,导航网站,只要是动漫风的网页都很喜欢 </p>
<ul class="actions">
<li><a href="https://www.baidu.com" target="_blank" class="button">进入萌源码</a></li>
</ul>
</div>
<a href="#four" class="goto-next scrolly">Next</a>
</section>
<!-- Four -->
<section id="four" class="wrapper style1 special fade-up">
<div class="container">
<header class="major">
<h2>网站设计</h2>
<p>本人可以为大家收费做一些网站呢!</p>
</header>
<div class="box alt">
<div class="row uniform">
<section class="4u 6u(medium) 12u$(xsmall)">
<span class="icon alt major fa-area-chart"></span>
<h3>动漫视频网站</h3>
<p>在我的萌源码板块有几套视频模板,也是弹幕网的模板,在这里50/站,擦边球网站赚钱很快的。</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall)">
<span class="icon alt major fa-comment"></span>
<h3>网站仿站</h3>
<p>难度不是很大的站,其实都是可以仿的吧,先看我有没有能力仿,可以再交易,主要是看类型</p>
</section>
<section class="4u$ 6u(medium) 12u$(xsmall)">
<span class="icon alt major fa-flask"></span>
<h3>广告位出售</h3>
<p>权1小站,日pv1000,出售广告位,需要的联系K网下边的QQ就可以了。首页40/月,文章页35/月,下载页30/月</p>
</section>
</footer>
</div>
</section>
<!-- Five -->
<section id="five" class="wrapper style2 special fade">
<div class="container">
<header>
<h2>联系方式</h2>
<p>这里是我的联系方式呢.</p>
</header>
</div>
<p>邮箱:2465829308@qq.com</p>
<p>QQ:2465829308</p>
<audio autoplay="autoplay"><source src="/mengzhan.mp3" type="audio/mpeg" /></audio>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<!--<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>-->
</ul>
<ul class="copyright">
<li>© Night. All rights reserved.</li><li>Design: <a href="https://www.baidu.com">Night</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
领取源码
超萌二次元动漫个人主页HTML源码
- 📢博客主页:孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正!
- 📢本文由孤客原创,若侵权联系作者,首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻