休假结束 正式上课了~

今日师长带在复习了前段时间学习之情节~
因为一个稍稍长假过去同学等或者忘记的差不多了~

师布置了一个页面的课业~

正如是自个儿举行的:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>山东理工大学</title>
<link rel=”stylesheet” type=”text/css” href=”css/index.css”/>
</head>
<body>
<!–头部–>
<div class=”head”>
<img src=”img/english-bg.jpg” alt=”” class=”enimg”/>
<div class=”head_search”>
<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>
<input type=”text” placeholder=”请输入关键字” class=”search”/>
<img src=”img/2017-10-09_110630.jpg” alt=””
class=”search_img”/>
</div>
</div>
<!–导航条–>
<div class=”nav”>
<ul>
<li><a
href=””><span>首页</span></a></li>
<li><a
href=””><span>新闻网</span></a></li>
<li><a
href=””><span>学校概况</span></a></li>
<li><a
href=””><span>机构设置</span></a></li>
<li><a
href=””><span>师资队伍</span></a></li>
<li><a
href=””><span>科学研究</span></a></li>
<li><a
href=””><span>人才培养</span></a></li>
<li><a
href=””><span>招生就业</span></a></li>
<li><a
href=””><span>大学文化</span></a></li>
<li><a
href=””><span>国际交流</span></a></li>
<li><a
href=””><span>校友联谊</span></a></li>
</ul>
</div>
<!–轮播图–>
<div class=”lbtp”>
<img src=”img/2017-10-09_112731.jpg” class=”lbtp_img”/>
</div>
<!–内容信息–>
<div class=”ceninfo”>
<div class=”ceninfo_left”>
<span class=”zt1″>学校新闻</span><span
class=”zt2″>[更多]</span>
<div class=”ceninfo_left_top”>
<div class=”ceninfo_left_top_top”>
<span>2017层学生军训总结大会召开</span>
<p class=”zt_diandian”>–</p>
<p
class=”zt3″>本报讯丹桂飘香日,沙场秋点兵。昂首展英姿,阔步再起航。9月21日上午,我校2017层学生军训总结大会分别在西校区中坚体育场以及东校区体育场…[详细]</p>
</div>
<div class=”ceninfo_left_top_bottom”>
<ul>
<li><a href=””>迟沂军调任德州学院党委委员、副院长
<span>10-09</span></a></li>
<li><a href=””>学校调度工程教育专业认证工作
<span>09-30</span></a></li>
<li><a href=””>青岛研究院项目建设座谈会召开
<span>09-30</span></a></li>
<li><a href=””>我校在全省高校思想政治教育优秀成果评奖中…
<span>09-29</span></a></li>
<li><a href=””>“智慧团建”系统试点工作启动
<span>09-29</span></a></li>
<li><a href=””>我校举办全机械化玉米农机演示推广活动
<span>09-29</span></a></li>
</ul>
</div>
</div>
<div class=”ceninfo_left_bottom”>
<span class=”zt1″>通知公告</span><span
class=”zt2″>[更多]</span>
<ul>
<li><a
href=””>2018年招用攻读硕士学位研究生招生简章</a></li>
<li><a href=””>2018
年全国硕士研究生招生考试公告</a></li>
<li><a
href=””>诚聘海内外高层次人才启事</a></li>
</ul>
</div>
</div>
<div class=”ceninfo_middle”>
<span class=”zt1″>图说理工
   视频理工</span>
<div class=”ceninfo_middle_top”>
<img src=”img/f0b8acc9-9c49-48f5-a659-e7ba14014a55.jpg”
class=”img5″/>
</div>
<div class=”ceninfo_middle_bottom”>
<span class=”zt1″>媒体报道</span><span
class=”zt2″>[更多]</span>
<ul class=”bottom1″>
<li><a href=””>〖大众网〗山东理工大学食堂推“校徽月饼”
获…</a></li>
<li><a
href=””>〖山东省教育厅〗山理工出台文件规范教学聘任工作</a></li>
<li><a
href=””>〖央广网〗山东理工大学当2017年看社科优秀成果…</a></li>
<li><a
href=””>〖凤凰网〗山东理工大学当2017年看社科优秀成果…</a></li>
<li><a
href=””>〖齐鲁晚报〗山东理工大学于2017年看社科优秀成果…</a></li>
<li><a
href=””>〖大众网〗山东理工大学于2017年看社科优秀成果…</a></li>
<li><a
href=””>〖网易新闻〗山东理工大学于2017年看社科优秀成果…</a></li>
</ul>
</div>
</div>
<div class=”ceninfo_right”></div>
</div>
<div class=”ceninfo_foot”>
<div class=”ceninfo_center”>
<ul>
<li><a
href=””><span>图书馆</span></a></li>
<li><a
href=””><span>信息公开</span></a></li>
<li><a
href=””><span>招标采购</span></a></li>
<li><a
href=””><span>办公系统</span></a></li>
<li><a
href=””><span>邮件系统</span></a></li>
<li><a
href=””><span>校园VPN</span></a></li>
<li><a
href=””><span>在线学习</span></a></li>
<li><a
href=””><span>站点导航</span></a></li>
</ul>
</div>
</div>
<!–底部–>
<div class=”foot”>
<div class=”foot1″>
<div class=”foot_center”>版权所有©山东理工大学
地址:山东省淄博市张店区新村西路266哀号(255000)设计维护:网络信息中心
鲁ICP备05002357声泪俱下</div>
<img src=”img/weibo-bg.png” class=”foot_img1″/>
<img src=”img/weixi-bg.png” class=”foot_img2″ />
<img src=”img/youx-bg.png” class=”foot_img3″ />
<img src=”img/blue.png” class=”foot_img4″ />
</div>
</div>
</body>
</html>

