javaweb之网站布局demo
demo课程来源:慕课网javaweb课程
分析:实现了静态网页的展示效果。
效果图:




绘制概述:
- 将备用图片新建image文件夹,与html和css文件置于同一目录下

- 将整个网页6个区域,找6个盒子对应
- 标题及导航区
- 横幅栏
- about区
- picture-word区
- gallery区
- footer区
- 按照不同区特点,设计css样式,主要涉及知识点:盒子模型、定位、浮动、遮罩、hover等
步骤详解
一、标题及导航区

- html指向外部css文件
- header由logo及nav两部分构成
- nav细分出六个小导航
1 | <!--html文件--> |
- 消除浏览器默认边距,设置微软雅黑字体
- logo设置左浮动
- nav设置右浮动
- nav-li设置左浮动,同时调整间距,垂直居中对齐
- nav-li设置hover效果,悬浮时nav-li块出现黑色背景效果,鼠标变为“小手”效果
