简单的网页设计,以学校官网为例

本校官网为例,
代码如下:下载同一个html下。
注意的是:图片
1.jpg
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>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页