菜单 搜索
首页 前端知识 1000套HTML5期末大作业——电影我不是药神响应式页面带轮播(4页)

1000套HTML5期末大作业——电影我不是药神响应式页面带轮播(4页)

2024-03-07 08:03:48 前端知识 前端哥 859 240 我要收藏

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 1.HTML代码
    • 2.CSS代码
  • 三、个人总结
  • 四、精彩推荐

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

 
<html><!DOCTYPE html>
 
<head id="Head">
<script type="text/javascript">var allpane = 'topAreaA|headerAreaA|mainArea|footerAreaA|bottomAreaA|fixedBottomArea|fixed-left|fixed-right|popup-area';</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<!-- 外部样式 -->
 
<body class="font-zh-CN" style="">
er">
                    <div id="a1portalSkin_ctr216339216339_mainArea" class="module-content"><!-- Start_Module_216339 -->
                      <div class="qhd-content">
                        <p> <span style="color:#3869b3;"><span style="font-size:16px;">咨询热线：400-123-4567 &nbsp;</span></span><span style="color:#808080;"><span style="font-size:16px;"> | &nbsp;<a href="#">腾讯微博</a> &nbsp;| &nbsp;<a href="#" >新浪微博</a></span></span></p>
                      </div>
                      <!-- End_Module_216339 --></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
            <!-- S nav -->
            <nav class="nav">
              <div class="main-nav clearfix" skinobjectzone="menu_701">
                <ul class="sf-menu">
                  <li  class='current' ><a class="first-level" href="index.htm"  target=""><strong>首页</strong></a><i></i></li>
                  <li class=""><a class="first-level" href="index-1.htm"  target=""><strong>角色介绍</strong></a><i></i>
                      <ul class="">
                        
                      </ul>
                    </li><li class=""><a class="first-level" href="index-2.htm"  target=""><strong>获奖记录</strong></a><i></i>
                      <ul class="">
                        
                      </ul>
                    </li><li class=""><a class="first-level" href="index-3.htm"  target=""><strong>电影评价</strong></a><i></i>
                      <ul class="">
                        <li class=""><a class="" href="#"  target=""><strong>电影评价</strong></a></li><li class=""><!--<a class="" href="#"  target=""><strong>电影评价视频</strong></a></li><li class=""><a class="" href="#"  target=""><strong>试题练习</strong></a></li><li class=""><a class="" href="#"  target=""><strong>大学公开课</strong></a>--></li>
                      </ul>
                    </li><li class=""><!--<a class="first-level" href="index-4.htm"  target=""><strong>新闻资讯</strong></a>--><i></i>
                      <ul class="">
                        <li class=""><a class="" href="index-4.htm"  target=""><strong>公司新闻</strong></a></li><li class=""><a class="" href="index-9.htm"  target=""><strong>行业动态</strong></a></li><li class=""><a class="" href="index-10.htm"  target=""><strong>视频中心</strong></a></li>
                      </ul>
                    </li><li class=""><!--<a class="first-level" href="index-5.htm"  target=""><strong>联系我们</strong></a>--></li>
                      <ul class="">
                        
                      </ul>
                    </li>
                </ul>
              </div>
            </nav>
            <!-- E nav--></div>
        </div>
      </div>
      <!-- E top-main -->
      <div class="clear"></div>
    </header>
    <!-- S touch-top-wrapper -->
 
                </ul>
              </li><li><a href="javascript:;"><span>新闻资讯</span><i class="touch-arrow-down"></i></a>
                <ul>
                  
                  <li><a href="index-4.htm" ><span>公司新闻</span></a></li>
                  
                  <li><a href="index-9.htm" ><span>行业动态</span></a></li>
                  
                  <li><a href="index-10.htm" ><span>视频中心</span></a></li>
                  
                </ul>
              </li>
              <li><a href="index-5.htm" ><span>联系我们</span></a></li>
            </ul>
          </div>
        </div>
        <script type="text/javascript">
    $(document).ready(function(){
     
     $(".touch-toggle a").click(function(event){
      var className = $(this).attr("data-drawer");
      
      if( $("."+className).css('display') == 'none' ){      
       $("."+className).slideDown().siblings(".drawer-section").slideUp();
      }else{
       $(".drawer-section").slideUp(); 
      }
      event.stopPropagation();
     });
     
     /*$(document).click(function(){
      $(".drawer-section").slideUp();     
     })*/
     
     $('.touch-menu a').click(function(){     
      if( $(this).next().is('ul') ){
       if( $(this).next('ul').css('display') == 'none' ){
        $(this).next('ul').slideDown();
        $(this).find('i').attr("class","touch-arrow-up");     
       }else{
        $(this).next('ul').slideUp();
        $(this).next('ul').find('ul').slideUp();
        $(this).find('i').attr("class","touch-arrow-down");
       }   
      }
     });
    });
