能给一个基础文件做实例吗?
时间: 2024-03-11 09:48:32 浏览: 24
好的,这里提供一个基础的HTML文件和对应的CSS和JavaScript文件,供你参考:
HTML文件(index.html):
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三层网站</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>三层网站</h1>
</header>
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</nav>
<section>
<h2>内容区域</h2>
<article>
<h3>文章标题1</h3>
<p>文章内容1</p>
</article>
<article>
<h3>文章标题2</h3>
<p>文章内容2</p>
</article>
<article>
<h3>文章标题3</h3>
<p>文章内容3</p>
</article>
<article>
<h3>文章标题4</h3>
<p>文章内容4</p>
</article>
<article>
<h3>文章标题5</h3>
<p>文章内容5</p>
</article>
</section>
<footer>
<p>© 2021 三层网站</p>
</footer>
</body>
</html>
```
CSS文件(style.css):
```
/* 全局样式 */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
header, nav, section, footer {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
h1, h2, h3 {
margin: 0;
font-weight: normal;
}
/* 菜单样式 */
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #f00;
}
/* 文章样式 */
article {
margin: 20px 0;
}
article h3 {
font-size: 24px;
}
article p {
font-size: 16px;
}
```
JavaScript文件(script.js):
```
// 使用基本选择器选中文章标题1,并改变其颜色
$("h3:first-child").css("color", "#f00");
// 使用层次选择器选中内容区域中的所有段落,并改变其背景颜色
$("section p").css("background-color", "#ccc");
// 使用过滤选择器选中导航菜单中的第二个菜单,并改变其字体大小
$("nav li:nth-child(2) a").css("font-size", "20px");
// 为所有文章标题添加点击事件,并在点击时弹出对应的文章内容
$("article h3").click(function() {
var content = $(this).next().html();
alert(content);
});
// 为导航菜单添加鼠标移入事件,并在移入时改变菜单项的背景颜色
$("nav li").hover(function() {
$(this).css("background-color", "#f00");
}, function() {
$(this).css("background-color", "");
});
// 对文章标题进行动画操作,包括渐隐、移动、渐显
$("article h3").fadeOut(1000).animate({left: '250px'}, 1000).fadeIn(1000);
```
以上代码实现了对网页中的元素进行选择、操作、事件绑定和动画效果的功能,你可以根据自己的需求进行修改和扩展。希望对你有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)