HTML5-电影影评网

最新推荐文章于 2023-03-08 00:01:40 发布

xiaozhen0610

最新推荐文章于 2023-03-08 00:01:40 发布

阅读量3.6k

点赞数 3

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjj2a1ji0jhj.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

学习完了HTML5的新标签，然后结合之前的案例做了第一个小案例。自我感觉良好。下面我来展示一下图片

这是我浏览其他网站的时候以为发现的新功能可以运行代码，这是运行之后截得图片。自我感觉照片还是蛮高大上的。如果以后博客园也有运行代码的功能就好了。

下面是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>电影影评网</title>
    </head>
    <body>
        
        <header >
            <h2 align="center">电影影评网</h2>
            <p align="center">
                <img width="80%" src="img/header.jpg" />
            </p>
        </header>
        
        
        <nav>
            <p width="80%" align="center">
                <img width="15%" height="200" src="img/01.jpg" />
                <img width="15%" height="200" src="img/02.jpg" />
                <img width="15%" height="200" src="img/03.jpg" />
                <img width="15%" height="200" src="img/05.jpg" />
                <img width="15%" height="200" src="img/06.jpg" />
            </p>
        </nav>
        
       
        
        <article align="center">
            <details >
                <summary >动作电影</summary>
                <ul align="left" contenteditable="true">
                    <li>
                        <figcaption>《美人鱼》</figcaption>
                        <p >《美人鱼》是由<mark>周星驰</mark>执导，由江玉仪监制的喜剧爱情片，
                            <mark>邓超、罗志祥、张雨绮、林允</mark>等领衔出演[1].该片讲述
                            了富豪刘轩和为了拯救同族前往刺杀他的美人鱼珊珊坠入
                            爱河，谱写了一段人鱼爱情童话的故事。</p>
                            <img src="img/movie01.jpg" />
                    </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="70" min="0" max="100" low="60" high="80"
                                title="70分" optimum="100">70</meter>
                    </li>
                </ul>
                <hr size="3" color="#ccc" />
                <ul align="left" contenteditable="true">
                    <li>
                        <figcaption>《陆垚知马俐》</figcaption>
                        <p>《陆垚知马俐》是由<mark>文章</mark>，<mark>陈可辛</mark>监制，
                            <mark>包贝尔、宋佳、朱亚文、焦俊艳</mark>主演的爱情喜剧电影。
                            影片讲述了陆垚在上大学时重逢幼儿园同学马俐，
                            虽然彼此心存好感，但由于陆垚有严重的“表白障碍症”，
                            只能眼巴巴看着自己的女神马俐与别人谈恋爱。
                            而自此之后很多年，陆垚只能以朋友的名义爱着马俐，
                            也与她开始了一段“友情不甘、恋人不敢”的长跑。</p>
                            <img src="img/movie02.jpg" />
                    </li>
                    <li>
                        大众评分：<meter value="75" min="0" max="100" low="60" high="80"
                                title="75分" optimum="100">75</meter>
                    </li>
                    <li>
                        媒体评分：<meter value="90" min="0" max="100" low="60" high="80"
                                title="90分" optimum="100">90</meter>
                    </li>
                    <li>
                        网站评分：<meter value="70" min="0" max="100" low="60" high="80"
                                title="70分" optimum="100">70</meter>
                    </li>
                </ul>
            </details>
        </article>
        
    </body>
</html>

运行代码

xiaozhen0610

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
HTML5-电影影评网

学习完了HTML5的新标签，然后结合之前的案例做了第一个小案例。自我感觉良好。下面我来展示一下图片这是我浏览其他网站的时候以为发现的新功能可以运行代码，这是运行之后截得图片。自我感觉照片还是蛮高大上的。如果以后博客园也有运行代码的功能就好了。下面是我的代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>电影影评网</ti
复制链接

扫一扫