仿照中国海洋大学网站的首页，做成后的样式，分成两块截得，两侧固定fixed，图片大家可以自己截海洋大学图片，也可以私我单发
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1.2海洋大学官网首页</title>
<link rel="stylesheet" href="./1.2海洋大学网站首页.css">
</head>
<body>
<div id="all">
<div id="shang">
<img src="./img/haiyang1.jpg" alt="" id="shangimg">
<div id="menu" class="">
<ul>
<li><a href="#">学校概况</a>
<div id="submenu" class="">
<ul>
<li><a href="#">学校校徽</a></li>
<li><a href="#">学校校旗</a></li>
<li><a href="#">学校章程</a></li>
<li><a href="#">组织机构</a></li>
<li><a href="#">历任领导</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">学校简介</a></li>
<li><a href="#">历史沿革</a></li>
</ul>
</div>
</li>
<li><a href="#">院系设置</a></li>
<li><a href="#">重点建设</a>
<div id="submenu" class="">
<ul>
<li><a href="#">一流大学建设</a></li>
<li><a href="#">学科专业介绍</a></li>
</ul>
</div>
</li>
<li><a href="#">人力资源</a>
<div id="submenu" class="">
<ul>
<li><a href="#">人事综合管理系统</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">师资队伍</a></li>
</ul>
</div>
</li>
<li><a href="#">教育教学</a>
<div id="submenu" class="">
<ul>
<li><a href="#">继续教育</a></li>
<li><a href="#">留学生教育</a></li>
<li><a href="#">国防生培养</a></li>
<li><a href="#">研究生培养</a></li>
<li><a href="#">本科生培养</a></li>
<li><a href="#">审核评估</a></li>
</ul>
</div>
</li>
<li><a href="#">科学研究</a>
<div id="submenu" class="">
<ul>
<li><a href="#">学术期刊</a></li>
<li><a href="#">大型科学仪器</a></li>
<li><a href="#">科研调查船</a></li>
<li><a href="#">博士后科研流动站</a></li>
<li><a href="#">蓝色经济</a></li>
<li><a href="#">海洋科学与技术青岛协同创新中心</a></li>
<li><a href="#">人文社会科学科研基地</a></li>
<li><a href="#">自然科学科研基地</a></li>
<li><a href="#">中央财政科研项目资金管理文件解读</a></li>
<li><a href="#">科技成果汇编</a></li>
</ul>
</div>
</li>
<li><a href="#">招生就业</a>
<div id="submenu" class="">
<ul>
<li><a href="#">就业信息</a></li>
<li><a href="#">继续教育招生</a></li>
<li><a href="#">留学生招生</a></li>
<li><a href="#">研究生招生</a></li>
<li><a href="#">本科生招生</a></li>
</ul>
</div>
</li>
<li><a href="#">合作交流</a>
<div id="submenu" class="">
<ul>
<li><a href="#">国际教育交流</a></li>
<li><a href="#">国际合作</a></li>
</ul>
</div>
</li>
<li><a href="#">图书档案</a>
<div id="submenu" class="">
<ul>
<li><a href="#">图书馆</a></li>
<li><a href="#">档案馆</a></li>
<li><a href="#">期刊社</a></li>
<li><a href="#">出版社</a></li>
</ul>
</div>
</li>
<li><a href="#">信息公开</a></li>
<li><a href="#">科技政策</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="left"><img src="./img/haiyang2l.jpg" alt="" style="position: fixed;top:181px;"><img src="./img/close.gif" alt="" style="z-index: 10; position: fixed;top:184px;"></div>
<div id="zhong"><img src="./img/haiyang2.jpg" alt=""><span style="display: inline-block;height: 16px;line-height: 16px;position: absolute;background-color:rgba(56, 39, 39, 0.3);margin-left:18px;margin-top:283px; left: 0;top: 0;z-index: 2; padding: 4px 10px;color: #fff;font-size: 14px;">热烈庆祝中国海洋大学建校95周年</span></div>
<div id="right"><img src="./img/haiyang2r.jpg" alt=""style="position: fixed;top:181px;"><img src="./img/close.gif" alt="" style="z-index: 10; position:fixed;top:184px;"></div>
</div>
<div id="xia">
<div id="xialeft">
<div class="clear">
<table>
<tr>
<td><a href="#" class="biaoti">海大新闻</a></td>
</tr>
</table>
</div>
<table>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="海大举办“书写一流大学建设‘奋进之笔’”行动第二期行远风采论坛" class="wenben">海大举办“书写一流大学建设‘奋进之笔’”行动第二期...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:53px;" title="西海岸校区规划和建设工作领导小组召开工作会议" class="wenben">西海岸校区规划和建设工作领导小组召开工作会议</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:39px;" title="临沂市河东区区委副书记、区长姚运明一行来校调研" class="wenben">临沂市河东区区委副书记、区长姚运明一行来校调研</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="中国海洋大学林霄沛教授获得2019年度国家杰出青年科学基金资助" class="wenben">中国海洋大学林霄沛教授获得2019年度国家杰出青年科学...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:9px;" title="2019年山东省大学生韩国语话剧大赛在中国海洋大学举行" class="wenben">2019年山东省大学生韩国语话剧大赛在中国海洋大学举行</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:54px;" title="深圳市宝安区区长郭子平一行到中国海洋大学调研" class="wenben">深圳市宝安区区长郭子平一行到中国海洋大学调研</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="第十七届中琉历史关系国际学术会议”在中国海洋大学举办" class="wenben">第十七届中琉历史关系国际学术会议”在中国海洋大学举办"</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:21px;" title="中国海大教师获全国高等院校英语教师教学基本功大赛山东省一等奖" class="wenben">中国海大教师获全国高等院校英语教师教学基本功大赛...</a></td>
</tr>
<tr>
<td><a href="#" class="dibu">更多 ></a> </td>
</tr>
</table>
</div>
<div id="xiazhong">
<div class="clear">
<table>
<tr>
<td><a href="#" class="biaoti">海大公告</a> <span style="color: #555555;size: 12px;font-weight:900;">学术活动</span></td>
</tr>
</table>
</div>
<table>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="海大人文讲坛-张凌云:旅游现象的本质探讨——非惯常环境假说的再研究" class="wenben">海大人文讲坛-张凌云:旅游现象的本质探讨——非惯常环...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="海大人文讲坛2019年第110讲-陈国权：经济增长管理与政企统合型政府" class="wenben">海大人文讲坛2019年第110讲-陈国权：经济增长管理与...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:28px;" title="海大人文讲坛-陈国权:经济增长管理与政企统合型政府" class="wenben">海大人文讲坛-陈国权:经济增长管理与政企统合型政府</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="研究生百川讲坛-第二届“新时代青年马克思主义者”交流分享会" class="wenben">研究生百川讲坛-第二届“新时代青年马克思主义者”交流...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:44px;" title="海大人文讲坛-李铁:图江门合作与“冰上丝绸之路”" class="wenben">海大人文讲坛-李铁:图江门合作与“冰上丝绸之路”</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" title="研究生百川讲坛-郭磊：逐底还是逐顶？晋升锦标赛下的政策互动" class="wenben">研究生百川讲坛-郭磊：逐底还是逐顶？晋升锦标赛下的...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:69px;" title="Keyzers:Chemical Investigation of Tongan Invertebrates" class="wenben">Keyzers:Chemical Investigation of Tongan...</a></td>
</tr>
<tr>
<td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td>
<td><a href="#" style="padding-right:86px;" title="研究生百川讲坛-陆帅洋:灿烂的敦煌石窟艺术" class="wenben">研究生百川讲坛-陆帅洋:灿烂的敦煌石窟艺术</a></td>
</tr>
<tr>
<td><a href="#" class="dibu">更多 ></a> </td>
</tr>
</table>
</div>
<div id="xiaright">
<table>
<tr>
<td class="xiatu"><img src="./img/1.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/2.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/3.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/4.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/5.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/6.png" alt=""></td>
</tr>
<tr>
<td class="xiatu"><img src="./img/7.png" alt=""></td>
</tr>
</table>
</div>
</div>
<div id="sousuo">
<table>
<tr id="lianjie">
<td width="30" align="center"> </td>
<td><a href="#"><img width="46" height="18" src="./img/x1.png" alt=""></a></td>
<td><a href="#"><img width="46" height="18" src="./img/x2.png" alt=""></a></td>
<td><a href="#"><img width="46" height="18" src="./img/x3.png" alt=""></a></td>
<td><a href="#"><img width="46" height="18" src="./img/x4.png" alt=""></a></td>
<td><a href="#"><img width="46" height="18" src="./img/x5.png" alt=""></a></td>
</tr>
</table>
<table>
<tr>
<td id="inputt"><input type="text" name="" id=""></td>
<td><img src="./img/sou.png" alt="" style=" position: absolute;margin-top: 11px;margin-left:906px;width:32px ;height:24px;"></td>
</tr>
</table>
<div id="frienda">
<a href="http://welcome.ouc.edu.cn/" target="_blank">迎新网</a> |
<a href="http://jwc.ouc.edu.cn/hydxt/" target="_blank">海洋大学堂</a> |
<a href="http://hqsz.ouc.edu.cn/" target="_blank">数字后勤服务大厅 </a>|
<a href="http://season.ouc.edu.cn/" target="_blank">海之子</a> |
<a href="http://zb.ouc.edu.cn/" target="_blank">招标公告</a> |
<a href="http://jjh.ouc.edu.cn/" target="_blank">教育基金会</a> |
<a href="http://xiaoyouhui.ouc.edu.cn/index.do" target="_blank">校友会</a> |
<a href="http://xlzx.ouc.edu.cn/" target="_blank">心理咨询</a> |
<a href="http://www.qd39.qdedu.net/" target="_blank">海大附中</a> |
<a href="http://aoc.ouc.edu.cn/" target="_blank">中国海洋发展研究中心</a>|
<a href="http://xhaxq.ouc.edu.cn/" target="_blank">西海岸校区建设</a>|
<a href="https://vpn.ouc.edu.cn/" target="_blank">VPN</a>|
<a href="https://advice2035.most.gov.cn/" target="_blank">众筹科技2035</a>|
</div>
</div>
<div id="zuidibu">
<div id="ziti">
<span>校址：青岛市崂山区松岭路238号 电话：0532-66782730 邮编：266100 </span>
<br>
<span> 版权所有©中国海洋大学 鲁ICP备05002467号-1 <img src="./img/an.png" alt="" width="16px" height="16px"> 鲁公网安备 37021202000030号</span>
</div>
<div id="wangzhan">
<table>
<tr>
<td><img src="./img/a.png" alt="" width="40px" height="40px"></td>
<td><img src="./img/b.png" alt="" width="40px" height="40px"></td>
<td><img src="./img/c.png" alt="" width="40px" height="40px"></td>
<td><img src="./img/d.png" alt="" width="36px" height="36px"></td>
</tr>
</table>
</div>
<div id="shiye">
<img src="./img/shiye.png" alt="">
</div>
</div>
</div>
</body>
</html>
CSS部分代码
body{
margin:0;
padding:0;
}
#shang{
width:100%;
height:180px;
background-color:rgba(111, 211, 245, 0.199);
text-align:center;
/* margin: 100px auto; */
}
#shangimg{
width: 1000px;
}
#menu{
padding-left: 6px;
margin: 10px auto;
text-align: center;
width:1300px;
height: 40px;
}
#menu ul{
margin: 0px;
padding: 0px;
}
#menu ul li {
height: 40px;
width: 115px;
list-style: none;
float: left;
display: inline;
font: 0.9em Arial, Helvetica, sans-serif;
}
ul li a {
color: #FFF;
width: 114px;
margin: 0px;
padding: 0px 0px 0px 8px;
text-decoration: none;
display: block;
background: rgb(223, 166, 8);
line-height: 29px;
border-bottom: 1px solid #ccc;
border-right:1px solid #ccc;
border-radius: px;
}
ul li #submenu ul li {
height: 25px;
}
ul li #submenu ul li a {
position: relative;
background: rgb(47, 122, 184);
line-height: 24px;
z-index:1000;
}
ul li #submenu{
visibility: hidden;
}
ul li:hover #submenu{
visibility: visible;
}
ul li #submenu ul li a:hover{
background: #333;
}
#middle{
padding-left: 100px;
/* position: absolute; */
width:1300px;
height:340px;
/* border: 1px solid #333333; */
margin: 0 auto;
text-align: center;
}
#left{
position: absolute;
margin-left:-58px;
}
#zhong{
position: absolute;
margin-left: 97px;
}
#right{
position: absolute;
margin-left:1118px;
}
#xia{
position: relative;
margin: 0 auto;
width:1010px;
height:320px;
}
#xialeft{
position: relative;
float: left;
width:399px;
height:320px;
}
#xiazhong{
position: relative;
float: left;
width:399px;
height:320px;
margin-left: 6px;
}
#xiaright{
position: relative;
float: left;
width:181px;
height:320px;
margin-left: 19px;
}
.biaoti{
width:100px;
height: 20px;;
color: #063477;
size: 12px;
font-weight:900;
/* padding-right: 80px; */
}
.clear{
clear: both;
height:29px;
width: 100%;
border-bottom: 1px solid lightblue;
}
.tubiao img{
/* position: relative; */
margin-left:10px;
margin-bottom: 4px;
}
.wenben{
margin-left: -9px;
font-size: 14px;
color: black;
border-bottom: 1px dotted black;
line-height: 27px;
/* border: 1px solid #333333; */
/* margin-bottom: 4px; */
/* padding-right:px ; */
}
a{
text-decoration: none;
}
.dibu{
position: absolute;
margin-left:340px;
color: black;
}
.xiatu{
line-height: 34px;
}
#sousuo{
position: relative;
margin: 0 auto;
width:1007px;
height:105px;
background-color: #0dadad52;
}
#lianjie{
position: absolute;
margin-top: 10px;
}
#inputt{
position: absolute;
margin-top: 10px;
margin-left: 733px;
}
#frienda{
position: absolute;
margin-top: 50px;
margin-left: 20px;
font-size: 13px;
}
#frienda a{
color:#224881;
}
#zuidibu{
position: relative;
margin: 0 auto;
width:1007px;
height:200px;
text-align: center;
margin-top:10px;
}
#ziti{
font-size:14px;
color: #939393;
}
#wangzhan{
position: absolute;
margin-top: 10px;
margin-left: 390px;
}
#shiye{
position: absolute;
margin-top: 64px;
margin-left: 435px;
}
