代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
.horiz {
float: left;
list-style-type: none;
margin: 10px;
}
</style>
</head>
<body>
<h2>汽车之家</h2>
<ul id="list">
<li>新能源
<ul>
<li>MODEL X</li>
<li>比亚迪 秦</li>
<li>帝豪新能源</li>
<li>荣威RX5新能源</li>
</ul>
</li>
<li>SUV
<ul>
<li>汉兰达</li>
<li>哈弗H6</li>
<li>WEY VV7</li>
<li>途观</li>
</ul>
</li>
<li>跑车
<ul>
<li>Mustang</li>
<li>保时捷911</li>
<li>科迈罗</li>
<li>日产GT-R</li>
</ul>
</li>
</ul>
<!-- 在使用jquery之前,一定要将js库先引入 -->
<!-- 第一种方法:通过本地文件引入 -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<!-- 第二种方法:通过cdn在线引入 -->
<!-- $(document).ready(function(){
$('#list>li').addClass('horiz')
})document -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('h2').click(function(){
alert('www.autohome.com.cn')
})
$(document).ready(function(){
$('#list>li').addClass('horiz')
})
// 简写：
// $(function(){
// $('#list>li').addClass('horiz')
// })
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
