一哪审、??作品介紹
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/239884
(title-D01 我的家鄉(xiāng)杭州 7頁(yè)面)]
?? 截圖演示
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 rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="page">
<div class="banner">
<div align="center"><img src="images/banner.jpg" /></div>
</div>
<div class="daohang">
<p><a href="index.html">首頁(yè)</a></p>
<p><a href="xihu.html">杭州西湖</a></p>
<p><a href="xiaochi.html">杭州小吃</a></p>
<p><a href="fengjing.html">杭州風(fēng)景</a></p>
<p><a href="liuyan.html">客戶留言</a></p>
<p><a href="lianxi.html">地理位置</a></p>
<p><a href="zhanzhang.html">站長(zhǎng)信息</a></p>
</div>
<div class="content">
<div class="zuo">
<img src="images/zuo1.jpg" />
<div class="fangshi">
<h1>新聞公告</h1>
<p> 11月19日，杭州西湖風(fēng)景名勝區(qū)管委會(huì)（市園林文物局）召開(kāi)領(lǐng)導(dǎo)干部會(huì)議同衣，傳達(dá)學(xué)習(xí)貫徹黨的十八大精神竟块。西湖風(fēng)景名勝區(qū)（市園文局）黨委書(shū)記、管委會(huì)主任（局長(zhǎng)）劉穎傳達(dá)了十八大精神耐齐，并就名勝區(qū)（園文局）深入學(xué)習(xí)貫徹十八大精神作了部署浪秘，管委會(huì)副主任王宏偉、呂雄偉等黨委班子成員埠况、機(jī)關(guān)全體人員耸携、各基層區(qū)（局）管干部參加會(huì)議。會(huì)議由黨委副書(shū)記辕翰、副主任張鴻斌主持夺衍。<br />
</p>
</div>
</div>
<div class="you">
<div class="jieshao">
<h1>杭州介紹</h1>
<p><img src="images/jieshao.jpg" width="218" height="147" style="float:left; margin-right:19px;" /> 杭州市（本地吳語(yǔ)讀音（IPA）：愂 tsei）簡(jiǎn)稱杭，中國(guó)浙江省省會(huì)金蜀，副省級(jí)城市刷后，浙江省政治、經(jīng)濟(jì)渊抄、文化、科教中心丧裁，長(zhǎng)三角地區(qū)副中心城市和南翼中心城市护桦，浙江省的金融中心和行政中心，全國(guó)重點(diǎn)風(fēng)景旅游城市和歷史文化名城煎娇，大陸國(guó)際形象最佳城市之一二庵，中國(guó)七大古都之一贪染。古時(shí)杭州曾稱“臨安”、“錢(qián)塘”催享、“武林”等杭隙。杭州位于浙江省北部，處杭嘉湖平原南緣因妙，擁有約2300年的建城史痰憎，是一個(gè)典型的山水文化名城。西子湖攀涵、錢(qián)塘江铣耘、千島湖以及周邊丘陵構(gòu)成了杭州的山水美景。</p>
<p>自古以來(lái)以故，杭州的經(jīng)濟(jì)和文化比較發(fā)達(dá)蜗细，素有“東南第一州”之稱∨辏“欲把西湖比西子炉媒，淡妝濃抹總相宜”贊美西子湖之美±ニ福活躍的多元化經(jīng)濟(jì)和發(fā)達(dá)的文化教育使杭州成為浙江省政治吊骤、經(jīng)濟(jì)和文化的中心。 </p>
</div>
<div class="jieshaoB">
<h1>產(chǎn)品展示</h1>
<p>
<marquee><img src="images/chanpin1.jpg" /><img src="images/chanpin2.jpg" /><img src="images/chanpin3.jpg" /><img src="images/chanpin4.jpg" /><img src="images/chanpin5.jpg" /><img src="images/chanpin6.jpg" /><img src="images/chanpin7.jpg"
/><img src="images/chanpin8.jpg" /></marquee>
</p>
</div>
</div>
<div class="clearit"></div>
</div>
<div class="foot">
<div align="center">
</div>
</div>
</div>
</body>
</html>
??CSS代碼
@charset "utf-8";
/* CSS Document */
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
margin: 0;
padding: 0;
border: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "宋體";
font-size: 12px;
color: #000000;
line-height: 20px;
text-align: left
}
td,
th {
font-family: "宋體";
font-size: 12px;
color: #000000;
}
a {
color: #000000;
}
A:link {
TEXT-DECORATION: none;
}
A:visited {
TEXT-DECORATION: none;
}
A:hover {
TEXT-DECORATION: underline;
}
ul,
li {
list-style-type: none;
}
.clearit {
clear: both;
}
.page {
width: 1003px;
margin: 0 auto;
}
.daohang {
width: 1003px;
height: 42px;
margin: 0 auto;
overflow: hidden;
background: url("../images/daohang.jpg") repeat-x;
}
.daohang p {
width: 140px;
line-height: 42px;
display: block;
float: left;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.daohang p a {
color: #345479;
}
.content {
width: 1003px;
margin: 0 auto;
background: #c2cdda;
padding: 20px 0 0;
}
.zuo {
width: 220px;
float: left;
margin-left: 10px;
display: inline;
}
.fangshi {
width: 220px;
border: 1px solid #ffffff;
margin-top: 10px;
background: #345479;
}
.fangshi h1 {
font-size: 14px;
padding: 0 10px;
font-weight: bold;
line-height: 26px;
line-height: 26px;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}
.fangshi p {
text-align: left;
padding: 0 10px;
line-height: 24px;
color: #ffffff;
}
.you {
width: 750px;
float: left;
margin-left: 10px;
display: inline;
}
.jieshao {
width: 748px;
border: 1px solid #ffffff;
background: #345479;
margin-bottom: 10px;
}
.jieshao h1 {
font-size: 14px;
padding: 0 10px;
font-weight: bold;
line-height: 28px;
line-height: 28px;
background: #345479;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}
.jieshao p {
text-align: left;
padding: 10px;
line-height: 24px;
color: #ffffff;
}
.jieshaoB {
width: 748px;
border: 1px solid #ffffff;
background: #345479;
margin-bottom: 10px;
}
.jieshaoB h1 {
font-size: 14px;
padding: 0 10px;
font-weight: bold;
line-height: 28px;
line-height: 28px;
background: #345479;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}
.jieshaoB p {
padding: 10px 0;
}
.jieshaoB img {
width: 200px;
margin-right: 10px;
padding: 1px;
border: 1px solid #FFFF00;
background: #FFFFFF;
}
.foot {
width: 1003px;
margin: 0 auto;
padding-top: 50px;
background: url("../images/foot.jpg") repeat-x top;
padding-bottom: 50px;
}
.foot p {
text-align: center;
line-height: 30px;
color: #345479;
}
.you h2 {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #FFFF00;
color: #000000;
}
.neirong {
padding: 20px;
line-height: 24px;
color: #000000;
}
.zhanshi {
padding-bottom: 20px;
overflow: hidden;
}
.zhanshi img {
width: 160px;
display: block;
float: left;
margin-left: 10px;
display: inline;
}
.messageB {
width: 600px;
padding: 10px 0;
overflow: hidden;
text-align: left;
line-height: 24px;
}
.messageB ul li {
line-height: 24px;
margin-top: 16px;
list-style: none;
padding: 0;
border: 0;
}
.messageB ul li span {
vertical-align: middle;
padding-right: 12px;
}
.messageB ul li .message_in {
width: 300px;
height: 22px;
border: 1px solid #999999;
vertical-align: middle;
line-height: 22px;
padding: 0;
}
.messageB ul li .message_te {
width: 500px;
height: 90px;
border: 1px solid #999999;
vertical-align: middle;
line-height: 18px;
padding: 0;
}
.messageB ul li .message_btn {
width: 64px;
height: 20px;
padding: 0;
line-height: 20px;
background: url("../images/btn.gif") no-repeat;
color: #FFFFFF;
font-weight: bold;
cursor: hand;
}
四善玫、??更多源碼
【干貨分享】自學(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
