html網頁制作代碼大全——大學生影視主題網頁制作——圖圖影視影院5頁HTML+CSS+JavaScript

HTML執行個體網頁代碼, 本執行個體适合于初學HTML的同學。該執行個體裡面有設定了css的樣式設定，有div的樣式格局，這個執行個體比較全面，有助于同學的學習,本文将介紹如何通過從頭開始設計個人網站并将其轉換為代碼的過程來實踐設計。

文章目錄

一、網頁介紹
一、網頁效果
二、代碼展示

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（源檔案）所需的知識點。

一、網頁效果

html網頁制作代碼大全——大學生影視主題網頁制作——圖圖影視影院5頁HTML+CSS+JavaScript

二、代碼展示

1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bangdan.css">
<title>榜單</title>
</head>

<body>
      <div class="box">
            <div class="box1">
          <a href="tutu1.html"><span class="name"><span class="mingzi">------圖圖影視影院</span></span></a>                   
          <div class="city1">城市:滄州</div>
            <div class="city2"><div class="city3"><a href="#"><span class="mingzi">定位城市:定位失敗</span></a></div>
            <div class="city4">定位失敗</div></div>
            <div class="login"><a href="login.html"><span class="mingzi">登入/</span></a></div>
            <div class="exit"><a href="tutu1.html"><span class="mingzi">退出</span></a></div>
          <div class="search1">
                    <input type="text" class="input" placeholder="找影視劇、影人、影院">
          </div>
          <div class="search2">
                    <input class="submit" type="submit" value="搜尋">
          </div>
          </div>
          <div class="one">
                <ul>
                    <li><a href="tutu1.html" class="three"><span class="mingzi">首頁</span></a></li>
                    <li><a href="movie.html" class="three"><span class="mingzi">電影</span></a></li>
                    <li><a href="yingyuan.html" class="three "><span class="mingzi">影院</span></a></li>
                    <li><a href="bangdan.html" class="three active"><span class="mingzi">榜單</span></a></li>
                    <li><a href="#" class="three"><span class="mingzi">熱點</span></a></li>
                </ul>
                </div>
                <div class="box2">
                <span><a href="#" class="two active"><span class="mingzi">熱映口碑榜</span></a></span>          <a href="#"><span class="sort4"><span class="mingzi">最受期待榜</span></a><a href="#">          <span class="sort4"><span class="mingzi">國内票房榜</span></a></div>
                <div class="box3">
                <div class="bg">
                <div class="sheet">
                <span class="top">TOP</span>
                <p class="tp"></p>
                <p><a href="https://v.qq.com/x/cover/jqq4vlwrxzfdxi4/p0020vf6862.html"><span class="mingzi">長津湖</span></a></p>
                <p><a href="https://v.qq.com/x/cover/mzc00200kbornzq/c3304913l9d.html"><span class="mingzi">梅蘭芳</span></a></p>
                <p><a href="https://v.qq.com/x/cover/mzc00200v3x7zg9/t3308lhnf7i.html"><span class="mingzi">揚名立萬</span></a></p>
                <p><a href="https://v.qq.com/x/cover/mzc00200wh6nz2g/o3219tg84hr.html"><span class="mingzi">天書奇譚</span></a></p>
                </div>
                </div>
                </div>
                <div class="bottom">
  <p>
            <a href="#"><span class="mingzi">商務合作郵箱：[email protected]</span></a> <a href="#"><span class="mingzi">客服電話：xxx</span></a >  <a href="#"><span class="mingzi">違法和不良資訊舉報電話：xxx</span></a>
        </p>
        <p><a href="#"><span class="mingzi">xxx</span></a></p>
        <p>
           <a href="#"><span class="mingzi">圖圖影視影院</span></a> </p>
            </div>
                
          </div>
</body>
</html>

2.CSS代碼

