然后我们来做一些不一样的东西，一些格子，当然其实他未必显示成格子的样式，但是随便他怎么掩饰，他还是改变不了在我眼中那格子的本质。比如现在呢，我们在上面通过海报把我们这并不存在的 APP 的大特性都展示出来了，但是我们还是觉得说服力不是很够啊，所以我们要在下面横排几个小特性，一般就是有个标题，有些文字说明，再多就是加个相关的图标。
报告读者，本人正在直播……直播写作，接受监督，但是我就不告诉你们在哪里直播。以下为注释 <!-- http://live.bilibili.com/21024 -->好了，今天废话不多说，开始我们的正文。你的啤酒准备好了么？前边我们写了导航栏、写了大海报，你也许觉得这还是在入门，好简陋好简陋的，但是其实呢，这已经是我们常用知识中的大部分了。
如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/你看，代码这东西认真玩起来其实还是很有意思的。不过可能有同学问了，咱不是写一个 App 的发布页面么？怎么……啊啊，是啊是啊，所以我们接下来要写一个下载按钮呢~这个按钮的写法比较多啊，你要是只为了链接到一个文件，其实用 a 标签就可以搞定啊，你会设置背景吧，会设置文字颜色吧，会设置边框吧。
不过显然的，要是做个海报这么简单码农们就不哭了。所以现在我们要做一些没有设计师我们一样玩的很 High 的工作。你看我的海报其实还只有一个背景，上节课虽然加了链接，也不过是自欺欺人，没内容谁点击啊？所以我们要开始添加内容了。那么上一节加的那个链接就显得不够精致，所以不要他了，于是我们好像又回到了第二十七章结束的时候。
据说看完上一节教程之后好几拨人哭昏在了厕所。别再昏了，起来嗨~其实后面讲到响应式我们可以根据实际情况去调节海报的高度，讲到 JQuery 我们可以很方便的动态设置海报高度。
一块八的啤酒真不经喝，没聊两句就喝光了，导致上一章有点短。现在还剩下四毛钱，买个棒棒糖都不够，话说有钱不知道怎么花也是一种折磨啊。今天开始聊这个页面的大海报部分，但是一个关键的问题是：首屏。这是页面的灵魂所在啊，好在我不用考虑这些，设计的问题交给设计师去发愁好了，所以我今天就随便找张图片演示一下就好。你真的这么去想？
开一瓶一块八的啤酒，再来一串八毛钱的小鱿鱼，老板记得多放辣椒（这样经吃，这是经验，都记着点）。我们继续开始聊~我一个礼拜才三块钱零花钱，今天点了两块六的大餐，喵的，这日子不过了！你说我今天废话特别多？是啊，这节课就是一节发牢骚的课。我们来解释一下题目哦，CSS 是啥我们前边都说过了，书写呢？
现在来说说这个浏览器宽度的问题，这可不是一个小问题哦，因为大家的显示器尺寸是不同的，所以浏览器窗口的大小相应的也必然无法保持一致，我们必须同时考虑到可能出现的各种情况才行。那么当前我们遇到的问题是当浏览器宽度过小的时候导航的内容放不下，于是被排成了几行，很不好看。
很多同学问，你看他们那谁家的小谁做的那个导航，鼠标一滑过还有变化，他们怎么做的？那今天我们来讲一些更好玩的伪类，首先是 ：hover，这个讲的是某元素被鼠标滑过的时候的样式。当然如果不定义的话就是没有变化喽，就像我们前边写的那样，但是如果我定义一下呢？#nav .nav-item a:hover { background: #DDD;
我们来做一些简单的美化工作，本着过犹不及的原则（其实是我懒），我们就做点很简单的东西啊，比如：你看两个导航项之间的分隔不明确是吧，我们来加个分割线啊，挺简单的事，给 #nav .nav-item 选择器下加上 border-right:1px solid #DDD; 就可以了，就是每个导航项的右侧边框是一像素粗细，实线（solid），颜色是 #DDD。
现在我们来学着解决问题哦，我们还有一个遗留问题没有解决，就是页面底下的滚动条。你肯定又说了：“你还是知道解决啊？你不知道我都看着碍眼好多章了么？”这个不怨我啊，你们看看我的截图，我的系统是超细滚动条，所以我看着一点也不碍眼啊！（好了，可以扔砖头了，我好捡回家盖房子娶老婆……
上次我们把导航条写了一个雏形，就是看起来还行（这么难看居然说还行……我眼瞎）。我们的计划是现在给它加上链接，让他成为一个能干活的导航。加链接这种事情对于现在的我们来说没什么难度了吧。如果你坚持做练习的话一定觉得小事一桩了。但是我们现在遇到一个问题：我们要给谁加链接？这还有疑问吗？有！我要不说肯定会有人这么写：<a href="#"><li>
如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/现在来写导航项。其实导航是有专门的标签的 <nav> </nav> 但是这个特性比较新，IE9 才开始支持，所以很多人还是习惯用列表来写导航，这里我们也使用列表，为的是你以后看到各种代码都能看得懂，因为 nav 标签相对于列表还是比较简单的。那么先来说说列表哦：<ul> <li>
你说，上节课的都听明白了，就是不懂。这很正常，现在我们来说一个你以后在网页前端道路上不可或缺的助手——“审查元素”（这是 Chrome 浏览器里的名字，而 Firefox 里叫做“查看元素”）。其实很简单，你对着你要研究的元素右键，然后选择审查元素就行了。
我刚写下这个标题你就跑过来大喊着，终于又开课了，上节课我就有点觉得不对劲，你说那文字紧贴着左边能看吗？赶紧想想办法！嗯，是的，紧贴着左边确实不好看啊，那我们这节课来想办法解决这个。这时候就要用到我们前边的盒模型了。那么我先开始打比方，打完比方再讲要用的一些属性，最后是解决今天的问题哦。
现在我们来加 Logo 哦～，话说我这么懒就不用图片 Logo 了～。代码如下，加在 #nav（就是 id="nav" 的元素） 里面：<div id="logo"> <a href="#">代码能有多难？</a></div>挺简单易懂的，一个 div 里面放了个链接而已，你要是用图片就把代码能有多难？换成 <img src="你的图片地址" /> 就行，这个大家应该是会的。
所有的读者都可以通过此链接（https://code.pubu.im/reg/b6mebkgg18lbtrr）注册，来和我们交流。已付费的读者请与我联系，告知我您的支付宝账号与常用邮箱，我会邀请您加入 VIP 交流频道，方便我们更深入的探讨代码。我就一直在想，我们应该把这个页面写成什么样的，是高大上还是……还好，后来我的懒惰打败了我——写个简单的！
如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/我说过学代码要勤动手，其实你们光拿我当相声看了，根本没动手。别以为我不知道哦。今天开始我们要一起写一个页面了，大家可一定一定要动手跟着操作才行啊，否则你会跟不上的！看懂和会做绝对是两码事！
如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/我们前边说过 div+css 布局是招聘时一种懒到家的衡量标准（其实现在 css 已经是前端的基本技能了），就好像招聘文员写上要求会打字一样的多余。好吧，虽然这个说法被无数人吐槽着，也有些人较真说这个说法不科学等等。但是我们学习 css 总是绕不开要用到 div 的。
如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/当然这只是一个比喻，我绝没有挑起代码界圣战的意思。从 Html 进入到 CSS 世界的感觉就好像从人间一步迈进了神国，一些曾经很难做到的事情，现在变得信手拈来了。宛如我们掌握了神的力量。当然这么说下去的话后面我们要学的 JavaScript 就应该称作众神之神了……
关注时代Java
