【HTML】制作新闻菜单

最新推荐文章于 2025-05-19 16:23:04 发布

idealistic

最新推荐文章于 2025-05-19 16:23:04 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML小程序

本文链接：https://blog.youkuaiyun.com/idealistic/article/details/62920483

这是一个HTML代码示例，用于创建一个包含时事热点新闻菜单的页面。菜单包括一个标题"时事热点"，下方有一个子菜单，列出了几个新闻条目，如"七月周周爬房团报名"等。菜单样式使用CSS进行了定制，包括边框、背景色、字体等，且链接在悬停时会有颜色变化和下划线效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单</title>
<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	body{
		font-family: "宋体";
		font-size: 12px;
	}
	.big{
		width: 400px;
		border: #33CCCC 1px solid
	}
	h2{
		background-color: olive;
		display: block;
		width: 400px;
		height: 18px;
		line-height: 18px;
		font-size: 14px;
	}
	.up{/*修饰子菜单*/
		padding-bottom: 5px;
		text-align: center;
	}
	p{line-height: 20px;}
	a{/*修饰超级链接*/
		font-weight: 800;
		text-decoration: none;
		margin-top: 5px;
		display: block;
	}
	a:hover{color: #FF0000;
	text-decoration: underline}
	</style>
</head>
<body>
<div class="big">
<h2>时事热点</h2>
<div class="up">
	<a href="#">七月周周爬房团报名</a>
</div><div class="down">
	<p>. 50万买下两居会员优惠   全世界大学排名  留学美国</p><p>. 家电 | 买房上焦点打电话送礼</p>
	<p>. 财经 | 油价大跌  CPI新高
	</p>
	<