今天根据所学CSS知识，对山东理工大学官网页面进行了布局设置
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin: 0px; padding: 0px; } #all{ width: 1349px; height: 125px; background: url(head-bg.png) no-repeat; } #head{ width: 45px; height: 10px; background: url(english-bg.jpg); margin-top: 5%; margin-left: 25%; position:absolute; } .aaa{ float: right; background-color: white; width: 300px; height: 50%; } .aaa div{ //width: 100%; height: 60%; } .aaa1 li{ list-style-type: none; float:left; font-size: 12px; width: 50px; margin: 5px; } .bbb1{ margin-left:auto; margin-right: auto; width: 85%; height: 100%; } #bbb{ width: 1349px; height: 53px; } #bbb li{ list-style:none; float:left; margin-right: 20px; padding: 10px; } .tm{ width: 200px; height: 32px; margin-top: 10px; margin-left: 200px; } .wz{ width: 85%; height: 500px; //background-color: blue; margin-left: auto; margin-right: auto; } .wz1{ width: 31%; height: 100%; //background-color: yellow; float: left; } .wz2{ width: 31%; height: 100%; //background-color: red; float: right; } .wz3{ width: 31%; height: 100%; //background-color: purple; float: right; margin-left: 3.5%; margin-right: 3.5%; } .c{ border-bottom: 1px solid black; } .e{ border-bottom: 1px solid black; } .f{ border-bottom: 1px solid black; } #ccc{ width: 1349px; height: 38px; } .ccc1{ margin-left:auto; margin-right: auto; width: 85%; height: 100%; } .ccc1 li{ list-style:none; float:left; margin-right: 50px; padding: 10px; } </style> </head> <body> <div id="all"> <div id="head"></div> <div class="aaa"> <div class="aaa1"> <ul> <li><a href="http://ehall.sdut.edu.cn/new/ehall.html" target="_blank">在校生+</a></li> <li><ahref="http://ehall.sdut.edu.cn/new/ehall.html"target="_blank">教职工+</a></li> <li> <a href="http://zszx.sdut.edu.cn/"target="_blank">考生+</a></li> <li> <a href="http://xy.sdut.edu.cn/"target="_blank">校友+</a></li> <li style="color: #4FB5F5">访客+</li> </ul> </div> <div class="aaa2" style="height: 30px; position: relative;margin-top: 10px"> <input type="text" style="height: 28px; margin-top: -10px;position: absolute;right: 100px;bottom:0px"> <img src="sous-bg.jpg" style="margin-left: -5px;position: absolute;right:61px"> </div> </div> </div> <hr> <div id="bbb"> <div class="bbb1"> <ul> <li><a href="http://www.sdut.edu.cn/main.htm">首页</a></li> <li><a href="http://lgwindow.sdut.edu.cn/">新闻网</a></li> <li><a href="http://www.sdut.edu.cn/729/list.htm">学校概况</a></li> <li><a href="http://www.sdut.edu.cn/730/list.htm">机构设置</a></li> <li><a href="http://www.sdut.edu.cn/731/list.htm">师资队伍</a></li> <li><a href="http://www.sdut.edu.cn/732/list.htm">科学研究</a></li> <li><a href="http://www.sdut.edu.cn/733/list.htm">人才培养</a></li> <li><a href="http://www.sdut.edu.cn/734/list.htm">招生就业</a></li> <li><a href="http://www.sdut.edu.cn/734/list.htm">大学文化</a></li> <li><a href="http://oice.sdut.edu.cn/" target="_blank">国际交流</a></li> <li><a href="http://xy.sdut.edu.cn/" target="_blank">校友联谊</a></li> </ul> </div> </div> <div> <img src="04e59398-a83a-4f5d-898b-cf68e4857fdd.jpg" style="width: 100%"> </div> <div style="width:100%;height: 500px;"> <div class="wz"> <div class="wz1"> <div class="c"> <span>学校新闻</span> <span style="float:right; color: red"> <a href="http://lgwindow.sdut.edu.cn/1058/list.htm" target="_blank">[更多]</a></span> </div> <div class="d"> <span style="color: blue;display;margin: 20px">让每一位教师都主动成为：“驱动单元”</span><br> <span>——我校第二轮岗位聘用期满考核与第三轮岗位聘用工作综述</span> <p>5月31日，当音乐学院刘楠老师从学校发布的《关于聘任方晓英等工作人员相应岗位的通知》中找到自己的名字，并看到对应的岗位等级为”8级“时...[详细]</p>b'r <ul> <li>纪念改革开放40周年作品征集启事 05-04</li><hr style="border:1px dashed"> <li>”善小“奖学金、助学金颁发仪式举行 06-08</li><hr style="border:1px dashed"> <li>学校召开研究生工作会议 06-08</li><hr style="border:1px dashed"> <li>学校颁发2018年研究生优秀成果单项奖 06-07</li><hr style="border:1px dashed"> <li>”2018代数图论国际前沿研讨会“举行 06-07</li><hr style="border:1px dashed"> <li>学校举行巩固防治”吃空饷“问题工作会议 06-07</li><hr style="border:1px dashed"><br> </ul> <div class="e"> <span>通知公告</span> <span style="float:right; color: red">[更多]</span> </div> <div> <ul> <li style="color: red"> <a href="http://rshch.sdut.edu.cn/2017/1212/c204a104106/page.psp"target="_blank">诚聘海内外高层次人才启事</a></li> </ul> </div> </div> </div> <div class="wz2"> <div style="border-bottom: 1px solid black"> <span>学术活动</span> <span style="float:right; color: red">[更多]</span> </div> <div> <img src="QQ图片20180609162250.png" style="width: 65%;height: 30%;"> </div> <div style="border-bottom: 1px solid black"> <span>专题信息</span> <span style="float:right; color: red">[更多]</span> </div> <div> <ul> <li>山东理工大学“两学一做”学子教育网站</li> <li>山东理工大学“一精神”“一规划”专题</li> <li>山东理工大学“大学章程建设”专题网站</li> </ul> </div> </div> <div class="wz3"> <div class="f"> <span>图说理工 视频理工</span> <span style="float:right; color: red">[更多]</span> </div> <div> <img src="a9907740-6029-44af-b81f-5c649581ff9e.jpg" style="width: 300px;height: 150px"> </div> <div style="border-bottom: 1px solid black"> <span>媒体报道</span> <span style="float:right; color: red">[更多]</span> </div> <div> <ul> <li>【山东省教育厅】山理工加强研究生基地建设管理构协同...</li> <li>【山东省教育厅】山东省高校青年教师教学比赛决赛在山...</li> <li>【山东省教育厅】山理工推出安全环保纸袋助力”限塑“...</li> <li>【山东省教育厅】山理工动真碰硬集中治理未见建设和谐...</li> <li>【山东省教育厅】山理工”第二课堂成绩单“助力”五有...</li> <li>【山东省教育厅】山东理工大学成立科学技术协会推进科...</li> <li>【山东省教育厅】山理工盛路新旧功能转换研究中心</li> </ul> </div> </div> </div> <div id="ccc"> <hr> <div class="ccc1"> <ul> <li>图书馆</li> <li>信息公开</li> <li>招标采购</li> <li>办公系统</li> <li>邮件系统</li> <li>校园VPN</li> <li>在线学习</li> <li>站点导航</li> </ul> </div> </div> </div> </body> </html>
运行结果：
