李老师实验2-4CSS设计导航菜单 - 小浣熊博客

李老师实验2-4CSS设计导航菜单

发布者: 小浣熊

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这篇文章总字数为:2974 字,有 4 张图存于本站服务器

作业预览:

one纵向导航:

QQ图片20200324220238.pngQQ图片20200324220242.png

two横向导航:

QQ图片20200324220247.pngQQ图片20200324220251.png

实现代码:

one纵向导航:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小浣熊实验2-4</title>
	<link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
	<style>
	*{
		margin:0;
		padding:0;
	}
	ul{list-style-type:none;}
	.top{display:block;
		background-color:rgb(12,137,243);
		color:#fff;
		width:160px;
		text-align:center;
		padding:8px;
		text-decoration:none;
	}
	a{
		display:block;
		background-color:#fff;
		color:#000;
		width:160px;
		text-align:left;
		padding:8px;
		text-decoration:none;
		text-indent: 6px;
	}
	a:hover,a:active{
		color:rgb(133,176,247);
	}
</style>
</head>
<body>
	<div>
	<ul>
		<li class="top">这些圈子都在看</li>
		<li><a herf=""><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;NBA球迷</a></li>
		<li><a herf=""><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;互联网精英</a></li>
		<li><a herf=""><i class="fa fa-gamepad" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;游戏高手</a></li>
		<li><a herf=""><i class="fa fa-car" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;汽车热爱者</a></li>
		<li><a herf=""><i class="fa fa-bandcamp" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;环球理财者</a></li>
		<li><a herf=""><i class="fa fa-diamond" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;演艺圈</a></li>
		<li><a herf=""><i class="fa fa-paw" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;萌宠主人</a></li>
	</ul>
</body>
</html>

two横向导航:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小浣熊实验2-4two</title>
	<style>
	ul{
		list-style-type:none;
		margin:0;
		padding:0;
		overflow:hidden;
	}
	li{
		float:left;
	}
	a{
		display:block;
		background-color:rgb(12,137,243);
		color:#fff;
		width:80px;
		text-align:center;
		padding:15px 0px;
		text-decoration:none;
	}
	a:hover,a:active{
		color: rgb(36,94,163)
		}
		span{padding: 3px;}
		span:hover{background-color: rgb(235,237,239);}
	</style>
</head>
<body>
	<ul>
		<li><a herf=""><span>新闻</span></a></li>
		<li><a herf=""><span>视频</span></a></li>
		<li><a herf=""><span>图片</span></a></li>
		<li><a herf=""><span>军事</span></a></li>
		<li><a herf=""><span>体育</span></a></li>
		<li><a herf=""><span>NBA</span></a></li>
		<li><a herf=""><span>娱乐</span></a></li>
		<li><a herf=""><span>财经</span></a></li>
		<li><a herf=""><span>科技</span></a></li>
	</ul>
</body>
</html>
文件下载

附件:李老师实验2-4CSS设计导航菜单

文件大小:645.1k

更新时间:2020-3-24 21:25

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
打赏
-版权声明-

阅读时间:  发布于:2020-3-24
文章标题:《李老师实验2-4CSS设计导航菜单》
本文链接:https://www.mua222.cn/190.html
本文编辑: 小浣熊,转载请注明超链接和出处小浣熊博客
收录状态:[百度已收录][360未收录][搜狗已收录]

评论

     快速回复: 支持 感谢 学习 不错 高兴 给力 加油 惊喜
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

李老师实验2-4CSS设计导航菜单

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