Web第一期静态页面设计大赛----诛仙二三事 新人帖

gwzcs001

精易Web第一期静态页面设计大赛：
学员睡着的冰，网页内容为网页版的诛仙二三事图片演示：

网页讲解：
part1：



导航栏+搜索框 导航栏为flex布局，其中用到了精灵图和定位相关知识。
part2：

此部分采用了三栏布局，左右采用css中的定位知识来进行相关居中与位置确定。切片轮播图采用transition来实现图片左右移动的效果。
同时配合JS 实现图片轮播 定位。
part3：

截图部分采用flex布局，皇冠小图片采用定位功能以及阿里图标图。
part4：

part5：
视频展示部分采用flex布局以及video标签实现

底部采用普通的P标签进行排版 定位功能进行二位定位
part5：

侧边栏采用精灵图 百分比的方式以及定位的fixed属性实现 用了hover属性让其变化

演示站点：
http://paopao.siriusbot.cn/97327031/
总结：
本次毕设学到了css布局知识、定位以及相关属性。三栏布局、简单的css操作。也遇到挺多问题，例如图标定位、a标签失效等问题。还是得多做多练，首次发帖，请大家多多指教。还有个小小问题，实在不想麻烦泡老师，就是网页的标题和图标忘记加了。