web前端大作业--黑色电影资讯博客网页设计（电影主题-HTML+CSS+JavaScript）_web大作业 电影网首页

于 2024-06-19 12:31:26 发布
阅读量185 收藏
点赞数 1
文章标签： 前端 课程设计 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124682/article/details/139799495
版权

index.html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>电影网站</title>
  </head>

<body>
    <!--头部开始	-->
    <header class="header">
        <div class="container">
            <div class="header_area">
                <div class="logo">
                    <a href="index.html">
							<img src="images/logo.png" alt="logo"/>
						</a>
                </div>
                <div class="meau">
                    <ul>
                        <li>
                            <a class="active" href="index.html">首页</a>
                        </li>
                        <li>
                            <a href="movies.html">电影</a>
                        </li>
                        <li>
                            <a href="celebrities.html">明星</a>
                        </li>
                        <li>
                            <a href="hot.html">热点</a>
                        </li>
                        <li>
                            <a href="news.html">新闻</a>
                        </li>
                        <li style="width: 120px;">
                            <a href="###" class="theme-btn">
									<i class="icofont icofont-ticket"></i>
									&nbsp;&nbsp;订票									
								</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--头部结束-->
    </header>
    <!--内容部分开始-->
    <section id="content">
        <!--banner开始-->
        <div class="banner">
            <ul class="list">
                <li class="on"><a href="#"><img src="images/b1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/b2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/b3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/b4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/b5.jpg" alt="" /></a></li>
            </ul>
         
            <a href="javascript:;" class="arrow left">&lt</a>
            <a href="javascript:;" class="arrow right">&gt</a>
        </div>
        <!--近期热播-->
        <div class="con_area">
            <div class="container">
                <div class="recent_con">
                    <div class="con_top">
                        <h1>
                            <i class="icofont icofont-movie"></i> 近期热播
                        </h1>
                        <a href="index.html" class="more">
									MORE>>
								</a>
                    </div>
                    
        <!--经典电影-->
        <div class="con_area">
            <div class="container">
                <div class="jd_con">
                    <div class="con_top">
                        <h1>
                            <i class="icofont icofont-film"></i> 经典电影
                        </h1>
                        <a href="index.html" class="more">
									MORE>>
								</a>
                    </div>
                    <div class="row" style="overflow: hidden; width: 100%;">
                        <div class="col-md-9">
                            <div class="video-area">
                                <img src="images/video1.png" alt="video" />
                                <a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
						
        <!--	最新电影-->
        <div class="con_area">
            <div class="container">
                <div class="jd_con">
                    <div class="con_top">
                        <h1>
                            <i class="icofont icofont-coffee-cup"></i> 最新电影
                        </h1>
                        <a href="index.html" class="more">
									MORE>>
								</a>
                    </div>
                </div>
            

    </section>
    <!--end start-->
    <footer id="end">
        <div class="container">
            <span class="company">
					北京时代国际影业有限公司
				</span>
        </div>
    </footer>
</body>

</html>

style.css

.logo {
    float: left;
}

.logo a {
    display: inline-block;
}

.meau {
    float: right;
    padding-top: 34px;
}

.meau li {
    float: left;
    width: 90px;
    text-align: center;
}

.meau li a {
    font-family: "微软雅黑";
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}

.meau li a:hover {
    color: #eb315a;
}

.meau li .active {
    color: #eb315a;
}

.meau li .theme-btn {
    background: #eb315a;
    border: 1px solid #eb315a;
    color: #fff;
    border-radius: 35px;
    padding: 5px 25px;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
}

.meau li .theme-btn:hover {
    color: #eb315a;
    border: 1px solid #eb315a;
    background: rgba(235, 49, 90, 0.2);
}

/*banner*/

.banner {
    width: 100%;
    height: 450px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
}

.list li {
    position: absolute;
    width: 100%;
    text-align: center;
}

.btn {
    font: 14px/2.5em "微软雅黑";
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-55%);
    bottom: 40px;
    z-index: 2;
}

作品来自于网络收集、侵权立删

获取完整源码：

大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号获取👇🏻👇🏻👇🏻

打卡 文章 更新61/  100天

专栏推荐阅读：

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

2401_85124682
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值