--- theme: condensed-night-purple highlight: a11y-dark --- 小知识，大挑战！本文正在参与「[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")」创作活动 > 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 > 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 > ## 网页实现截图： **电影网站主页**![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e1fa07c1cf8435cbf1aefaf68fd8b3b~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") **热榜和最新上映电影等** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/def3ef23fa9544d093ec46ff2c2bc25d~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") **电影分类**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47856fd913be496db167ea69f1c88b65~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") **电影明星**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/618a1d89352c415899cb48a6105f5e59~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") **电影新闻**： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8a8f2bbea0d4c74a1f4a207cc5cb54d~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") > ## 项目组织结构： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d5dba4e3c464b6ab0e20ddf1a219c7e~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") > ## 主要源码展示： index.html ```html 电影网站

近期热播

MORE>>

经典电影

MORE>>

MORE>>

``` ![](<> "点击并拖拽以移动") style.css ```css .logo { float: left; } .logo a { display: inline-block; } .meau { float: right; padding-top: 34px; } .meau li { float: left; width: 90px; text-align: center; } .meau li a { font-family: "微软雅黑"; font-size: 14px; color: #ffffff; text-decoration: none; } .meau li a:hover { color: #eb315a; } .meau li .active { color: #eb315a; } .meau li .theme-btn { background: #eb315a; border: 1px solid #eb315a; color: #fff; border-radius: 35px; padding: 5px 25px; display: inline-block; font-size: 15px; cursor: pointer; font-weight: 500; } .meau li .theme-btn:hover { color: #eb315a; border: 1px solid #eb315a; background: rgba(235, 49, 90, 0.2); } /*banner*/ .banner { width: 100%; height: 450px; margin: 0px auto; overflow: hidden; position: relative; } .list li { position: absolute; width: 100%; text-align: center; } .btn { font: 14px/2.5em "微软雅黑"; text-align: center; position: absolute; left: 50%; transform: translateX(-55%); bottom: 40px; z-index: 2; } ``` ![](<> "点击并拖拽以移动") > > 大家**点赞、收藏、关注、评论**啦、 > > 打卡文章更新 **61/ 100天** >

近期热播

经典电影

最新电影