Web前端开发技术实验与实践（第3版）储久良编著实训5

实训5 DIV+CSS布局规划项目16DIV+CSS页面布局设计项目17设计2015年CERNET华东北地区年会网站

韩飞扬婉

27569人浏览 · 2020-11-22 14:43:42

韩飞扬婉 · 2020-11-22 14:43:42 发布

实训5 DIV+CSS布局规划

项目16 DIV+CSS页面布局设计
页面效果截图
在这里插入图片描述

代码

<!--prj_5_1_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/layout_1.css"/>
	</head>
	<body>
		<div id="container">
			<div id="header">
				这是头部信息区
			</div>
			<div id="nav">
				这是导航信息区
			</div>
			<div id="maincontent">
				<div id="main">
					这是主体信息区
				</div>
				<div id="side">
					这是右侧信息区
				</div>
			</div>
			<div id="" class="clearfloat">
				
			</div>
			<div id="footer">
				这是版权信息区
			</div>
		</div>
	</body>
</html>

*{
	margin: 0 auto;
	font-weight: bolder;
	font-size: 28px;
	line-height: 1.5em;
}
#container{
	width: 900px;
	margin: 0 auto;
}
#header{
	height: 70px;
	background-color: #ccffcc;
	margin-bottom: 8px;
}
#nav{
	height: 40px;
	background-color: #ccffcc;
	margin-bottom: 8px;
}
#maincontent{margin-bottom: 8px;}
#main{
	float: left;
	width: 664px;
	height: 400px;
	background-color: #ffff99;
}
#side{
	float: right;
	width: 228px;
	height: 400px;
	background-color: #ffcc99;
}
.clearfloat{clear: both;}
#footer{
	height: 70px;
	background-color: #ccffcc;
	border-top: 8px solid white;
}

项目17 设计2015年CERNET华东北地区年会网站
页面效果截图
在这里插入图片描述

代码

<!--prj_5_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2015年CERNET华东北地区年会</title>
		<style type="text/css">
			#container {
				margin: 0 auto;
				width: 100%;
			}

			#header {
				text-align: center;
				width: 100%;
				height: 243px;
				background: #7d26a8 url(../img/header23.png) no-repeat top center;
			}

			#nav {
				width: 100%;
				height: 40px;
				color: white;
				line-height: 40px;
				text-align: center;
				background-color: #660066;
			}

			ul {
				margin: 0 auto;
				width: 950px;
				list-style-type: none;
				text-align: center;
			}

			li {
				margin: 0 auto;
				float: left;
				text-align: center;
				font-size: 16px;
				width: 5.5em;
				padding: 2px 8px;
			}

			ul a {
				font-size: 16px;
				vertical-align: middle;
				display: block;
			}

			ul a:link,
			a:visited,
			a:active {
				color: white;
				text-decoration: none;
			}

			ul a:hover {
				background-color: #9933ff;
				text-align: center;
				display: block;
			}

			#mainbody {
				background-color: #ffffff;
				padding: 0px;
				margin: 0 auto;
				width: 1001px;
			}

			#main {
				width: 60%;
				float: left;
				padding: 0 30px;
				margin: 0 auto;
			}

			#rightbar {
				width: 30%;
				float: right;
			}

			#footer {
				background-color: #ffffff;
				clear: both;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
			}

			#bt {
				font-size: 28px;
				padding: 2px 16px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="container" class="">
			<div id="header" class="">

			</div>
			<div id="nav" class="">
				<ul>
					<li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</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>
					<li><a href="#">会议注册</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			<div id="mainbody" class="">
				<div id="main" class="">
					<p id="bt">会议概要</p>
					<p>2015年CERNET华东北地区教育信息化技术研讨大会<br>
						时间：2015年4月22日至4月25日<br>
						报到时间：2015年4月22日<br>
						地点：山东省潍坊市<br>
						会议主题：先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。<br>
						主办：CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心、山东省教育技术与装备协会<br>
						承办：潍坊医学院<br>
					</p>
					<p id="bt">会议介绍</p>
					<p>2015年4月22-25日，由CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心及山东省教育技术与装备协会联合主办，潍坊医学院承办的中国教育和科研计算机网(CERNET)2015年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业界专家作专家报告。</p>
				</div>
				<div id="rightbar" class="">
					<div id="rightbar_up">
						<p>会议动态</p>
					</div>
					<div id="rightbar_down">
						<table border="0" cellspacing="" cellpadding="">
							<tr>
								<td></td>
								<td>
									<a href="Http://www.weather.com.cn/weatherld/101120601.shtml" target="_blank">潍坊天气预报</a>
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<a href="#" target="_blank">在线注册</a>
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<a href="#" target="_blank">修改信息</a>
								</td>
								<td></td>
							</tr>
						</table>
						<p id="bt">宾馆地图</p>
						<iframe id="baidu" width="700px" height="500px" frameborder="0" scrolling="no" src="https://map.baidu.com/search/%E5%9B%9B%E5%B7%9D%E8%BD%BB%E5%8C%96%E5%B7%A5%E5%A4%A7%E5%AD%A6(%E5%AE%9C%E5%AE%BE%E6%A0%A1%E5%8C%BA)/@11652001.15569188,3330895.8152,16.25z?querytype=s&da_src=shareurl&wd=%E5%9B%9B%E5%B7%9D%E8%BD%BB%E5%8C%96%E5%B7%A5%E5%A4%A7%E5%AD%A6(%E5%AE%9C%E5%AE%BE%E6%A0%A1%E5%8C%BA)&c=186&src=0&wd2=%E5%AE%9C%E5%AE%BE%E5%B8%82%E7%BF%A0%E5%B1%8F%E5%8C%BA&pn=0&sug=1&l=13&b=(11637269,3324304;11675157,3343152)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&sug_forward=f79d3a036020ce5fa3d23041&device_ratio=1"></iframe>
					</div>
				</div>
			</div>
			<div id="footer" class="">
				<p>&copy;Copyright CERNET华东北地区网络中心。Designed By<a href="http://nic.wfmc.edu.cn" class="footer">潍坊医学院网络信息中心</a></p>
			</div>
		</div>
	</body>
</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport