html前端设计学习记录，导航栏菜单的设计与实现

最新推荐文章于 2024-05-29 12:36:50 发布

非空空如也哉

最新推荐文章于 2024-05-29 12:36:50 发布

阅读量1k

点赞数 2

分类专栏：入门 HTML网页前端设计实战文章标签： html css

本文链接：https://blog.csdn.net/AdSensca/article/details/115094249

版权

入门同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML网页前端设计实战

1 篇文章 0 订阅

订阅专栏

导航栏菜单的设计与实现

学习目标
- 界面设计
- - 完整代码

学习目标

	学习如何综合应用HTML与CSS开发导航栏菜单样式

界面设计

设计目标：
在这里插入图片描述

   导航栏的创建
    <nav>
    	<ul>
        	<li><a href="#" target="_blank">头条</a></li>
        	<li><a href="#" target="_blank">娱乐</a></li>
        	<li><a href="#" target="_blank">热点</a></li>
        	<li><a href="#" target="_blank">体育</a></li>
        	<li><a href="#" target="_blank">财经</a></li>
        	<li><a href="#" target="_blank">科技</a></li>
    	</ul>
	</nav>
	超链接的设计
	nav ul li a:link,a:visited{
		text-align: center;
		display: block;
		height: 40px;
		width: 200px;
		padding-top: 15px;
		color: white;
		font-weight: bold;
		text-decoration: none;
		background-color: rgb(82, 139, 224);
	}
	nav ul li a:hover,a:active{
		background-color: rgb(21, 68, 139);
	}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>index</title>
</head>
<body>
    <h3>导航栏菜单的设计与实现</h3>
    <hr>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#" target="_blank">头条</a></li>
            <li><a href="#" target="_blank">娱乐</a></li>
            <li><a href="#" target="_blank">热点</a></li>
            <li><a href="#" target="_blank">体育</a></li>
            <li><a href="#" target="_blank">财经</a></li>
            <li><a href="#" target="_blank">科技</a></li>
        </ul>
    </nav>
</body>
</html>

body{
    margin: 0 auto;
    padding: 0;
    width: 1200px;
}
h3{
    width: 100%;
    margin-top: 10px;
    text-align: left;
    font-size: 25px;
}
nav{
    height: 50px;
    background-color: rgb(82, 139, 224);
}
nav ul{
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
nav ul li{
    float: left;
}
nav ul li a:link,a:visited{
    text-align: center;
    display: block;
    height: 40px;
    width: 200px;
    padding-top: 15px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    background-color: rgb(82, 139, 224);
}
nav ul li a:hover,a:active{
    background-color: rgb(21, 68, 139);
}

非空空如也哉

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html前端设计学习记录，导航栏菜单的设计与实现

导航栏菜单的设计与实现学习目标界面设计完整代码学习目标学习如何综合应用HTML与CSS开发导航栏菜单样式界面设计设计目标：导航栏的创建 <nav> <ul> <li><a href="#" target="_blank">头条</a></li> <li><a href="#" target="_blank">娱乐</a>&lt
复制链接

扫一扫