作业：用html，css进行学校官网页面的大概设计
于 2022-11-23 18:20:38 首次发布
<!DOCTYPE html>
<html>
<head>
<title>官网</title>
<style type="text/css">
.head{
text-align: center;
}
.second{
width: 100%;
height: 43px;
background-image: url(nav-bg.jpg);
line-height: 43px;
text-align: center;
/*position:relative;*/
}
.second ul
{
min-width: 1170px;
margin-left: -85px;
/*position:absolute;
top: 0px;*/
}
.second li{
display: inline;
width: 100px;
list-style-type: none;
padding-left:35px;
/*float: left;*/
/*position: absolute;*/
position: relative;
}
.second li::after{
display:inline-block;
content: "";
width: 4px;
height: 43px;
background-image: url(nav-g.jpg);
position: absolute;
left: 13px;
margin-top: 0px;
}
.second a,.download a{
text-decoration: none;
color: #ffffff;
}
.second a:hover{
color: red;
/*visibility: visible;*/
}
.second-one
{
top: 30px;
position: absolute;
color:red;
left: 15px;
/*visibility: hidden;*/
display: none;
background-color: #ccc;
line-height: 30px;
}
.second li:nth-child(2):hover >.second-one{
display: block;
}
.second li:nth-child(3):hover >.second-one{
display: block;
}
.second li:nth-child(6):hover >.second-one{
display: block;
}
.second li:nth-child(10):hover >.second-one{
display: block;
}
.second li:nth-child(11):hover >.second-one{
display: block;
}
.second li:nth-child(12):hover >.second-one{
display: block;
}
.second-one a{
color: black;
}
.second-one a:hover{
color: orange;
}
.second-one div{
height: 30px;
width: 100px;
border-bottom: 1px solid grey;
/*display: none;*/
}
.second >li:hover
{
display: block;
}
.SPicture
{
margin: 0 auto;
width:1170px;
height:500px;
}
.sp-bottom
{
border-bottom: 4px solid grey;
}
.bottom
{
width: 1170px;
margin: 0 auto;
}
.left
{
float: left;
width: 800px;
}
.download
{
width: 800px;
height: 25px;
background-image: url(download.png);
/* border-top: 1px solid grey;*/
margin-top: -16px;
border-bottom-right-radius: 10px;
}
.download ul
{
padding-left: 22px;
}
.download li
{
list-style-type: none;
float: left;
color: #ffffff;
padding-left: 10px;
padding-right: 13px;
line-height: 20px;
font-weight: 400;
padding-top: 2px;
position: relative;
/*border-right: 2px solid #ffffff;*/
}
.download li::after{
content: "|";
width: 2px;
height: 20px;
position: absolute;
left: 0px;
}
/*.download li:nth-child(1)
{
border-right: none;
}*/
.information li{
list-style-type:none;
}
.esle {
float: right;
}
.esle a{
color: red;
text-decoration: none;
}
.esle a:hover{
color: orange;
}
.news{
width:49%;
float:left;
padding-top: 10px;
padding-left: 5px;
}
.text{
font-size: 14px;
font-weight: 400;
text-align: left;
}
.text >div{
margin-top: 6px;
border-bottom: 1px dashed #ccc;
position: relative;
}
.text a{
float: left;
color: black;
text-decoration: none;
}
.text img
{
vertical-align: middle;
}
.text div::before{
display: inline-block;
content: "";
width: 6px;
height: 7px;
background-image: url(ico_001.gif);
position: absolute;
left: 0px;
margin-top: 6px;
}
.text span{
float: right;
}
.famous{
padding-top: 580px;
}
.famous >img{
width: 795px;
height: 65px;
}
.link-img{
margin-top: 10px;
width: 800px;
}
.link-img img{
width: 155px;
}
.link-img div
{
width: 155px;
float: left;
margin-right: 5px;
}
.website{
padding-top: 70px;
}
.website ul{
padding-left: 0px;
}
.website li{
list-style-type: none;
float: left;
padding-left: 25px;
padding-right: 20px;
}
.website a{
text-decoration: none;
color: brown;
font-size: 7px;
}
.website a:hover{
color: orange;
}
.right{
width: 360px;
float: right;
padding-left: 10px;
}
.search
{
float: right;
margin-bottom: 11px;
}
.video{
width: 106px;
clear: both;
border-bottom: 3px solid grey;
}
.video-img{
background-color: black;
width: 350px;
height: 300px;
position: relative;
}
.jump{
width: 96px;
height: 20px;
background-color: grey;
color: #ffffff;
position: absolute;
right: 0px;
bottom: 2px;
}
.jump >div{
padding-left: 3px;
width: 15px;
height: 20px;
float: left;
border-left: 1px solid white;
}
.jump >div:hover{
background-color: red;
}
.hotspot{
margin-top: 15px;
}
.bottom{
width: 1170px;
height: 60px;
background-color: white;
clear: both;
}
</style>
</head>
<body>
<div class="head">
<div class="first">
<img src="logo.jpg">
</div>
<div class="second">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学院概况</a>
<div class="second-one">
<div><a href="#">学校简介</a></div>
<div><a href="#">校园风光</a></div>
<div><a href="#">管理服务</a></div>
<div><a href="#">学校标识</a></div>
</div>
</li>
<li><a href="#">教学科研</a>
<div class="second-one">
<div><a href="#">教务管理</a></div>
<div><a href="#">科研管理</a></div>
<div><a href="#">素质教育</a></div>
<div><a href="#">优质课程</a></div>
</div>
</li>
<li><a href="#">综改平键</a></li>
<li><a href="#">国际交流</a></li>
<li><a href="#">招生</a>
<div class="second-one">
<div><a href="#">本专科招生</a></div>
</div>
</li>
<li><a href="#">就业</a></li>
<li><a href="#">学院设置</a></li>
<li><a href="#">学子风采</a></li>
<li><a href="#">信息公开</a>
<div class="second-one">
<div><a href="#">基本信息</a></div>
<div><a href="#">党务信息</a></div>
<div><a href="#">招生考试信息</a></div>
<div><a href="#">教务收费信息</a></div>
<div><a href="#">科研信息</a></div>
<div><a href="#">学生管理信息</a></div>
<div><a href="#">学风建设信息</a></div>
<div><a href="#">学位学科信息</a></div>
<div><a href="#">对外交流信息</a></div>
<div><a href="#">其他</a></div>
</div>
</li>
<li><a href="#">公共服务</a>
<div class="second-one">
<div><a href="#">图书资源</a></div>
<div><a href="#">网络服务</a></div>
<div><a href="#">实验资源</a></div>
<div><a href="#">校历</a></div>
<div><a href="#">校车时刻表</a></div>
<div><a href="#">校园地图</a></div>
<div><a href="#">公务电话</a></div>
<div><a href="#">自主学习</a></div>
<div><a href="#">考研服务</a></div>
<div><a href="#">站内导航</a></div>
<div><a href="#">实习实训平台</a></div>
</div>
</li>
<li><a href="#">队伍建设</a>
<div class="second-one">
<div><a href="#">人事信息</a></div>
<div><a href="#">人才招聘</a></div>
<div><a href="#">教发中心</a></div>
</div>
</li>
</ul>
</div>
<div class="SPicture" >
<img src="sp1.jpg">
</div>
<div class="sp-bottom"></div>
</div>
<div class="bottom">
<div class="left">
<div class="download">
<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>
<li><a href="#">2022本专科招生</a></li>
</ul>
</div>
<div class="information">
<div class="news">
<img src="title-news.jpg">
<div class="esle">
<a href="#">更多>></a>
</div>
<div class="text">
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
</div>
</div>
<div class="news">
<img src="title-news.jpg">
<div class="esle">
<a href="#">更多>></a>
</div>
<div class="text">
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
</div>
</div>
<div class="news">
<img src="title-news.jpg">
<div class="esle">
<a href="#">更多>></a>
</div>
<div class="text">
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
</div>
</div>
<div class="news">
<img src="title-news.jpg">
<div class="esle">
<a href="#">更多>></a>
</div>
<div class="text">
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
<div><a href="#"> 成都文理学校好，好的不得了</a>
<img src="imgbz.gif">
<span>2022/11/20</span>
</div>
</div>
</div>
</div>
<div class="famous">
<img src="famous.jpg">
</div>
<div class="link-img">
<div><a href="#"><img src="1.jpg"></a></div>
<div><a href="#"><img src="2.jpg"></a></div>
<div><a href="#"><img src="3.jpg"></a></div>
<div><a href="#"><img src="4.jpg"></a></div>
<div><a href="#"><img src="5.jpg"></a></div>
<div><a href="#"><img src="6.jpg"></a></div>
<div><a href="#"><img src="7.jpg"></a></div>
<div><a href="#"><img src="8.jpg"></a></div>
<div><a href="#"><img src="9.jpg"></a></div>
<div><a href="#"><img src="10.jpg"></a></div>
</div>
<div class="website">
<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>
<li><a href="#">图书管理系统</a></li>
<li><a href="#">校内网</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="search">
<form action="#" method="get" enctype="method">
搜索:<input type="text" name="text"><input style="color: grey;" type="submit" name="GO" value="GO">
</form>
</div>
<div class="video">
<img src="title-wenli_1.jpg">
</div>
<div class="video-img">
<div class="jump">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<div class="hotspot">
<img src="title-zhuan.jpg">
</div>
<div class="hotspot-img">
<div><a href="#"><img src="zt_1.jpg"></a></div>
<div><a href="#"><img src="zt_2.jpg"></a></div>
<div><a href="#"><img src="zt_3.jpg"></a></div>
<div><a href="#"><img src="zt_4.jpg"></a></div>
<div><a href="#"><img src="zt_5.png"></a></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</body>
</html>效果：
关注
62
0
分享
62
收藏
觉得还不错?
一键收藏
0
评论
分享
HTML5学校网站模板
11-20
11-09
3087
3087
07-23
575
575
01-06
2097
2097
04-02
465
465
暂无认证
到【灌水乐园】发言
一菜乌: 写的啥呀