导航栏布局

实现如下导航栏：

首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。

具体步骤如下：
（1）在页面中引入reset.css文件（前两篇博客里有介绍），清除默认样式。

HTML代码如下：

<link rel="stylesheet" href="css/reset.css" />

（2）设置向左和向右的浮动属性的CSS公共样式。

CSS代码如下：

     /* 公共属性 */.fl{float: left;}.fr{float: right;}

（3）创建最外层盒子。在页面中创建一个div元素，class名为nav，表示整个导航栏，设置高度和下边框，并添加临时的背景颜色。

HTML代码如下：

<div class="nav clearfix"></div>

CSS代码如下：

     .nav{height: 88px;border-bottom: 2px solid #e8e8e8;border-top: 100px;background-color: #fdf5de;}

（4）在HTML的最外层盒子中创建三个元素，标志与导航向左浮动，用户按钮向右浮动。为了检查他们的位置，设置宽高与背景颜色。

HTML代码如下：

     <div class="nav clearfix"><div class="logo fl">图片</div><div class="main fl">导航</div><div class="user fr">按钮</div></div>

CSS代码如下：

     .nav{height: 88px;border-bottom: 2px solid #e8e8e8;border-top: 100px;background-color: #fdf5de;}.nav .logo{margin: 0 0 0 80px;width: 100px;height: 88px;background-color: #f9809f;}.nav .main{margin-left: 60px;width: 100px;height: 88px;background-color: #2fbdbf;}.nav .user{margin: 0 16px 0 60px;width: 100px;height: 88px;background-color: #86d5bf;}

效果图如下：

（5）在色块中填充详细内容。

HTML代码如下：

<div class="nav clearfix"><div class="logo fl"><img src="img/test3.png" alt="" /></div><div class="main fl"><a href="">品牌讯息</a><a href="">服务指南</a><a href="">工厂信息</a><a href="">公司简介</a><a href="">招聘</a></div><div class="user fr"><a href="" class="fl">联系我们</a><a href="" class="fl">登录</a></div>
</div>

效果图如下：

（6）删除之前为色块临时设置的宽度，由于设置的浮动属性，宽度由子元素撑开。

效果图如下：

（7）使元素垂直居中。给色块添加CSS属性line-height，设置其与height的值相等，这样元素就会垂直居中显示。

CSS代码如下：

line-height: 88px;

效果图如下：

（8）调整细节部分的CSS样式，具体见相关代码。

CSS代码如下：

     .nav .main a{margin: 0 12px;}.nav .user{margin: 0 16px 0 60px;height: 88px;line-height: 88px;background-color: #86d5bf;}.nav .user a{font-size: 14px;width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 18px;margin: 22px 0;}.nav .user a:nth-of-type(1){background-color: #28292a;margin-right: 20px;color: #ffffff;}.nav .user a:nth-of-type(2){background-color: #ffd40d;color: #000000;}

效果图如下：

（9）删除多余的背景颜色。

最终效果图如下：

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>D5</title><link rel="stylesheet" href="css/reset.css" /><style>/* 公共属性 */.fl{float: left;}.fr{float: right;}.clearfix:after{content: "";display: block;clear: both;}.nav{height: 88px;border-bottom: 2px solid #e8e8e8;border-top: 100px;background-color: #fdf5de;}.nav .logo{margin: 0 0 0 80px;height: 88px;line-height: 88px;}.nav .main{margin-left: 60px;height: 88px;line-height: 88px;}.nav .main a{margin: 0 12px;}.nav .user{margin: 0 16px 0 60px;height: 88px;line-height: 88px;}.nav .user a{font-size: 14px;width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 18px;margin: 22px 0;}.nav .user a:nth-of-type(1){background-color: #28292a;margin-right: 20px;color: #ffffff;}.nav .user a:nth-of-type(2){background-color: #ffd40d;color: #000000;}</style></head><body><div class="nav clearfix"><div class="logo fl"><img src="img/test3.png" alt="" /></div><div class="main fl"><a href="">品牌讯息</a><a href="">服务指南</a><a href="">工厂信息</a><a href="">公司简介</a><a href="">招聘</a></div><div class="user fr"><a href="" class="fl">联系我们</a><a href="" class="fl">登录</a></div></div></body>
</html>

HTML网页入门练习——导航栏布局设计相关推荐

网页导航栏的设计原则和注意事项
在网页制作中,导航栏是一个非常重要的部分,它们通常位于网站的顶部或底部,用于引导用户到达不同的页面或功能.导航栏通常包括一个标题.一些链接和一些图标,用于帮助用户快速找到他们需要的内容.对于一个网站来 ...
html5底部导航图标制作,如何做好UI底部导航栏图标设计
原标题:如何做好UI底部导航栏图标设计如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要,不同位置的图标有不同的设计思路.本文将从产品和设计两个角度对底部导航栏的图标进行分析.UI设计创新技 ...
ios7 状态栏与导航栏布局与ScrollView的特性分析
前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...
app底部导航栏的设计模板素材
底部导航栏有权重平分.强调信息.引导操作这三种模式. 底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面.早期的底部导航栏是单一的指路功能,经过多年的交互设计迭代后, ...
ios底部栏设计规范_设计干货：底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...
android底部导航栏凹凸设计,快速实现底部导航栏
Tint 着色器优点:去除"无用"图片,节省空间配合BottomNavigationView,实现一个快速,简洁的Tab栏,效果图如下传统做法:Tab 切换,字体变色.图片变 ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
Krpano入门，导航栏，与javascript交互！！
一.前言 krpano可以理解为一门小型的编程语言,和我们平时用的js相比,思想和逻辑上非常类似的,只是在语法上有所不同,只要大家能够熟悉krpano语法的套路,相信大家开发一款可定制的vr项目是不难 ...
综合设计一个OPPE主页--导航栏的设计
先进行内容框分析在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...

HTML网页入门练习——导航栏布局设计

导航栏布局

HTML网页入门练习——导航栏布局设计相关推荐

最新文章

热门文章