关于web前端大作业的HTML网页设计——我的班级网页html css javascript

@蜡笔小新星

于 2024-06-04 10:41:01 发布

阅读量724

点赞数 11

分类专栏： Echarts大屏数据展示实战源码文章标签：前端课程设计 html

本文链接：https://blog.csdn.net/p305114466/article/details/126830127

版权

Echarts大屏数据展示实战源码专栏收录该内容

325 篇文章

订阅专栏

📂文章目录

👨‍🎓网页题目
✍️网页描述
🌐网页效果
🔧 代码实现
- 🧱HTML结构代码
🎁更多干货

👨‍🎓网页题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板、等网站的设计与制作。

✍️网页描述

⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

🌐网页效果

在这里插入图片描述

🔧 代码实现

🧱HTML结构代码


<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title>网站首页</title>
</head>

<body>
<div class="top">
<br><br>
<div class="dao"><p>我们的班级</p>
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="rzi.html">班级日志</a></li>
<li><a href="huod.html">班级活动</a></li>
<li><a href="xce.html">班级相册</a></li>
<li><a href="ly.html">访客留言</a></li></ul></div>
</div>
<div class="ban"><img src="images/b1.jpg" width="980" height="400"></div>

<div class="xia">

<div class="zuo">
<img src="images/t1.jpg" width="286" height="170">
<h3>班级新闻</h3>
<br>
<p>“环能寻英赛 寻找单词王”活动</p>
<p>“这个冬天不太冷”之不吐不快主题班会</p>
<p>“写给未来的自己”微公益活动</p>
<p>“不忘初心，重拾热情”主题班会活动</p>

<div class="you"><a href="#">查看更多</a></div>
</div>


<div class="zuo">
<img src="images/t2.jpg" width="286" height="170">
<h3 style="color:#df5157; border-bottom:1px dashed#df5157;">班级活动</h3>
<br>
<p>本周六组织爬佘山，大家积极报起名来</p>
<p>本周六组织爬佘山，大家积极报起名来，锻炼身体义不容辞！请大家准时到达。</p>
<p>本周六组织爬佘山，大家积极报起名来</p>

<div class="you" style="background:#df5157;"><a href="#">查看更多</a></div>
</div>

<div class="zuo">
<img src="images/t3.jpg" width="286" height="170">
<h3 style="color:#d18f2f; border-bottom:1px dashed#d18f2f;">班级通知</h3>
<br>
<p>国庆七天大假，放10月1号~7号</p>
<p>国庆七天大假，放10月1号~7号，小伙伴们请安排好时间，回家的同学车票都买好了？</p>
<p>国庆七天大假，放10月1号~7号</p>

<div class="you" style="background:#d18f2f;"><a href="#">查看更多</a></div>
</div>




</div><div class="clearit"></div>

<div class="foot">班级网站</div>


</body>
</html>