20190326网页实训知识总结

最新推荐文章于 2021-06-09 18:03:20 发布

zytnice

最新推荐文章于 2021-06-09 18:03:20 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/zytnice/article/details/88903379

版权

20190326

姓名：朱杨涛学号：1722230168

案例：使用不同方法编写网页导航栏

1.使用html加css样式编写导航栏

<head>
 <style>
        *{margin:0; padding:0;}
        #nav{background-color: #e9efa3;
            width:600px;
            height:20px;
            margin:0 auto;
        }
        ul li{
            text-decoration: none;float:left;line-height: 20px;text-align: center;margin:0 auto;position:relative;
        }
        a{text-decoration: none;color:#33bba5;padding:0 10px;width:100px;}
        a:hover{
            background-color: antiquewhite;color: #55f0ff;
        }
        ul li ul{position:absolute;top:20px;left:0px;}
        ul li ul li{float:none;background-color: #c5ffb8;margin:1px 0;display:none;}
        ul li ul li a{padding:0px;}
        ul li:hover ul li{display:block;}
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
        <ul>
        <li><a href="#">web实战</a></li>
        <li><a href="#">服务端技术</a></li>
        <li><a href="#">python开发</a></li>
 
        </ul>
        </li>
        <li><a href="#">学习中心</a></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>

2.使用js编写导航栏

<script>
			function divDisplay(li){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "list-item";
			}
			function div(li){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "none";
			}
			
		</script>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="#">首页</a>
				<>
				<li onmouseout="divDisplay(this)" onmouseleave="div(this)">
					<a href="#">课程大厅</a>
					<ul id="one">
						<li>
							<a href="#">web网页实战</a>
						<>
						<li>
							<a href="#">服务端技术</a>
						<>
						<li>
							<a href="#">Python技术</a>
						<>
					</ul>
				<>
				<li>
					<a href="#">学习中心</a>
				<>
				<li onmouseout="divDisplay(this)" onmouseleave="div(this)">
					<a href="#">经典案例</a>
					<ul id="two">
						<li>
							<a href="#">Java</a>
						<>
						<li>
							<a href="#">HTML</a>
						<>
						<li>
							<a href="#">C#</a>
						<>
					</ul>
				<>
				<li>
					<a href="#">关于我们</a>
				<>
			</ul>
		</nav>
	</body>
<ml>

3.使用jQuery编写导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        var p1=document.getElementById()
        p1.style.backgroundColor='red'
        p1.style.width='50px'
        p1.style.height='50px'
        
        
    </script>
</head>
<body>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</body>
</html>

jQuery基础语法：

1.jQuery选择器

jQuery选择器可用改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。

$（“p”）.css("background-color","red");

jQuery根据CSS中相应的选择器，来操作HTML页面中的节点，列如上面的列子中，$("p")该代码是使用元素选择器来选择页面

中所有p标签。我们还可以使用id，类或组合选择器，甚至还可以添加：first，:last,:even,:odd这样的后缀来匹配第一个，最后一个，偶数，奇数元素来操作HTML节点。

2.jQuery基础语法：

jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法：

$(selector).action()

.美元符号“$”定义jQuery

.选择器（selector）“查询”和“查找”HTML元素。

jQuery的action（）执行对元素的操作。

zytnice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20190326网页实训知识总结

20190326姓名：朱杨涛学号：1722230168案例：使用不同方法编写网页导航栏1.使用html加css样式编写导航栏<head> <style> *{margin:0; padding:0;} #nav{background-color: #e9efa3; width:600px; ...
复制链接

扫一扫