Skip to content

W
WebCourse

御承扬 / WebCourse

通知 1
Star 0
Fork 0
W
WebCourse

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3bfe610c 编写于 作者: 7 7wc98#14
浏览文件
操作

Update

上级 9c77e694
隐藏空白更改
内联 并排
Showing with 140 addition and 26 deletion
src/main/resources/templates/Home.html
浏览文件 @ 3bfe610c
<!DOCTYPE html>
<html lang="en">
<head>
<mete name="viewport" content="width = device-width,initial-scale=1.0"></mete>
<meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/http_cdn.staticfile.org_twitter-bootstrap_3.3.7_css_bootstrap.css">
<style>
.fakeimg {
height: 200px;
background: #aaa;
<title>Home</title>
<script src="../static/js/jquery-3.3.1/jquery-3.3.1.js"></script>
<script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../static/bootstrap-3.3.7/css/bootstrap.min.css">
<style type="text/css">
body{
background-color: gray;
}
@media screen and (min-width: 790px) {
body{
background-color: #bdd4e9;
font-size: 16px;
}
}
@media screen and (min-width: 970px){
body{
font-size: 18px;
background-color: #9d9f96;
}
}
@media screen and (min-width: 1000px){
body{
font-size: 20px;
background-color: #899f98;
}
}
</style>
<title>御承扬的家乡</title>
</head>
<body>
<div id="head" class="jumbotron text-center" style="margin-bottom:0">
<h1>Web 课实验一</h1>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.html">御承扬</a>
<a class="navbar-brand" href="#">御承扬</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="Home.html">家乡介绍</a></li>
<li><a href="Person.html">个人介绍</a></li>
<li><a href="Buju.html">页面布局</a></li>
<li class="active"><a href="Home.html">首页</a> </li>
<li><a href="Person.html">站主相关 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">网页布局示例 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Buju.html">页面布局</a></li>
<li><a href="test4.html">元素效果</a></li>
<li role="separator" class="divider"></li>
<li><a href="useJavascript.html">JS使用</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
......
src/main/resources/templates/Person.html
浏览文件 @ 3bfe610c
<!DOCTYPE html>
<html lang="en">
<head>
<mete name="viewport" content="width = device-width,initial-scale=1.0"></mete>
<meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/http_cdn.staticfile.org_twitter-bootstrap_3.3.7_css_bootstrap.css">
<link rel="stylesheet" href="../static/css/person.css">
<title>个人主页</title>
<script src="../static/js/jquery-3.3.1/jquery-3.3.1.js"></script>
<script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../static/bootstrap-3.3.7/css/bootstrap.min.css">
<style>
body{
background-color: gray;
}
@media screen and (min-width: 790px) {
body{
background-color: #bdd4e9;
font-size: 16px;
}
}
@media screen and (min-width: 970px){
body{
font-size: 18px;
background-color: #9d9f96;
}
}
@media screen and (min-width: 1000px){
body{
font-size: 20px;
background-color: #899f98;
}
}
.fakeimg {
height: 200px;
background: #aaa;
......@@ -171,22 +195,34 @@
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.html">御承扬</a>
<a class="navbar-brand" href="#">御承扬</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="Home.html">家乡介绍</a></li>
<li class="active"><a href="Person.html">个人介绍</a></li>
<li><a href="Buju.html">页面布局</a></li>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a href="Home.html">首页</a> </li>
<li class="active"><a href="Person.html">站主相关 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">网页布局示例 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Buju.html">页面布局</a></li>
<li><a href="test4.html">元素效果</a></li>
<li role="separator" class="divider"></li>
<li><a href="useJavascript.html">JS使用</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
......
src/main/resources/templates/jq.html 0 → 100644
浏览文件 @ 3bfe610c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery Testing</title>
<script src="../static/js/jquery-3.5.0/jquery-3.5.0.js"></script>
<style>
body{
background-color: white;
}
@media screen and (min-width: 790px){
body{
background-color: red;
}
}
@media screen and (min-width: 970px){
body{
background-color: green;
}
}
</style>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<script>
function appendText(){
let txt1="<p>文本1。</p>"; // 使用 HTML 标签创建文本
let txt2=$("<p></p>").text("文本2。"); // 使用 jQuery 创建文本
let txt3=document.createElement("p");
txt3.innerHTML="文本3。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
<button onclick="appendText()">追加文本</button>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或