昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢。不过还好昨天写了一些内容。现在奉上。不作更改。

今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。)

我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后,突然灵机一闪。

能不能通过内部的固定高度,来实现垂直平分的效果呢。

在查看psd图的效果是导航栏的a是垂直平分的。

那么我可否通过固定a超链接的高度来实现垂直平分呢?

<div "h-nav">
<nav "container navbar navbar-default" role="navigation">
<div "row">
<div "navbar-header df-jcsbc">
<a "navbar-brand" href="#">
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>
<div "collapse navbar-collapse" id="navbar-collapse">
<ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
<li ""><a href="test9-1.html">首页</a></li>
<li ""><a href="test9-3.html"><span "dib">职业</span></a></li>
<li ""><a href="test9-2.html"><span "dib pat">推荐</span></a></li>
<li ""><a href="#"><span "dib pat">关于</span></a></li>
</ul>
</div>
</div>
</nav>
</div>

带着这种想法,我设定了如下属性。

#h-cell-1 a{
display:inline-block;
height:97px;
margin-left:32px;
font-size:17.8px;
text-decoration: none;color:white;
}

为此怎么实现垂直居中呢?

第一点想到的是position定位了

既然要实现相对于a超链接的position,那么必须引入一个span盒子了。

<li ""><a href="test9-2.html"><span "dib pat">推荐</span></a></li>

然后增加

#h-cell-1 li{height:97px;}
#h-cell-1 a{
display:inline-block;
position:relative;
width:40px;
height:97px;
margin-left:32px;
border-bottom:2px solid #20B176;
font-size:17.8px;
text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}

就可实现垂直居中了!

但另外一个问题又接着出现了,在galaxy5的小屏幕下,下拉菜单的li间距太大,不美观。

又该怎么办呢?

这个是在28号晚上想到方法的。灵感也是看了其他同学的日报。他们提到媒体查询。

好,什么是媒体查询。建议百度。这里不做介绍。

媒体查询是吧,好那么久好办了。

@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:;padding:;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}

ok,完美。

但是还有问题啊!

图标,和按钮原本是不垂直居中的啊!那这个怎么搞!

<div "navbar-header  df-jcsbc">
<a "navbar-brand" href="#">
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>

他们不是都在navbar-header的盒子里吗?

那不能通过flex两端对齐来实现垂直吗?

试试看

加了个

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;}

但是效果不理想啊!总体来说,.navbar-brand 和navbra-toggle实现了垂直居中。

那,怎么办呢?

我是直接弄

.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:; }
.navbar-header img{position:absolute;
left:20px;}
.navbar-header button{position:absolute;
margin:;
right:20px;}

padding和margin来使他们让出位置来的。

然后通过定位稍微调了点左右距离。

最后就可以实现垂直居中了。

明天及今天计划的事情:(是按照大娃师兄,提出的UI自检 :首先对照字体大小,颜色,边距,定位等问题,之后在不同的分辨率下查看是否有布局错乱,不协调等问题。来做test10。)

bootstrap导航栏的辛酸史的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  8. bootstrap导航栏PC端移动端之不同样式

    在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...

  9. eclipse Maven Bootstrap 导航栏

    1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...

随机推荐

  1. java.text.ParseException: Failed to parse date ["未知']

    先把"未知"替换为"" 直接new 出来的Gson 对象是无法解析为""的Date属性的,需要通过GsonBuilder来进行创建 Gson ...

  2. springboot整合redis存放session

    y进入maven依赖: <!--spring boot 与redis应用基本环境配置 --> <dependency> <groupId>org.springfra ...

  3. C3算法之我见

    C3算法说到底就是merge算法,看了一些帖子,总结说得莫名其妙,大家也是抄来抄去,我试着用自己的话来把这个东西怎么操作的说清楚.当然了我也要抄一些别人的,但是我会 尽量把我认为别人没有讲清楚的那一部 ...

  4. [Ruby]转载: 关于ruby中 %Q, %q, %W, %w, %x, %r, %s 的用法

    单引号内的内容,ruby会原样输出 双引号内的内容,ruby会解析 我们看个简单的例子,针对字符串      #{foo}test     我们分别用单引号核双引号操作 '#{foo}test'   ...

  5. C#学习之按钮点击事件

    描述:asp.net中服务器控件Button的点击事件OnClientClick和OnClick的区别? 解答:http://www.cnblogs.com/ypfnet/archive/2012/1 ...

  6. POJ 3067 Japan (树状数组 && 控制变量)

    题意: 西海岸和东海岸有分别有n (1~n)个和m (1~m)个城市, 两个海岸的城市之间有k条公路连通, 公路会相交, 现在给出城市和公路的信息问你由这些公路组成的复杂交通有多少个交点 (如果两个条 ...

  7. 2015苏州大学ACM-ICPC集训队选拔赛(1) 1007

    连通图 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissio ...

  8. Excel 开发备忘

    1.装完读取插件才可以对EXCEL读取 Excel 2010 读取数据插件 https://www.microsoft.com/zh-CN/download/details.aspx?id=13255 ...

  9. Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.

    查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  10. my07_lock-tables与single-transaction的区别

    概念描述 ************************************************************ mysqldump进行逻辑备份时(innodb),为保证事务的一致性 ...