大学生家乡主题甘肃介绍网页代码 dreamweaver网页设计作业制作 WEB静态网页作业模板 dw个人网页作业成品

news2024/11/25 11:33:44

家乡旅游景点网页作业制作 网页代码运用了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="guanyu.html">关于</a></li>
	
    <li ><a href="lishiyange.html">历史沿革</a></li>
	
    <li ><a href="dilihuanjing.html">地理环境</a></li>
	
    <li ><a href="ziranziyuan.html">自然资源</a></li>
	
    <li ><a href="renkou.html">人口</a></li>
	
    <li ><a href="jingji.html">经济</a></li>
	
    <li ><a href="suohuorongyu.html">所获荣誉</a></li>
	
    <li ><a href="geiwoliuyan.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="content12">
<div class="taitou">

<div class="title">
<div class="stitle">图集</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="xiangceliebiao">



<ul>
<li>
<div class="img"><img src="images/2.jpg"></div>
</li>
<li>
<div class="img"><img src="images/3.jpg"></div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
</li>
<li>
<div class="img"><img src="images/5.jpg"></div>
</li>
 
</ul>

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

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

<div class="title">
<div class="stitle">历史沿革</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="lsyg">







<ul>
<li>
<div class="img"><img src="images/1.jpg"></div>
<div class="text">
<div class="title">名称由来</div>
<div class="clear"></div>
<div class="desc">甘肃，是取甘州（今张掖）、肃州（今酒泉）二地的首字而成。</div>
<div class="sdesc"></div>
</div>


</li>
<li>
<div class="img"><img src="images/6.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="content5">
<div class="taitou">

<div class="title">
<div class="stitle">自然资源</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="zrzy">




<ul>
<li>
<div class="img">
<img src="images/7.jpg">
<div class="cover"></div>
<div class="text">
<div class="title">水资源</div>
<div class="desc">甘肃省水资源主要分属黄河、长江、内陆河3个流域、9个水系。</div>
</div>
</div>

</li>
<li>
<div class="img">
<img src="images/8.jpg">
<div class="cover"></div>
<div class="text">
<div class="title">土地资源</div>
<div class="desc">全省土地总面积42.59万平方千米（其中宁夏自治区飞地53.23平方千米）。</div>
</div>
</div>

</li>
 
</ul>

</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:#993333;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;}


.daohang ul li.active{
}


 



.guanggaotupian
{
text-align:center;

}
.guanggaotupian img
{
width:1200px;

}





