HTML5期末大作业
文章目录
- HTML5期末大作业
- 一、作品展示
- 二、文件目录
- 三、代码实现
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/config.css"/>
<link rel="stylesheet" href="./css/header_config.css"/>
<link rel="stylesheet" href="css/main_config.css"/>
<link rel="stylesheet" href="./css/footer_config.css"/>
<link rel="stylesheet" href="./css/subpage_config.css"/>
<script src="./js/sakura.js"></script>
<script src="js/love.js"></script>
<title>赞赏</title>
</head>
<body style="background-image: url(img/bg/bk.png);">
<header>
</header>
<div class="main">
<header class="main_header">
<div class="site_top">
<div class="site_branding">
<h1><a href="#" target="_self">たかぎ</a></h1>
</div>
<div class="user_head_photo">
<img src="img/user_photo/head_photo.jpg" width="30px" height="30px"/>
<div class="user_head_photo_menu">
<div class="user_head_photo_menu_name">
Althumi
</div>
</div>
</div>
<div class="searchbox">
<i class="fa fa-search fa-2x" aria-hidden="true" style="font-size: 26px"></i>
</div>
<div class="top_nav">
<div class="lower">
<nav class="navbar" style="display: block !important;">
<ul>
<li>
<a href="./index.html" target="_self">
<i class="fa fa-fort-awesome"></i>首页
</a>
</li>
<li>
<a href="./file.html" target="_self">
<i class="fa fa-archive faa-shake" aria-hidden="true"></i>归档
</a>
</li>
<li>
<a href="./detailed_list.html" target="_self">
<i class="fa fa-list-ul faa-vertical" aria-hidden="true"></i>清单
</a>
</li>
<li>
<a href="./mood.html" target="_self">
<i class="fa fa-calendar-o faa-tada" aria-hidden="true"></i>心情
</a>
</li>
<li>
<a href="./gallery.html" target="_self">
<i class="fa fa-camera faa-flash" aria-hidden="true"></i> 画廊
</a>
</li>
<li>
<a href="./Message_Board.html" target="_self">
<i class="fa fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板
</a>
</li>
<li>
<a href="./Friends_account.html" target="_self">
<i class="fa fa-link faa-shake" aria-hidden="true"></i>友人帐
</a>
</li>
<li>
<a href="./reward.html" target="_self">
<i class="fa fa-heart faa-pulse" aria-hidden="true"></i>赞赏
</a>
</li>
<li>
<a href="./about.html" target="_self">
<i class="fa fa-leaf faa-wrench" aria-hidden="true"></i>关于
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-magic" aria-hidden="true" onclick="window.alert('未开发，敬请期待')"></i>实验室
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="Subweb_page_centerbg">
<div class="Subweb_page_centerbg_img">
<img src="https://cdn.lixingyong/2020/08/11/18872017579305235.png"/>
</div>
<div class="Subweb_page_header">
<h1 class="Subweb_page_header_title">
感谢投喂~
</h1>
</div>
</div>
<div style="text-align: center;padding: 4%;">
<h1>WARNING!!!</h1>
<p><span style="font-weight: bold;">网站还未完工，敬请期待。</span></p>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
<footer class="site_footer">
<div class="site_info">
<p class="footer_logo" style="background-image: url(img/logo/sakura.svg);"></p>
<p>此网页由Althumi花费24小时无休止的编码的做成的</p>
</div>
<div class="footer_device">
<p>感谢给与我力量的人 <i class="fa fa-vimeo animated" style="color: #e74c3c;"></i> by Kanoln <i class="fa fa-heart animated" style="color: #e74c3c;"></i> by LSNUXIAOTAO</p>
</div>
<p> </p>
</footer>
</body>
<script src="https://eqcn.ajz.miesnfu/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 150, //小萝莉的宽度
"height": 300, //小萝莉的高度
"hOffset": 0,//小萝莉的X偏移量
"vOffset": -20//小萝莉的Y偏移量
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,//小萝莉的透明度
"opacityOnHover": 0.2
}
});
</script>
</html>
更多推荐
HTML+CSS大作业——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板
发布评论