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

本文链接：https://blog.youkuaiyun.com/2401_84412050/article/details/138966743

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

                </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>
<!--头部结束-->

    <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>

```

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;
}

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