web前端期末大作业基于HTML+CSS家乡主题毕业设计源码 (1)

最新推荐文章于 2024-05-25 11:38:12 发布

STU网页设计与制作

最新推荐文章于 2024-05-25 11:38:12 发布

阅读量838

点赞数 1

分类专栏：网页建设文章标签：七夕情人节表白网页制作程序员表白代码 html生日快乐网站表白网页模版html

本文链接：https://blog.csdn.net/qq_38517811/article/details/127297890

版权

网页建设专栏收录该内容

1136 篇文章 36 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

D30JP- 辽宁-沈阳(11页)HTML+CSS

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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;}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

STU网页设计与制作

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
web前端期末大作业基于HTML+CSS家乡主题毕业设计源码 (1)

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