话不多说 先上图
标题
布局哈：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>青岛理工大学官网Demo ByCaesarChang</title>
<style>
.head {
width: auto;
height: 80px;
}
* {
padding: 0;
margin: 0px;
}
.menu {
width: 1350px;
height: 0px;
margin: 50px auto;
}
.menu ul {
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li a,
.menu ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
width: 144px;
height: 40px;
color: white;
font-weight: bold;
border: 1px solid #000;
border-width: 1px 1px 0 0;
background: #91000C;
line-height: 30px;
font-size: 14px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #fff;
background: #91000C;
}
.priority {
width: 113.15%;
background-color: #91000C;
height: 40px;
}
.menu ul li:hover ul {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 105px;
}
.menu ul li:hover ul li a {
display: block;
background: #91000C;
color: white;
}
.menu ul li:hover ul li a:hover {
background: #91000c;
color: #000;
}
.banner {
height: 30px;
}
#parent1 {
border: 0px solid #91000c;
width: 113.15%;
height: 60px;
float: left;
margin-left: 20px;
}
#parent1 a {
text-decoration: none;
float: right;
line-height: 70px;
color: grey;
font-size: 20px;
}
#parent2 {
margin-left: 14px;
list-style: none;
position: relative;
border: 0px solid red;
}
#parent8 {
position: static;
border: 0px solid white;
width: 424px;
height: 30px;
margin-top: 144px;
}
#son1 {
height: 430px;
margin-top: 60px;
position: absolute;
border: 1px solid white;
width: 500px;
margin-right: 10px;
text-decoration: underline;
font-size: 23px;
list-style: none;
}
#son1 li {
margin-top: 9px;
}
#son2 {
margin-top: 60px;
height: 430px;
position: absolute;
border: 1px solid white;
margin-left: 520px;
width: 500px;
margin-right: 10px;
text-decoration: underline;
font-size: 20px;
list-style: none;
}
#son2 p {
margin: 10px auto;
}
#son3 {
margin-top: 60px;
height: 430px;
position: absolute;
border: 1px solid white;
width: 500px;
margin-left: 1040px;
}
#son3 img {
width: 500px;
height: 430px;
}
/* -------------------------------------- */
#parent3 a {
text-decoration: none;
float: right;
line-height: 70px;
color: grey;
font-size: 20px;
}
#parent4 {
margin-left: 14px;
list-style: none;
position: relative;
border: 0px solid white;
}
#son6 {
margin-top: 560px;
height: 470px;
position: absolute;
border: 1px solid purple;
width: 500px;
}
#son6 img {
width: 500px;
height: 470px;
}
#son4 {
height: 470px;
margin-top: 560px;
position: absolute;
border: 1px solid white;
width: 500px;
margin-left: 520px;
text-decoration: underline;
font-size: 16px;
color: grey;
list-style: none;
overflow: hidden;
}
#son4 p {
font-size: 28px;
color: black;
font-weight: bold;
}
#son5 {
margin-top: 560px;
height: 470px;
position: absolute;
margin-left: 1040px;
width: 500px;
margin-right: 10px;
list-style: none;
}
#son5 .title {
background-color: #91000c;
padding: 30px;
position: relative;
height: 15px;
color: aliceblue;
font-size: 36px;
font-weight: bold;
}
.list_1 {
width: 200px;
height: 70px;
margin-left: 10px;
margin-top: 5px;
}
.list_2 {
width: 200px;
height: 70px;
float: right;
margin-right: 10px;
margin-top: 5px;
}
.list_3 {
width: 200px;
height: 70px;
margin-left: 10px;
margin-top: 5px;
}
.list_4 {
width: 200px;
height: 70px;
float: right;
margin-right: 10px;
margin-top: 5px;
}
.list_5 {
width: 200px;
height: 70px;
margin-left: 10px;
margin-top: 5px;
}
.list_6 {
width: 200px;
height: 70px;
margin-top: 5px;
float: right;
margin-right: 10px;
}
.list_7 {
width: 200px;
height: 70px;
margin-left: 10px;
margin-top: 5px;
}
.list_8 {
width: 200px;
height: 70px;
margin-top: 5px;
float: right;
margin-right: 10px;
}
.list_9 {
width: 200px;
height: 70px;
margin-left: 10px;
margin-top: 5px;
}
.list_10 {
width: 200px;
height: 70px;
margin-top: 5px;
float: right;
margin-right: 10px;
}
.link {
background-color: grey;
margin-top: 1035px;
width: 1546px;
height: 50px;
margin-left: 12px;
position: relative;
}
.link .link_text {
text-shadow: 4px 3px 1px pink;
position: absolute;
margin-left: 50px;
line-height: 40px;
font-size: 30px;
font-weight: bold;
}
.link .link_1 {
position: absolute;
margin-left: 230px;
line-height: 40px;
}
.link .link_2 {
position: absolute;
margin-left: 380px;
line-height: 40px;
}
.link .link_3 {
line-height: 40px;
position: absolute;
margin-left: 650px;
}
</style>
<body>
<div class="head">
<img src="./head_img.png">
</div>
<div class="priority">
<div class="menu">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">组织机构图</a></li>
<li><a href="#">办公电话</a></li>
<li><a href="#">学院标识</a></li>
</ul>
</li>
<li><a href="#">校情纵览</a>
<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>
</li>
<li><a href="#">组织机构</a>
<ul>
<li><a href="#">学院办公室</a></li>
<li><a href="#">人事处</a></li>
<li><a href="#">教务处</a></li>
<li><a href="#">学生处</a></li>
</ul>
</li>
<li><a href="#">院系设置</a>
<ul>
<li><a href="#">实训中心</a></li>
<li><a href="#">图书馆</a></li>
<li><a href="#">交流中心</a></li>
</ul>
</li>
<li><a href="#">教学单位</a>
<ul>
<li><a href="#">会计学院</a></li>
<li><a href="#">计算机信息工程学院</a></li>
<li><a href="#">商学院</a></li>
</ul>
</li>
<li><a href="#">师资队伍</a>
<ul>
<li><a href="#">师资概况</a></li>
<li><a href="#">名师辅导</a></li>
</ul>
</li>
<li><a href="#">招生就业</a>
<ul>
<li><a href="#">研究生招生</a></li>
<li><a href="#">本科招生</a></li>
<li><a href="#">专科招生</a></li>
<li><a href="#">创新创业</a></li>
</ul>
</li>
<li><a href="#">公共服务</a>
</li>
<li><a href="#">理工新闻</a>
</li>
</ul>
<div class="clear"> </div>
</div>
</div>
<div>
<img src="./banner2.png" alt="">
</div>
<div id="parent1">
<font style="font-size: 50px; color: #91000c;margin-left: 60px;text-decoration: underline; ">理工要闻</font>
<a href="#">更多>></a>
</div>
<div id="parent2">
<div id="son1">
<ul>
<li>青岛理工大学与国家航天局等单位签约共建联合实验室</li>
<li>学校召开新校区二期工程搬迁启用工作决战决胜部署动员大会</li>
<li>我校第七届教职工代表大会第二次会议胜利召开</li>
<li>VR直播”青岛理工大学2020年毕业典礼隆重举行</li>
<li>机械与汽车工程学院春田方程式车队两名大学生收到受助车主锦旗</li>
<li>学校召开2020年第三十三次党委常委会</li>
<li>云南省社科联一行来校调研</li>
<li>王汉忠教授应邀来校区作专题报告</li>
</ul>
</div>
<div id="son2">
<p>青岛理工大学与国家航天局等单位签约共建联合实验室</p>
<p>学校召开新校区二期工程搬迁启用工作决战决胜部署动员大会</p>
<p>我校第七届教职工代表大会第二次会议胜利召开</p>
<p>VR直播”青岛理工大学2020年毕业典礼隆重举行</p>
<p>机械与汽车工程学院春田方程式车队两名大学生收到受助车主锦旗</p>
<p>学校召开2020年第三十三次党委常委会</p>
<p>云南省社科联一行来校调研</p>
<p>王汉忠教授应邀来校区作专题报告</p>
</div>
<div id="son3">
<img src="./insert_img.png" alt="">
</div>
</div>
<div id="parent9">
</div>
<!-- ----------------------------- -->
<div id="parent3">
</div>
<div id="parent4">
<div id="son6">
<img src="./end_img.png" alt="">
</div>
<div id="son4">
<p>
大众网：晚上车辆坏了怎么办？青岛理工大学俩学生学以致用帮大忙！
</p>
“这两个学生不仅品德好，技术也很高，真是太感谢他们了”，9月24日下午，三名受助车主手捧一面写有“乐于助人， 学以致用”的锦旗，来到青岛理工大学机械与汽车工程学院，一定要找到王子鹏、陈凯这两名大学生，当面表达对他们助人为乐的感激之情和对较高专业素养的赞赏之情。 机械与汽车工程学院党总支书记岳丽宏，院长郭峰，车队指导教师牟瑞涛、李龙，辅导员代莉热情接待了他们。
<p>结构振动控制创新团队发表国际TOP期刊封面论文
</p>
日前，我校张春巍教授带领的“结构振动控制创新团队”在结构振动控制与健康监测领域国际顶尖期刊 《Structural Control & Health Monitoring》（Online ISSN:1545-2263）再次发文。本次发表的文章题目为“Swing V ibration Control of Suspended Structures using the Active Rotary Inertia Driver System: Theoretical Modeling and Experimental
Verification”， 介绍了Active Rotary Inertia Driver（ARID）控制系统的最新研究成果，文中ARID系统原理示意图相关公式等被选登在该刊当期封面。
</div>
<div id="son5">
<div class="title">
专题专栏
</div>
<div>
<img class="list_1" src="./list_1.png" alt="">
<img class="list_2" src="./list_2.png" alt="">
</div>
<div>
<img class="list_3" src="./list_3.png" alt="">
<img class="list_4" src="./list_4.png" alt="">
</div>
<div>
<img class="list_5" src="./list_5.png" alt="">
<img class="list_6" src="./list_6.png" alt="">
</div>
<div>
<img class="list_7" src="./list_7.png" alt="">
<img class="list_8" src="./list_8.png" alt="">
</div>
<div>
<img class="list_9" src="./list_9.png" alt="">
<img class="list_10" src="./list_10.png" alt="">
</div>
</div>
</div>
<div class="link">
<div class="link_text">相关链接</div>
<div class="link_1">
<select>
<option value="">微信 root121toor</option>
<option >微信 root121toor</option>
<option >微信 root121toor</option>
<option >微信 root121toor</option>
<option >微信 root121toor</option>
</select>
</div>
<div class="link_2"> <select>
<option >邮箱 root121toor@gmail.com</option>
<option >邮箱 root121toor@gmail.com</option>
<option >邮箱 root121toor@gmail.com</option>
<option >邮箱 root121toor@gmail.com</option>
<option >邮箱 root121toor@gmail.com</option>
</select></div>
<div class="link_3">
<select>
<option >BY CaesarChang</option>
<option > BY CaesarChang</option>
<option > BY CaesarChang</option>
<option >BY CaesarChang</option>
<option >BY CaesarChang</option>
</select>
</div>
</div>
</body>
</html>里面的图片以及源代码 都在 QQ群文件里面哈 QQ群号： 1153132260
差不多了 点个赞呗么么哒
