开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 711|回复: 0
收起左侧

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

[复制链接]
发表于 2022-6-9 10:59:56 | 显示全部楼层 |阅读模式   江苏省连云港市
精易Web第一期静态页面设计大赛:
学员睡着的冰,网页内容为网页版的诛仙二三事图片演示:
7.png
网页讲解:
part1:

1.png

导航栏+搜索框 导航栏为flex布局,其中用到了精灵图和定位相关知识。
part2:
2.png
此部分采用了三栏布局,左右采用css中的定位知识来进行相关居中与位置确定。切片轮播图采用transition来实现图片左右移动的效果。
同时配合JS 实现图片轮播 定位。
part3:
3.png
截图部分采用flex布局,皇冠小图片采用定位功能以及阿里图标图。
part4:
4.png
part5:
视频展示部分采用flex布局以及video标签实现
5.png
底部采用普通的P标签进行排版 定位功能进行二位定位
part5:
6.png
侧边栏采用精灵图 百分比的方式以及定位的fixed属性实现 用了hover属性让其变化

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

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表