第八天了，做一个静态页面

昨天没有怎么学新知识，想着做一个静态页面把之前学的东西串连一下，复习一下。就找到了天空之城这个首页，感觉页面不算难，下面这个是我截得一部分。

这个页面做的大致分header、banner、body三部分，因为下面还有一些内容没有做，就没有footer部分，header是最上面的部分，又分为最左边的logo图片、中间的导航栏nav、最右边的搜索以及登录注册。

做之前首先要把图片素材准备好，包含logo图、中间的大图部分、下面的小图。都是在原网站下载下来的。首页右击按检查，点击左上方的箭头图标，就能把html代码和图片对应上。直接复制图片链接就好。

 然后需要知道上面header部分最外面盒子的高度，因为宽度是整个浏览器窗口的宽度，就没有额外设置。最左边的logo部分需要用一个div盒子装起来，定义好宽和高，在img标签里面放图片链接，需要设置左浮动。然后中间部分也需要定义一个盒子，里面用无序标签将导航文字放进去。将无序标签样式设置成空，取消默认的实心圆，定义li标签的时候需要注意设置内边距，让导航栏内的文字有一定间隔，看起来比较美观，然后字体、大小这些都可以根据实际情况设置，也需要设置左浮动。因为导航栏文字第一个首页默认是白色字体，所以需要额外对第一个li标签的文字颜色进行设置。原导航栏文字在鼠标悬停的时候会变成白色，需要在css定义，用hover这个属性，设置鼠标悬停时文字的颜色。搜索我和原主页不一样，因为我不会！！！！原网页中是鼠标点击搜索放大镜的时候才会在左边出现一个搜索框，以我目前学到的知识还做不了。我只是定义了一个盒子，里面分左边的搜索框和右边的放大镜图标。左边的设置左浮动，图标在右边设置右浮动。高度设置成外面盒子的高度。登录和注册就是两个span标签。

 <div class="header">
        <div class="leftdiv">