用DIV+CSS技术设计的个人电影网站（web前端网页制作课作业）

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

一、网页介绍

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

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

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

---

一、网页效果

二、代码展示

1.HTML代码

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

 <center>
      <nav class="navbar navbar-default " role="navigation">
        <div class="container-fluid ">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">电影网LOGOa>
          div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="register.html"><span class="glyphicon glyphicon-user">span> 注册a>
            li>
            <li>
              <a href="#"><span class="glyphicon glyphicon-log-in">span> 登录a>
            li>
          ul>
        div>
      nav>
      <div style="width: 75%; min-width: 1150px;max-width: 1320px;">
        <nav class="navbar navbar-inverse navbar-static-top " role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="index.html">首页a>
            div>
            <div>
              <ul class="nav navbar-nav">
                <li>
                  <a href="#">电影a>
                li>
                <li>
                  <a href="#">电视剧a>
                li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    动漫 <b class="caret">b>
                  a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">jmetera>
                    li>
                    <li>
                      <a href="#">EJBa>
                    li>
                    <li>
                      <a href="#">Jasper Reporta>
                    li>

                  ul>
                li>
                <li>
                  <a href="#">综艺a>
                li>
                <li>
                  <a href="#">音乐MVa>
                li>
                <li>
                  <a href="#">视频短片a>
                li>
                <li>
                  <a href="#">公开课a>
                li>
              ul>
              <div class="clear">
                <form name="myForm"  onsubmit="return validateForm()" 	 class="navbar-form navbar-right"  >
                  <div class="form-group">
                    <input id="searchKey" name="fname" type="text" class="form-control" placeholder="输入电影名称...">
                  div>
                  <button type="submit" class="btn btn-default " onclick="sear()">搜索电影button>
                form>
              div>

            div>
          div>
          <div class="container-fluid navbar-default  ">

            <div>
              <ul class="nav navbar-nav">
                <li>
                  <a href="#">2019电影a>
                li>
                <li>
                  <a href="#">国语电影a>
                li>
                <li>
                  <a href="#">喜剧片a>
                li>
                <li>
                  <a href="#">动作片a>
                li>
                <li>
                  <a href="#">恐怖片a>
                li>
                <li>
                  <a href="#">爱情片a>
                li>
                <li>
                  <a href="#">剧情片a>
                li>
                <li>
                  <a href="#">科幻片a>
                li>
              ul>
              <ul class="nav navbar-nav navbar-right">
                <li>
                  <a href="#">评分最高a>
                li>
                <li>
                  <a href="#">最热门a>
                li>
              ul>
            div>
          div>
        nav>
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

---

2.CSS代码

// --------------------------------------------------


.jumbotron {
  padding-top:    @jumbotron-padding;
  padding-bottom: @jumbotron-padding;
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;

  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }

  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding-top:    (@jumbotron-padding * 1.6);
    padding-bottom: (@jumbotron-padding * 1.6);

    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: @jumbotron-heading-font-size;
    }
  }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

---

三、个人总结

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

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

---

四、精彩推荐

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

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

3.以上内容技术相关问题可以相互学习交流