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;
width: 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;
width: 325px;
background-image: url(border-1.jpg);------学校要问与更多下面的那根红线
background-size: 100%px;---------背景
background-position: bottom;-------背景位置
background-repeat:no-repeat ;----背景平铺方式为不重复
}
#news1-1{ -------------定义的学校要问的div的css
height: 30px;
width: 80px;
text-align: center;
float: left;
margin-left: 3px;
color: black;
}
/*更多*/
#news1-2{
height: 30px;
width: 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;
width: 325px;
/*border-bottom: 1px solid darkgray; */
}
/*学校要问第一个新闻*/
#news-one1{
height: 22px;
width: 325px;
text-align: center;
color: blue;
font-size: 15px;
}
#news-one2{
height: 20px;
width: 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; width:1000px; /*border: 1px solid white;*/ margin-top: 1px; } /*头部开始*/ #head{ background-image: url(微信图片_20180811211208.jpg); background-size: 100% 100%; overflow: hidden; } #head1{ height: 30px; width: 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; width: 300px; margin-top:60px; margin-right: 0px; } #input{ height: 31px; width: 220px; } #head3{ height: 34px; width: 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; width: 45px; /*border: 1px solid black;*/ margin-top: -17px; margin-left: 350px; background-image: url(english.jpg.jpg); background-size: 100% 100%; } /*头部结束*/ /*头部导航开始*/ #nav1{height: 49px; width: 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; width: 80px; float: left; margin-top: 8px; } /*头部导航结束*/ /*图片样式开始*/ #image{ height: 280px; width:100%; /* border: 1px solid black;*/ margin-top: 1px; } /*图片样式结束*/ /*中间部分开始*/ #center{ height: 590px; width: 1200px; /*border: 1px solid red;*/ margin-top: 30px; } /*内容第一部分*/ #center1{ height: 590px; width: 325px; /*border: 1px solid black;*/ float: left; margin-left:80px ; } /*第一部分的第一个模块*/ #news{ height: 30px; width: 325px; background-image: url(border-1.jpg); background-size: 100%px; background-position: bottom; background-repeat:no-repeat ; } /*学校要问、更多*/ #news1-1{ height: 30px; width: 80px; text-align: center; float: left; margin-left: 3px; color: black; } /*更多*/ #news1-2{ height: 30px; width: 80px; text-align: center; color:red; float: right; margin-top: 0px; } /*第一部分的第2个模块*/ /*第二部分*/ #news-one{ height: 125px; width: 325px; /*border-bottom: 1px solid darkgray; */ } /*学校要问第一个新闻*/ #news-one1{ height: 22px; width: 325px; text-align: center; color: blue; font-size: 15px; } #news-one2{ height: 20px; width: 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; width: 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; width: 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; width: 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; width: 325px; margin-left: 50px; /*border: 1px solid blue;*/ float: left; } #ts{ height: 30px; width: 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; width: 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; width: 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; width: 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; width: 334px; /*border: 1px solid yellow;*/ float: left; margin-left: 50px; } #center3-1{ height: 28px; width: 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; width: 70px; margin-left:3px; color: black; } #center3-1-2{ height:30px; width:121px; float: right; margin-top: -33px; color:red; } #center3-2{ height: 345px; width: 333px; } /*图片时间*/ #center3-2-1{ height: 340px; width: 50px; /* border: 1px solidred;*/ float: left; } #tptime1,#tptime2,#tptime3,#tptime4{ height: 50px; width: 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; width: 50px; float: left; margin-left: 1px; } /*日期*/ .date{ height: 24px; width: 50px; /*border: 1px solid red;*/ float: left; margin-left: 1px; } #center3-2-2 { height: 336px; width: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; width: 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; width: 95px; margin-left: 3px; margin-top: 13px; float: left; color: black; } #center3-3-2{ height: 30px; width: 64px; color: red; margin-top: 13px; float: right; margin-right: 36px; } #center3-4{ height: 208px; width: 333px; } #center3-4-1 ul{ list-style: inside; height: 40px; margin-top: 2px; } #center3-4-1 ul li{ height: 37px; width: 291px; margin-left: 3px; margin-top: 2px; border-bottom: 1px solid darkgray; font-size: 14px; color: grey; } /*第三部分结束*/ /*中间部分结束*/ /*尾部导航开始*/ #nav2{ height: 60px; width: 1100px; margin-top: 70px; } #nav2 ul{ list-style: none; } #nav2 ul li{ height: 30px; width: 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; width: 5px; background-color: darkgray; margin-top:10px; /*margin-right: 23px;*/ } /*尾部导航结束*/ /*样式从底部开始*/ /*样式底部结束*/ .dian{ height: 5px; width: 5px; background-color: darkgray; } #foot{ height: 90px; width: 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; width: 443px; margin-top:9px ; font-size: 12px; color: gray; } #weiba1{ height:15px; width: 442px; margin-bottom:9px; } #weiba2{ height:35px; width: 442px; margin-top:9px; font-size: 12px; } #foot-image{ height:78px; width: 343px; /*border: 1px solid yellow;*/ margin-top:-73px ; float: right; margin-right: 20px; } #foot-weibo{ height: 35px; width:35px; float: left; margin-top: 8px; } #foot-weixin{ height: 35px; width:35px; margin-left: 8px; float: left; margin-top: 8px; } #foot-youxiang{ height: 35px; width:35px; margin-left: 8px; float: left; margin-top: 8px; } #foot-shiye{ height: 66px; width: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>
效果图(已缩小):