- 1前端实现文件下载的方法
- 2vscode升级1.86报错 waiting for server log解决_vscode 1.86
- 3【TS】TypeScript 实践中的 Equals 是如何工作的？_typescript equal
- 4STM32-HAL库11-SPI通讯（F103C6T6做主机，F103C8T6做从机）_stm32f103c6 spi
- 5SpringBoot实战案例：图书管理系统_spring boot图书管理系统
- 6论文解读Nerf2Mesh：基于Nerf的网格资产生成
- 7爬取新浪微博网站_1、 打开新浪微博网站首页,爬取微博发布者、发布者个人主页url和发布的微博内容。
- 8前端工程师必装的软件汇总_前端开发必备软件
- 9x86从实模式到保护模式 pdf_【自制操作系统04】从实模式到保护模式
- 10Django模型(九）
使用HTML制作影城首页 #web开发_web电影首页
赞
踩
一.分析网站的结构
我们随便打开一个电影网站，例如：星辰影院_电影电视剧免费在线观看 - 星辰电影院【额！！！此网站并不是很安全，作者我只是演示，不要随便进入】
这是这个网站的首页。
然后点击右键打开检查，然后就会发现：
可以看到此网站有大至三个部分组成，分别是：<html> </html>;<head> </head>;<body> </body>。我们可以将这三个部分分别看为：整个人；人的头部；人的身体。这三个部分组成了基本的web网页【这是一个初学作者对此的看法，仅代表个人意见】。
其实如果我们要设计这样一个网页，就需要将此弄成我们知道的模式，以便我们的设计和究！！！这是一个网页最基本的东西：
二.使用工具
我们在这里使用的工具是VScode:
首先打开这个软件，打开开发工具，新建一个web项目并命名为“star-movie”。
在生成的index.html中编写代码。这里外层可以用div元素来分块，首页的整体结构
这是建好的图：
我们先将网页分好区域，以便后来更好的填充：（这里我们用到了<div> </div> ）
三.顶部的实现
①.热链接的实现：要用到<a href="#"> </a>这个命令来实现
【由于不知道图片超链接，故用“#”代替】
这是效果：
这是最终效果【剩下的只能学完CSS之后再作添加了】
四.logo和导航栏制作
logo区域的图片单独占了一行，可以使用一个块元素来包括。另外一般网站的logo是可单击的，会链接到网站的首页，所以这个外需要使用标签来包裹。
导航栏包含了左侧可单击的导航菜单列表和右侧的搜索框。所以菜单列表可以使用一个ul列表，其代码更有整体感。由于ul和li都是块元素，想要使其在一行显示，目前可以通过改变其标签类型使其转换为行内块元素。
这是代码和运行效果！！！【这里用到了一点点CSS的内容】
搜索框代码：
对于轮播图部分，它是3张图片依次来轮播的，完整的实现需要应到的CSS来布局，所以对于html部分来说，这里我们先暂时放一张图片来代表banner区。【这里放了我狼叔的照片】
五.主体部分制作
①快速购票部分属于主体内容中的，所以在写代码时要嵌套在主体的div中。该部分主要是由4个下拉列表和一个可单击的按钮，为使结构更清晰，将这些内容都放置到ul列表中，这就需要将整体结构中该模块的div标签换成ul标签。另外由于这些内容都是在一行中显示，所以需要改变li的标签类型为行内块元素。
还有选择命令<select> <option> </option> </select>。
【代码和代码效果如上图所示】
②"正在热映"区域分析与实现:
该区域包含了标题和影片列表，标题可使用span标签引入，影片列表可通过3个ul+li列表来引入，在每一个li中再嵌套影片和片名。“正在热映”和“即将上映”两个模块在结构上是一样的，只是需要通过js来实现单击标题切换相应内容，所以该部分就先放“正在热映”的影片即可。
【这是代码和其效果，因没用CSS装饰的原故，所以看起来比较简陋！！！】
③侧边栏的制作：
侧边栏包含了影城活动、服务公告、品牌咨询三部分。
（1）影城活动
影城活动模块包含了标题、水平分割线、和影片。影片又分为大图和小图两部风，当用户鼠标移入到下方的小图上时，上方就会切换到对应的影片大图。
（2）服务公告和品牌咨询
这两个模块在结构上是一样的，都包含了标题、水平分割线、和文本列表。文本列表部分可采用ul+li来实现。
【这是效果！！！额！！！只能通过CSS之后才能作出比较符合口味的网站，可惜作者能力有限，学艺不精，只会大概，如需要，将会推出第二期】
④底部制作：
底部包含了三部分，“帮助”、“友情链接”和“版权”。其中“帮助”包含了“新手上路、购票指南、会员权益、联系我们”，该部分可用4个ul列表来展示。【这里作者就不演示了】
额！！！作为一个初学者，这可能只能作成这样了，还请大佬多多给点建议，小弟在此谢过了！！！【制造不易，多多包含】
![[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页](https://csdnimg.cn/release/cmsfe/public/img/lazyLogo2.1882d7f4.png)
