昨天没有怎么学新知识,想着做一个静态页面把之前学的东西串连一下,复习一下。就找到了天空之城这个首页,感觉页面不算难,下面这个是我截得一部分。
这个页面做的大致分header、banner、body三部分,因为下面还有一些内容没有做,就没有footer部分,header是最上面的部分,又分为最左边的logo图片、中间的导航栏nav、最右边的搜索以及登录注册。
做之前首先要把图片素材准备好,包含logo图、中间的大图部分、下面的小图。都是在原网站下载下来的。首页右击按检查,点击左上方的箭头图标,就能把html代码和图片对应上。直接复制图片链接就好。
然后需要知道上面header部分最外面盒子的高度,因为宽度是整个浏览器窗口的宽度,就没有额外设置。最左边的logo部分需要用一个div盒子装起来,定义好宽和高,在img标签里面放图片链接,需要设置左浮动。然后中间部分也需要定义一个盒子,里面用无序标签将导航文字放进去。将无序标签样式设置成空,取消默认的实心圆,定义li标签的时候需要注意设置内边距,让导航栏内的文字有一定间隔,看起来比较美观,然后字体、大小这些都可以根据实际情况设置,也需要设置左浮动。因为导航栏文字第一个首页默认是白色字体,所以需要额外对第一个li标签的文字颜色进行设置。原导航栏文字在鼠标悬停的时候会变成白色,需要在css定义,用hover这个属性,设置鼠标悬停时文字的颜色。搜索我和原主页不一样,因为我不会!!!!原网页中是鼠标点击搜索放大镜的时候才会在左边出现一个搜索框,以我目前学到的知识还做不了。我只是定义了一个盒子,里面分左边的搜索框和右边的放大镜图标。左边的设置左浮动,图标在右边设置右浮动。高度设置成外面盒子的高度。登录和注册就是两个span标签。
<div class="header">
<div class="leftdiv">