话不多说 先上图
标题布局哈：
<!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
差不多了 点个赞呗么么哒
CaesarChang张旭 认证博客专家 Spring Spring Boot Java 曾就职于苏宁,爱奇艺等公司,擅长java后端开发,拥有多年项目经验和教学经验；在多个大型企业级项目中担任过重要角色。教学风格严谨而又不失幽默,注重培养学员的自主学习和解决问题的能力，授课得到学员的高度认可。