文档章节

学习CSS你必须踩得那些坑(四)

博为峰教研组
 博为峰教研组
发布于 2016/12/26 19:24
字数 276
阅读 11
收藏 0

完成导航

HTML结构

<header class="site__header">

    <nav class="navbar">

      <a class="navbar__brand" href="#">Company Logo</a>

      <ul class="navbar__nav list-nostyle">

        <li><a href="#">Platform</a></li>

        <li><a href="#">About</a></li>

        <li><a class="active" href="#">Sign Up</a></li>

      </ul>

    </nav>

  </header>

运行
browser-sync start --server --files 'index.html' --files "css/*.css"

好了,改点样式让它看来好看点

1. 给导航设置一个固定高度

2. 去掉li默认的样式

3. 左右布局

/* list with no style

  ========================================================================== */

 

/**

* 1. remove the margin and padding

* 2. remove list style

*/

 

.list-nostyle{

  margin: 0;

  padding: 0;

}

.list-nostyle li{

  list-style: none;

}

 

/* site header

  ========================================================================== */

 

.site__header{

  height: 70px;

}

.navbar{

  padding: 15px 20px;

}

.navbar__brand{

  float: left;

}

.navbar__nav{

  float: right;

}

.navbar__nav li{

  display: inline-block;

}

首先,我们为页眉设置了一个70px的高度

通过浮动来实现Logo左对齐,导航右对齐

因为<li>是块级元素,所以会产生换行,我们把li设置成inline-block,在同一行显示

<a>标签我们一般更习惯不要下划线,而是通过颜色来突出是链接,所以我们把<a>标签的下划线统一去掉:

a{

    text-decoration: none;

}

 

现在你看到的应该是这样:

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
3
0
学习CSS你必须踩得那些坑(二)

利用browser-sync实时刷新页面 为了省去每次修改代码后都要手动刷新页面,我习惯使用browser-sync监听文件,自动刷新浏览器 1. 安装Browsersync npm install -g browser-sync 2. 运行Browser...

博为峰教研组
2016/12/26
7
0
学习CSS你必须踩得那些坑(一)

目标 按照Sketch设计稿,实现一个完整的页面,希望你学完这一些列课程后,能够系统地掌握CSS,真正玩转CSS 课程内容 首先下载素材文件(Windows用户可以下载pdf版) 设计稿 用Sketch打开文件...

博为峰教研组
2016/12/26
13
0
Next.js 踩坑入门系列(四)— 中期填坑

Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux 陆续更新... 填坑 第一坑 - params形式路由 上一篇在...

luffyZhou
2018/09/06
0
0
Redis中国用户组|唯品会Redis cluster大规模生产实践经验

Outline 一、生产应用场景 二、存储架构演变 三、应用最佳实践 四、运维经验总结 第1、2节:介绍redis cluster在唯品会的生产应用场景,以及存储架构的演变。 第3节:redis cluster的稳定性,...

玄学酱
2018/02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

访问LNMP虚拟主机出现报错:No input file specified.

之前一直是使用lnmp一键包,但是访问创建的虚拟主机,并没有出现过的错误:No input file specified. 网上的文章很多,但是都是转载,而且原因也很多,根本不适用 后面在lnmp一键包官网找到解...

wenzhizhong
20分钟前
1
0
OSChina 周三乱弹 —— 你还能管得住观众愿意看谁吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享李宗盛的单曲《凡人歌 (电视剧《碧海情天》主题曲)》:你我皆凡人,生在人世间#今日歌曲推荐# 《凡人歌 (电视剧《碧海情天》主...

小小编辑
44分钟前
292
11
Inf2Cat, signability test failed vc2019 wdk驱动sys build签名

解决问题的方法非常简单,只要让Inf2Cat验证的时候使用local时间就可以了。打开package工程的属性,在inf2cat工具的属性中进行设置。

simpower
今天
3
0
LinkedHashMap 是如何保证有序的?

//map的遍历方法如下 for (Map.Entry<String,Integer> entry : map.entrySet()) { System.out.println(entry.getKey()+":"+entry.getValue()); } HashMap#entry......

暗中观察
今天
3
0
Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部