假日结束

昨日先生带着复习了前段时间学习的内容~
因为2个小长假过去同窗们可能忘的基本上了~

先生安插了3个页面包车型大巴学业~

一般来说是本人做的:

<!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″>本报讯丹桂飘香日,沙场秋点兵。昂首次展览英姿,阔步再起航。7月2二二十三日午夜,作者校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=””>〖光明网〗吉林理工业余大学学学在前年省社科卓越成果…</a></li>
<li><a
href=””>〖凤凰网〗青海理法大学在前年省社会科学习成绩卓越秀成果…</a></li>
<li><a
href=””>〖齐鲁早报〗江西理艺术大学在二零一七年省社会科学习成绩优良秀成果…</a></li>
<li><a
href=””>〖SUZUKI网〗西藏理艺术大学在二零一七年省社会科学习成绩杰出秀成果…</a></li>
<li><a
href=””>〖乐乎情报〗新疆理工科业余大学学学在二零一七年省社会科学习成绩卓绝秀成果…</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>
mg4355线路检测手机,<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号(25五千)设计维护:网络音讯大旨鲁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;
}

相关文章