【HTML】HTML网页设计---叮当猫网页设计

原创已于 2023-02-20 21:23:04 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2022-08-25 14:59:05 首次发布

web前端作业同时被 2 个专栏收录

58 篇文章

订阅专栏

Html+Css+JavaScript期末大作业

18 篇文章

订阅专栏

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

叮当猫网页系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

叮当猫网页系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--叮当电影网站介绍

3.1、首页

相关代码：

    <div class="slidey">
        <ul id="slidey-content" style="display: none">
            <li>
                <img src="imgs/slideposter/Frozen2.jpg" alt="">
                <p class="title">冰雪奇缘2</p>
                <p class="description">为什么艾莎一出生就带着控制冰雪的能力？这个答案一致困扰着她，也威胁着王国的安全。 她将和安娜、克斯托夫、雪宝和驯鹿斯文展开一场危险但非凡的旅程…</p>
            </li>
            <li>
                <img src="imgs/slideposter/ifseawave.jpg" alt="">
                <p class="title">若能与你共乘海浪之上</p>
                <p class="description">青年消防员雏罂粟港和爱好冲浪的向水日菜子相遇并迅速展开热恋。看似命中注定的这对恋人，
                    却不幸遭遇生死别离。无法接受港已经离世的雏子，某天突然发现，只要唱起属于两个人的那首歌，港就会从水中出现…</p>
            </li>
            <li>
                <img src="imgs/slideposter/skyfire.jpg" alt="">
                <p class="title">天·火</p>
                <p class="description">火山喷发了，这些人的命运纠结在一起。为了看见明天的太阳，他们必须与过去和解， 合力为自己也为众生在绝境中寻找一条生路。
                    这是一个关于爱与勇气、选择与放弃、自救与他救的中国式英雄的故事…</p>
            </li>
            <li>
                <img src="imgs/slideposter/yewen4.jpg" alt="">
                <p class="title">叶问4</p>
                <p class="description">因故来到美国唐人街的叶问，意外卷入一场当地军方势力与华人武馆的纠纷，面对日益猖狂的
                    民族歧视与压迫，叶问挺身而出，在美国海军陆战队军营拼死一战，以正宗咏春，向世界证明了中国功夫…</p>
            </li>
        </ul>
        <div class="slidey-main">
            <a href="movie.html" class="slidey-main-link"></a>
            <div class="slidey-overlay">
                <p class="slidey-overlay-title"></p>
                <p class="slidey-overlay-description"></p>
                <span class="slidey-progress"></span>
            </div>
            <div class="slidey-ctrls slidey-ctrls-pre"></div>
            <div class="slidey-ctrls slidey-ctrls-next"></div>
        </div>
        <div class="slidey-list">
            <ul>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div></div>
                            </td>
                            <td class="slidey-list-title"></td>
                        </tr>
                        <tr>
                            <td class="slidey-list-description"></td>
                        </tr>
                    </table>
                </li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div></div>
                            </td>
                            <td class="slidey-list-title"></td>
                        </tr>
                        <tr>
                            <td class="slidey-list-description"></td>
                        </tr>
                    </table>
                </li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div></div>
                            </td>
                            <td class="slidey-list-title"></td>
                        </tr>
                        <tr>
                            <td class="slidey-list-description"></td>
                        </tr>
                    </table>
                </li>
                <li>
                    <table class="slidey-list-table">
                        <tr>
                            <td rowspan="2" class="slidey-list-img">
                                <div></div>
                            </td>
                            <td class="slidey-list-title"></td>
                        </tr>
                        <tr>
                            <td class="slidey-list-description"></td>
                        </tr>
                    </table>
                </li>
            </ul>
        </div>
    </div>

3.2、详情页

相关代码：

    <div class="movie-info-bar clearboth">
            <div class="movie-poster">
                <img src="./imgs/poster/ruonengyuni.jpg" alt="">
            </div>
            <div class="movie-info">
                <p class="movie-name-zh">若能与你共乘海浪之上</p>
                <p class="movie-name-ods">きみと、波にのれたら</p>
                <ul>
                    <li>
                        <p>上映时间：<span>2019年12月07日</span></p>
                    </li>
                    <li>
                        <p>导演：<span>汤浅政明</span></p>
                        <p>地区：<span>日本</span></p>
                    </li>
                    <li>
                        <p>主演：<span>片寄凉太&nbsp;川荣李奈&nbsp;松本穗香</span></p>
                    </li>
                    <li>
                        <p>类型：<span>奇幻/爱情/动画</span></p>
                        <p>片长：<span>96分钟</span></p>
                    </li>
                    <li>
                        <p class="movie-profile">简介：<span>  夏天、阳光，沙滩、海浪，青年消防员雏罂粟港（片寄凉太
                            配音）和爱好冲浪的向水日菜子（川荣李奈 配音）相遇并迅速展开热恋。看似命中注定的这对恋人，却不幸遭遇生死别离。无法接受港已经离世的雏子，某天突然发现，只要唱起属于两个人的那首歌，港就会从水中出现……</span>
                        </p>
                    </li>
                </ul>
                <div class="movie-wish-grade-btn clearboth">
                    <a href="javascript:;" class="movie-wish-btn flexcenter fl">
                        <i></i>
                        <span>想看</span>
                    </a>
                    <a href="javascript:;" class="movie-grade-btn flexcenter fl">
                        <i></i>
                        <span>评分</span>
                    </a>
                </div>
            </div>
            <div class="movie-grade-box">
                <div class="grade-box">
                    <b>7<sup>.8</sup></b>
                    <p>总分：10</p>
                </div>
                <ul>
                    <li><p>评分：<span>1253</span>人</p></li>
                    <li><p>想看：<span>15684</span>人</p></li>
                    <li><p>票房：<span>3200</span>万</p></li>
                </ul>
            </div>
        </div>

3.3、登录界面