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

本文链接：https://blog.youkuaiyun.com/2401_84412194/article/details/138966800

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

在这里插入图片描述

项目组织结构：

主要源码展示：

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;


### 文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。



更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1471537bfd3f5a483690ca477fd3f2b9.png)

**JavaScript**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)