2022年大二学生HTML期末作业,网页制作作业(我的校园网站制作)

原创

html网页设计

发布于 2022-10-04 02:16:10

1.2K0

文章被收录于专栏：网页设计与制作网页设计与制作

<font color='#ee3f86' size='5px'> 💂 作者主页: 【进入主页—🚀获取更多源码】

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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.视频演示

video(video-KTgJN9ma-1663769757739)(type-csdn)(url-https://live.csdn.net/v/embed/240787)(image-https://video-community.csdnimg.cn/vod-84deb4/3ca89d93fdb94c37803a80778715c569/snapshots/8f6538bc1d614a09aed9c409116eb39e-00005.jpg?auth_key=4817309326-0-0-3bc34f759cfaa6e7cc3e018cde0674cc)(title-X07JP 班级校园我的校园三级详情页j)

🧩 2.图片演示

<hr>

四、💒 网站代码

🧱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">





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


<ul>
<li class="active"><a href="index.html">首页</a>
</li>
<li ><a href="xiaoyuanshenghuo.html">校园生活</a></li>
<li ><a href="xiaoyuanxinwen.html">校园新闻</a></li>
 
</ul>





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

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


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

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

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

<div class="title">
<div class="stitle"> 关于</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="jbxx">












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

<p><p>    学院始办于1993年，2001年经广东省人民政府批准成立，集医药健康类、现代制造类、财经管理类、电子通信类、创意设计类和建筑工程类专业为主体；学院现有广州和清远两大校区（部分专业采用2+1管理模式，即两年在清远，一年在广州），总面积1316亩，校舍总建筑面积逾47万平方米，设17个二级学院，47个招生专业，在校生16300余人，培养高职毕业生近5万余人。</div>






 










</div>
</div>

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

<div class="title">
<div class="stitle"> 校园生活</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="xysh">



<ul>
<li>
<div class="img"><img src="images/4.jpg"></div><div class="title">疑似桂花香 体味生活-精致点滴</div>
</li>

<li>
<div class="img"><img src="images/5.jpg"></div><div class="title">保留他们的天真可爱，愿美好一直伴你左...</div>
</li>

 
</ul>

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

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

<div class="title">
<div class="stitle"> 校园新闻</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="xyxw">




<ul>
<li>
<div class="img">
<img src="images/6.jpg">
<div class="cover"></div>
<div class="desc">7月7日上午，我校南海移动大学生社会实践基地在广东移动南...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/7.jpg">
<div class="cover"></div>
<div class="desc">我校旅游系酒管01级毕业生张丹凤，现任白天鹅宾馆前台职员...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/8.jpg">
<div class="cover"></div>
<div class="desc">8月7日，我校男子足球队再次力克劲旅，赢得小组出线的关键...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/9.jpg">
<div class="cover"></div>
<div class="desc">9月29日为全省统一的“青春献祖国”活动日。</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>