2022年1月 – 东方无解

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<script src="/jquery.js"></script> //注意有/，加载效果失败
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>学习前端课程</p>
<p>深入浅出前端系列</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>学习前端课程</p>
<p>深入浅出前端系列</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New tec</title>
</head>
<body>
    <div id="header">
        <h1>四川省</h1>
    </div>
    <div id="nav">
        成都<br>
        德阳<br>
        绵阳<br>
        遂宁<br>
    </div>
    <div id="section">
    <h1>CD</h1>
    <p>
        成都历史悠久，有“天府之国”、“蜀中江南”、“蜀中苏杭”的美称。据史书记载，大约在公元前5世纪中叶的古蜀国开明王朝九世时将都城从广都樊乡（双流）迁往成都，构筑城池。 关于成都一名的来历，据《太平环宇记》记载，是借用西周建都的历史经过，取周王迁岐“一年而所居成聚，二年成邑，三年成都”而得名成都。蜀语“成都”二字的读音就是蜀都。 “‘成’者‘毕也’‘终也’”，成都的含义“就是蜀国‘终了的都邑’，或者说‘最后的都邑’。五代十国时，后蜀皇帝孟昶偏爱芙蓉花，命百姓在城墙上种植芙蓉树，花开时节， 成都“四十里为锦绣”，故成都又被称为芙蓉城，简称“蓉城”。2001年2月8日出土的金沙遗址，已经将成都建城历史从公元前311年提前到了公元前611年。
    </p>
    <p>

</div>
    <div id="footer">
        Copyright www.tcc.pub
    </div>
</body>
    <style>
        #header {
            background-color:darkblue;
            color:white;
            text-align:center;
            padding:10px;
        }
        #nav {
            line-height:30px;
            background-color:#eeeeee;
            height:400px;
            width:100px;
            float:left;
            padding:20px;
        }
        #section {
            width:350px;
            float:left;
            padding:10px;
        }
        #footer {
            background-color:black;
            color:white;
            clear:both;
            text-align:center;
            padding:5px;
        }
    </style>
</html>

月份：2022年1月

调用jquery时，注意路径的引用

前端测试