CSS样式:

@charset “utf-8”;
*{
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: “微软非常黑”;
}
.head{
width: 1000px;
height: 125px;
margin: 0 auto;
background: url(../img/head-bg.png);
border-bottom: 1px solid gray;
}
.enimg{
position: absolute;top:78px; left: 532px;
}
.head_search{
width: 260px;
height: 65px;
position: absolute;top: 35px;right: 190px;
}
.head_search ul li{
float: left;
padding-right: 10px;
padding-top: 5px;
}
.head_search a{
text-decoration: none;
color: darkgray;
}
.search{
width: 156px;
height: 30px;
position: relative;left: 65px; top: 0px;
}
.search_img{
position: relative;left: 60px;top: 11px;
}
.nav{
width: 1000px;
height: 50px;
margin: 0 auto;
}
.nav a{
text-decoration: none;
color: black;
}
.head_search ul{
list-style: none;
padding-left: 12px;
}
.nav ul{
list-style: none;
padding-left: 12px;
}
.nav ul li{
float: left;
line-height: 50px;
padding-right: 30px;
}
.nav span{
font-size: 16px;
}
.lbtp{
width: 100%px;
height: 284px;
margin-bottom: 20px;
}
.ceninfo{
width: 1000px;
height: 560px;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
}
.ceninfo_left{
width: 320px;
height: 560px;
margin-right: 40px;
float: left;
}
.zt1{
font-size: 16px;
float: left;
color: #A9A9A9;
}
.zt2{
font-size: 12px;
color: #FF7F50;
float: right;
}
.ceninfo_left_top_top{
width: 320px;
height: 140px;
border-top: 1px solid red;
border-bottom: 1px solid #808080;
position: absolute;top: 25px;
}
.ceninfo_left_top_top span{
width: 100%;
height: 50px;
font-size: 14px;
color: blue;
line-height: 50px;
text-align: center;
margin-left: 60px;
}
.zt_diandian{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
.zt3{
text-indent:2em;
color: #A9A9A9;
width: 100%;
height: 68px;

}
.ceninfo_left_top_bottom{
width: 320px;
height: 193px;
position: absolute;top: 180px;
}
.ceninfo_left_top_bottom span{
position: absolute;right: 4px;
}
.ceninfo_left_top_bottom ul li{
padding: 10px 0px 5px 0px;
border-bottom: 1px solid #808080;
}
.ceninfo_left_top_bottom a{
text-decoration: none;
color: #808080;
}
.ceninfo_left_bottom{
width: 320px;
height: 136px;
position: absolute;bottom: 15px;
}
.ceninfo_left_bottom ul{
width: 320px;
height: 110px;
position: absolute;bottom: 0px;
}
.ceninfo_left_bottom ul li{
padding-top: 20px;
border-bottom: 1px solid #808080;
}
.ceninfo_left_bottom a{
text-decoration: none;
color: #808080;
}
.ceninfo_middle{
width: 320px;
height: 560px;
margin-right: 40px;
float: left;
position: relative;
}
.ceninfo_middle_top{
width: 320px;
height: 230px;
border-top: 1px solid red;
position: absolute;top: 25px;
}
.img5{
width: 320px;
height: 190px;
padding-top: 20px;
}
.ceninfo_middle_bottom{
width: 320px;
height: 280px;
position: absolute;bottom: 20px;
}
.bottom1{
position: relative;top: 20px;
margin-top: 30px;
}
.bottom1 li{
padding-top: 16px;
border-bottom: 1px solid #808080;
}
.bottom1 a{
text-decoration: none;
color: #808080;
}
.ceninfo_right{
width: 280px;
height: 560px;
background: coral;
float: right;
}
.ceninfo_foot{
width: 100%;
height: 40px;
border-top: 1px solid #A9A9A9;
background: white;
}
.ceninfo_center{
width: 1000px;
height: 40px;
margin: 0 auto;
}
.ceninfo_center ul li{
float: left;
padding-right: 60px;
line-height: 40px;
margin-left: 10px;
}
.ceninfo_center a{
text-decoration: none;
color: black;
}
.ceninfo_center span{
font-size: 14px;
color: #808080;

}
.foot{
width: 100%;
height: 90px;
background:#444444;
}
.foot1{
width: 1000px;
height: 90px;
background: url(../img/foot-bg.jpg);
margin: 0 auto;
position: relative;
}
.foot_center{
width: 442px;
height: 40px;
color: #A9A9A9;
position: absolute;top: 24px;left: 290px;
}
.foot_img1{
position: absolute;top: 24px;right: 200px;
}
.foot_img2{
position: absolute;top: 24px;right: 160px;
}
.foot_img3{
position: absolute;top: 24px;right: 120px;
}
.foot_img4{
position: absolute;top: 8px;right: 20px;
}

相关文章