</script></div>
      <!-- E touch-top --></div>
    <!-- E touch-top-wrapper --><!-- ==================== E top ==================== --><!-- ==================== S header ==================== -->
  <div id="a1portalSkin_headerAreaA" class="header"><!-- Start_Module_216340 --><a name="26322" id="26322"></a>
    <div class="page-width">
      <div class="module-default">
        <div class="module-inner">
          <div id="a1portalSkin_ctr216340216340_mainArea" class="module-content"><!-- Start_Module_216340 -->
            <div class="qhd-module">
              <div class="column marg-per2">
                <div class="col-4-3">
                  <div id="a1portalSkin_ctr216340216340_Column2C75A25_QHDCPM216340M1" class="qhd_column_contain"><!-- Start_Module_216341 --><a name="26323" id="26323"></a>
                    <div class="module-default">
                      <div class="module-inner">
                        <div id="a1portalSkin_ctr216340216340_Column2C75A25_ctr216341216341_mainArea" class="module-content"><!-- Start_Module_216341 --><!-- S responsive-carousel -->
                          <div class="responsive-carousel carousel clearfix">
                            <div id="responsive-216341"> <div class="carousel-item">
                                <div class="carousel-img"><a href="javascript:;" target=""><img src="images/1-1611220Z3440-L.jpg"  alt="幻灯3" /></a></div>
                              </div>
<div class="carousel-item">
                                <div class="carousel-img"><a href="javascript:;" target=""><img src="images/1-1611220Z3550-L.jpg"  alt="幻灯2" /></a></div>
                              </div>
<div class="carousel-item">
                                <div class="carousel-img"><a href="javascript:;" target=""><img src="images/ys3.jpg"  alt="幻灯1" /></a></div>
                              </div>
 </div>
                            <div class="carousel-btn carousel-btn-fixed" id="carousel-page-216341"></div>
                            <script type="text/javascript">
     
  $(window).load(function(){
   $("#responsive-216341").carouFredSel({
    responsive : true,
    width       : '100%',
    items  : { visible : 1 },
    auto     : { pauseOnHover: true, timeoutDuration:5000 },
    swipe     : { onTouch:true, onMouse:true },
    pagination  : "#carousel-page-216341"
    //prev   : { button:"#carousel-prev-216341"},
    //next   : { button:"#carousel-next-216341"},
    //scroll : { fx : "coverfade", duration : 1200, timeoutDuration : 1500 }  
   });
            
            $("#responsive-216341 .carousel-item").show();
  });
