一濒旦、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)误墓。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局出吹，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計沛豌。
二趋箩、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239806
(title-A38JP 電影網(wǎng)站7頁，不包含js 有登陸注冊加派，表格 table布局 叫确，有的登錄注冊頁面，內(nèi)嵌 css)]
?? 截圖演示
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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="nav">
<tr height="60px">
<td width="400px">
<h1><a href="">影視大全</a></h1>
</td>
<td> </td>
<td>
<a href="">首頁</a>
</td>
<td>
<a href="list.html">影視列表</a>
</td>
<td>
<a href="juq.html">影視劇評</a>
</td>
<td>
<a href="dec.html">影視介紹</a>
</td>
<td>
<a href="login.html">登錄</a>
</td>
<td>
<a href="re.html">注冊</a>
</td>
<td>
<a href="my.html">我的</a>
</td>
</tr>
</table>
<img width="100%" height="500" src="picture/0.jpg" alt="">
<div class="ban list">
<a href="#">電視劇</a>
<a href="#">綜藝</a>
<a href="#">電影</a>
<a href="#">院線大片</a>
<a href="#">自制電影</a>
<a href="#">動漫</a>
<a href="#">少兒</a>
<a href="#">紀(jì)錄片</a>
<a href="#">VIP會員</a>
<a href="#">音樂</a>
<a href="#">體育</a>
<a href="#">愛看</a>
<a href="#">娛樂</a>
<a href="#">生活</a>
<a href="#">新聞</a>
<a href="#">教育</a>
<a href="#">汽車</a>
<a href="#">更多</a>
</div>
<div class="title">影視劇</div>
<table>
<tr height="450">
<td width="240">
<img width="224" src="picture/index.jpg" alt="">
<h3>大明風(fēng)華 TV版</h3>
<p>主演：湯唯/朱亞文</p>
</td>
<td width="240">
<img width="224" src="picture/index1.jpg" alt="">
<h3>鶴唳華亭</h3>
<p>主演：羅晉/李一桐</p>
</td>
<td width="240">
<img width="224" src="picture/index2.jpg" alt="">
<h3>淑女飄飄拳</h3>
<p>主演：畢雯珺/孫千</p>
</td>
<td width="240">
<img width="224" src="picture/index3.jpg" alt="">
<h3>未經(jīng)安排的青春</h3>
<p>主演：黃宥明/余昊洋</p>
</td>
<td width="230">
<img width="224" src="picture/index4.jpg" alt="">
<h3>戀愛先生</h3>
<p>主演：靳東/江疏影</p>
</td>
</tr height="450">
<tr height="450">
<td width="240">
<img width="224" src="picture/index5.jpg" alt="">
<h3>將軍在上</h3>
<p>主演：馬思純 / 盛一倫</p>
</td>
<td width="240">
<img width="224" src="picture/index6.jpg" alt="">
<h3>微微一笑很傾城</h3>
<p>主演：楊洋 / 鄭爽</p>
</td>
<td width="240">
<img width="224" src="picture/index7.jpg" alt="">
<h3>三生三世十里桃花</h3>
<p>主演：楊冪 / 趙又廷</p>
</td>
<td width="240">
<img width="224" src="picture/index8.jpg" alt="">
<h3>白夜追兇 第一季</h3>
<p>主演：潘粵明 / 王瀧正</p>
</td>
<td width="230">
<img width="224" src="picture/index9.jpg" alt="">
<h3>知否知否應(yīng)是綠肥紅...</h3>
<p>主演：趙麗穎 / 馮紹峰</p>
</td>
</tr>
</table>
<div class="more">查看更多</div>
<div class="footer">
<div class="ban">
<a href="#">優(yōu)酷</a>|
<a href="#">土豆</a>|
<a href="#">UC瀏覽器</a>|
<a href="#">UC頭條</a>|
<a href="#">阿里文學(xué)</a>|
<a href="#">蝦米</a>|
<a href="#">阿里星球</a>|
<a href="#">阿里影業(yè)</a>|
<a href="#">游戲</a>|
<a href="#">鯨觀</a>
</div>
<div>影視版權(quán)信息</div>
</div>
</body>
</html>
??CSS代碼
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
text-align: center;
background: #333;
}
a{
text-decoration: none;
color: #eee;
}
.title{
width: 1200px;
font-size: 24px;
font-weight: bold;
margin: 40px auto 30px;
}
table{
width: 1200px;
margin: auto;
}
h3,p{
margin: 12px;
}
.more{
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ddd;
margin: 40px auto 60px;
}
.list a{
display: inline-block;
color: #000;
padding: 16px;
}
.footer{
background: #333;
color: #eee;
padding: 40px 0;
text-align: center;
}
.ban{
width: 1200px;
margin: 20px auto;
}
.footer a{
padding: 0 20px;
}
</style>
四竹勉、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計算機基礎(chǔ)到前端常用框架的教程娄琉，涵蓋前端大部分必備知識（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
