一、实验目的：
掌握HTML与CSS的基础知识
二、实验内容：
修改4.7节的例子：
1.上方的“页首”改为“湖北大学”。
2.下方的“栏目一”改为轮播图，“栏目二”改为“综合新闻”，“栏目三”改为“通知公告”。
3.最下方的“页脚”改为网站版权信息。
自行在每个版块填充内容，要求页面美观大方，色彩协调。
三、实验代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<span style="white-space:pre"></span>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>湖北大学</title>
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<span style="white-space:pre"></span>
<style>
#banner,#content,#foot{width:760px;margin:0 auto;}
#banner{
text-align:center;
height:100px;
background:#1D6F46;
border-top:0px solid #f00;
padding-top:10px;
padding-left:8px;
margin-top:-10px;
font-size:30px;
font-weight:bold;
letter-spacing :0.5em;
}
#content{
margin-top:5px;
height:200px;
background:#FFF;
}
#foot{
margin-top:5px;
height:100px;
background:#1D6F46;
text-align:center;
}
#left{
margin-top:5px;
width:250px;
height:200px;
float:left;
border:1px solid #D1D1D1;
margin-right:5px;
}
#center{
margin-top:5px;
width:250px;
height:200px;
float:left;
border:1px solid #D1D1D1;
margin-right:5px;
}
#right{
margin-top:-19px;
width:250px;
height:200px;
float:left;
border:1px solid #D1D1D1;
}
</style>
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<span style="white-space:pre"> <div id="banner"><img src="https://www.hubu.edu.cn/images/new_logo2.png"></div> </span>
<div id="content">
<div id="left">轮播图<br>
<div class="carousel slide" data-ride="carousel" id="carouselExampleControls" style="height: 165px;position: relative; overflow: hidden;">
<div class="carousel-inner">
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://www.hubu.edu.cn/__local/2/8C/16/D9A7A57782F878F6AFA94E33B94_21E42324_1C695.jpg" style="height: 165px;position: relative;">
</div>
<div class="carousel-item active">
<img alt="..." class="d-block w-100" src="https://www.hubu.edu.cn/__local/C/6C/C8/FF86EA75763016044F8CAB33B2F_496C08EC_1AD64.jpg" style="height: 165px;position: relative;">
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://www.hubu.edu.cn/__local/1/A6/90/14EC62D3F3944630C18A15A3C29_8FF6EAC9_169BB.jpg" style="height: 165px;position: relative;">
</div>
</div>
</div>
</div>
<div id="center" style="background-color: #FFF;">综合新闻
<ul>
<li><a href="https://www.hubu.edu.cn/info/1316/39178.htm">湖北大学师生收看党的二十大开幕会</a></li>
<li><a href="https://www.hubu.edu.cn/info/1316/39094.htm">党旗飘扬 灯光璀璨——湖大青年艺术思政课精彩呈现</a></li>
<li><a href="https://www.hubu.edu.cn/info/1316/39082.htm">沙场点兵 青春飞扬——湖北大学2022级新生军训总结表彰大会举行</a></li>
</ul>
</div>
<span style="white-space:pre"> </span><div id="right">通知公告
<ul>
<li><a href="https://www.hubu.edu.cn/info/1071/39280.htm">关于进一步加强校园交通管理的通告</a></li>
<li><a href="https://www.hubu.edu.cn/info/1071/39273.htm">健康科学与工程学院专任教师校内公开招聘公告</a></li>
<li><a href="https://www.hubu.edu.cn/info/1071/39180.htm">关于举办第四届“讲好中国故事”创意传播大赛湖北分站赛活动的通知</a></li>
</ul>
</div>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><div id="foot"><font color="#FFF">
</br>网站版权信息</br>
©数据科学与大数据技术2001班 郭旭</br>
</p>
</div>
</body>
</html>四、实验结果：
五、实验小结：
此次实验我完成了html代码的编写，在课堂学习过html文件的格式后，此次实验完成较为顺利。其中在对页面的设计中，我参考学习了湖北大学官网的绿白配色，使得网站整体配色简单大气；我在官网找到了湖北大学的logo图片链接，运用到了自己的html文件中，代替了原来的“湖北大学”的文字。此外，在“综合新闻”和“通知公告”中我分别列举了几条新闻通知，并设置超链接可跳转到湖北大学官网对应的文章界面。
通过此次实验，我对html文件中各种标签的使用有了进一步的理解，看到自己做出的界面时也体会到了极大的乐趣，这也激励着我继续学习java的各种知识。
3796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
