大学生静态HTML网页源码——佛山旅游景点介绍网页代码 家乡旅游网页制作模板 web前端期末大作业

news2024/10/5 17:18:19

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML结构代码 🧱
    • 2.CSS样式代码 🏠
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="main" >

<div  class="content12">
<div class="daohang">







   <ul>
    <li class="active"><a href="index.html">首页</a>
</li>
  
    <li ><a href="jingdianliebiao.html">景点列表</a></li>
	
    <li ><a href="meishiliebiao.html">美食列表</a></li>
	
    <li ><a href="wenhualiebiao.html">文化列表</a></li>
	
    <li ><a href="lishiliebiao.html">历史列表</a></li>
	
    <li ><a href="jiansheliebiao.html">建设列表</a></li>
	
    <li ><a href="xuexiaoliebiao.html">学校列表</a></li>
	
    <li ><a href="xingzhengquhua.html">行政区划</a></li>
	
    <li ><a href="liuyanfangshi.html">留言方式</a></li>
	 
   </ul>
</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="guanggaotupian">


<div class="img">
<img src="images/1.jpg"></div>
 

</div>
</div>
<div class="clear"></div>

<div  class="content7">
<div class="taitou">

<div class="title">
<div class="stitle"> 学校列表<span>XUEXIAOLIEBIAO</span>
</div> 


</div>
 



</div>
<div class="xxlb">






<ul>

<li>
<div class="title">华英中学</div>
<div class="img"><img src="images/2.jpg"></div>
<div class="desc">办学历史抗日战争期间，华英为保师生安全，决定迁校；由 1938年至1945年间，师生三百余人辗转流徙...</div>
</li>


<li>
<div class="title">华南师范大学南海校区</div>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">校区简介华南师范大学始建于1933年，前身是广东省立勷勤大学师范学院。</div>
</li>

 
</ul>

</div>
</div>

<div  class="content5">
<div class="taitou">

<div class="title">
<div class="stitle"> 历史列表<span>LISHILIEBIAO</span>
</div> 


</div>
 



</div>
<div class="lslb">







<ul>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="text">
<div class="title">戊戌变法</div>
<div class="clear"></div>
<div class="desc">历史背景国际背景经济19世纪下半叶，是资本主义迅速发展的阶段。</div>
<div class="sdesc"></div>
</div>


</li>
<li>
<div class="img"><img src="images/5.jpg"></div>
<div class="text">
<div class="title">番禺</div>
<div class="clear"></div>
<div class="desc">简介广州市番禺区地处广东省中南部，位于穗港澳的地理中心位置，北与广州市海珠区相接，东临狮子洋，与东莞...</div>
<div class="sdesc"></div>
</div>


</li>
 
</ul>









</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">

<div class="title">
<div class="stitle"> 图片欣赏<span>TUPIANXINSHANG</span>
</div> 


</div>
 



</div>
<div class="xclb">


 
<div id="gundong">
<div id="ingundong">
<div id="gundong1">


<a href="#"><img src="images/6.jpg" border="0" /></a>

<a href="#"><img src="images/7.jpg" border="0" /></a>

<a href="#"><img src="images/8.jpg" border="0" /></a>

<a href="#"><img src="images/9.jpg" border="0" /></a>

 
</div>
<div id="gundong2"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="dibu">

<div class="desc">
佛山 
</div>


</div>
</div>
<div class="clear"></div></div></body></html>

2.CSS样式代码 🏠


@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}

.content12{width:1200px;margin:0 auto;}


.daohang ul{
width:1200px;background:#003399;float:left;
}
.daohang ul li{float:left;
width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }


.daohang ul li a{
color:#fff;}
 
.daohang li:hover a{
color:#fff;}


.
}
width:1200px;}
.xuexiaoliebiaoliebiao ul li{
width:278px;
float:left;
margin:10px;
text-align:center;

}

.xuexiaoliebiaoliebiao ul li:hover{
}

.xuexiaoliebiaoliebiao ul li .mark{
font-size:60px;
}

