0
点赞
收藏
分享

微信扫一扫

大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)

📂文章目录

  • ​​二、📚网站介绍​​
  • ​​三、🔗网站效果​​
  • ​​▶️1.视频演示​​
  • ​​🧩 2.图片演示​​
  • ​​四、💒 网站代码​​
  • ​​🧱HTML结构代码​​
  • ​​五、🎁更多源码​​

二、📚网站介绍

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

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

X01SJ 班级校园我的班级 无js 13页

🧩 2.图片演示

大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_css


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_文件包含_02


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_文件包含_03


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_html_04


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_html静态网页_05


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_html_06


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_dreamweaver_07


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_文件包含_08


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_html静态网页_09


大二Web课程设计——HTML+CSS+JS班级校园我的班级(学生网页设计作业源码) (1)_dreamweaver_10

四、💒 网站代码

🧱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 ><a href="guanyu.html">关于</a>


</li>
<li ><a href="banjixinwen.html">班级新闻</a>


</li>
<li ><a href="banjixiangmu.html">班级项目</a>


</li>
<li ><a href="dengluzhuce.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="content8">
<div class="taitou">







<div class="title">
<span class="cntitle">班级项目</span>
<span class="pytitle">BANJIXIANGMU</span>
<em></em>
</div>


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




</div>
<div class="bjxm">







<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">
<div class="title">辩论赛</div>
<div class="clear"></div>

辩论赛也叫论辩赛,还叫做辩论会。它在形式上是参赛双方就某一问题进行辩论的一种竞赛活动,实际上是围绕辩论的问题而展开的一种相关知识的竞赛,思维反应能力的竞赛,语言表达能力的竞赛,也是综合能力的竞赛。<button>查看详情</button>
</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
<div class="title">足球赛</div>
<div class="clear"></div>
<button>查看详情</button>
</div>
</li>

</ul>









</div>
</div>

<div class="content4">
<div class="taitou">







<div class="title">
<span class="cntitle">留言方式</span>
<span class="pytitle">LIUYANFANGSHI</span>
<em></em>
</div>


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




</div>
<div class="lybd">





<form id="form" class="form">




<div class="list extral">
<div class="title">呢称</div>
<input type="input" name="input " class="input" id="ziduan1" />
</div>















<div class="list extral">
<div class="title">邮件</div>
<input type="input" name="input " class="input" id="ziduan2" />
</div>















<div class="list extral">
<div class="title">电话</div>
<input type="input" name="input " class="input" id="ziduan3" />
</div>






















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

<div>
<div class="title">兴趣</div>
<input class="checkbox" type="checkbox" name="checkbox" value="打篮球" />打篮球<input class="checkbox" type="checkbox" name="checkbox" value="游戏" />游戏<input class="checkbox" type="checkbox" name="checkbox" value="下棋" />下棋</div>
<div class="clear"></div>








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

<div>
<div class="title">年龄</div>
<select class="select" name="select5" >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

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



















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

<div>
<div class="title">性别</div>
<input class="radio" type="radio" name="radio6" value="男"/><input class="radio" type="radio" name="radio6" value="女"/></div>
<div class="clear"></div>










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

<div>
<div class="title">介绍</div>
<textarea class="textarea" name="textarea" ></textarea>
</div>
<div class="clear"></div>







<div class="subpart">
<button type="button" class="submit" id="sub" >提交</button> <button type="button" class="submit" id="reset" >重置</button>
</div>

</form>
</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>

五、🎁更多源码

1.如果我的博客对你有帮助 ​​请 “👍点赞” “✍️评论” “💙收藏” ​​一键三连哦!

举报

相关推荐

0 条评论