微慑信息网

两个响应式html导航代码

1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网页</title>

    <style>
        /* 设置全局样式,字体颜色、字号等等 */
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            color: #333;
        }

        /* 设置导航栏样式 */
        .navbar {
            background-color: #f2f2f2;
            overflow: hidden;
        }

        /* 导航栏链接样式 */
        .navbar a {
            float: left;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 14px;
        }

        /* 鼠标悬停链接样式 */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 响应式布局 */
        @media screen and (max-width: 600px) {
            .navbar a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>

    <!-- 导航栏 -->
    <div class="navbar">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
    </div> 

    <!-- 内容部分 -->
    <h1>欢迎来到我的网站!</h1>
    <p>这里是我的网站,欢迎光临!</p>

</body>
</html>

 

2、

<!-- header.html -->
<!DOCTYPE html>
<html>
<head>
    <title>M</title>
	<link rel="stylesheet" type="text/css" href="templates/css/main.css">

</head>

	<nav>
		<a class="active" href="#home">首页</a>
		<a href="#news">新闻</a>
		<a href="#contact">联系我们</a>
		<a href="#about">关于我们</a>
	</nav>
	<div style="padding:20px">
		<h2>欢迎来到我们的网站</h2>
		<p>这是一个响应式带导航栏的HTML网页示例。</p>
		<p>它的导航栏具有两种不同的样式,一种适合大屏幕,一种适合小屏幕。</p>
		<p>您可以通过更改浏览器窗口大小来切换样式。</p>
	</div>

</html>

CSS:

header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		
		nav {
			background-color: #f2f2f2;
			overflow: hidden;
		}
		
		nav a {
			float: left;
			display: block;
			color: #333;
			padding: 15px;
			text-align: center;
			text-decoration: none;
			font-size: 20px;
			font-weight: bold;
		}
		
		nav a:hover {
			background-color: #ddd;
		}
		
		.active {
			background-color: #4CAF50;
			color: #fff;
		}
		
		@media only screen and (max-width: 600px) {
			nav a {
				float: none;
				display: block;
				text-align: left;
			}
		}

 

 

 

 

 

 

赞(0) 打赏
转载请附本站链接,未经允许不得转载,,谢谢:微慑信息网-VulSee.com » 两个响应式html导航代码

评论 抢沙发

微慑信息网 专注工匠精神

微慑信息网-VulSee.com-关注前沿安全态势,聚合网络安全漏洞信息,分享安全文档案例

访问我们联系我们

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

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册