.xuexiaoliebiaoliebiao ul li .text{
padding-top:10px;
}
.xuexiaoliebiaoliebiao ul li img
{
border-radius:100px;
width:100px;
height:100px;
}
.xuexiaoliebiaoliebiao ul li img .img
{

width:100px;
height:100px;
}




.xuexiaoliebiaoliebiao ul li .desc{
font-weight:bold;

}


.xuexiaoliebiaoliebiao ul li .title{
padding:20px;
}



.xuexiaoliebiaoliebiao ul li .sdesc{
padding:10px 0px;
}








.xingzhengquhualiebiao ul
{
width:1200px;
}
.xingzhengquhualiebiao ul li
{
width:1180px;padding:10px;
float:left;
}
.xingzhengquhualiebiao ul li:hover
{
background:#003399;}
.xingzhengquhualiebiao ul li:hover .title
{
color:#ffffff;
}

.xingzhengquhualiebiao ul li:hover .desc
{
color:#ffffff;
}



.xingzhengquhualiebiao ul li img
{
width:344px;padding:5px;
height:200px;float:left;
}
.xingzhengquhualiebiao ul li .title{margin:10px 0px;
font-weight:bold;
font-size:16px;
}
.xingzhengquhualiebiao ul li .desc
{
width:796px;text-align:left;float:left;
padding:5px;
margin-left:20px;
}
.xingzhengquhualiebiao ul li button
{
display:block;
text-align:left;
padding:5px 10px;
margin-top:20px;

}











.liuyanbiaodan 
{
width:300px;text-align:left;
margin:0 auto;

}

.liuyanbiaodan form
{
line-height:40px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:0px;border-top-color:#000000;border-top-style:solid;border-top-width:0px;border-left-color:#000000;border-left-style:solid;border-left-width:0px;border-right-color:#000000;border-right-style:solid;border-right-width:0px;
}
.liuyanbiaodan select{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;
}

.liuyanbiaodan checkbox,radio{
text-align:left;
margin:0px 10px;

overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;
}


.liuyanbiaodan input{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;

}


.liuyanbiaodan textarea{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;

}


.liuyanbiaodan .title
{
margin:0px 10px;
width:-2px;float:left;
text-align:right;
}
.liuyanbiaodan button{
margin:10px 0px  0px 10px;
text-align:center;
line-height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;background:#000000;color:#ffffff;
}

.liuyanbiaodan .list{
margin-bottom:10px;
float: left;
}

.liuyanbiaodan .form{
width:268px;border-radius:25px;
padding:15px;
margin:0 auto;
}
.liuyanbiaodan .input{
width:212px;float:left;
}
.liuyanbiaodan .checkbox{
width:auto;

}
.liuyanbiaodan .radio{
width:auto;
}
.liuyanbiaodan .select{
width:212px;float:left;
}
.liuyanbiaodan .textarea{
width:212px;height:130px;
float:left;
}
.liuyanbiaodan .file{
width:auto;
border:0px;
}
.liuyanbiaodan .submit{
width:50.666666666667px;float:left;
}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

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

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/28554.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

学生个人网页模板 简单个人主页--贝聿铭人物介绍 6页带表单 带报告3800字

学生个人网页模板 简单个人主页--贝聿铭人物介绍 6页带表单 带报告3800字

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | ‍个人博客网站 | ‍个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业…
阅读更多...
c语言：初识指针（二）

c语言：初识指针（二）

初识指针一.野指针1.野指针形成原因一是&#xff1a;未初始化2.野指针形成原因二&#xff1a;指针越界3.野指针形成原因三&#xff1a;指针所指向的内存空间被释放二.指针的运算1.指针-整数运算2.指针-指针3.指针的关系运算三.指针和数组四.二级指针五.指针数组1.定义2.用一维数…
阅读更多...
APS生产计划排产在装备制造业的应用

APS生产计划排产在装备制造业的应用

装备制造业是对所有为国民经济各部门的简单再生产和扩大再生产提供技术装备的制造工业的总称&#xff0c;范围包括航空、航天、军工制造&#xff1b;民用飞机、铁路、船舶、汽车等先进交通运输设备制造&#xff1b;石油、矿产、化工、压力容器、电力成套设备制造&#xff1b;以…
阅读更多...
Jaya算法在电力系统最优潮流计算中的应用（创新点）【Matlab代码实现】

Jaya算法在电力系统最优潮流计算中的应用（创新点）【Matlab代码实现】

目录 1 概述 2 数学模型 2.1 目标函数 2.2 约束条件 2.3 Jaya 算法 3 仿真结果 4 Matlab代码实现 1 概述 最优潮流计算与电力系统的稳定、经济运行密切相关&#xff0c;自20世纪60年代提出最优潮流的概念&#xff0c;大量学者相继提出了各种优化技术来求解电力系统的最…
阅读更多...
Google Earth Engine（GEE）—— 多光谱指数整合中推导出湿地覆盖类型 (WCT)

Google Earth Engine（GEE）—— 多光谱指数整合中推导出湿地覆盖类型 (WCT)

湿地覆盖被定义为归因于植被、浑浊度、含水土壤和水量等潜在生物物理条件的湿地空间均匀区域。在这里，我们提出了一种新方法来导出湿地覆盖类型 (WCT)，该方法结合了三个常用的多光谱指数 NDVI、MNDWI 和 NDTI，位于印度各地不同地貌和气候环境的三个大型拉姆萨尔湿地。这些湿…
阅读更多...
【CNN】SENet——将注意力机制引入通道维度

【CNN】SENet——将注意力机制引入通道维度

前言 SENet&#xff0c;胡杰&#xff08;Momenta&#xff09;在2017.9提出&#xff0c;通过显式地建模卷积特征通道之间的相互依赖性来提高网络的表示能力&#xff0c;即&#xff0c;通道维度上的注意力机制。SE块以微小的计算成本为现有的最先进的深层架构产生了显著的性能改…
阅读更多...
高等数学（第七版）同济大学 习题10-2（中5题） 个人解答

高等数学（第七版）同济大学 习题10-2（中5题） 个人解答

高等数学&#xff08;第七版&#xff09;同济大学 习题10-2&#xff08;中5题&#xff09; 函数作图软件&#xff1a;Mathematica 11.画出积分区域&#xff0c;把积分∬Df(x,y)dxdy表示为极坐标形式的二次积分&#xff0c;其中积分区域D是:\begin{aligned}&11. \ 画出积分…
阅读更多...
算法图解学习2 大O表示

算法图解学习2 大O表示

random recording 随心记录 What seems to us as bitter trials are often blessings in disguise. 看起来对我们痛苦的试炼&#xff0c;常常是伪装起来的好运。 大O表示法是一种特殊的表示法&#xff0c;指出了算法的速度有多快。 背景引入 Bob要为NASA编写一个查找算法&…
阅读更多...
MobaXterm连接报错Network error: Connection timed out

MobaXterm连接报错Network error: Connection timed out

今天打开MobaXterm远程连接我VMware虚拟机的时候出现以下界面&#xff0c;问题详情如下&#xff1a;Network error: Connection timed out Session stopped - Press <return> to exit tab - Press R to restart session - Press S to save terminal output t…
阅读更多...
RabbitMQ介绍

RabbitMQ介绍

介绍 RabbitMQ是 一个由erlang语言编写的、开源的&#xff0c;基于AMQP协议实现的消息队列&#xff0c;具有MQ应用解耦、流量削峰、异步的特点 官网地址 https://www.rabbitmq.com/ 功能特点 支持顺序消息&#xff0c;保证消息送达消费端的前后顺序 支持消息补偿&#xff0…
阅读更多...
计算机是什么

计算机是什么

文章目录计算机是什么计算机类别计算机优缺点计算机应用实例计算机是什么 计算机&#xff08;英文“computer”&#xff09;一词源自拉丁文中的“computare”&#xff0c;本意为计算。 发展至今&#xff0c;计算机专门代指“可编程”的电子设备。所谓“可编程”&#xff0c;…
阅读更多...
图像超分辨率模型：Real-ESRGAN | 论文阅读+实战记录

图像超分辨率模型：Real-ESRGAN | 论文阅读+实战记录

前言 最近需要一个超分的模型&#xff0c;经过调研准备用 Real-ESRGAN。特此记录论文阅读和实战过程。 论文阅读 论文地址&#xff1a;Real-ESRGAN: Training Real-World Blind Super-Resolution with Pure Synthetic Data Github&#xff1a;https://github.com/xinntao/Re…
阅读更多...
[附源码]java毕业设计学生宿舍设备报修

[附源码]java毕业设计学生宿舍设备报修

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
【教学类-16-01】20221122《世界杯七巧板A4-随机参考图》（大班)

【教学类-16-01】20221122《世界杯七巧板A4-随机参考图》（大班)

效果展示&#xff1a; 单页效果 多页效果 背景需求&#xff1a; 2022年11月20日 2022年卡塔尔世界杯足球赛在卡塔尔首都多哈举行。借此契机&#xff0c;我设计一份七巧板让幼儿拼”踢足球“的造型。 图片准备&#xff1a; 从网上拉了18张各种”踢球七巧板造型图“ 新建一个…
阅读更多...
几种常用关系型数据库架构和实现原理

几种常用关系型数据库架构和实现原理

【摘要】本文介绍几种常用（闭源、开源）关系型数据库的架构和实现原理，包括Oracle、MySQL、PostgreSQL、GaussDB T，涉及产品最新参数指标等请以各官网为准。 一、 Oracle (一) Oracle 架构 Oracle Server包括数据库（Database）和实例（Instance）两大部分，两者相互独立…
阅读更多...
SSO单点登录流程详解

SSO单点登录流程详解

概念 单点登录&#xff08;Single Sign On&#xff09;&#xff0c;简称为 SSO&#xff0c;是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中&#xff0c;用户只需要登录一次就可以访问所有相互信任的应用系统。 背景 企业发展初期&#xff0c;系统设计不…
阅读更多...
关于pbootcms中被挂马以后的处理

