16. Web前端网页案例——【大学社团活动网页（ 7页）】大学生期末大作业 html+css

码农的码

已于 2024-11-19 20:57:00 修改

阅读量1.1k

点赞数 23

分类专栏：学校文章标签：前端课程设计 html javascript css css3 html5

于 2024-11-19 20:56:49 首次发布

本文链接：https://blog.csdn.net/2301_82212046/article/details/143895252

版权

学校专栏收录该内容

9 篇文章

订阅专栏

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考

一、网页概述

本实例应用html+css，div+css布局，代码简单。👉温馨提示：这里所有的网页案例主要应用HTML、CSS、JS等关键技术知识，有静态网页，更有动态网页，所有网页案例都支持如DW、HBuilder、Vscode、Text 等任意HTML主流编辑软件进行编辑修改，亦支持包括IE、Chrome、Firefox、Safari主流浏览器浏览。

二、网页文件

本网页共包含7个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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>

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


</head>

<body>
<div class="main">
<div class="top"><img src="img/img1.jpg"></div>
           
           <div class="nav">
           <ul>
           <li><a href="index.html" class="hot">首页</a></li>
           <li><a href="gonggao.html">通知公告</a></li>
           <li><a href="jiemu.html">文化节目简介</a></li>
           <li><a href="#">文化节视频</a></li>
           <li><a href="#">文化节公告栏</a></li>
           <li><a href="#">建议建言信箱</a></li>
       </ul>
       </div>
<div class="box1">
<img src="img/img3.jpg" />
<p>社团文化节是大学内的节日。大学生社团是大学校园文化建设的重要阵地，对广大团员青年知识、技能、能力的塑造和思想道德素质的培养有着重要的作用，还是学校高水平应用型大学建设和创新型人才培养的重要载体。</p>
<p>参与学生社团活动，也成为了广大青年学生丰富校园生活，培养兴趣爱好，扩大求知领域，丰富内心世界的重要方式。以社团文化节的举办为契机，更多大学生能够参与到丰富多彩的社团活动来，拓展专业知识，砥砺思想情操，提高综合素养，在参与社团活动中播种激情和希望，收获成功和喜悦。</p>
<p>社团文化节提供了一个放松大脑，放飞心情的空间，也为学生们提供了一个施展才华，张扬个性的舞台，同时也让学生们受到了一次极好的艺术教育和美的熏陶。在活动中，学生们既培养了兴趣，陶冶了情操，又开阔了视野，锻炼了能力，培养了团队精神，增强了集体荣誉感。</p>
</div>
<div class="box2">
<div class="title">文化节节目</div>
<div class="box2-ner">
<div class="bx">
<img src="img/img5.png" />
<h1>民族舞演出</h1>
</div>
<div class="bx">
<img src="img/img6.png" />
<h1>武术表演</h1>
</div>
<div class="bx">
<img src="img/img7.png" />
<h1>乐队串烧</h1>
</div>
<div class="bx">
<img src="img/img8.png" />
<h1>街舞演出</h1>
</div>

</div>
</div>
           
           <div class="foot">
           华南师范大学社团文化节
       </div>

</div>

</body>

</html>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0 auto;
   font-size: 14px;
   font-family: "微软雅黑";
   line-height: 22px;
   background:#d7d7d7;
}
div,p,input,ul,li,h1,h2,h3 {
   height: auto;
   margin: 0;
   padding: 0;
   vertical-align: middle;
   list-style: none;
}
a {
   color: #131313;
   text-decoration: none;
}
.main{
   width:1024px;
   background:#ffffff;
   margin: 0 auto;
}
.top{
   height: 426px;
}
.nav{
   height: 50px;
   background: #a00707;
}
.nav ul{
   padding:0px;
}
.nav ul li{
   width: 170px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   float: left;
}
.nav ul li a{
   display: block;
   color: white;
   font-size: 18px;
}
.hot{
   background:#cf0505 !important;
}
.box1{
   width: 940px;
   height: 339px;
   padding: 45px 25px;
   margin: 0 auto ;
   margin-top: 25px;
   background: url(../img/img2.jpg) no-repeat;
}
.box1 img{
   float: right;
   margin-left: 15px;
   margin-bottom: 15px;
}
.box1 p{
   text-indent: 2em;
   line-height: 30px;
   margin-bottom: 10px;
}
.box2{
   width:990px;
   height:425px;
   margin:0 auto;
   }
.title{
   width:980px;
   height:50px;
   line-height:50px;
   text-align:center;
   background:url(../img/img4.jpg) no-repeat;
   font-size:20px;
   color:#FFF;
   margin-bottom:75px;
   }
.box2-ner{
   width:990px;
   height:260px;
   }
.box2-ner .bx{
   width:195px;
   height:260px;
   float:left;
   margin:0px 25px;
   }
.box2-ner .bx h1{
   height:60px;
   line-height:60px;
   text-align:center;
   font-weight:normal;
   font-size:14px;
   }
.foot{
   height: 105px;
   line-height: 105px;
   background: #a00707;
   text-align: center;
   font-size: 14px;
   color: white;
}
.limain{
   width:980px;
   min-height:630px;
   margin:0 auto;
   padding-top:30px;
   height:auto;
   overflow:hidden;
   }
.limain-left{
   width:670px;
   float:left;
   margin-right:25px;
   }
.limain-left ul{
   padding:0px 20px;
   }
.limain-left ul li{
   height:35px;
   line-height:35px;
   background:url(../img/img11.jpg) no-repeat 0px 10px;
   padding-left:40px;
   }
.limain-left ul li a{
   font-size:14px;
   }
.limain-right{
   width:280px;
   float:left;
   }
.limain-right img{
   margin-bottom:20px;
   }
.limain h1{
   height:40px;
   line-height:40px;
   border-bottom:#a00707 1px solid;
   color:#e01617;
   font-size:18px;
   font-weight:normal;
   margin-bottom:15px;
   }
.jiem{
   height:108px;
   border-bottom:#CCC 1px dashed;
   margin-bottom:10px;
   }
.jiem h2{
   height:35px;
   line-height:35px;
   font-size:16px;
   padding-left:25px;
   background:url(../img/img12.jpg) no-repeat 0px 13px;
   }