前端开发_HTML5_模块化-导航与菜单

最新推荐文章于 2024-05-12 22:24:31 发布

魔笛手7

最新推荐文章于 2024-05-12 22:24:31 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： html5 html css html模块化开发导航栏目和菜单栏目实现

本文链接：https://blog.csdn.net/u013185175/article/details/122081145

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

1.引入

我们通过之前的学习，大致的学习了三大块的内容:HTML标签、CSS样式、布局。在学习了这三块内容之后，我们就可以开始学习着手编写一些常用的模块化的代码来实现开发中常见的页面内容了。那么我们先来实现一个基本的导航栏和菜单栏目。

2.代码实现流程

我们在编写任何代码的时候首先需要做的是先理清思路，然后思考我们的思路中有没有逻辑上的错误，然后再思考是否能够简化，下面我们给出写一些功能性的代码的习惯:

先布局 ==》写标签 ==》写样式美化。

接下来我们就按照这一个步骤开始实现我们所需要写的内容。

3.布局

我们使用栅格布局先先实现布局的效果。

实现效果图如下:

4.放置标签元素并设置样式,并添加过渡的特效

<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum- 
 scale=1,user-scalable=no" />
<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			/**定义基本的弹性布局内容**/
			.grid {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
			}

			/**按照比例定义栅格的宽度和收缩比例，这里我们把他划分为8个区域**/
			.grid-cell-1,
			.grid-cell-2,
			.grid-cell-3,
			.grid-cell-4,
			.grid-cell-5,
			.grid-cell-6,
			.grid-cell-7,
			.grid-cell-8 {
				flex-shrink: 1;
				/*设置收缩比率*/
				padding: 3px;
				/*设置内边距*/
			}

			/**设置扩展比例，也可以认为是所占据的比例的数量**/
			.grid-cell-1 {
				flex-grow: 1;
				/*占据比例数量的1/8*/
			}

			.grid-cell-2 {
				flex-grow: 2;
				/*占据比例数量的2/8*/
			}

			.grid-cell-3 {
				flex-grow: 3;
				/*占据比例数量的3/8*/
			}

			.grid-cell-4 {
				flex-grow: 4;
				/*占据比例数量的4/8*/
			}

			.grid-cell-5 {
				flex-grow: 5;
				/*占据比例数量的5/8*/
			}

			.grid-cell-6 {
				flex-grow: 6;
				/*占据比例数量的6/8*/
			}

			.grid-cell-7 {
				flex-grow: 7;
				/*占据比例数量的7/8*/
			}

			.grid-cell-8 {
				flex-grow: 8;
				/*占据比例数量的8/8*/
			}

			.box {
				background-color: #00AA00;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: #ffffff;
				font-family: "宋体";
				text-align: center;
			}
			
			.box ul li{
				float: left;
				list-style: none;
				margin-left: 100px;
				width: 150px;
			}
			
			li:hover{
				background-color: #FF0000;
				text-decoration: underline;
				border-radius: 5px;
				
				transition: all 100ms linear 0.1s;
			}
			
			.menu{
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: #ff5500;
				font-family: "宋体";
				text-align: center;
				
			}
			
			.menu h3{
				height: 50px;
				background-color: #FF5500;
				font-size: 28px;
				color: #ffffff;
			}
			
			.menu li{
				margin-top: 1px;
				height: 49px;
				line-height: 49px;
				background-color: #bdbdbd;
			}
			.menu li a{
				text-decoration: none;
			}
			
			.menu li:hover{
				background-color: #9c9c9c;
			}
			
			.detail{
				background-color: #00AA00;
				height: 350px;
				line-height: 350px;
				font-size: 20px;
				color: #ffffff;
				font-family: "宋体";
				text-align: center;
			}			
</style>

<body>
	<div class="grid">
			<div class="grid-cell-8">
				<div class="box">
					<ul>
						<li>首页</li>
						<li>财经</li>
						<li>资讯</li>
						<li>游戏</li>
						<li>娱乐</li>
						<li>科技</li>
						<li>大学</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="grid">
			<div class="grid-cell-2">
				<div class="menu">
					<h3>常见操作</h3>
					<ul>
						<li><a href="#">常见操作1</a></li>
						<li><a href="#">常见操作2</a></li>
						<li><a href="#">常见操作3</a></li>
						<li><a href="#">常见操作4</a></li>
						<li><a href="#">常见操作5</a></li>
						<li><a href="#">常见操作6</a></li>
					</ul>
				</div>
			</div>
			<div class="grid-cell-6">
				<div class="detail">
					详细的内容信息
				</div>
			</div>
		</div>
</body>

魔笛手7

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_模块化-导航与菜单

1.引入我们通过之前的学习，大致的学习了三大块的内容:HTML标签、CSS样式、布局。在学习了这三块内容之后，我们就可以开始学习着手编写一些常用的模块化的代码来实现开发中常见的页面内容了。那么我们先来实现一个基本的导航栏和菜单栏目。2.代码实现流程我们在编写任何代码的时候首先需要做的是先理清思路，然后思考我们的思路中有没有逻辑上的错误，然后再思考是否能够简化，下面我们给出写一些功能性的代码的习惯: 先布局 ==》写标签 ==》写样式美化。接下来我们就按照这一个步骤开...
复制链接

扫一扫