以本校官网为例，
代码如下：下载同一个html下。
注意的是：图片
1.jpg
19.png
36.png
50.png
206.png
banner2.jpg
logo.jpg，后面有一张图片，右键单击在链接中可以看到，差不多是和底色一样的白色，显得看不清
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css长沙民政职业技术学院</title>
</head>
<style type="text/css">
body {
min-width: 1300px;
}
/*===============下面为导航栏的style样式=============*/
.ul li {
list-style-type: none;
display: inline-block;
color: #F5F5F5;
font-size: 16px;
margin-left: 50px;
line-height: 58px;
}
.ul {
margin: 0;
padding: 0;
background: darkred;
width: 100%;
height: 50px;
margin-left: 350px;
}
.c4 {
background-color: #DEB887;
}
.c4 li {
list-style-type: none;
display: inline-block;
font-size: 16px;
margin-left: 50px;
line-height: 45px;
}
#div1 {
background: #ADFF2F;
width: 100%;
height: 340px;
background-image: url(banner2.jpg);
}
#div2 {
background: white;
width: 100%;
height: 330px;
margin-top: 20px;
}
#div3 {
width: 100%;
height: 120px;
margin-top: 3px;
}
#div4 {
background: ghostwhite;
width: 100%;
height: 210px;
padding: 0;
margin: 0;
}
#div5 {
background: wheat;
height: 50px;
width: 100%;
padding-top: 0;
}
#div6 {
background: white;
width: 333px;
margin: 0px 3px 0px 0px;
height: 100%;
border: #F5F5F5;
float: left;
padding-left: 20;
margin-left: 175px;
padding-left: 15px;
font-size: 10px;
}
#div7 {
background: white;
width: 363px;
height: 100%;
border: #F5F5F5;
float: left;
padding-left: 15px;
font-size: 12px;
}
#div8 {
background: white;
width: 300px;
margin-right: 0px;
margin-left: 11px;
height: 100%;
float: left;
}
.a1 {
text-indent: 30px;
font-size: 17px;
padding-top: 3px;
}
/*========class1定义右上角的一个float小块===========*/
.class1 {
float: left;
width: 283px;
height: 110px;
background: darkkhaki;
margin-left: 930px;
margin-top: -50px;
z-index: 1;
}
/*========class2样式定义的是导航栏，上方float浮动的一个小块========*/
.class2 {
width: 100%;
height: 62px;
background: darkred;
z-index: 0;
}
/*==============class3定义的是长沙民政学院的logo标志===========*/
.class3 {
width: 25px;
height: 25px;
float: left;
margin-left: 35px;
margin-top: -50px;
}
.class4 {
float: left;
margin-left: 915px;
margin-top: -84px;
width: 280px;
height: 100px;
}
.class5 {
float: left;
margin-left: 915px;
margin-top: -120px;
width: 281px;
height: 45px;
}
.class6 {
float: left;
margin-left: 20px;
width: 317px;
height: 170px;
}
/*======右上角float小块第一个表格*/
.table1 {
width: 280px;
font-size: 15px;
margin-top: 10px;
color: white;
border-width: 1px;
border-color: white;
}
/*======右上角float小块第2个表格，即搜索select与option标签*/
.table2 {
width: 280px;
margin-top: 12px;
}
.table3 {
height: 115px;
width: 732px;
margin-left: 175px;
background: burlywood;
}
.table4 {
width: 280px;
height: 100px;
}
.th1 {
align-content: center;
width: 58px;
}
.table5 {
font-size: 16px;
font-weight: bold;
}
#imgzhxy {
float: left;
margin-left: 170px;
}
#zhxyewm {
float: left;
margin-left: 610px;
margin-top: -190px;
}
#zhxy {
float: left;
margin-left: 80px;
}
</style>
<body>
<div class="class2">
<ul class="ul">
<li>学院概况</li>
<li>院部设置</li>
<li>招生就业</li>
<li>党务公开</li>
</ul>
<div class="class3">
<img src="logo.jpg" width="330px" height="50px" style="margin-top: 5px;" />
</div>
<div class="class1">
<table class="table1" rules="cols">
<tr>
<th>网站首页</th>
<th>旧版入口</th>
<th>加入收藏</th>
<th>人才引进</th>
</tr>
</table>
<table class="table2" width="280px">
<tr>
<td width="140px">
<select name="select">
<option>管理与服务机构</option>
<option>党政办公室</option>
<option>纪检监察室</option>
<option>审计处</option>
<option>宣传统战部</option>
<option>组织人事部</option>
</select>
</td>
<td width="140px">
<select name="select">
<option>常用网站</option>
<option>校报网</option>
<option>优质数字资源平台</option>
<option>中华人民共和国教育部</option>
<option>长沙民政学院大学城</option>
<option>湖南教育网</option>
<option>湖南教育政务网</option>
</td>
</tr>
</table>
<table class="table1" rules="cols">
<tr>
<th class="th1">教职工</th>
<th class="th1">学生</th>
<th class="th1">校友</th>
<th>考生及访客</th>
</tr>
</table>
</div>
<i class="calss1"></i>
</div>
<div id="div1"></div>
<div id="div2">
<div id="div6">
<p style="font-size: 16px;margin-top: 2px; color: royalblue; font-weight: bold;">媒体民院</p>
<hr />
<div class="class6">
<img src="36.png" />
</div>
<dl>
<dt class="a1">【新华社】毕业季 职业教育注重“实战”</dt>
<dt class="a1">【新华社】孤儿大学生自主创业为老人举办公益金婚庆典</dt>
<dt class="a1">【新华社】现代学徒制订单班培养残疾人康复人才</dt>
</dl>
</div>
<div id="div7">
<table class="table5">
<tr>
<td width="150px" style="color: royalblue;">政策速递</td>
<td width="150px" style="color: royalblue;">民院要闻</td>
<td width="150px" style="color: royalblue;">校园动态</td>
</tr>
</table>
<hr />
<dl>
<dt class="a1">国务院关于印发国家职业教育改革实施方案的通知</dt>
<dt class="a1">湾大仁科技大学客人来我校考察交流</dt>
<dt class="a1">
校学生在“2019云管理创新杯互联网+管理应用大赛”华中区域赛中分别获得第一二三名
</dt>
<dt class="a1">大熔炉里炼党性 大课堂里立信念——蒋晓明为新党员和发展对象上专题党课</dt>
<dt class="a1">我校与长沙晚报报业集团新媒体中心洽谈合作事宜</dt>
<dt class="a1">学校召开教学诊改复核迎检工作布置会</dt>
<dt class="a1">心理健康教育五到位，立德树人任务落实处</dt>
<dt class="a1">我校2019年湖南省单独招生考试圆满结束</dt>
</div>
<div id="div8">
<table>
<tr>
<td>站内检索:</td>
<td>
<input type="text" name="textfield" />
</td>
<td>
<input type="submit" value="搜索" />
</td>
</tr>
</table>
<p style="color: royalblue; font-weight:bold ;">人才培养</p>
<hr />
<table class="table4">
<tr>
<td align="center" bgcolor="#BDB76B">教务处</td>
<td align="center" bgcolor="#F08080">学工处</td>
</tr>
<tr>
<td align="center" bgcolor="aqua">招生办</td>
<td align="center" bgcolor="bisque">培训部</td>
</tr>
</table>
<dl>
<dt class="a1">以诊断与改进复核为契机 全面提升教学管理工作水平</dt>
<dt class="a1">科研处工作组赴湖南现代物流职业技术学院考场交流</dt>
<dt class="a1">姜大源教授应邀来校做课程开发的专题讲座</dt>
</dl>
</div>
</div>
<div id="div3">
<table class="table3" border="0">
<tr>
<td rowspan="2" bgcolor="red" align="center">信息公开</td>
<td align="center">学院简介</td>
<td align="center">领导信息</td>
<td align="center">办事指南</td>
<td align="center">意见建议</td>
<td align="center">舆情反映</td>
<td align="center">招生考试</td>
<td align="center">财产资产</td>
</tr>
<tr>
<td align="center">采购招标</td>
<td align="center">新媒体</td>
<td align="center">政策咨询</td>
<td align="center">求助帮扶</td>
<td align="center">处理结果</td>
<td align="center">教育教学</td>
<td align="center">学生管理</td>
</tr>
</table>
</div>
<div class="class5">
<img src="50.png" />
</div>
<div class="class4">
<img src="1.jpg" />
</div>
<div id="div4">
<img id="imgzhxy" src="206.png" />
<div id="zhxy">
<table style="margin-top: 12px;">
<tr height="30px">
<td width="140px" style="font-size: 18px;">服务指南</td>
<td width="140px" style="font-size: 18px;">服务大厅</td>
<td width="140px" style="font-size: 18px;">在线服务</td>
<td width="160px" style="font-size: 18px;">常用专栏</td>
</tr>
<tr height="30px">
<td style="font-size: 14px;">网上办事</td>
<td style="font-size: 14px;">政策咨询</td>
<td style="font-size: 14px;">智慧校园</td>
<td style="font-size: 14px;">一站式服务大厅</td>
</tr>
<tr height="30px">
<td style="font-size: 14px;">网上查询</td>
<td style="font-size: 14px;">信息公开</td>
<td style="font-size: 14px;">教务系统</td>
<td style="font-size: 14px;">教学诊断与改进专题网</td>
</tr>
<tr height="30px">
<td style="font-size: 14px;">服务电话</td>
<td style="font-size: 14px;">投诉受理</td>
<td style="font-size: 14px;">学生工作系统</td>
<td style="font-size: 14px;">优质数字资源平台</td>
</tr>
<tr height="30px">
<td style="font-size: 14px;">下载中心</td>
<td style="font-size: 14px;">舆情反映</td>
<td style="font-size: 14px;">周志系统</td>
<td style="font-size: 14px;">社区管理与服务资源库</td>
</tr>
</table>
<img id="zhxyewm" src="19.png" />
</div>
</div>
<div id="div5">
<ul class="c4">
<li id="c2">友情链接:</li>
<li>湖南政务服务网</li>
<li>湖南教育网</li>
<li>为先在线</li>
<li>湖南教育政务网</li>
<li> 湖南省志愿服务网络管理平台 </li>
<li> 长沙民政学院大学城</li>
</ul>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
