web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作

最新推荐文章于 2024-03-26 11:32:32 发布

优质内容贡献

最新推荐文章于 2024-03-26 11:32:32 发布

阅读量222

点赞数

分类专栏： html网页设计作业 web大学生个人网站作业模学生div+css静态网页设计成品文章标签： css html javascript 前端 html5

本文链接：https://blog.csdn.net/qq_524614081/article/details/122343517

版权

这是一个HTML5期末大作业，展示了电影泰坦尼克号的四页网页设计，包括HTML、CSS和JavaScript的实现。该作品适合作为大学生个人网站作业模板，提供个人网页设计制作参考。

摘要由CSDN通过智能技术生成

HTML5期末大作业：电影网站设计——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作

文章目录

HTML5期末大作业：电影网站设计——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
一、作品展示
二、文件目录
三、代码实现
四、学习资料

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">
<meta name="author" content="order by dede58.com/" />
  <title>Demo</title>

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>
<body style=" height: 2000px; ">

  <!---------- 顶部页面 ---------->
  <div id="header">

    <!-- 最顶部 -->
    <div class="header-top">
      <div class="auto-width">
        <h1 class="logo fl"><a href="#"><img src="picture/logo.png" alt="#"></a></h1>
        <div class="search-box fl">
          <form action="#">
            <input type="text" class="fl search-text" placeholder="Search here...">
            <button class="fl search-btn">
              <i class="iconfont icon-search"></i>
            </button>
          </form>
          <div class="search-feedback">
            <span class="search-hot">今日热搜</span>
            <div class="search-menu">
              <a href="#" class="item item-cur">
                <span>1</span>
                <em>OverWatch</em>
              </a>
              <a href="#" class="item item-cur">
                <span>2</span>
                <em>电影知道答案</em>
              </a>
              <a href="#" class="item item-cur">
                <span>3</span>
                <em>S6</em>
              </a>
              <a href="#" class="item">
                <span>4</span>
                <em>夏目友人帐</em>
              </a>
              <a href="#" class="item">
                <span>5