时间戳

首页 > 技术文章 > 假期结束 正式上课了~

假期结束 正式上课了~

qianqian528 2017-10-09 22:06 原文

今天老师带着复习了前段时间学习的内容~ 因为一个小长假过去同学们可能忘的差不多了~

老师布置了一个页面的作业~

如下是我做的：

<!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">图说理工 &nbsp;&nbsp;&nbsp;视频理工</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;
}

推荐阅读