DIV布局个人介绍网页模板代码家乡海阳个人简介网页制作简单个人静态HTML网页设计作品 DW个人网站制作成品 web网页制作与实现

CSDN 2024-07-04 11:33:02 阅读 53

🎉精彩专栏推荐 💭文末获取联系

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

💂 作者主页: 【主页——🚀获取更多优质源码】

🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】

🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】

🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬一个热爱把逻辑思维转变为代码的技术博主，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！> 家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

@[TOC](文章目录🌰)

网页介绍📖

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

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

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

网页效果🌌

在这里插入图片描述

# 代码展示😈

## 1.HTML结构代码 🧱 代码如下（示例）：以下仅展示部分代码供参考~

<code>

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />code>

<title>我的家乡烟台海阳</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />code>

</head>

<body>

<div class="top">code>

<img src="images/logo.jpg">code>

</div>

<div id="nav">code>

<ul>

<li><a href="index.html">网站首页</a></li>code>

<li><a href="about.html">家乡简介</a></li>code>

<li><a href="news.html">家乡新闻</a></li>code>

<li><a href="liuyan.html">在线留言</a></li>code>

<li><a href="jianjie.html">个人简介</a></li>code>

</ul>

</div>

<div class="main">code>

<div class="box">code>

<img src="images/banner1.jpg">code>

</div>

<div class="nr">code>

<div class="tit-s">家乡简介</div>code>

<div class="box1">code>

<div class="box1-left"><img src="images/gr.jpg" /></div>code>

<div class="box1-right">code>

<P> 海阳市，隶属于山东省烟台市。位于山东半岛东南部，烟台市境南部，东邻乳山、牟平，西接莱阳，北连栖霞，南濒黄海，西南隔丁字湾与即墨相望。总面积1886.84平方千米。海阳市位于胶东半岛南端，因地处黄海之阳而得名。</P>

<P>2018年，海阳市下辖4个街道、10个镇，另设有3个工业区、1个旅游区，户籍人口为64.2643万人，实现地区生产总值（GDP）341.7亿元，其中，第一产业增加值77.1亿元，第二产业增加值125.3亿元，第三产业增加值139.3亿元。2019年11月，入选第二批节水型社会建设达标县（区）名单。</P>

<P>海阳市位于山东半岛南部，东邻乳山、牟平，西接莱阳，北连栖霞，南濒黄海，西南隔丁字湾与即墨相望。介于东经120°50′一121°29′，北纬36°16′一37°10′之间，总面积1886.84平方千米。市区距烟台市119千米，离济南市420千米，至北京市883千米。</P>

</div>

<div class="caiz">code>

<ul>

<li><img src="images/dg1.jpg"></li>code>

<li><img src="images/dg2.jpg"></li>code>

<li><img src="images/dg3.jpg"></li>code>

<li><img src="images/dg4.jpg"></li>code>

</ul>

</div>

<div class="bx2">code>

<div class="left">code>

<h1><a href="news.html">家乡新闻<span>更多》</span></a></h1>code>

<ul>

<li><a href="news01.html"><p>烟台海阳这个山村里, 有棵近500年历史的柘树</p><span>2019-12-16</span></a></li>code>

<li><a href="news02.html"><p>冬季逛烟台海阳徐家店大集, 虽然天冷但集上挺热闹</p><span>2019-12-11</span></a></li>code>

<li><a href="news01.html"><p>烟台海阳这个山村里, 有棵近500年历史的柘树</p><span>2019-12-16</span></a></li>code>

<li><a href="news02.html"><p>冬季逛烟台海阳徐家店大集, 虽然天冷但集上挺热闹</p><span>2019-12-11</span></a></li>code>

<li><a href="news01.html"><p>烟台海阳这个山村里, 有棵近500年历史的柘树</p><span>2019-12-16</span></a></li>code>

<li><a href="news02.html"><p>冬季逛烟台海阳徐家店大集, 虽然天冷但集上挺热闹</p><span>2019-12-11</span></a></li>code>

</ul>

</div>

<div class="right">code>

<img src="images/new.jpg">code>

</div>

<div class="foot">code>

<p></p>

</div>

</body>

</html>

 
 更多干货🚀
 1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
 
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
 
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

 
 
   上一篇： 深入探索前端调试神器vConsole 
  下一篇： 解决QT使用QWebEngineView加载不出网页问题和实现qt与html网页基础通信 
  本文标签 
  DIV布局个人介绍网页模板代码 家乡海阳个人简介网页制作 简单个人静态HTML网页设计作品 DW个人网站制作成品 web网页制作与实现    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。