</script></div>
                          <!-- E responsive-carousel --><!-- End_Module_216341 --></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-4-1 last">
                  <div id="a1portalSkin_ctr216340216340_Column2C75A25_QHDCPM216340M2" class="qhd_column_contain"><!-- Start_Module_216342 --><a name="26324" id="26324"></a>
                    <div class="module-default module-no-margin">
                      <div class="module-inner">
                        <div id="a1portalSkin_ctr216340216340_Column2C75A25_ctr216342216342_mainArea" class="module-content"><!-- Start_Module_216342 -->
                          <div class="qhd-content">
                            <p style="text-align: center; background-color:#6ab852;"> <img alt="" src="images/b517b07d-76df-4c08-a7a2-80481875696c.jpg"  style="width: 285px; height: 382px;" /></p>
                          </div>
                          <!-- End_Module_216342 --></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End_Module_216340 --></div>
        </div>
      </div>
    </div>
  </div>
  <!-- ==================== E Header ==================== --><!-- ==================== S main ==================== -->
  <section class="main">
    <div id="a1portalSkin_mainArea" class="full-screen clearfix"><!-- Start_Module_216346 --><a name="26317" id="26317"></a>
      <div class="module-section">
        <div class="module-section-inner">
          <div class="page-width">
            <div class="module-section-title-wrapper clearfix">
              <div class="module-section-title clearfix">
                <h2>基本信息</h2>
              </div>
            </div>
            <div id="a1portalSkin_ctr216346216346_mainArea" class="module-section-content"><!-- Start_Module_216346 --><!-- S tabs -->
              <div class="tabs-default">
                <ul class="tabs-nav clearfix">
                
                 <!-- <li><a href="javascript:;" class="current"><span>北京</span></a></li>-->
                  
                <!--  <li><a href="javascript:;" class="current"><span>上海</span></a></li>
                  
                  <li><a href="javascript:;" class="current"><span>广州</span></a></li>  -->
                  
ontent"><!-- Start_Module_216345 -->
            <div class="qhd-content">
              <p style="text-align: center;"> <img alt="" src="images/weixin.png"  style="width: 180px; height: 180px;" /><br />
                扫描二维码关注最新动态</p>
            </div>
            <!-- End_Module_216345 --></div>
        </div>
      </div>
    </div>
    <div class="popup-close-btn"><a href="javascript:;" title="关闭"><span>关闭</span></a></div>
  </div>
  <div class="popup-overlay"></div>
</div>
<!-- E popup --><!-- E go top -->
<div class="gotop-wrapper"><a href="javascript:;" class="fixed-gotop gotop"></a></div>
<!-- E go top -->
<!-- 外部脚本 -->
<!--58（dede58.com）做最好的整站模板下载网站--> 
</body>
<script src="js/online.js"  type="text/javascript"></script> 
</html>
 
复制

2.CSS代码

 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0
}
fieldset, img {
	border: 0
}
:focus {
	outline: 0
}
address, caption, cite, code, dfn, em, th, var, optgroup {
	font-style: normal;
	font-weight: normal
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit
}
code, kbd, samp, tt {
	font-size: 100%
}
input, button, textarea, select {
*font-size:100%
}
body {
	line-height: 1.5
}
ol, ul {
	list-style: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
caption, th {
	text-align: left
}
sup, sub {
	font-size: 100%;
	vertical-align: baseline
}
:link, :visited, ins {
	text-decoration: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none
}
 
 
复制

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、精彩推荐

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3386.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jquery列表顺序倒转排序效果

2024-03-31 10:03:16

layui加jQuery实现 web 登录功能（验证码验证）

2024-03-31 10:03:15

jquery for循环

2024-03-31 10:03:15

WEB文件上传之JQuery ajaxfileupload插件使用（二）

2024-03-31 10:03:08

JQuery 基本使用(1)，前端开发要求

2024-03-31 10:03:01

27岁学前端开发，jquery绑定事件不生效

2024-03-31 10:03:55

jQuery制作一个简单的打地鼠游戏(超详细讲解)

2024-03-31 10:03:55

ECharts之 饼图 外圈Pie -- 旋转动画

2024-03-31 10:03:54

echarts根据经纬度在地图上生成标点

2024-03-31 10:03:53

WPF 与echarts绘图控件数据交互

2024-03-31 10:03:47

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！