首先我们想到让宽度自动，但是你会发现自动之后占用的宽度也是 100%。原来块元素贪心，你不给它约束它就多吃多占。
那就要换个手段了，比如 inline-block 怎么样，不再独占一行，不再多吃多占。好像可以，虽然我们还是希望它独占一行的。不过我们可以加个换行啥的来解决这个问题。
宽度解决了，换行加一个 <br /> 就行了，居中呢？我写了 margin: 5px auto; 的啊。那么 inline-block 元素对外表现为行内元素，你就不能用这种方式居中了。我们应该用居中文字的方法，就是给它的父元素设置 text-align: center;，感觉着好像这个属性我们设置了很多次，也合并一下吧，可以继承呢，所以就给 header 设置就行了。反正现在标题元素的宽度是正好够用的，文字居中与否其实对于效果没有影响了。
但是不好看，因为背景两侧和文字紧挨着，要有点留白就好了。所以是在元素里面增加空白，就用内补，那左右设置一下内补，搞定：
* {font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;}html,body {margin: 0;}header {background-image: url(background.jpg);background-size: cover;background-position: center;padding: 60px 0;color: rgba(255, 255, 255, 0.8);text-align: center;}header>h1,header>h2 {display: inline-block;margin: 5px;padding: 2px 36px;background-color: rgba(0, 0, 0, 0.6);border-radius: 6px;}header>h1 {font-weight: 400;}header>h2 {font-weight: 200;}看看是不是就很好看了~
但是这个办法并不绝对，我们也可以在原来的标题标签内增加元素来实现，你说多加一个元素有点浪费？不过给这个标题设置回首页的链接也是常规操作吧，a 标签只用作链接太浪费了，所以再利用一下，也可以更好地设定可点击范围。
这些就作为作业，大家自己尝试吧。总之就是对我们前面罗列的那一堆知识的反复排列组合。把问题细分到每一个属性之后就变得很简单了。
接下来是导航，导航有个标签叫什么来着？nav。其实按着我们现在所了解的知识，这个标签挺鸡肋的。HTML5 的标签要配合 CSS3 才好用，要不然真的有点不知道如何使用它才好呢，现在我们先把它当做一个容器来用了吧。
<!-- 上面省略 --></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">老鼠</a></li><li><a href="#">特别</a></li><li><a href="#">帅气</a></li><li><a href="#">超萌</a></li></ul></nav>这就是一个导航，除了丑，没别的毛病：
想想我们要对它做什么？
- 横排
- 不要圆点
- 文字颜色
- 下划线去掉
- 居中
这是我们最开始的诉求，那就先完成它们，再思考还有哪些细节需要完善。我们先来完成最好做的：
nav>ul li {list-style: none;}nav>ul li>a {color: #333366;text-decoration: none;}list-style 属性可以定义列表项前面的符号，不过我用到最多的就是 none，就是不显示这个符号。选择器中我用了一个后代选择器，而不是子选择器，大家想想为什么，想不明白也没关系，后面会用到这个。当然其实全用后代选择器（就是空格），也可以，一般也不会混乱。关键还是在于理解你所写的是什么意思。
接下来是横排，横排有两种方式（并不，很多种），我们应该用哪一种？我先去吃茴香豆，一会儿回来，下一章继续哦。
暂无评论内容