一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239884
(title-D01 我的家乡杭州 7页面)]
🧩 截图演示
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">首页</a></p>
<p><a href="xihu.html">杭州西湖</a></p>
<p><a href="xiaochi.html">杭州小吃</a></p>
<p><a href="fengjing.html">杭州风景</a></p>
<p><a href="liuyan.html">客户留言</a></p>
<p><a href="lianxi.html">地理位置</a></p>
<p><a href="zhanzhang.html">站长信息</a></p>
</div>
<div class="content">
<div class="zuo">
<img src="images/zuo1.jpg" />
<div class="fangshi">
<h1>新闻公告</h1>
<p> 11月19日，杭州西湖风景名胜区管委会（市园林文物局）召开领导干部会议，传达学习贯彻党的十八大精神。西湖风景名胜区（市园文局）党委书记、管委会主任（局长）刘颖传达了十八大精神，并就名胜区（园文局）深入学习贯彻十八大精神作了部署，管委会副主任王宏伟、吕雄伟等党委班子成员、机关全体人员、各基层区（局）管干部参加会议。会议由党委副书记、副主任张鸿斌主持。<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;" /> 杭州市（本地吴语读音（IPA）：愂 tsei）简称杭，中国浙江省省会，副省级城市，浙江省政治、经济、文化、科教中心，长三角地区副中心城市和南翼中心城市，浙江省的金融中心和行政中心，全国重点风景旅游城市和历史文化名城，大陆国际形象最佳城市之一，中国七大古都之一。古时杭州曾称“临安”、“钱塘”、“武林”等。杭州位于浙江省北部，处杭嘉湖平原南缘，拥有约2300年的建城史，是一个典型的山水文化名城。西子湖、钱塘江、千岛湖以及周边丘陵构成了杭州的山水美景。</p>
<p>自古以来，杭州的经济和文化比较发达，素有“东南第一州”之称。“欲把西湖比西子，淡妆浓抹总相宜”赞美西子湖之美。活跃的多元化经济和发达的文化教育使杭州成为浙江省政治、经济和文化的中心。 </p>
</div>
<div class="jieshaoB">
<h1>产品展示</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;
}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
