第七

最新推荐文章于 2023-07-02 15:03:04 发布

Lin_Zhi

最新推荐文章于 2023-07-02 15:03:04 发布

阅读量275

点赞数

分类专栏：假期

本文链接：https://blog.csdn.net/Lin_Zhi/article/details/87283199

版权

假期专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简略版新东方顶部导航菜单</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.heads{
				background-color: #C7C9CF;
				height: 40px;	
			}
			.img1,.biaoge1{
				display: inline-block;
				vertical-align: middle;
				padding-top: 5px;
				padding-left: 20px;
			}
			li{
				list-style: none;
				display: inline-block;
				font-size: 13px;
				border-left:1px #000000 solid;
				padding: 0 20px 0 20px;
			}
			.biaoge1 li a:link{
				text-decoration: none;
				color: #000000;
			}
			.biaoge1 li a:hover{
				text-decoration: underline;
			}
			#xiaochu{
				border-left: none;
				padding-left: 500px;
			}
			.biaoge2{
				position: absolute;
				
				display: none;
			}
			.heads .biaoge1 .biaoqian:hover .biaoge2{
				display: block;
			}
			.biaoge2 li{
				border: 1px solid #000000;
				height: 100px;
			}
			.juli{
				margin-top: 20px;
			}
			
		</style>
	</head>
	<body>
		<header class="heads">
			<div class="img1"><img src="img/logo.gif" /></div>
			<ul class="biaoge1">
				<li id="xiaochu"><a href="#">购物车</a></li>
				<li><a href="#">优惠券</a></li>
				<li><a href="#">快速注卡</a></li>
				<li><a href="#">各地购课</a></li>
				<li><a href="#">手机报</a></li>
				<li class="biaoqian"><a href="#">网站导航</a>
					<ul class="biaoge2">
						<div class="juli"><li><a href="#">托福</a><a href="#">托福</a><a href="#">托福</a><a href="#">托福</a></li>
							<li><a href="#">托福</a><a href="#">托福</a><a href="#">托福</a><a href="#">托福</a></li>
						</div>
					</ul>
				</li>
			</ul>
		</header>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美食今日推荐</title>
		<style>
			.waibiankang{
				border:1px #000000 solid;
				width: 300px;
			}
			.biaoge1{
				line-height: 30px;
				height:30px;
			}
			.wenzi1{
				color: red;
				
			}
		</style>
	</head>
	<body>
		<div class="waibiankang">
			<div >
				<h3 class="biaoge1"><span class="wenzi1">SHOP</span>今日推荐<div></div></h3>
			</div>
		</div>
	</body>
</html>

Lin_Zhi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第七

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简略版新东方顶部导航菜单&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } .heads{
复制链接

扫一扫