一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239893
(title-D30JP- 辽宁-沈阳(11页)HTML+CSS)]
🧩 截图演示
11.png
10.png
09.png
08.png
07.png
06.png
5.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>沈阳</title>
</head>
<body>
<div class="main">
<div class="left">
<div class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">站长介绍</a></li>
<li><a href="imgs.html">沈阳景点</a></li>
<li><a href="history.html">沈阳历史</a></li>
</ul>
</div>
</div>
<div class="banner"><img src="images/hs.jpg" width="100%" /></div>
<div class="content">
<div class="bar">
<h3>沈阳景点</h3>
</div>
<a href="info1.html">
<div class="box">
<div class="boxle"> <img src="images/a1.jpg" alt=""> </div>
<div class="boxri"> <h3>沈阳故宫</h3> <br>
沈阳故宫，又称盛京皇宫，位于辽宁省沈阳市沈河区，为清朝初期的皇宫。沈阳故宫始建于清太祖天命十年（1625年），建成于清崇德元年（1636年）。 [1] 总占地面积63272平方米，建筑面积18968平方米。 [2] 它不仅是中国仅存的两大皇家宫殿建筑群之一，也是中国关外唯一的一座皇家建筑群。 <br>
<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info2.html">
<div class="box">
<div class="boxle"> <img src="images/a2.jpg" alt=""> </div>
<div class="boxri"> <h3>清昭陵</h3><br>
清昭陵，清朝第二代开国君主太宗皇太极的陵墓，位于盛京（今地名：沈阳）北部，因此也称"北陵"。陵园占地面积16万平方米。建筑的平面布局遵循“前朝后寝”的陵寝原则，自南向北由前、中、后三个部分组成，其主体建筑都建在中轴线上，两侧对称排列。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info3.html">
<div class="box">
<div class="boxle"> <img src="images/a3.jpg" alt=""> </div>
<div class="boxri"> <h3>张氏帅府</h3><br>
张氏帅府又称“大帅府”或“少帅府”,是北洋军阀张作霖及爱国将领张学良将军的官邸和私宅,始建于1914年,总占地3.6万平方米,总建筑面积为2.76万平方米,是迄今为止东北地区保存最为完好的名人故居。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info4.html">
<div class="box">
<div class="boxle"> <img src="images/a4.jpg" alt=""> </div>
<div class="boxri"> <h3>福陵</h3><br>
福陵一般指清福陵。清福陵，又称沈阳东陵，位于沈阳东郊的东陵公园内，是清太祖努尔哈赤的陵墓，因地处沈阳东郊，故又称东陵，为盛京三陵之一。天聪三年（1629年）选定在盛京的东北郊外营建陵墓，总面积约19.48万平方米。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info5.html">
<div class="box">
<div class="boxle"> <img src="images/a5.jpg" alt=""> </div>
<div class="boxri"> <h3>沈阳世博园</h3><br>
沈阳市植物园(沈阳世博园)是2006中国沈阳世界园艺博览会的会址,占地2.46平方公里,被誉为“森林中的世博园”。园区地处沈阳市东部风景秀丽的棋盘山旅游中心地带,距市区仅十公里,交通十分便利。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info6.html">
<div class="box">
<div class="boxle"> <img src="images/a6.jpg" alt=""> </div>
<div class="boxri"> <h3>沈阳怪坡</h3><br>
沈阳怪坡，是条长80余米 宽约25米，呈西高东低走势的斜坡。位于沈阳市沈北新区境内的帽山西麓，面对旷野，背依群山，西距102线国道1.32公里，南达沈阳30公里，有京哈高速公路从景区贯穿而达，交通便利。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<a href="info7.html">
<div class="box">
<div class="boxle"> <img src="images/a7.jpg" alt=""> </div>
<div class="boxri"> <h3>棋盘山</h3><br>
棋盘山位于沈阳市东北部，东邻抚顺，西至农业高新区，南至浑河，北接铁岭，棋盘山属长白山系哈达岭余脉，处于辽东低山丘陵地带向西延伸地段，距沈阳市中心约32千米。一年四季春天的绿、夏天的景、秋天的枫、冬天的雪让这里的风景独树一帜。<br>
</div>
<div class="clear"> </div>
</div>
</a>
<div class="clear"></div>
</div>
<div class="end">
<p>网页底部</p>
</div>
</div>
</body>
</html>
🏠CSS代码
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
img{ max-width:100%}
body{ background-color: #cad0d0; margin:0}
.main{ width:1000px; margin:0px auto; color:#FFFEDD; line-height:21px}
.clear{ clear:both}
a{ text-decoration: none;}
.menu{ width:100%; text-align:center; float:left; }
.menu li a{ color:#fff; font-size:18px;}
.menu li a:hover{ color:#CCFF66}
.menu li {float: left; background: #0d3221; width: 25%; padding: 20px 0;}
.banner img{ display:block}
.right{ float:right; width:780px;}
.content { padding-bottom:20px; background:#c8805a; font-size:16px; line-height:26px; display:inline-block ; color:#304d51; width:100%}
.end{ clear:both; background:#9e9292; color:#fff; padding:30px 0; text-align:center;}
.produce img{ margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ font-size:14px; padding:20px; display:block}
.pics p{ margin:1px; text-align:center}
.imglist{ width:840px; margin:0 auto}
.imglist li{ float:left; width:400px; margin:10px ; text-align:center}
.list{ width:100%;}
.list li{ float:left; width:23%; margin:1% ; overflow:hidden; text-align:center}
.list h3{ color: #fff;}
.scrollleft{ margin:0 0px}
.scrollleft li{ text-align:center; width:230px; margin:10px; float:left}
.scrollleft li img{ border-radius:5px;}
.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.js div{ width:100%; clear:both; margin-bottom:20px; float:left}
.js div img{ float:left; margin-right:20px}
.msg>div{ padding:10px}
.bar h3{ color:#fff}
.bar{ border-bottom:#304d51 solid 1px; margin:10px 0 ; text-align:center; font-size:18px; clear:both; font-weight:bold; padding:10px 25px; color: #0000;}
.box .boxle{ float: left; width: 250px; padding: 20px;}
.box .boxle img{ width: 100%;}
.box .boxri{ float: right; width: 670px; padding: 10px; color:#000 }
.box h4{ font-size: 28px;}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
