一肚豺、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學溃斋。該實例里面有設置了css的樣式設置，有div的樣式格局吸申，這個實例比較全面梗劫，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設計。
二截碴、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239856
(title-B79JP 紫羅蘭永恒花園動漫價紹網(wǎng)頁 7頁梳侨，含有table表格，js表單驗證還有首頁視頻日丹。以及列表頁走哺。浮動布局。div+css+js)]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三哲虾、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>紫羅蘭永恒花園</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="ziluolan">
<div id="banner">
<img src="picture/banner.png" alt="">
</div>
<nav>
<a href="">首頁</a>
<a href="juqing.html">劇情簡介</a>
<a href="renwu.html">主要人物</a>
<a href="meitu.html">美圖欣賞</a>
<a href="juji.html">劇集信息</a>
<a href="login.html">登陸</a>
<a href="register.html">注冊</a>
</nav>
<div id="index_main">
<div id="main_left">
<img src="picture/zuozhe.png" alt="">
<h2>關(guān)于作者</h2>
<p>
中文名:曉佳奈
</p>
<p>
外文名暁:佳奈
</p>
<p>
國籍:日本
</p>
<p>
主要成就:第5屆京都動畫小說獎大獎
</p>
<p>
代表作品:薇爾莉特·伊芙加登
</p>
<h2>經(jīng)歷</h2>
<p>
2015年丙躏，以第5屆京都動畫小說獎大獎獲獎作《薇爾莉特·伊芙加登》出道。
</p>
<video controls="" src="file/index.mp4"></video>
</div>
<div id="main_mid">
<h2>簡介</h2>
<p class="suojin">
動畫《薇爾莉特·伊芙加登》改編自日本小說家曉佳奈原作的同名輕小說束凑。2016年5月27日晒旅，在京都動畫官方網(wǎng)站內(nèi)，宣布了《薇爾莉特·伊芙加登》TV動畫化的決定汪诉。電視動畫于2018年1月10日首播废恋，全13集。其中TV未放送的第14話收錄在DVD&BD第4卷中摩瞎。
</p>
<img src="picture/dongman.png" alt="">
<h2>劇情簡介</h2>
<p>某個大陸的拴签、某個時代。</p>
<p>
大陸南北分割的戰(zhàn)爭結(jié)束了旗们，世界逐漸走向了和平蚓哩。
在戰(zhàn)爭中、作為軍人而戰(zhàn)斗的薇爾莉特·伊芙加登離開了軍隊上渴，來到了大港口城市岸梨。懷抱著戰(zhàn)場上一個對她而言比誰都重要的人告訴了她“某個話語”――。
... </p>
<span>查看更多》</span>
</div>
<div id="main_right">
<h2>主要角色</h2>
<ul>
<li>
<img src="picture/renwu1.png" alt="人物1">
<p>薇爾莉特·伊芙加登</p>
</li>
<li>
<img src="picture/renwu2.png" alt="人物2">
<p>克勞迪亞·霍金斯</p>
</li>
<li>
<img src="picture/renwu3.png" alt="人物3">
<p>基爾伯特·布甘比利亞</p>
</li>
<span>查看更多》</span>
</ul>
</div>
</div>
<footer>
<p>版權(quán)所有?</p>
</footer>
</div>
</body>
</html>
??CSS代碼
* {
margin: 0px;
padding: 0px;
list-style: none;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: url(../image/bg.png) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed
}
#ziluolan {
width: 1080px;
background-color: rgba(255, 255, 255, 0.767);
margin: 0 auto;
}
#banner {
width: 100%;
font-size: 0px;
}
#banner img {
width: 100%;
opacity: 0.6;
}
nav {
text-align: center;
box-sizing: border-box;
padding: 0px 20px;
border-bottom: 1px dotted rgb(104, 104, 104);
}
nav a {
text-align: center;
padding-left: 20px;
padding-right: 20px;
line-height: 60px;
text-decoration: none;
font-weight: 550;
color: #7973b1;
}
nav a:hover {
color: #5b30d3;
}
#index_main {
width: 100%;
box-sizing: border-box;
padding: 20px;
font-size: 0px;
border-bottom: 1px dotted rgb(104, 104, 104);
}
#main_left {
display: inline-block;
width: 333px;
color: #7973b1;
float: left;
font-size: 18px;
}
#main_left img {
width: 100%;
}
#windows li img {
width: 100%;
}
/* 第五頁 */
#juji {
font-size: 16px;
}
#juji h2 {
font-size: 24px;
text-align: center;
color: #7973b1;
margin-bottom: 20px;
}
#juji table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-bottom: 1px solid rgb(106, 106, 106);
;
border-right: 1px solid rgb(106, 106, 106);
;
}
.title {
background-color: rgb(99, 98, 98);
}
.title td p {
color: #fff;
line-height: 40px;
}
#juji table td {
border-left: 1px solid rgb(106, 106, 106);
;
border-top: 1px solid rgb(106, 106, 106);
line-height: 30px;
color: #333;
}
/* 第六頁 */
#denglu {
font-size: 16px;
}
#denglu h2 {
font-size: 24px;
text-align: center;
color: #7973b1;
margin-bottom: 20px;
}
#denglu {
text-align: center;
line-height: 30px;
}
#biaodan {
display: inline-block;
text-align: left;
margin-top: 30px;
margin-bottom: 100px;
}
#login {
display: inline-block;
width: 50px;
height: 30px;
}
#biaodan input {
width: 200px;
height: 26px;
padding: 0px 10px;
box-sizing: border-box;
}
#login {
height: 30px !important;
}
/* 第七頁 */
#zhuce {
font-size: 16px;
text-align: center;
line-height: 30px;
}
#zhuce h2 {
font-size: 24px;
text-align: center;
color: #7973b1;
margin-bottom: 20px;
}
四稠氮、??更多源碼
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎曹阔、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術(shù)文章 + 資源分享）
