【w0网页制作】Html+Css网页制作影视主题之庆余年Ⅱ含轮播表单（5页面附源码）

news2024/11/14 12:21:53

庆余年2HTML+CSS网页开发目录

🍔涉及知识
🥤写在前面
🍧一、网页主题
🌳二、网页效果
- 效果1、轮播效果图
- Page1、首页
- Page2、角色介绍
- Page3、剧情介绍
- Page4、剧集评价
- Page5、留言模块
🐋三、网页架构与技术
- 3.1 脑海构思
- 3.2 整体布局
- 3.3 技术说明书
🌈四、网页源码
- 4.1 网页模块
- 4.2 源码分享
🌅 作者寄语

🍔涉及知识

庆余年html网页制作，网页轮播效果制作，庆余年网页开发与制作，电视剧主题网页制作，html+css+js影视庆余年2网页设计与制作，web网页开发影视，DIV+CSS网页制作，影视主题网页制作，网页开发影视，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。

✨讲专栏✨：web 网页制作
🌝关于我🌝：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
🌈说主题🌈：影视，明星，家乡，旅游，个人，美食，校园，商城，运动，特效等
🍗谈技术🍗：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目，aspx，jsp等

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持

🥤写在前面

随着粉丝的积累，各种粉丝的一些留言建议我也是认真思考过的，有个粉丝私下问我能不能出一期最近热门点的剧网页制作啊，我想了下比较火的剧应该算是《庆余年2》吧，这不我也是庆余年粉丝，博主针对庆余年这个主题做了一期网页制作与设计，其中包括轮播图表单，希望大家能够喜欢这种风格，这个也是独创首发，借助5月底这个时间点分享给大家，希望能给大家带来一些创意上的灵感，也希望大家能够从中得到启发，解决自己眼前的窘境，当然能够学到知识是最好的，废话也不多说了，我尽量做到定期更新哈！

🍧一、网页主题

本次主要研究的方向是一个近期热门影视主题相关的-【庆余年2】，主要包括首页、角色介绍、剧情介绍、剧集评价、留言模块五个方向，采用图文结合的方式搭配，希望能入大家的法眼，这个也是基于html+css开发的影视主题庆余年2的网页，创作不易，有需要源码的可以百度网盘自取。
话不多说先看下面的效果图，是不是你们要的风格，希望大家能够喜欢这类风格的哈，有任何宝贵意见都可以留言。

🌳二、网页效果

效果1、轮播效果图

在这里插入图片描述

Page1、首页

在这里插入图片描述

Page2、角色介绍

在这里插入图片描述

Page3、剧情介绍

在这里插入图片描述

Page4、剧集评价

在这里插入图片描述

Page5、留言模块

在这里插入图片描述

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持

🐋三、网页架构与技术

3.1 脑海构思

要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
此次主要设置了5个页面，分别是首页、角色介绍、剧情介绍、剧集评价、留言模块
五个方向去拓展的。

3.2 整体布局

在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
头部：banner（主要包括导航图）
菜单：menu（主要是采用a标签进行跳转的）
主体：main（核心内容展示）
底部：foot（版权声明）
其中头部和菜单及底部三个模块都是公用的，针对每个页面的切换主要体现在中间的主体模块，这也是一个好的网页作品必要的四大元素，不然就是斜坡上盖房子了。
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持

3.3 技术说明书

主要应用了web前端3个模块的技术HTML + CSS + JS
HTML模块：主要针对页面的结构搭建，该网站整体采用的是div标签作为盒子，其中包含:
有关无序列表 ul li 、
段落标签 p、
图片标签 img 、
行内标签span、
字体标签 h2 h3.等
CSS模块：
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的border属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。

主要用到了font的文字基本属性，background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性，设置div的左边框的厚度和颜色。

Js模块：
单独引用js文件，实现web轮播图效果，主要是利用js的定时器的功能，设置定时器，不同周期显示不同图片，从而达到一个轮播的效果。