关于pbootcms中被挂马以后的处理

最近一段时间很多使用pbootcms建设的网站都遭遇到了首页挂马的问题,表现形式便是首页页面增加了很多?id123,?/?id37087875.csv,?id26993492.shtml等等形态.当我们查看后台系统日志中的蜘蛛访问或者首页上多了这些链接的时候,基本上就是被挂马了,这个时候我们需要及时作出处…
阅读更多...
Go：微服务架构下的单元测试（基于 Ginkgo、gomock 、Gomega）

Go：微服务架构下的单元测试（基于 Ginkgo、gomock 、Gomega）

文章目录简介一、Ginkgo包的引入和简单介绍二、Dockertest 使用三、编写单元测试1. 编写 data 层的测试代码四、引入 gomock 包&#xff0c;mock 对象模拟依赖项1. 编写生成 mock 文件方法2. 编写 biz 层的测试方法3. 验证单元测试小结简介 本文主要使用 Ginkgo[2] 、gomock[3…
阅读更多...
Vue之watch监听

Vue之watch监听

计算属性不能用异步代码&#xff1b;有返回值的函数&#xff0c;用异步代码也不行&#xff1b;没有返回值的函数&#xff0c;可以用异步代码&#xff1b;watch监听也可以放异步代码&#xff1b;data、methods、computed、watch的区别&#xff1a; data&#xff1a;状态&#xf…
阅读更多...
试题 算法提高 网格贪吃蛇（离散化 + DP）

试题 算法提高 网格贪吃蛇（离散化 + DP）

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 　　那个曾经风靡全球的贪吃蛇游戏又回来啦&#xff01;这次贪吃蛇在m行n列的网格上沿格线爬行&#xff0c;从左下角坐标为(0,0)的格…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023