body{
  margin: 0 100px;
  padding: 0;
  
}
.box{
  width: 1200px;
  position: relative;
  background: #FFF;
}
.box1{
  width: 100%;
  height: 125px;
  background:url(../image/log.png) #FFF no-repeat;
  background-size: 250px 125px;
}
a{
  text-decoration: none;
  color:#000;
}
.name{
  width: 300px;
  height: 125px;
  position: absolute;
  left: 270px;
  top: 0px;
  line-height: 125px;
  text-align: center;
  font-size:30px;
  color:#00F;
}
.city1{
  width: 87px;
  height: 25px;
  position: absolute;
  left: 980px;
  top: 30px;
  line-height: 25px;
  text-align: center;
}
.city2{
  width: 146px;
  height: 25px;
  position: absolute;
  left: 1056px;
  top: 30px;
  line-height: 25px;
  text-align: center;
}
.city4 {
  width:146px;
  height:30px;
  display: none;
  position: absolute;
  background-color:#CCC;
}
.city2:hover .city4 {
  display: block;
}
.city2:hover{
   border-bottom: 30px solid #666;
}
.login{
  width: 70px;
  height: 25px;
  position: absolute;
  left: 1107px;
  top: 0px;
  line-height: 25px;
  text-align: center;
}
.exit{
  width: 60px;
  height: 25px;
  position: absolute;
  left: 1150px;
  top: 0px;
  line-height: 25px;
  text-align:  center;
}
.search1{
  width: 100px;
  height: 25px;
  position: absolute;
  left: 977px;
  top: 101px;
}
.search2{
  width: 50px;
  height: 25px;
  position: absolute;
  left: 1156px;
  top: 102px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #F66;
  background-color:#F66;
  width:1200px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 10px 100px;
} 
li .active {
  background-color: #FC0;
}
.mingzi{
  display:inline-block;
}
.mingzi:hover{
  color:#F00;
}
span .active{
  color:#30F;
}
.box2{
  width:1100px;
  text-align:center;
  position:absolute;
  top:175px;
}
.box3{
  width:1100px;
  position:absolute;
  top:190px;
}
.bg{
  width:600px;
  height:550px;
  background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
  margin:50px auto;
  padding:40px;
  border-radius:50%;
  padding-top:50px;
  border:10px solid #ccc;
}
.sheet{
  width:372px;
  height:530px;
  background:#fff;
  border-radius:30px;
  box-shadow:15px 15px 12px #000;
  margin:0 auto;
}
.sheet p{
  width:372px;
  height:55px;
  background:#ccc no-repeat 70px 20px;
  margin-bottom:2px;
  font-size:10px;
  color:#d6d6d6;
  line-height:55px;
  text-align:center;
  font-family:"微軟雅黑";
}
.sheet .tp{
  width:372px;
  height:247px;
  background:#fff;
  background-image:url(../image/yingyuantubiao.png);
  background-size:50% 50%;
  background-repeat:no-repeat;
  background-position:87px 16px,99px 192px;
  border-radius:30px 30px 0 0;
}
.top{
  width:372px;
  height:60px;
  position:absolute;
  top:270px;
  left:360px;
  font-size:50px;
  line-height:60px;
  text-align:center;
}
.sheet .yj{
  border-radius:0 0 30px 30px;
}
.bottom{
  width:1200px;
  position:absolute;
  top:985px;
  text-align:center;
  background:#06F;
}

三、個人總結

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
菜單美觀、醒目，二級菜單可正常彈出與跳轉；
要有JS特效，如定時切換和手動切換圖檔新聞；
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
頁面清爽、美觀、大方，不雷同。
網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

四、精彩推薦

1.看到這裡了就

【點贊收藏博文】

三連支援下吧，你的支援是我創作的動力,

【觀注作者 |擷取更多源碼| 優質文章】

。

html網頁制作代碼大全——大學生影視主題網頁制作——圖圖影視影院5頁HTML+CSS+JavaScript

文章目錄

一、網頁介紹

一、網頁效果

二、代碼展示

1.HTML代碼

2.CSS代碼

三、個人總結

四、精彩推薦

繼續閱讀

門戶通專訪草根站長九天狼：做站貴在堅持

何為全棧工程師？你是否應該成為一名全棧工程師？

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

關于 underscore 中模闆引擎的應用示例

【JavaScript文法】函數對象的淺拷貝、深拷貝

CSS之折疊菜單

JS--運算符

數組和類數組

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo

配置網頁内容通路