HTML+CSS电影网页制作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>nuo_movie</title>

    <style>

        h1 {

            width: 700px;

            /* height: 60px; */

            /* background-color: aqua; */

            margin: 20px auto;

            font-size: 25px;

            color: #494949;

        }

        h1 .year {

            color: #888;

        }

        .article {

            width: 700px;

            margin: 0 auto;

            /* background-color: aqua; */

            font-size: 14px;

        }

        .movie {

            width: 140px;

            float: left;

            /* background-color: aqua; */

            margin-right: 15px;

        }

        .movie .a {

            display: inline-block;

            width: 140px;

        }

        .description {

            line-height: 150%;

        }

        .description a {

            text-decoration: none;

            color: #37a;

        }

        .pl {

            color: #666666bd;

        }

    </style>

</head>

<body>

    <h1>

        <span>小丑 Joker</span>

        <span class="year">(2019)</span>

    </h1>

    <div class="article">

        <div class="movie">

            <a

                href="https://www.bilibili.com/video/BV11d4y127Y8/?spm_id_from=333.337.search-card.all.click&vd_source=fa16e6750fb2a251798217fdc9d89aef"><img

                    src="imgs/joker.jpg" width="140px"></a>

        </div>

        <div class="description">

            <span><span class="pl">导演</span>: <span><a href="#">托德·菲利普斯</a></span></span><br>

            <span><span class="pl">编剧</span>: <span><a href="#">托德·菲利普斯</a>

                    / <a href="#">斯科特·西尔弗</a>

                    / <a href="#">鲍勃·凯恩</a>

                    / <a href="#">比尔·芬格</a>

                    / <a href="#">杰瑞·罗宾逊</a></span></span><br>

            <span><span class="pl">主演</span>: <span><span><a href="#">华金·菲尼克斯</a> /

                    </span><span><a href="#">罗伯特·德尼罗</a> /

                    </span><span><a href="#">马克·马龙</a> / </span><span><a href="#">莎姬·贝兹</a> / </span><span><a

                            href="#">谢伊·惠格姆</a> /

                    </span><span><a href="#">弗兰西丝·康罗伊</a> / </span><span><a href="#">布莱恩·考伦</a> / </span><span><a

                            href="#">布莱恩·泰里·亨利</a> / </span><span><a href="#">布莱特·卡伦</a> /

                    </span><span><a href="#">道格拉斯·霍奇斯</a> / </span><span></span><br>

                    <span class="pl">类型:</span> <span>剧情</span> / <span>惊悚</span>

                    / <span>犯罪</span><br>

                    <span class=" pl">官方网站:</span> <a href="#">www.jokermovie.net</a><br>

                    <span class="pl">制片国家/地区:</span> 美国 / 加拿大<br>

                    <span class="pl">语言:</span> 英语<br>

                    <span class="pl">上映日期:</span> <span>2019-08-31(威尼斯电影节)</span> / <span>2019-10-04(美国)</span><br>

                    <span class="pl">片长:</span> <span>122分钟</span> /

                    118分钟(威尼斯电影节)<br>

        </div>

    </div>

</body>

</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我们可以按照以下步骤来制作电影网页: 1. 确定网页的整体布局和设计风格,可以参考其他电影网站的布局和设计风格进行参考。 2. 使用HTML语言创建网页的骨架,包括头部、导航栏、页脚等。 3. 在HTML文件中添加所需的内容,包括电影的海报、简介、演员表等。 4. 使用CSS样式表为网页添加样式,包括字体、颜色、背景、布局等。 5. 为网页添加交互效果,如鼠标悬停、点击等。 下面是一个简单的HTML代码示例: ``` <!DOCTYPE html> <html> <head> <title>电影网页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>电影网页</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">电影列表</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <main> <section> <h2>电影名称</h2> <img src="movie.jpg" alt="电影海报"> <p>电影简介</p> <ul> <li>导演:XXX</li> <li>主演:XXX</li> <li>类型:XXX</li> <li>上映时间:XXX</li> </ul> </section> </main> <footer> <p>版权所有 © 2021 电影网页</p> </footer> </body> </html> ``` 然后,我们可以使用CSS样式表为网页添加样式,例如: ``` header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { margin: 20px; } section { display: flex; flex-wrap: wrap; } section img { width: 200px; margin-right: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` 以上示例仅供参考,你可以根据实际需要进行调整和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值