1、仿制理工大学首页首先要做布局：（以下所说二级、三级div均是为了区分所处位置，并无划级之说）
分成6个大部分：head、nav1、image、center、nav2、foot ，用流（float布局）
（1）head中有山东理工大学的背景图，然后又分为4个小部分即4个小div：head1、head2、head3、head4
（2）nav1中为上部导航可以用无序列表<ul><li></li></ul>来做，然后用流（float）来做位置
（3）image的div中直接添加的图片
（4）center分为center1、center2、center3二个次级div
----------------center1分为五个三级div：news、news-one、news-two、mt1、mt2
-----------------center2分为四个三级div：ts、gd1、zw2、zh
-----------------center3分为四个三级div：center3-1、center3-2、center3-3、center3-4
（5）nav2为下部导航div id="foot-nav，可以用无序列表<ul><li></li></ul>来做，然后用流（float）来做位置
（6）foot：先添加背景颜色，然后添加一个二级div：（图片）然后再加五个三级div。
2、填充内容
（1）head内容添加：添加一个背景用css效果：background-image: url(微信图片_20180811211208.jpg);其中background-image为背景图片 url(-----)为图片路径。
然后添加其中四个小div的内容
--------------------
---------------------------上图样式无序列表来做，
<div id="head1">-----------定义一个div：
<ul>
<li>在校生</li>
<li>+</li>
<li>在职工</li>
<li>+</li>
<li>考生</li>----------------------无序列表
<li>+</li>
<li>校友</li>
<li>+</li>
<li>访客</li>
<li>+</li>
</ul>
</div>
css：
#head1{
height: 30px;
379px;
margin-top: 15px;
float: right;
}
#head1 ul{
list-style: none;-----------去掉无序列表前的灰点
}
#head1 ul li{
float: left;
margin-left: 10px;
color: darkgray;
text-align:center;----------------div框架中字体居中。 line-height：xxx；xxx代表的div的宽度
margin-top: 3px;
}
（2）center1内容填加：
---------------五个div中的第一个
<div id="news">
<div id="news1">-------------------红线的div
<div id="news1-1">学校新闻</div>
<div id="news1-2">【更多】</div>
</div>
其css效果：
#news{ 二级div
height: 30px;
325px;
background-image: url(border-1.jpg);------学校要问与更多下面的那根红线
background-size: 100%px;---------背景
background-position: bottom;-------背景位置
background-repeat:no-repeat ;----背景平铺方式为不重复
}
#news1-1{ -------------定义的学校要问的div的css
height: 30px;
80px;
text-align: center;
float: left;
margin-left: 3px;
color: black;
}
/*更多*/
#news1-2{
height: 30px;
80px;
text-align: center;
color:red;
float: right;
margin-top: 0px;
}
（3）正文内容的添加
其中蓝色字体部分和学习《xxx谈治国理政》第二卷部分为两个小div。
剩余小字部分为一个小div，因为字数较多超div，所以在div里加一个p标签：
<div id="news-one">
<div id="news-one1"><span>校党委理论学习中心组集体学习</span></div>
<div id="news-one2"><span>--学习《xxx谈治国理政》第二卷</span></div>
<p>通常我们印象中的HTML元素都是四四方方的，但是四四方方的东西也可以构建出完美的三角形哦。因为当一个矩形必须要平分给其上下左右四个方向的时候，就只好平分成四个三角形了。</p>
</div>
css为：
#news-one{
height: 125px;
325px;
/*border-bottom: 1px solid darkgray; */
}
/*学校要问第一个新闻*/
#news-one1{
height: 22px;
325px;
text-align: center;
color: blue;
font-size: 15px;
}
#news-one2{
height: 20px;
325px;
text-align: center;
color: grey;
font-size: 15px;
}
#news-one p{
color: grey;
text-overflow:ellipsis; ----------------省略号
overflow:hidden;---------------超出不部分隐藏
border-bottom: 1px solid darkgray;
font-size: 12px;
}
（3）其中内容部分可用无序列表来添加
其中的灰线部分可在li里添加下边框border-bottom: 1px solid darkgray;
3、white-space:wrap-----------默认换行
white-space:nowrap--------------强制不换行
（4）
里面的省略号
<div id="mt2">
<div id="mt2-1">
<ul>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
</ul>
</div>
</div>
css样式：
#mt2-1 ul{
list-style: inside;-------------去掉无序列表前面的小点
}
#mt2-1 ul li{
margin-top: 18px;
border-bottom: 1px solid darkgray;
white-space:nowrap;
text-overflow:ellipsis; ;/*省略号*/
overflow:hidden;/超出部分隐藏
font-size: 14px;
color: grey;
}
4、山东理工大学首页布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px auto;/*框架居中*/
padding: 0px;
text-decoration: none;
}
#head{
height: 125px;
1000px;
/*border: 1px solid white;*/
margin-top: 1px;
}
/*头部开始*/
#head{
background-image: url(微信图片_20180811211208.jpg);
background-size: 100% 100%;
overflow: hidden;
}
#head1{
height: 30px;
379px;
margin-top: 15px;
float: right;
}
#head1 ul{
list-style: none;
}
#head1 ul li{
float: left;
margin-left: 10px;
color: darkgray;
text-align:center;
margin-top: 3px;
}
#head2{
height: 31px;
300px;
margin-top:60px;
margin-right: 0px;
}
#input{
height: 31px;
220px;
}
#head3{
height: 34px;
40px;
/*border: 1px solid black;*/
margin-right: -341px;
margin-top: 14px;
float: right;
background-image: url(搜索.jpg.png);
background-size: 100% 100%;
}
#head4{
height: 12px;
45px;
/*border: 1px solid black;*/
margin-top: -17px;
margin-left: 350px;
background-image: url(english.jpg.jpg);
background-size: 100% 100%;
}
/*头部结束*/
/*头部导航开始*/
#nav1{height: 49px;
1000px;
/*border: 1px solid black;*/
}
#nav1 ul {
/*border: 1px solid darkgray;*/
margin-top:10px;
list-style: none;
border-bottom: 1px;
}
#nav1 ul li{
margin-left: 10px;
height: 10px;
80px;
float: left;
margin-top: 8px;
}
/*头部导航结束*/
/*图片样式开始*/
#image{
height: 280px;
100%;
/* border: 1px solid black;*/
margin-top: 1px;
}
/*图片样式结束*/
/*中间部分开始*/
#center{
height: 590px;
1200px;
/*border: 1px solid red;*/
margin-top: 30px;
}
/*内容第一部分*/
#center1{
height: 590px;
325px;
/*border: 1px solid black;*/
float: left;
margin-left:80px ;
}
/*第一部分的第一个模块*/
#news{
height: 30px;
325px;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;
}
/*学校要问、更多*/
#news1-1{
height: 30px;
80px;
text-align: center;
float: left;
margin-left: 3px;
color: black;
}
/*更多*/
#news1-2{
height: 30px;
80px;
text-align: center;
color:red;
float: right;
margin-top: 0px;
}
/*第一部分的第2个模块*/
/*第二部分*/
#news-one{
height: 125px;
325px;
/*border-bottom: 1px solid darkgray; */
}
/*学校要问第一个新闻*/
#news-one1{
height: 22px;
325px;
text-align: center;
color: blue;
font-size: 15px;
}
#news-one2{
height: 20px;
325px;
text-align: center;
color: grey;
font-size: 15px;
}
#news-one p{
color: grey;
/*border: 1px solid red;*/
white-space:wrap;/*默认属性不需要写，默认换行*/
text-overflow:ellipsis;
overflow:hidden;
border-bottom: 1px solid darkgray;
font-size: 12px;
}
/*第一部分的第3个模块*/
/*第一个无序列表*/
#news-two{
height: 204px;
325px;
/*border-bottom: 1px solid darkgray;*/
/*border: 1px solid black;*/
}
#news-two-1 ul{
list-style: inside;
}
#news-two-1 ul li{
height: 33px;
font-size: 13px;
color: grey;
margin-top: 2px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;/*省略号*/
border-bottom: 1px solid darkgray;
margin-right: 10px;
color: grey;
}
#news-two-1 ul li span{
float: right;
height: 33px;
font-size: 14px;
color: grey;
margin-top: -17px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;/*省略号*/
border-bottom: 1px solid darkgray;
margin-right: 1px;
color: grey;
}
/*第一部分的第4个模块*/
#mt1{
height: 64px;
325px;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;}
#mt1-1{
height: 30px;
float: left;
margin-left: 3px;
color: black;
margin-top: 30px;
}
#mt1-2{
height: 30px;
text-align: center;
color: red;
float: right;
margin-top: 30px;
}
/*第一部分的第5个模块*/
#mt2{
height: 192px;
325px;
/*border: 1px solid green;*/
}
#mt2-1 ul{
list-style: inside;
}
#mt2-1 ul li{
margin-top: 18px;
border-bottom: 1px solid darkgray;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;/*省略号*/
font-size: 14px;
color: grey;
}
/*第二部分开始*/
#center2{
height: 590px;
325px;
margin-left: 50px;
/*border: 1px solid blue;*/
float: left;
}
#ts{
height: 30px;
325px;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;
/*border: 1px solid green;*/
}
#ts1{
height: 30;
text-align: center;
float: left;
margin-left: 3px;
color: black;
}
#ts2{
height: 30;
text-align: center;
color: red;
float: right;
}
#gd1{
height: 220px;
325px;
/*border: 1px solid green;*/
}
#gd1-1 ul{
list-style-image: url(录像机.jpg.png);
margin-left: 37px;
}
#gd1-1 ul li{
height: 30px;
color: grey;
border-bottom: 1px solid darkgray;
}
#gd1-1 ul li span{
margin-top: 7px;
float: right;
margin-right: 10px;
}
#zw2{
height: 45px;
325px;
color: grey;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;
/*border: 1px solid black;*/
}
#zw2-1{
height: 30;
text-align: center;
float: left;
margin-left: 3px;
color: black;
margin-top: 20px;
}
#zw2-2{
height: 30;
text-align: center;
color: red;
float: right;
margin-top: 20px;
}
#zh{
height: 302px;
325px;
margin-top: 20px;
color: grey;
/*border: 1px solid aquamarine;*/
}
#zh1 ul{
list-style: inside;
}
#zh1 ul li{
height: 37px;
font-size: 14px;
margin-top: 2px;
border-bottom: 1px solid darkgray;
color: grey;
}
/*第二部分结束*/
/*第三部分开始*/
#center3{
height: 590px;
334px;
/*border: 1px solid yellow;*/
float: left;
margin-left: 50px;
}
#center3-1{
height: 28px;
333px;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;
/*float: left;*/
}
#center3-1-1{
height: 30px;
70px;
margin-left:3px;
color: black;
}
#center3-1-2{
height:30px;
121px;
float: right;
margin-top: -33px;
color:red;
}
#center3-2{
height: 345px;
333px;
}
/*图片时间*/
#center3-2-1{
height: 340px;
50px;
/* border: 1px solidred;*/
float: left;
}
#tptime1,#tptime2,#tptime3,#tptime4{
height: 50px;
50px;
background-image: url(shij-bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
/*border: 1px solid black;*/
margin-top: 23px;
float: left;
}
/*年*/
.year{
height: 24px;
50px;
float: left;
margin-left: 1px;
}
/*日期*/
.date{
height: 24px;
50px;
/*border: 1px solid red;*/
float: left;
margin-left: 1px;
}
#center3-2-2 {
height: 336px;
240px;
/*border: 1px solid red;*/
margin-left: 60px;
}
#center3-2-2 ul{
list-style: none;
}
#center3-2-2 ul li{
height: 18px;
font-size: 14px;
margin-top: 20px;
float: left;
margin-left: 1px;
color: grey;
}
#center3-3{
height: 50px;
333px;
border 1px solid red;
background-image: url(border-1.jpg);
background-size: 100%px;
background-position: bottom;
background-repeat:no-repeat ;
}
#center3-3-1{
height:30 px;
95px;
margin-left: 3px;
margin-top: 13px;
float: left;
color: black;
}
#center3-3-2{
height: 30px;
64px;
color: red;
margin-top: 13px;
float: right;
margin-right: 36px;
}
#center3-4{
height: 208px;
333px;
}
#center3-4-1 ul{
list-style: inside;
height: 40px;
margin-top: 2px;
}
#center3-4-1 ul li{
height: 37px;
291px;
margin-left: 3px;
margin-top: 2px;
border-bottom: 1px solid darkgray;
font-size: 14px;
color: grey;
}
/*第三部分结束*/
/*中间部分结束*/
/*尾部导航开始*/
#nav2{
height: 60px;
1100px;
margin-top: 70px;
}
#nav2 ul{
list-style: none;
}
#nav2 ul li{
height: 30px;
110px;
float: left;
margin-left: 10px;
text-align: center;
color: black;
}
#foot-nav{
height: 10px;
margin-top: 20px;
float: left;
border-top: 1px solid darkgray;
}
#nav2 ul .dian{
height: 5px;
5px;
background-color: darkgray;
margin-top:10px;
/*margin-right: 23px;*/
}
/*尾部导航结束*/
/*样式从底部开始*/
/*样式底部结束*/
.dian{
height: 5px;
5px;
background-color: darkgray;
}
#foot{
height: 90px;
100%;
background-image: url(foot-bg.jpg);
background-size: 80% 80%;
background-repeat: no-repeat;
background-position: center;
background-color: #444444;
}
#foot-weiba{
height:38px;
443px;
margin-top:9px ;
font-size: 12px;
color: gray;
}
#weiba1{
height:15px;
442px;
margin-bottom:9px;
}
#weiba2{
height:35px;
442px;
margin-top:9px;
font-size: 12px;
}
#foot-image{
height:78px;
343px;
/*border: 1px solid yellow;*/
margin-top:-73px ;
float: right;
margin-right: 20px;
}
#foot-weibo{
height: 35px;
35px;
float: left;
margin-top: 8px;
}
#foot-weixin{
height: 35px;
35px;
margin-left: 8px;
float: left;
margin-top: 8px;
}
#foot-youxiang{
height: 35px;
35px;
margin-left: 8px;
float: left;
margin-top: 8px;
}
#foot-shiye{
height: 66px;
55px;
margin-left: 8px;
float: left;
margin-top: 1px;
}
</style>
</head>
<body>
<!--表头-->
<div id="head">
<div id="head1">
<ul>
<li>在校生</li>
<li>+</li>
<li>在职工</li>
<li>+</li>
<li>考生</li>
<li>+</li>
<li>校友</li>
<li>+</li>
<li>访客</li>
<li>+</li>
</ul>
</div>
<div id="head2">
<input type="text" name="" id="input" placeholder="请输入关键字"/>
</div>
<div id="head3"></div>
<div id="head4"></div>
</div>
<!--表头结束-->
<!--表头索引-->
<div id="nav1">
<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="image"><input type="image"src="图片新闻.jpg.jpg" height="280px" width="100%"></div>
<!--正文-->
<div id="center">
<!--正文第一部分-->
<div id="center1">
<div id="news">
<div id="news1">
<div id="news1-1">学校新闻</div>
<div id="news1-2">【更多】</div>
</div>
<div>
</div>
<div id="news2"></div>
</div>
<div id="news-one">
<div id="news-one1"><span>校党委理论学习中心组集体学习</span></div>
<div id="news-one2"><span>--学习《xxx谈治国理政》第二卷</span></div>
<p>通常我们印象中的HTML元素都是四四方方的，但是四四方方的东西也可以构建出完美的三角形哦。因为当一个矩形必须要平分给其上下左右四个方向的时候，就只好平分成四个三角形了。</p>
</div>
<div id="news-two">
<div id="news-two-1">
<ul>
<li>我校在江苏大学举办暑期中层干部培训班<span>08-04</span></li>
<li>纪念改革开放40周年作品征集启事<span>05-04</span></li>
<li>学校部署“新时代、新理念、新担当”大讨论...<span>07-31</span></li>
<li>山东省高校外语教师发展论坛在我校举行<span>07-30</span></li>
<li>学校与淄博市教育局签订教育教学战略合作协...<span>07-22</span></li>
<li>上半年工作总结暨暑期工作部署会召开<span>07-21</span></li>
</ul>
</div>
</div>
<div id="mt1">
<div id="mt1-1">媒体报道</div>
<div id="mt1-2">【更多】</div>
</div>
<div id="mt2">
<div id="mt2-1">
<ul>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
<li>【大众网 】山东理工大学“教学科研实践基地”落...</li>
</ul>
</div>
</div>
</div>
<div id="center2">
<div id="ts">
<div id="ts1">图说理工 视频理工</div>
<div id="ts2">【更多】</div>
</div>
<div id="gd1">
<div id="gd1-1">
<ul>
<li>1校园新闻2018年22期<span>07-01</span></li>
<li>1校园新闻2018年22期<span>07-02</span></li>
<li>1校园新闻2018年22期<span>07-03</span></li>
<li>1校园新闻2018年22期<span>07-08</span></li>
<li>1校园新闻2018年22期<span>07-11</span></li>
<li>1校园新闻2018年22期<span>08-11</span></li>
<li>1校园新闻2018年22期<span>09-19</span></li>
</ul>
</div>
</div>
<div id="zw2">
<div id="zw2-1">综合新闻</div>
<div id="zw2-2">【更多】</div>
</div>
<div id="zh">
<div id="zh1">
<ul>
<li>1项山东省农机装备研发创新计划项目在我校启动</li>
<li>计算机学院学子暑期赴印度韦洛尔理工大学实训</li>
<li>美术学院教师受邀参加“同一个亚洲2018年会”</li>
<li>烟台大学副校长王强一行来校调研</li>
<li>管理学院“大漠胡杨”实践团走进新疆木垒</li>
<li>电气学院在全省大学生电子设计竞赛中获佳绩</li>
<li>我校航模队在中国国际飞行器设计挑战赛上获佳绩</li>
<li>学校对新进辅导员进行入职培训</li>
</ul>
</div>
</div>
</div>
<div id="center3">
<div id="center3-1">
<div id="center3-1-1">学术活动</div>
<div id="center3-1-2">【更多】</div>
</div>
<!--<div id="center3-1-1">学术活动</div>
<div id="centerhead">【更多】</div>-->
<div id="center3-2">
<div id="center3-2-1">
<div id="tptime">
<div id="tptime1">
<div class="year">2015</div>
<div class="date">07-21</div>
</div>
<div id="tptime2">
<div class="year">2016</div>
<div class="date">07-22</div>
</div>
<div id="tptime3">
<div class="year">2017</div>
<div class="date">07-23</div>
</div>
<div id="tptime4">
<div class="year">2018</div>
<div class="date">07-24</div>
</div>
</div><!--图片时间-->
</div>
<div id="center3-2-2">
<ul>
<li>Digital Twin for Aircraf...</li>
<li>主讲:刘征博士地点:鸿远楼1楼报告厅</li>
<li>中国传统文化入世情结的形...</li>
<li>主讲:李宗刚教授地点:3号教学楼报告厅</li>
<li>语义波视域下的英语课堂教...</li>
<li>主讲:郑新民教授地点:3号教学楼报告厅</li>
<li>建築預鑄（裝配式）結構體生產難易...</li>
<li>主讲:戴兴伟博地点:12#教学楼313</li>
</ul>
</div>
</div>
<div id="center3-3">
<div id="center3-3-1">专题公告</div>
<div id="center3-3-2">【更多】</div>
</div>
<div id="center3-4">
<div id="center3-4-1">
<ul>
<li>诚聘海内外高层次人才启事</li>
<li>山东理工大学“两学一做”学习教育网站</li>
<li>首届国际青年学者泰山论坛邀请函</li>
<li>中外合作办学项目评估公示</li>
</ul>
</div>
</div>
</div>
</div>
<!--尾部索引-->
<div id="nav2">
<div id="foot-nav">
<ul>
<li>图书馆</li>
<li class="dian"></li>
<li>信息公开</li>
<li class="dian"></li>
<li>招标采购</li>
<li class="dian"></li>
<li>办公系统</li>
<li class="dian"></li>
<li>邮件系统</li>
<li class="dian"></li>
<li>校园VPN</li>
<li class="dian"></li>
<li>在线学习</li>
<li class="dian"></li>
<li>站点导航</li>
<li class="dian"></li>
</ul>
</div>
</div>
<!--尾部-->
<div id="foot">
<div id="foot-weiba"><div id="weiba1"></div>
<div id="weiba2">版权所有©山东理工大学 地址：山东省淄博市张店区新村西路266号（255000）设计维护：网络信息中心 鲁ICP备05002357号</div>
</div>
</div>
<div id="foot-image">
<div id="foot-weibo"><input type="image" src="weibo-bg.png"height="34px" width="34px"></div>
<div id="foot-weixin"><input type="image" src="weixi-bg.png" height="34px" width="34px"></div>
<div id="foot-youxiang"><input type="image" src="youxiang.png" height="34px" width="34px"></div>
<div id="foot-shiye"><input type="image" src="blue.png" height="62px"width="54px"></div>
</div>
</div>
</body>
</html>
效果图（已缩小）：