【简单html静态网页代码】简单个人主页成品个人网页制作

二挡起步

于 2023-12-20 09:34:13 发布

阅读量1.2k

点赞数 20

分类专栏： web前端期末大作业 web设计网页规划与设计文章标签： html 前端 HTML学生个人网页设计课程设计 javascript http

本文链接：https://blog.csdn.net/m0_65484028/article/details/134875866

版权

web前端期末大作业同时被 2 个专栏收录

633 篇文章 113 订阅

订阅专栏

web设计网页规划与设计

465 篇文章 10 订阅

订阅专栏

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、👨‍🎓网站题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站、等网站的设计与制作。

二、✍️网站描述

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

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、🌐网站演示

在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>规范你我的语言文字  构建世界的汉语桥梁——历史沿革</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
		}
	body{
		width:1000px;
		margin:0 auto;
		}
	#one h1{
		background-color:#CCC;
		text-align:center;
		}
	#two ul{
		margin:auto;
		height:38px;
		background-color:rgba(255,102,0,.5);
		text-align:center;
		}
	#two ul li{
		list-style:none;
		float:left;
		line-height:37px;
		margin:0 17px;
		
		color:#FFF;
		}
	#two ul li a{
		text-decoration:none;
		color:#fff;
		}
	#two ul li a:hover {
		cursor:pointer;
		color:#F00;
		}
	#three{
		width:1000px;
		height:450px;
		margin:0 auto;
		background-color:#CCC;
		}
	#three h2{
		margin:5px 5px;
		}
	.tim{
		width:1000px;
		height:400px;
		margin:5px;
		}
	.tim ul li{
		list-style:none;
		}
	.tim ul li a{
		text-decoration:none;
		color:#000;
		margin:5px 0;
		}
	#footer{
		font-size:12px;
	 	text-align:center;
	    color:#903;
		margin:10px auto; 
		clear:both;
		}
</style>
</head>

<body>
	<div id="one">
        <h1>规范你我的语言文字&nbsp;&nbsp;构建世界的汉语桥梁</h1>
    </div>
    <div id="two">
    	<ul>
        	<li><a href="">历史沿革</a></li>
            <li><a href="Untitled-1.html">语音系统</a></li>
            <li><a href="Untitled-2.html">语法结构</a></li>
            <li><a href="Untitled-3.html">文字信息</a></li>
            <li><a href="Untitled-4.html">分布地区</a></li>
            <li><a href="Untitled-5.html">相关节日</a></li>
            <li><a href="Untitled-6.html">语言系属</a></li>
            <li><a href="Untitled-7.html">方言分支</a></li>
            <li><a href="Untitled-8.html">相关影响</a></li>
            <li><a href="Untitled-9.html">国际应用</a></li>
        </ul>
    </div>
    <div align="center" id="dem1o" style="overflow:hidden;height:140px;width:1000px;">
    <table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
      <td align="center" id="demo11">
        <table border="0" cellspacing="0" cellpadding="0">
		  <tr>
		  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="1" src="picture/1.jpeg" width="170" border="0" height="125"></a></td>
   		  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="2" src="picture/2.jpg" width="170" border="0" height="125"></a></td>
		  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="3" src="picture/3.jpg" width="170" border="0" height="125"></a></td>
     	  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="4" src="picture/4.jpg" width="170" border="0" height="125"></a></td>
		  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="5" src="picture/5.jpg" width="170" border="0" height="125"></a></td>
		  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="6" src="picture/6.jpg" width="170" border="0" height="125"></a></td>
    	  <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="7" src="picture/7.jpg" width="170" border="0" height="125"></a></td>
          <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="8" src="picture/8.jpg" width="170" border="0" height="125"></a></td>
          <td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="9" src="picture/9.jpg" width="170" border="0" height="125"></a></td>
		  </tr>
        </table>
		</td>
        <td id="demo12">　</td>
      </tr>
    </table>
    </div>
    <script language="javascript" type="text/javascript">
      <!--
      var dem1o = document.getElementById("dem1o");
      var demo11 = document.getElementById("demo11");
      var demo12 = document.getElementById("demo12");
      var speed=20;    //数值越大滚动速度越慢
      demo12.innerHTML = demo11.innerHTML
      function Marquee(){
          if(demo12.offsetWidth-dem1o.scrollLeft<=0)
              dem1o.scrollLeft-=demo11.offsetWidth
          else{
              dem1o.scrollLeft++
          }
      }
      var MyMar = setInterval(Marquee,speed);
      dem1o.onmouseover = function(){clearInterval(MyMar)}
      dem1o.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
      -->
      </script>
      <div id="three">
      	<h2>历史沿革</h2><hr>
        <div class="tim">
        	<ul>
            	<li><a href="#">
                	<h3>上古</h3>
                    <p>周初分封八百诸侯，而"五方之民，言语不通"(《礼记·王制》)。<br>

上古汉语存在于周朝前期和中期(公元前11到前7世纪)，文字记录有青铜器上的刻铭、《诗经》、历史书书经以及部分《易经》。<br>

据《礼记·中庸》第二十八章记载:"今天下车同轨，书同文，行同伦"。可见周朝建立时期就开始实行文字的统一。<br>春秋初期，见于记载的诸侯国还有170多个。至战国时期，形成"七雄"，"诸侯力政，不统于王，……言语异声，文字异形"(《说文解字·叙》)。<br>先秦诸子百家在著作中使用被称为"雅言"的共同语。"子所雅言，《诗》、《书》、执礼，皆雅言也。"(《论语·述而》)<br></p>
                </a></li>
                
                <li><a href="#">
                	<h3>上古</h3>
                    <p>中古汉语使用于南北朝、隋朝、唐朝和宋朝前期(公元7世纪到10世纪)，可以分为《切韵》(公元601年)涉及到的早期以及《广韵》(公元10世纪)所反映的晚期。高本汉把这个阶段称为"古代汉语"。<br>

语言学家已能较自信地重构中古汉语的语音系统。这种证据来自几个方面:多样的现代方言、韵书以及对外语的翻译。<br>

正如印欧语系的语言可以由现代印欧语言重构一样，中古汉语也可以由方言重建。另外，中国古代的文学家花费了很大的精力来总结汉语的语音体系，这些资料仍然是现代语言学家工作的基础。最后，汉语的语音可以从对外国语言的翻译中了解到。</p>
                </a></li>
                
                <li><a href="#">
                	<h3>上古</h3>
                    <p>近代汉语是古代汉语与现代汉语之间以早期白话文献为代表的汉语。<br>
现代汉语有标准语(普通话)和方言之分。普通话以北京语音为标准音、以北方话为基础方言、以典范的现代白话文著作为语法规范。2000年10月31日颁布的《中华人民共和国国家通用语言文字法》确定普通话为国家通用语言。汉语方言通常分为七大方言:官话方言、吴方言、湘方言、赣方言、客家方言、粤方言、闽方言。各方言区内又分布着若干次方言和许多种土语。其中使用人数最多的官话方言分为北京官话、东北官话、冀鲁官话、胶辽官话、中原官话、兰银官话、西南官话、江淮官话八个次方言。</p>
                </a></li>
            </ul>
        </div>
      </div>
      <div id="footer">
      	<p>xx大学xxx学院xxx&copy;版权所有</p>
      </div>
</body>
</html>

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

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

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

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

二挡起步

关注

20
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
【简单html静态网页代码】简单个人主页成品个人网页制作

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
复制链接

扫一扫