一、??作品介紹
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)带斑。該實(shí)例里面有設(shè)置了css的樣式設(shè)置席噩，有div的樣式格局，這個(gè)實(shí)例比較全面捶朵，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)蜘矢。
二狂男、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239806
(title-A38JP 電影網(wǎng)站7頁(yè)，不包含js 有登陸注冊(cè)品腹，表格 table布局 岖食，有的登錄注冊(cè)頁(yè)面，內(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="">首頁(yè)</a>
</td>
<td>
<a href="list.html">影視列表</a>
</td>
<td>
<a href="juq.html">影視劇評(píng)</a>
</td>
<td>
<a href="dec.html">影視介紹</a>
</td>
<td>
<a href="login.html">登錄</a>
</td>
<td>
<a href="re.html">注冊(cè)</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="#">動(dòng)漫</a>
<a href="#">少兒</a>
<a href="#">紀(jì)錄片</a>
<a href="#">VIP會(huì)員</a>
<a href="#">音樂(lè)</a>
<a href="#">體育</a>
<a href="#">愛(ài)看</a>
<a href="#">娛樂(lè)</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>戀愛(ài)先生</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 倉(cāng)庫(kù)（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程羡鸥，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉(cāng)庫(kù)地址（來(lái)個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
