用HTML+CSS做一個漂亮簡單的動漫網頁(懸崖上的波妞-4頁)
一、作品介紹
HTML例項網頁程式碼， 本例項適合於初學HTML的同學。該例項裡面有設定了css的樣式設定，有div的樣式格局，這個例項比較全面，有助於同學的學習，本文將介紹如何透過從頭開始設計個人網站並將其轉換為程式碼的過程來實踐設計。
二、作品效果
影片演示
https：//live。csdn。net/v/embed/239833
（title-B31JP 懸崖上的波妞-4頁HTML+CSS）］
截圖演示
三、 作品程式碼
隣HTML程式碼
<！DOCTYPE
html
>
<
html
>
<
head
>
<
meta
charset
=
“utf-8”
>
<
link
type
=
“text/css”
rel
=
“stylesheet”
href
=
“css/style。css”
/>
<
title
>
崖上的波妞
title
>
head
>
<
body
>
<！——頭部——>
<
header
>
<
ul
class
=
“nav clearfix”
>
<
li
>
<
a
href
=
“index。html”
>
首頁
a
>
li
>
<
li
>
<
a
href
=
“pingjia。html”
>
評價
a
>
li
>
<
li
>
<
a
href
=
“juese。html”
>
角色
a
>
li
>
<
li
>
<
a
href
=
“tupian。html”
>
圖片
a
>
li
>
ul
>
header
>
<
div
class
=
“banner”
>
<
img
src
=
“img/banner_1。jpg”
/>
div
>
<！——內容——>
<
div
class
=
“con ”
>
<
div
class
=
“top clearfix”
>
<
div
class
=
“pic”
>
<
video
src
=
“img/v。mp4”
class
=
“hm_vdo”
loop
autoplay
controls
width
=
“100%”
>
video
>
div
>
<
div
class
=
“text”
>
<
h2
>
介紹
h2
>
<
hr
>
<
P
>
《崖上的波妞》是由吉卜力工作室製作的動畫電影，由宮崎駿執導，奈良柚莉愛、山口智子、長島一茂等參與配音。該片講述了深海里的人魚小公主波妞喜歡上了人類男孩宗介，於是一心想變成人類的故事。該片於2008年7月19日在日本上映，2020年12月31日在中國內地上映。
<
br
>
《崖上的波妞》是由吉卜力工作室製作的動畫電影，由宮崎駿執導，奈良柚莉愛、山口智子、長島一茂等參與配音。
該片講述了深海里的人魚小公主波妞喜歡上了人類男孩宗介，於是一心想變成人類的故事。
P
>
div
>
div
>
<
div
class
=
“pinglun tupian”
>
<
div
class
=
“title”
>
<
h2
align
=
“center”
>
影片評價
h2
>
div
>
<
div
class
=
“text”
>
《崖上的波妞》如同一道明媚如陽的色彩，使得其它同樣角逐威尼斯電影節金獅獎的影片黯然失色。觀看該片如同一次愉悅的旅行，從記憶中兒時幼兒園的彩虹圖畫中穿過，如夢似幻。宮崎駿準確而細膩地捕捉到了片中主角——這個五歲的小男孩宗介的心思。總之，《崖上的波妞》所展現出來的走向自然、天真，以及賦予海洋人格化的獨特嘗試，都使得該片成為一件難忘的藝術品。
<
hr
>
對於這部充滿溫度與愛意的電影，許多觀眾都選擇和最重要的人共同欣賞，其中不乏帶著孩子觀影的父母們。這是因為：一方面，《崖上的波妞》以“讓五歲孩子能看懂”為創作初衷，展現了充滿奇觀的世界與極致的童真美好，更讓孩子在潛移默化中感受學習到波妞、宗介身上“勇敢”、“擔當”的美好品質。另一方面，影片中宗介一家的相處模式也是當下許多家庭的真實寫照——因工作常年在外的父親、堅強勇敢的“超人媽媽”，其中宗介父親在航海途中透過探照燈來與妻女交流的情節，更是令不少父母觀眾感動落淚。可以說，《崖上的波妞》是父母給孩子的成長禮物，也是拉近親子距離、陪伴彼此度過溫馨時光的最佳選擇。（1905電影網 評）
div
>
div
>
<
div
class
=
“tupian”
>
<
div
class
=
“title”
>
<
h2
align
=
“center”
>
影片圖片
h2
>
div
>
<
ul
class
=
“clearfix”
>
<
li
>
<
img
src
=
“img/5。jpg”
/>
li
>
<
li
>
<
img
src
=
“img/2。jpg”
/>
li
>
<
li
>
<
img
src
=
“img/3。jpg”
/>
li
>
<
li
>
<
img
src
=
“img/1。jpg”
/>
li
>
ul
>
div
>
div
>
<！——底部——>
<
footer
>
<
p
>
網頁底部
p
>
footer
>
body
>
html
>
CSS程式碼
* {
margin
：
0
；
padding
：
0
；
}
body
{
margin
：
0
auto；
font-size
：
14px
；
color
：
#333
；
position
： relative；
}
img
{
border
： none；
}
a
{
cursor
： pointer；
color
：
#333
；
text-decoration
： none；
outline
： none；
}
ul
{
list-style-type
： none；
}
div
。clear
{
font
：
0px
Arial；
line-height
：
0
；
height
：
0
；
overflow
： hidden；
clear
： both；
}
。clearfix
：：after
{
content
：
“”
；
display
： block；
clear
： both；
}
body
{
background
：
#99CCCC
；
background-size
： cover；
padding-top
：
0px
；
padding-bottom
：
0px
；
width
：
1100px
；
margin-left
： auto；
margin-right
： auto；
}
header
{
height
：
60px
；
background
：
#009966
；
}
。nav
li
{
line-height
：
60px
；
float
： left；
width
：
25%
；
text-align
： center；
font-size
：
22px
；
}
。nav
li
a
{
color
：
#FFFFFF
；
}
。banner
{
display
： block；
}
。banner
img
{
width
：
100%
；
display
： block；
}
。con
{
padding
：
15px
；
background
：
#fff
；
}
。top
{
margin-bottom
：
20px
；
}
。top
。pic
{
float
： left；
width
：
440px
；
}
。top
。pic
img
{
padding
：
3px
；
width
：
100%
；
}
。top
。text
{
float
： right；
width
：
610px
；
line-height
：
26px
；
}
。top
。text
h2
{
font-size
：
18px
；
}
。title
{
color
：
#2d1f16
；
line-height
：
28px
；
margin
：
10px
0
；
}
。title
h2
{
font-size
：
18px
；
}
。tupian
li
{
float
： left；
width
：
23%
；
margin
：
1%
；
height
：
170px
；
}
。tupian
li
img
{
width
：
100%
；
height
：
100%
；
border-radius
：
20px
；
}
。pinglun
{
margin-bottom
：
20px
；
}
。pinglun
。text
{
line-height
：
26px
；
}
footer
{
background
：
#009966
；
color
：
#fff
；
padding-left
：
30px
；
line-height
：
50px
；
}
h2
{
color
：
#009933
；
background
：
#DFFDE7
；
font-size
：
30px
；}
。juese
li
{
float
： left；
width
：
100%
；
height
：
270px
；
margin-bottom
：
20px
；
}
。juese
li
。pic
{
width
：
20%
；
float
： right；
height
：
270px
；
}
。juese
li
。pic
img
{
width
：
100%
；
height
：
100%
；
}
。juese
li
。text
{
float
： left；
width
：
75%
；
height
：
270px
；
line-height
：
26px
；
padding
：
15px
；
box-sizing
： border-box；
}
。juese
li
。text
h2
{
font-size
：
18px
；
margin-bottom
：
10px
；
}
四、更多原始碼
【乾貨分享】自學程式設計的小夥伴可以前往我的 gitee 倉庫（持續更新中。。。）：
【web學習指南】從web基礎、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術文章 + 資源分享）
Gitee倉庫地址（來個Star吧~）：
https：//gitee。com/zhanyuqiu2022/my-app
