一喘先、??作品介紹
HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)午阵。該實(shí)例里面有設(shè)置了css的樣式設(shè)置废岂，有div的樣式格局闷串，這個(gè)實(shí)例比較全面瓮钥，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
二烹吵、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240020
(title-I50SJ-個(gè)人作品網(wǎng)頁帶psd三級頁面（8頁）)]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三碉熄、?? 作品代碼
??HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首頁</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web">
<div class="top">
<div class="topbg">
<div class="topner">
<div class="logo"><img src="images/logo.png" /></div>
<div class="nav">
<ul>
<li>
<a href="index.html">
<h1>首頁</h1>
<p>INDEX</p>
</a></li>
<li>
<a href="rizhi.html">
<h1>日志</h1>
<p>JOURNAL</p>
</a></li>
<li>
<a href="zuopin.html">
<h1>作品</h1>
<p>WORKS</p>
</a></li>
<li>
<a href="jianjie.html">
<h1>個(gè)人簡介</h1>
<p>INTRO</p>
</a></li>
<li>
<a href="lianjie.html">
<h1>友情鏈接</h1>
<p>LINK</p>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-----------main--------------->
<div class="main">
<div class="sbox1">
<div class="title">
<h1>個(gè)人簡介</h1>
<div class="xian"></div>
<p>PERSONAL PROFILE</p>
</div>
<div class="ner">
<div class="left">
<div class="lef">
<h1>德瑪西</h1>
<h2>視覺傳達(dá)設(shè)計(jì)專業(yè)學(xué)生</h2>
<p>擅長:攝影、平面設(shè)計(jì)肋拔、</p>
<p> 手繪锈津、UI設(shè)計(jì)......</p>
<div class="more"><a href="#">查看更多</a></div>
</div>
<div class="rig"><img src="images/simg2.jpg" /></div>
</div>
<div class="right">
<h1>關(guān)于我的</h1>
<div class="wenz">我是一個(gè)西南財(cái)經(jīng)大學(xué)天府學(xué)院藝術(shù)設(shè)計(jì)學(xué)院的大四學(xué)生，所學(xué)的專業(yè)是視覺傳達(dá)設(shè)計(jì)凉蜂，喜歡攝影琼梆、手繪和UI設(shè)計(jì)......</div>
<div class="tubiao">
<img src="images/img1.png" />
<img src="images/img2.png" />
<img src="images/img3.png" />
<img src="images/img4.png" />
<img src="images/img5.png" />
</div>
</div>
</div>
</div>
<div class="sbox2">
<div class="title">
<h1>技術(shù)交流</h1>
<div class="xian"></div>
<p>TECHNICAL EXCHANGE</p>
</div>
<div class="ner">
<div class="left">
<img src="images/simg3.jpg" />
<h1>如何做好網(wǎng)頁設(shè)計(jì)</h1>
<h2>2019-10-16 發(fā)布</h2>
<p>頁面整體和諧了，給瀏覽者是一個(gè)暢快舒服的感覺跃惫。要有整體大局的眼光叮叹，不去拘泥于局部或細(xì)小的地方。根據(jù)色彩對人們心理的影響爆存，合理運(yùn)用好文字的色彩......</p>
</div>
<div class="right">
<div class="bx1"><img src="images/simg4.jpg" />網(wǎng)頁設(shè)計(jì) —— 專業(yè)網(wǎng)頁設(shè)計(jì)及三合一網(wǎng)站設(shè)計(jì)</div>
<div class="bx1"><img src="images/simg4.jpg" /></div>
<div class="bx1"></div>
<div class="bx1"></div>
<div class="bx1"><img src="images/simg4.jpg" />調(diào)色師必須了解的知識(shí) —— 曝光度、對比度蝗砾、高光先较、陰影、白色與黑色色階
</div>
</div>
</div>
</div>
<div class="sbox3">
<div class="title">
<h1>我的日志</h1>
<div class="xian"></div>
<p>MY BLOGS</p>
</div>
<div class="ner">
<div class="left"><img src="images/simg5.jpg" /></div>
<div class="right">
<div class="bx"><img src="images/simg6.jpg" /><div class="tit">我的廣東之旅</div></div>
<div class="bx"><img src="images/simg7.jpg" /><div class="tit">第一站的燃手食堂</div></div>
<div class="bx"><img src="images/simg8.jpg" /><div class="tit">魅力廣州</div></div>
</div>
</div>
</div>
<div class="sbox4">
<div class="title">
<a href="dongtai.html">
<h1>動(dòng)態(tài)</h1>
<div class="xian"></div>
<p>MY ZONE</p>
</a>
</div>
<div class="ner">
<div class="left">
<a href="bpg.html">
<img src="images/simg9.jpg" />
<h1>畢棚溝之旅</h1>
<p>第一次去畢棚溝悼粮，也第一次看到這么
多雪闲勺！有點(diǎn)意思，哈哈哈...</p>
<div class="dibu">四川 . 阿壩藏族羌族自治州理縣<span>2019.1.28</span></div>
</a>
</div>
<div class="left right">
<img src="images/simg10.jpg" />
<h1>我的廣東采風(fēng) —— 第2天</h1>
<p>雖然走了很遠(yuǎn)才到扣猫，但是今天晚上好
吃的潮汕牛肉火鍋染我覺得不存在了</p>
<div class="dibu">廣東 . 廣州越秀區(qū)<span>2018.11.9</span></div>
</div>
</div>
</div>
<div class="sbox5">
<div class="title">
<h1>我的作品</h1>
<div class="xian"></div>
<p>WORKS</p>
</div>
<div class="ner">
<div class=" bx1">
<img src="images/simg11.jpg" />
<div class="riqi">2019-6-16</div>
<h1>展示與陳設(shè) 李寧服裝店</h1>
<p>查看 42 | 喜歡 12 </p>
<P>5位創(chuàng)作人 建模/設(shè)計(jì)</P>
</div>
<div class=" bx2">
<img src="images/simg12.jpg" />
<div class="riqi">2018-11-20 發(fā)布</div>
<h1>深圳灣之旅</h1>
<p>查看 35 | 喜歡 5 </p>
<P>德瑪西 攝影/后期</P>
</div>
<div class=" bx1 bx3">
<img src="images/simg13.jpg" />
<div class="riqi">2018-6-20</div>
<h1>帶珍珠耳環(huán)的兔子</h1>
<p>播放 308 | 喜歡 46 </p>
<P>德瑪西 繪制</P>
</div>
</div>
<div class="gengd"><a href="#">查看更多</a></div>
</div>
</div>
<!-----------foot--------------->
<div class="foot">
<div class="footer">
<img src="images/logo2.png" />
<a href="index.html"> 首頁 |</a>
<a href="jianjie.html">個(gè)人中心 |</a>
<a href="rizhi.html">我的日志 |</a>
<a href="zuopin.html">我的作品 |</a>
<a href="lianjie.html">友情鏈接 |</a>
</div>
</div>
</div>
</body>
</html>
四菜循、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程申尤，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉庫地址（來個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
