HTML5 一个简单的影视网站练习

最新推荐文章于 2024-06-05 10:27:28 发布

jvkal

最新推荐文章于 2024-06-05 10:27:28 发布

阅读量1.3w

点赞数 15

分类专栏： HTML 文章标签： H5 contenteditable details summary meter

本文链接：https://blog.csdn.net/qq_41425353/article/details/101180309

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5 一个简单的影视网站练习

关键技术：
1、注意这里实现一个可以下拉的导航（如图）：

这里使用不是js，而是使用了H5的文本标签：

和，这个标签必须要在谷歌浏览器下你才可以看的到。

2、使用了一个meter标签：

            ![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvNDg5NjIyLzE1NjkxNzAzNTQ5NTMtYTIxNjlmMzQtNmNlZi00NDRjLTljMDQtNjQ0OWM5MzNhZWM2LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=48&name=image.png&originHeight=96&originWidth=227&size=3666&status=done&width=113.5)

代码如下：具体的meter使用还需要去网上搜一下。

<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>

3、使用了一个可以编辑属性：contenteditable
使用举例：
正常效果：

添加效果：

预览效果：

在这里插入图片描述点击“科幻电影”下拉菜单效果.jpg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>电影影评网站</title>
    </head>
    <body>
        <!--header begin-->
        <header>
            <h2 align="center">电影影评网</h2>
            <p align="center">
                <img src="../images/44.jpg">
            </p>
        </header>
        <!--header end-->

        <!--nav begin-->
        <nav>
            <p align="center">
                <img src="../images/nav1.jpg">
                <img src="../images/nav2.jpg">
                <img src="../images/nav3.jpg">
                <img src="../images/nav4.jpg">
                <img src="../images/nav5.jpg">
            </p>
        </nav>
        <!--nav end-->

        <!--article begin-->
        <article>
            <details>
                <summary><img src="../images/111.png"></summary>
                <ul contenteditable="true">
                    <li>
                        <figcaption>《敢死队》</figcaption>
                        <p>今天看了全天唯一一场原声的
                            <mark>《敢死队》</mark>。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，
                            其中岁数最大的<mark>史泰龙</mark>64岁，岁数最小的<mark>杰森·斯坦森</mark>也有38岁，堪称老男人团。一帮纯爷们拍出的电影，
                            当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。
                            <mark>史泰龙</mark>全程曾哥附......
                        </p>
                        <img src="../images/444.jpg">
                    </li>
                    <li></li>
                    <li>
                        大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
                    </li>
                    <li>
                        媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
                    </li>
                    <li>
                        网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
                    </li>
                </ul>
                <hr size="3" color="#ccc">
                <ul contenteditable="true">
                    <li>
                        <figcaption>《赤焰战场 2》</figcaption>
                        <p>
                            这部电影的最大意义在于一群廉颇老矣的明星向观众做了一个集体性的道别。
                            他们以后或许还会各自为战地奋斗在荧屏之上，但如此集中的出现在一部电影中就显得几乎不再可能。
                            <mark>布鲁斯·威利斯</mark>已经56岁，<mark>海伦·米伦</mark>66岁，
                            <mark>约翰·马尔科维奇</mark>58岁，<mark>摩根·弗里曼</mark>已经74岁，
                            <mark>布莱恩·考克斯</mark>65岁。这些年纪已经超过或者年近花甲的曾经叱咤荧屏的人物正在渐渐地逝去，
                            如同那一抹灿丽的......
                        </p>
                        <img src="../images/555.jpg">
                    </li>
                    <li></li>
                    <li>
                        大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
                    </li>
                    <li>
                        媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
                    </li>
                    <li>
                        网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
                    </li>
                </ul>
            </details>
            <details>
                    <summary><img src="../images/222.png"></summary>
                    <ul contenteditable="true">
                        <li>
                            <figcaption>《雷神》</figcaption>
                            <p>
                                自<mark>《钢铁侠》</mark>开始，全球最负盛名的<mark>惊奇漫画电影公司</mark>
                                走上了不断致力于在特效技术上开拓创新的发展道路。本着以集合旗下所有英雄漫画形象，
                                打造一个"惊奇电影宇宙"的核心发展观，不断推出艺术造诣低下，剧情肤浅，但场景华丽、
                                极致炫目的"超级英雄"大片。<mark>《雷神》</mark>也是如此。尽管常被影评人抨击为"没脑子的超级英雄群"，
                                却没人能阻止好莱坞愈加明显........
                            </p>
                            <img src="../images/666.jpg">
                        </li>
                        <li></li>
                        <li>
                            大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
                        </li>
                        <li>
                            媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
                        </li>
                        <li>
                            网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
                        </li>
                    </ul>
                </details>
        </article>
        <!--article end-->

    </body>
</html>

代码附件：
代码.rar 里面有代码以及图片资源

jvkal

关注

15
点赞
踩
72

收藏

觉得还不错? 一键收藏
6
评论
HTML5 一个简单的影视网站练习

HTML5 一个简单的影视网站练习关键技术：1、注意这里实现一个可以下拉的导航（如图）：这里使用不是js，而是使用了H5的文本标签：和，这个标签必须要在谷歌浏览器下你才可以看的到。2、使用了一个meter标签： ![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1c...
复制链接

扫一扫