.taitou .title{



border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;



overflow:hidden;
margin-bottom:10px;

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/102113.html

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

相关文章

前端vue面试题集锦1

前端vue面试题集锦1

Vue.extend 作用和原理 官方解释&#xff1a;Vue.extend 使用基础 Vue 构造器&#xff0c;创建一个“子类”。参数是一个包含组件选项的对象。 其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入…
阅读更多...
使用Mock技术帮助提升测试效率的小tips，你知道几个？

使用Mock技术帮助提升测试效率的小tips，你知道几个？

Mock是什么&#xff1f; 我给你描述一下这几个场景&#xff0c;你看看是不是熟悉的呢&#xff1f; 测试一个业务模块&#xff0c;这个业务模块中有几个接口对接到了第三方&#xff0c;因为第三方延期交付&#xff0c;导致项目延期&#xff0c;我又背锅了 我想测试前端页面字体…
阅读更多...
作为测试人员，你需要掌握哪些，常用软件测试工具？

作为测试人员，你需要掌握哪些，常用软件测试工具？

前言 作为软件测试人员&#xff0c;你最常用到的测试工具都有哪些呢&#xff1f;本文总结了测试过程中常用的工具&#xff0c;希望对从业人员日常工作有所助益&#xff01; 包含工具内容 测试管理工具 连接服务器 抓包工具 接口测试工具 app自动化工具 性能测试工具 持续集成…
阅读更多...
[附源码]计算机毕业设计Node.js橙光公司网站设计论文（程序+LW）

[附源码]计算机毕业设计Node.js橙光公司网站设计论文（程序+LW）

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
nodejs+vue067高校 校园疫情防控系统

nodejs+vue067高校 校园疫情防控系统

录 1 绪论 1 1.1 研究背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统关键技术 3 2.3 MYSQL数据库 4 2.4 B/S结构 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2经济可行性 5 3.1.3操作可行性 5 3.2 系统性能分析 5 3.3 …
阅读更多...
Windows10下用Vscode配置OpenCV (解包即用版)

Windows10下用Vscode配置OpenCV (解包即用版)

Windows10下用Vscode配置OpenCV (解包即用版) 维基百科&#xff1a; OpenCV的全称是Open Source Computer Vision Library&#xff0c;是一个跨平台的计算机视觉库。OpenCV是由英特尔公司发起并参与开发&#xff0c;以BSD许可证授权发行&#xff0c;可以在商业和研究领域中免费…
阅读更多...
三、详细功能

三、详细功能

详细功能 1.去除不同数据库间重复的文献&#xff1a;Reference->Find Duplicates &#xff08;1&#xff09;找到4篇重复的文章&#xff1a;Keep this record可以一篇篇的保留、删除 &#xff08;2&#xff09;按Cancel再按ctrl找到所有重复&#xff1a; &#xff08;3&am…
阅读更多...
长达22643字的博客：自定义游戏三子棋超详细解说手把手式教学，人机大战，PVP玩家对战功能制作详解

长达22643字的博客：自定义游戏三子棋超详细解说手把手式教学，人机大战，PVP玩家对战功能制作详解

&#x1f992;这个游戏相信大家都听过&#xff0c;三子棋&#xff0c;不就是井字棋吗&#xff1f;那么今天我们就来亲手制作一个三子棋游戏&#xff0c;实现人机“智能”大战以及玩家PVP对战。 &#x1f412;三子棋的基本功能构思 &#x1f992;面对一个较大的游戏程序我们要做…
阅读更多...
（附源码）Springboot社区疫情防控管理系统 毕业设计 164621

（附源码）Springboot社区疫情防控管理系统 毕业设计 164621

Springboot 社区疫情防控管理系统 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对社区疫情…
阅读更多...
校园生活互助网站

校园生活互助网站

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 体智慧校园生活互助系统主要实现以下功能&#xff1a; (一)网站前台&#xff1a;关于我们、联系我们、公告信息、求助信…
阅读更多...
DataGear 添加 Http 数据集是请求头 JSON 的格式说明

DataGear 添加 Http 数据集是请求头 JSON 的格式说明

背景 玩了一下 DataGear &#xff0c;添加了一个 Http 接口的数据集&#xff0c;由于目标接口请求必须包含 Token 信息&#xff0c;所以按照配置提示添加 JSON 格式的头信息时&#xff0c;想象成了 JSON 对象&#xff0c;结果预览请求始终报错。 DataGear 的后台异常信息&…
阅读更多...
【JUC】JMM内存模型

【JUC】JMM内存模型

JMM是什么 JMM是Java内存模型&#xff0c;也就是Java Memory Model&#xff0c;简称JMM&#xff0c;本身是一种抽象的概念,并不真实存在&#xff0c;它描述的是一组规则或规范&#xff0c;通过这组规范定义了程序中各个变量&#xff08;包括实例字段&#xff0c;静态字段和构成…
阅读更多...
Graphviz 排版思路 Graphviz 如何控制节点位置

Graphviz 排版思路 Graphviz 如何控制节点位置

有个画图需求是需要生成特定排版的关系图。 graphviz 对于一般情况都是自动排的&#xff0c;有时候会抽风&#xff0c;比如这种情况&#xff1a; 而我们想要这样&#xff1a; 对初学者提一下 &#xff0c;如何实现 3 2 5 &#xff0c;1467 从左到右排列呢&#xff1f;待会会顺…
阅读更多...
HTML小游戏18 —— html5版街头霸王游戏（附完整源码）

HTML小游戏18 —— html5版街头霸王游戏（附完整源码）

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且实用的计…
阅读更多...
【Three.js】Three.js快速上手教程

【Three.js】Three.js快速上手教程

1. Three.js简介 官网对 Three.js 的介绍非常简单&#xff1a;“Javascript 3D library”。 即&#xff1a;three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能&#xff0c;是一个常见的web 3D库。 相关概念解释&#xff1a;three.js > webGL > openG…
阅读更多...
QT QTabWidget 控件 使用详解

QT QTabWidget 控件 使用详解

本文详细的介绍了QTabWidget控件的各种操作&#xff0c;例如&#xff1a;新建界面、设置页面名字、设置提示信息、设置页面激活、设置标题栏位置、设置页面关闭按钮、设置页面关闭按钮、获取页面下标、获取页面总数、清空所有页面、删除某个页面、设置拖拽移动、设置显示页面、…
阅读更多...
全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析（超详细解析）

全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析（超详细解析）

全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析&#xff08;超详细解析&#xff09; 背景&#xff1a;作为信息安全技术人员必须能够掌握内容镜像分析、重要数据恢复、 恶意文件分析等相关技能&#xff0c;利用这些技能我们能够第一时间分析相关恶意文件、 分…
阅读更多...
美少女怒肝20天用C语言写出的排序集合

美少女怒肝20天用C语言写出的排序集合

文章目录 排序的概念一、常见的排序算法二、代码实现总结排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在…
阅读更多...
作为前端，你是否了解链表这种数据结构？

作为前端，你是否了解链表这种数据结构？

在面试中只要被问到React Hooks就常被问到为什么Hooks不能在循环和条件判断嵌套函数当中使用&#xff1b;相信很多人都知道标准答案&#xff0c;【因为声明的Hooks保存在链表当中】&#xff0c;但是你真的知道链表吗&#xff1f; 什么是链表 我们先看来看一个简单的单向链表结…
阅读更多...
华为珍藏版：SpringBoot全优笔记，面面俱到太全了

华为珍藏版：SpringBoot全优笔记，面面俱到太全了

前言 作为开发人员&#xff0c;对于Spring全家桶肯定是不陌生的&#xff0c;而来自于Spring大家族的Spring Boot&#xff0c;作为Spring团队提供的流行框架&#xff0c;它的存在解决的Spring框架使用较为繁琐的问题&#xff0c;所以掌握SpringBoot是精通Spring必不可少的一个过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023