对山东理工大学的首页制作进行了练习
源代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>山东理工大学</title> <link rel="stylesheet" href="ligong.css"> </head> <body> <div id="aaa"> <div id="bbb"><img src="english-bg.jpg" alt="123" id="img1"> <div id="ccc"> <div id="ddd"> <ul> <li><a href="http://ehall.sdut.edu.cn/new/index.html" target="_blank" class="k1">在校生</a></li> <li>+</li> <li><a href="http://ehall.sdut.edu.cn/new/index.html" target="_blank" class="k1">教职工</a></li> <li>+</li> <li><a href="http://zszx.sdut.edu.cn/" target="_blank" class="k1">考生</a></li> <li>+</li> <li><a href="http://xy.sdut.edu.cn/" target="_blank" class="k1">校友</a></li> <li>+</li> <li><a href="http://xy.sdut.edu.cn/" target="_blank" class="k1">访客</a></li> <li>+</li> </ul> </div> <div id="eee"> <input type="text" placeholder="请输入关键字" id="fff"> <img src="sous-bg.jpg" alt="123" id="ggg"> </div> </div> </div> <hr style=" 80%;margin-left: 135px"> <div class="ul"> <ul> <li>首页</li> <li>新闻网</li> <li>学校概况</li> <li>机构设置</li> <li>师资队伍</li> <li>科学研究</li> <li>人才培养</li> <li>招生就业</li> <li>大学文化</li> <li>国际交流</li> <li>校友联谊</li> </ul> </div> <div id="hhh"> <img src="a0d13181-accf-4838-8eda-1496d93c2942.jpg" alt="123" width="100%"> </div> <div id="iii"> <div id="a1"> <div id="b1">学校新闻</div> <div id="b2">[更多]</div> <div id="b3">让每一位教师都主动成为“驱动单元”</div> <p align="center" id="b4"><a href="gwindow.sdut.edu.cn/2018/0608/c1058a181333/page.htm" target="_blank" class="k1">--——我校第二轮岗位聘用期满考核与...</a></p> <div id="b6"> <p id="b5"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181333/page.htm" target="_blank" class="k1">5月31日，当音乐学院刘楠老师从学校发布的《关于聘任方晓英等工作人员相应岗位的通知》中找到自己的名字，并看到对应的岗位等级为“8级”时...</a>[详细] </p> </div> <div> <ul> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0504/c1058a170071/page.htm" target="_blank" class="k1">纪念改革开放40周年作品征集启事</a><span class="c2">05-04</span></li> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181410/page.htm" target="_blank" class="k1">“善小”奖学金、助学金颁发仪式举行</a><span class="c2">06-08</span></li> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181335/page.htm" target="_blank" class="k1">学校召开研究生工作会议</a><span class="c2">06-08</span></li> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0607/c1058a181299/page.htm" target="_blank" class="k1">学校颁发2018年研究生优秀成果单项奖</a><span class="c2">06-08</span></li> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0605/c1058a180447/page.htm" target="_blank" class="k1">2018代数图论国际前沿研讨会”举行</a><span class="c2">06-08</span></li> <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0607/c1058a181288/page.htm" target="_blank" class="k1">学校举行巩固防治“吃空饷”问题工作会议</a><span class="c2">06-08</span></li> </ul> </div> <div id="d1">通知公告</div> <div id="d2">[更多]</div> <div> <ul> <li class="c4"><a href="http://rshch.sdut.edu.cn/2017/1212/c204a104106/page.psp" target="_blank" class="k2">诚聘海内外高层次人才启事</a></li> </ul> </div> </div> <!--第一竖栏--> <div id="a2"> <div id="e1">图说理工 视频理工</div> <div id="e2">[更多]</div> <div> <ul> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0608/c2365a185596/page.htm" target="_blank" class="k1">校园新闻2018年16期</a><span class="e4">06-08</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0601/c2365a178514/page.htm" target="_blank" class="k1">校园新闻2018年15期</a><span class="e4">06-01</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0525/c2365a177617/page.htm" target="_blank" class="k1">校园新闻2018年14期</a><span class="e4">05-25</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0518/c2365a171555/page.htm" target="_blank" class="k1">校园新闻2018年13期</a><span class="e4">05-18</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0512/c2365a170688/page.htm" target="_blank" class="k1">校园新闻2018年12期</a><span class="e4">05-12</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0504/c2365a170143/page.htm" target="_blank" class="k1">校园新闻2018年11期</a><span class="e4">05-04</span></li> <li class="e3"><a href="http://www.sdut.edu.cn/2018/0427/c2365a169599/page.htm" target="_blank" class="k1">校园新闻2018年10期</a><span class="e4">04-27</span></li> </ul> </div> <div id="e5">媒体报道</div> <div id="e6">[更多]</div> <div> <ul> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0608/c1070a181413/page.htm" target="_blank" class="k1">山理工加强研究生基地建设管理构协同...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181280/page.htm" target="_blank" class="k1">山东省高校青年教师教学比赛决赛在山...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181281/page.htm" target="_blank" class="k1">山理工推出安全环保纸袋助力“限塑”...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181282/page.htm" target="_blank" class="k1">山理工动真碰硬集中治理违建建设和谐...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178511/page.htm" target="_blank" class="k1">山理工“第二课堂成绩单”助力“五有...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178512/page.htm" target="_blank" class="k1">山东理工大学成立科学技术协会推进科...</a></li> <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178513/page.htm" target="_blank" class="k1">山理工成立新旧动能转换研究中心</a></li> </ul> </div> </div> <!--第二栏结束--> <div id="a3"> <div id="f1">学术活动</div> <div id="f2">[更多]</div> <div id="f3"> <div class="l1"> <div class="l2">2018</div> <div class="l3">06-09</div> </div> <div id="g1"> <p class="h1"><a href="http://www.sdut.edu.cn/2018/0608/c740a181955/page.htm" target="_blank" class="k1">科研团队建设与研究生培养</a></p> <p class="h1">主讲:王利平教授 </p> <p class="h1">地点:15号教学楼314 </p> </div> </div> <div id="f4"> <div class="l1"> <div class="l2">2018</div> <div class="l3">06-09</div> </div> <div id="g2"> <p class="h2"><a href="http://www.sdut.edu.cn/2018/0608/c740a181458/page.htm" target="_blank" class="k1">激光干涉测量技术</a></p> <p class="h2">主讲:朱日宏教授 </p> <p class="h2">地点:15号教学楼314</p> </div> </div> <div id="f5"> <div class="l1"> <div class="l2">2018</div> <div class="l3">06-09</div> </div> <div id="g3"> <p class="h3"><a href="http://www.sdut.edu.cn/2018/0605/c740a180438/page.htm" target="_blank" class="k1">Simultaneous Colorings o...</a></p> <p class="h3">主讲:王维凡教授 </p> <p class="h3">地点:15号教学楼430</p> </div> </div> <div id="f6"> <div class="l1"> <div class="l2">2018</div> <div class="l3">06-09</div> </div> <div id="g4"> <p class="h4"><a href="http://www.sdut.edu.cn/2018/0605/c740a180378/page.htm" target="_blank" class="k1">Linear 2-Arboricity of G...</a></p> <p class="h4">主讲:王艺桥副教授</p> <p class="h4">地点:15号教学楼430</p> </div> </div> <div id="i1">学校新闻</div> <div id="i2">[更多]</div> <div> <ul> <li class="i3"><a href="http://lxyz.sdut.edu.cn/" target="_blank" class="k1">山东理工大学“两学一做”学习教育网站</a></li> <li class="i3"><a href="http://lgwindow.sdut.edu.cn/qggxzzlm/list.psp" target="_blank" class="k1">山东理工大学“一精神”“一规划”专题</a></li> <li class="i3"><a href="http://charter.sdut.edu.cn/" target="_blank" class="k1">山东理工大学“大学章程建设”专题网站</a></li> </ul> </div> </div> <!--第三栏结束--> </div> </div> <div id="def"><hr> <div class="j1"> <ul> <li>图书馆</li> <li>信息公开</li> <li>招标采购</li> <li>办公系统</li> <li>邮件系统</li> <li>校园VPN</li> <li>在线学习</li> <li>站点导航</li> </ul> </div> </div> </body> </html>
CSS：
*{ margin: 0px; padding: 0px; } #aaa{ max-width: 1680px; min-width: 1366px; width: 100%; } #bbb{ width: 100%; height: 130px; background-image: url(head-bg.png); background-repeat: no-repeat; position: relative; left: 100px; } #ccc{ width: 40%; height: 130px; float: right; position: relative; right: 100px; } #img1{ position: relative; left: 350px; top: 65px; cursor: pointer; } li{ float: left; font-family: "advent-pro"; font-size: 0.85em; position: relative; top: 30px; left: 30px; margin: 3px; } #ddd{ height: 65px; } #eee{ height: 65px; } #fff{ position: relative; left: 160px; width: 150px; height: 25px; top: 5px; } #ggg{ position: relative; left: 156.5px; top: 15px; cursor: pointer; } #hhh{ cursor: pointer; } .ul li{ float: left; font-family: "advent-pro"; font-size: 1em; position: relative; margin-left: 40px; left: 100px; top: 0px; cursor: pointer; } #iii{ width: 90%; height:510px; margin: auto; } #a1{ width: 33%; height:510px; float: left; } #a2{ width: 33%; height: 510px; float: left; } #a3{ width: 33%; height:510px; float:left; } #b1{ float: left; width: 50%; position: relative; left: 40px; border-bottom: 1px solid; height: 30px; } #b2{ float: right; width: 50%; text-align: right; position: relative; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } #b3{ width: 100%; height: 55px; text-align:center; cursor: pointer; color: #154CE3; } #b4{ font-size: 0.6em; font-weight:bold; } #b5{ font-size: 0.6em; text-indent: 20px; color: #787878; } #b6{ width: 80%; height: 60px; margin: auto; border-bottom: 1px ridge; } .c2{ float: right; top: 0px; font-size:0.8em; } .c3{ width: 80%; margin: 5px; top: 0px; font-size: 0.8em; border-bottom: 1px ridge; list-style-type: square; list-style-position:inside; color: #787878; } #d1{ float: left; width: 50%; position: relative; top: 10px; left: 40px; border-bottom: 1px solid; height: 30px; } #d2{ float: right; width: 50%; text-align: right; position: relative; top: 10px; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } .c4{ width: 80%; margin: 5px; top: 15px; font-size: 0.8em; border-bottom: 1px ridge; list-style-type: square; list-style-position:inside; color: #787878; } #e1{ float: left; width: 50%; position: relative; left: 40px; border-bottom: 1px solid; height: 30px; } #e2{ float: right; width: 50%; text-align: right; position: relative; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } .e3{ width: 85%; margin: 1px; top: 0px; color: #787878; font-size: 0.8em; border-bottom: 1px ridge; list-style-image: url(sp.png); list-style-position:inside; } .e4{ float: right; margin: 5px; font-size:0.8em; } #e5{ float: left; width: 50%; position: relative; top: 10px; left: 40px; border-bottom: 1px solid; height: 30px; } #e6{ float: right; width: 50%; text-align: right; position: relative; top: 10px; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } .e7{ width: 90%; margin: 5px; top:20px; font-size: 0.8em; border-bottom: 1px ridge; list-style-type: square; list-style-position:inside; color: #787878; } #f1{ float: left; width: 50%; position: relative; left: 40px; border-bottom: 1px solid; height: 30px; } #f2{ float: right; width: 50%; text-align: right; position: relative; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } #f3{ float: left; width: 80%; height: 80px; position: relative; left: 40px; background-image: url(shij-bg.jpg); background-repeat: no-repeat; background-position: left center; border-bottom: 1px ridge; list-style-type: square; } #f4{ float: left; width: 80%; height: 80px; position: relative; left: 40px; background-image: url(shij-bg.jpg); background-repeat: no-repeat; background-position: left center; border-bottom: 1px ridge; list-style-type: square; } #f5{ float: left; width: 80%; height: 80px; position: relative; left: 40px; background-image: url(shij-bg.jpg); background-repeat: no-repeat; background-position: left center; border-bottom: 1px ridge; list-style-type: square; } #f6{ float: left; width: 80%; height: 80px; position: relative; left: 40px; background-image: url(shij-bg.jpg); background-repeat: no-repeat; background-position: left center; border-bottom: 1px ridge; list-style-type: square; } #g1{ width: 60%; height: 100%; position: relative; left: 25px; float: left; } .h1{ font-size: 0.8em; position: relative; top: 15px; } #g2{ width: 60%; height: 100%; position: relative; left: 25px; float: left; } .h2{ font-size: 0.8em; position: relative; top: 15px; } #g3{ width: 60%; height: 100%; position: relative; left: 25px; float: left; } .h3{ font-size: 0.8em; position: relative; top: 15px; } #g4{ width: 60%; height: 100%; position: relative; left: 25px; float: left; } .h4{ font-size: 0.8em; position: relative; top: 15px; } #i1{ float: left; width: 50%; position: relative; top: 10px; left: 40px; border-bottom: 1px solid; height: 30px; } #i2{ float: right; width: 50%; text-align: right; position: relative; top: 10px; right: 20px; border-bottom: 1px solid; height: 30px; font-size: 10px; } .i3{ width: 90%; margin: 5px; top:20px; font-size: 0.8em; border-bottom: 1px ridge; list-style-type: square; list-style-position:inside; color: #787878; } .j1{ margin-left:auto; margin-right: auto; width: 80%; height: 100%; } #def{ max-width: 1680px; min-width: 1366px; width: 100%; height: 30px; } .j1 li{ list-style:none; float:left; margin-right: 70px; padding: 3px; position: relative; top: 5px; cursor: pointer; } a:hover{ color: #EB0A0E; } .k1{ color: #787878; text-decoration: none; } .k2{ color:#EB0A0E; text-decoration: none; } .l1{ width: 46px; height: 50px; float: left; position:relative; left:0px; top:15px; } .l2{ text-align: center; width: 46px; height: 25px; color: white; } .l3{ text-align: center; width: 46px; height: 25px; color:#02BBFD; font-size: 5px; }
页面效果：
