201. 大学生HTML5期末大作业 ―【简单的滕王阁旅游主题网页(1页)】 Web前端网页制作 html5+css3

码农的码

于 2025-03-20 17:45:54 发布

阅读量686

点赞数 9

分类专栏：旅游文章标签： javascript html5 课程设计前端 css3 jquery css

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

版权

旅游专栏收录该内容

37 篇文章

订阅专栏

一、网页概述

本实例应用html5+css3，div+css布局，代码简单，带实验报告，本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<title>网页设计大作业</title>
</head>

<div class="Banner-top-content">
<div class="left">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/pic1.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="content">
<ul>
<li><a href=""> > 戏曲永恒的魅力---赣剧经典剧目在滕…</a> <span>12-22</span></li>
<li><a href=""> > 滕王阁旅游区亮相纽约时代广场</a> <span>12-22</span></li>
<li><a href=""> > 省赣剧院“五一”滕王阁景区演出预告…</a> <span>12-22</span></li>
<li><a href=""> > 江西省赣剧院经典剧目在滕王阁旅游区…</a> <span>12-22</span></li>
<li><a href=""> > 激发员工潜力增强团队活力——南昌…</a> <span>11-27</span></li>
<li><a href=""> > 爱心助人情暖清明</a> <span>11-27</span></li>
<li><a href=""> > 滕王阁旅游区备战清明小长假</a> <span>11-27</span></li>
</ul>
</div>

<div class="right">
<ul>
<li>姓名：xxx</li>
<li>班级：xxx班</li>
<li>学号：xxx</li>
<li>学院：xxx</li>
</ul>
</div>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

.wrap{
margin: 0px;/* 外边距 */
padding: 0px;/* 内边距 */
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*头部内容*/
.Header-contaier{
width: 100%;/* 宽度 */
height: 400px;/* 高度 */
background: url("../images/Bg1.jpg") 0 / 100% 100% no-repeat;/* 背景图片 */
position: relative;/* 相对定位 */
}
.Header-Nav{
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100%;
background-color: rgba(255, 5, 5) !important;
z-index: 10000;
}
#Header-Nav{
width: 100%;
height: 50px;
background-color: rgba(255, 5, 5, 0.8);
position: absolute;
bottom: 0px;
left: 0px;

}
.Header-Nav-content{
width: 1280px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.Banner>left{
width: 300px;
height: 230px;
background: pink;
}
.swiper{
width: 100%;
height: 230px;
}
.swiper-slide img{
width: 100%;
height: 230px;
}

.Nav-right>ul{
width: 700px;/* 宽度 */
height: 50px;/* 高度 */
display: flex;
justify-content: space-between;
align-items: center;
}
.Nav-right>ul>li{
width: 100px;
height: 50px;
}
.Nav-right>ul>li>a{
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
}
.Nav-right>ul>li>a:hover{
background-color: rgba(0, 0, 0, 0.6);
}
.Nav-right>ul>li:hover{
display: block;
}